now we can update child avatars

app/Controllers/Http/ClientApiController.js

@@ -178,7 +178,7 @@ class ClientApiController {
       child.profile_cover = `/u/images/${file.fileName}`;
     }
     if (avatar) {
-      const file = await FileUtils.saveBase64File(body.avatar);
+      const file = await FileUtils.saveBase64File(avatar);
       child.avatar = `/u/images/${file.fileName}`;
     }
     await child.save();

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

@@ -46,7 +46,7 @@
         </div>
         <p class="help is-danger" v-if="!!errors.dob">{{ `${errors.dob.message}` }}</p>
       </div>
-      <ImagePicker ref="imagePicker" />
+      <ImagePicker ref="imagePicker" initialImage="/images/default-child-avatar.png" />
     </form>
   </Modal>
 </template>
@@ -63,7 +63,6 @@ export default {
     ImagePicker
   },
   props: ["isActive"],
-
   data() {
     return {
       errors: {},
@@ -84,14 +83,13 @@ export default {
     },
     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,
@@ -103,7 +101,6 @@ export default {
           response.message.forEach(m => {
             this.errors[m.field] = m;
           });
-          console.log(!!this.errors.name);
         } else {
           this.$emit("onFail", response.message);
           this.childValidation.name = null;

resources/scripts/applications/home/components/ChangeAvatarModal.vue

@@ -0,0 +1,42 @@
+<template>
+  <Modal
+    title="Change Avatar"
+    :isActive="isActive"
+    acceptText="Update"
+    rejectText="Cancel"
+    @accept="emitAvatarChange()"
+    @close="onColse()"
+  >
+    <ImagePicker ref="imagePicker" :initialImage="defaultImage" />
+  </Modal>
+</template>
+
+
+<script lang="ts">
+import Modal from "../../shared/components/Modal/Modal.vue";
+import ImagePicker from "./ImagePicker.vue";
+export default {
+  name: "ChangeAvatarModal",
+  components: {
+    Modal,
+    ImagePicker
+  },
+  props: ["isActive", "defaultImage"],
+
+  data() {
+    return {};
+  },
+  methods: {
+    onColse() {
+      this.$emit("onClose");
+    },
+    emitAvatarChange() {
+      const event = {
+        isDefaultImage: this.$refs.imagePicker.isDefaultImage,
+        image: this.$refs.imagePicker.generateDataUrl("image/png", 0.8)
+      };
+      this.$emit("onAvatarSelected", event);
+    }
+  }
+};
+</script>

resources/scripts/applications/home/components/ImagePicker.vue

@@ -4,7 +4,7 @@
       <figure class="image is-avatar is-inline-block is-light">
         <croppa
           v-model="croppa"
-          initial-image="/images/default-child-avatar.png"
+          :initial-image="initialImage"
           :prevent-white-space="true"
           :show-remove-button="false"
           :disable-drag-to-move="isDefaultImage"
@@ -63,6 +63,7 @@ export default {
   components: {
     Croppa: Croppa.component
   },
+  props: ["initialImage"],
   watch: {
     zoomState: function(newVal, oldVal) {
       if (newVal < oldVal) {

resources/scripts/applications/home/views/child_profile.vue

@@ -19,6 +19,13 @@
         />
         <file-select v-model="childCoverModalImage" accept="image/*" lable="Select Cover:"></file-select>
       </Modal>
+      <!-- Change Avatar Modal -->
+      <ChangeAvatarModal
+        @onAvatarSelected="updateAvatar($event)"
+        @onClose="showChangeAvatarModal=false"
+        :isActive="showChangeAvatarModal"
+        :defaultImage="child.avatar"
+      />
       <!-- Add Connection Modal -->
       <AddConnectionModal
         @createNewConnection="addConnection($event)"
@@ -32,7 +39,10 @@
         <div class="column is-2">
           <div class="card">
             <div class="card-image p-md is-relative">
-              <figure :class="`image is-1by1 is-light ${isParent ? 'editable-image' : ''}`">
+              <figure
+                :class="`image is-1by1 is-light ${isParent ? 'editable-image' : ''}`"
+                @click="onAvatarClicked()"
+              >
                 <img :src="child.avatar" class="is-rounded is-avatar" />
               </figure>
             </div>
@@ -133,6 +143,7 @@ import FileSelect from "../../shared/components/FileSelect/FileSelect.vue";
 import AvatarBadge from "../components/AvatarBadge.vue";
 import Moment from "moment";
 import Modal from "../../shared/components/Modal/Modal.vue";
+import ChangeAvatarModal from "../components/ChangeAvatarModal.vue";
 export default {
   name: "ChildProfile",
   components: {
@@ -142,9 +153,14 @@ export default {
     Modal,
     FileSelect,
     AvatarBadge,
-    AddConnectionModal
+    AddConnectionModal,
+    ChangeAvatarModal
   },
   beforeCreate() {},
+  async beforeDestroy() {
+    await this.getUser();
+    return true;
+  },
   async created() {
     const response = await Services.ApiService.getChild(this.$route.params.id);
     this.loading = false;
@@ -172,6 +188,7 @@ export default {
       inEditMode: false,
       showCoverModal: false,
       showAddConnectionModal: false,
+      showChangeAvatarModal: false,
       childCoverModalImage: null
     };
   },
@@ -220,6 +237,31 @@ export default {
       this.showAddConnectionModal = false;
       return true;
     },
+    onAvatarClicked() {
+      if (this.isParent) {
+        this.showChangeAvatarModal = true;
+      }
+    },
+    async updateAvatar(event) {
+      if (!event.isDefaultImage) {
+        try {
+          const response = await Services.ApiService.updateChild(
+            this.child.id,
+            {
+              avatar: event.image
+            }
+          );
+          if (response.code === 0) {
+            this.notify({ message: "Updated Successfully!", level: "success" });
+            this.child.avatar = response.data.child.avatar;
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      this.showChangeAvatarModal = false;
+      return true;
+    },
     async changeCover() {
       if (this.childCoverModalImage) {
         this.loading = true;