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

121 lines
3.5 KiB
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" initialImage="/images/default-child-avatar.png" />
</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 = {};
this.childValidation.enableInput = false;
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;
});
} 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>