seepur/resources/scripts/applications/home/components/AddChildModal.vue

<template>
  <Modal
    title="Add your child"
    :isActive="isActive"
    acceptText="Add"
    rejectText="Cancel"
    @accept="addChild()"
    @close="onColse()"
  >
    <h2 class="subtitle">I am the proud parent of:</h2>
    <form class="form" id="form-add-child">
      <div class="field">
        <label class="label">Name</label>
        <div class="control has-icons-left">
          <input
            :class="`input ${!!errors.name ? 'is-danger' : ''}`"
            required="true"
            name="name"
            type="text"
            placeholder="John Snow"
            :disabled="!childValidation.enableInput"
            v-model="childValidation.name"
          />
          <span class="icon is-small is-left">
            <i class="fa fa-id-card"></i>
          </span>
        </div>
        <p class="help is-danger" v-if="!!errors.name">{{ `${errors.name.message}` }}</p>
        <!-- TODO: Error messages -->
      </div>

      <div class="field">
        <label class="label">Birthday</label>
        <div class="control has-icons-left">
          <input
            :class="`input ${!!errors.dob ? 'is-danger' : ''}`"
            required="true"
            name="dob"
            type="date"
            :disabled="!childValidation.enableInput"
            v-model="childValidation.dob"
          />
          <span class="icon is-small is-left">
            <i class="fa fa-gift"></i>
          </span>
        </div>
        <p class="help is-danger" v-if="!!errors.dob">{{ `${errors.dob.message}` }}</p>
      </div>
      <div style="width:40%">
        <figure class="image is-avatar is-1by1 is-light">
          <img :src="childValidation.avatar || '/images/default-child-avatar.png'" alt />
        </figure>
      </div>
      <file-select
        v-if="!childValidation.avatar"
        v-model="childValidation.avatar"
        accept="image/*"
        lable="Upload a photo (1:1)"
      ></file-select>
      <button
        class="button is-rounded is-danger"
        v-else
        @click="childValidation.avatar = null"
      >Cleare image</button>
    </form>
  </Modal>
</template>


<script lang="ts">
import Modal from "../../shared/components/Modal/Modal.vue";
import Services from "../../services";
import FileSelect from "../../shared/components/FileSelect/FileSelect.vue";
export default {
  name: "AddChildModal",
  components: {
    Modal,
    FileSelect
  },
  props: ["isActive"],
  data() {
    return {
      errors: {},
      childValidation: {
        enableInput: true,
        name: null,
        dob: null,
        avatar: null
      }
    };
  },
  methods: {
    onColse() {
      this.$emit("onClose");
      this.childValidation.name = null;
      this.childValidation.dob = null;
      this.childValidation.avatar = null;
    },
    async addChild() {
      this.errors = {};
      this.childValidation.enableInput = false;
      const childData = {
        name: this.childValidation.name,
        dob: this.childValidation.dob,
        avatar: this.childValidation.avatar
      };

      try {
        const response = await Services.ApiService.createChild(
          childData.name,
          childData.dob,
          childData.avatar
        );
        if (response.code === 201) this.$emit("onCreated", response.child);
        else if (response.code === 400) {
          response.message.forEach(m => {
            this.errors[m.field] = m;
          });
          console.log(!!this.errors.name);
        } else {
          this.$emit("onFail", response.message);
          this.childValidation.name = null;
          this.childValidation.dob = null;
          this.childValidation.avatar = null;
        }
      } catch (e) {
        this.$emit("onFail", e.message);
        this.childValidation.name = null;
        this.childValidation.dob = null;
        this.childValidation.avatar = null;
      }
      this.childValidation.enableInput = true;
      return true;
    }
  }
};
</script>