121 lines
3.5 KiB
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>
|