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>
      <ImagePicker ref="imagePicker" />
    </form>
  </Modal>
</template>


<script lang="ts">
import Modal from "../../shared/components/Modal/Modal.vue";
import Services from "../../services";
import ImagePicker from "./ImagePicker.vue";
export default {
  name: "AddChildModal",
  components: {
    Modal,
    ImagePicker
  },
  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 = {};

      const childData = {
        name: this.childValidation.name,
        dob: this.childValidation.dob,
        avatar: this.$refs.imagePicker.generateDataUrl("image/png", 0.8)
      };
      if (this.$refs.imagePicker.isDefaultImage) delete childData.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>