Finally users can update their avatar

app/Controllers/Http/ClientApiController.js

@@ -159,6 +159,24 @@ class ClientApiController {
     //
   }
 
+  async updateUser({request, auth, response}) {
+    const user = auth.user;
+    const {name, email, profile_cover, avatar} = request.body;
+    // TODO: Validation
+    user.name = name || user.name;
+    user.email = email || user.email;
+    if (profile_cover) {
+      const file = await FileUtils.saveBase64File(profile_cover);
+      user.profile_cover = `/u/images/${file.fileName}`;
+    }
+    if (avatar) {
+      const file = await FileUtils.saveBase64File(avatar);
+      user.avatar = `/u/images/${file.fileName}`;
+    }
+    await user.save();
+    return {code: 0, data: {user}};
+  };
+
   async updateChild({request, auth, response}) {
     const childId = request.params.id;
     const userId = auth.user.id;

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

@@ -290,7 +290,7 @@ export default {
         this.showCoverModal = true;
       }
     },
-    ...mapActions(["getUser", "getConnections", "notify"])
+    ...mapActions(["getUser", "notify"])
   },
   computed: {
     age() {
@@ -307,7 +307,7 @@ export default {
       }
       return `${text}`;
     },
-    ...mapGetters(["user", "connections"])
+    ...mapGetters(["user"])
   }
 };
 </script>

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

@@ -11,6 +11,13 @@
         @onCreated="onChildCreated($event)"
         @onClose="showAddChildModal=false"
       />
+      <!-- Change Avatar Modal -->
+      <ChangeAvatarModal
+        @onAvatarSelected="updateAvatar($event)"
+        @onClose="showChangeAvatarModal=false"
+        :isActive="showChangeAvatarModal"
+        :defaultImage="user.avatar"
+      />
       <!-- Profile Cover Modal -->
       <Modal
         title="Change Cover"
@@ -41,7 +48,7 @@
             <div class="card-image p-md is-relative">
               <figure
                 class="image is-1by1 editable-image is-light"
-                @click="onChangeAvatarClicked()"
+                @click="showChangeAvatarModal=true"
               >
                 <img :src="user.avatar" class="is-rounded is-avatar" />
               </figure>
@@ -165,6 +172,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: "Home",
   components: {
@@ -176,7 +184,8 @@ export default {
     AddConnectionModal,
     ConfigureNewCallModal,
     ChildCard,
-    AddChildModal
+    AddChildModal,
+    ChangeAvatarModal
   },
   beforeCreate() {},
   async created() {
@@ -194,10 +203,28 @@ export default {
       showAddChildModal: false,
       showAddConnectionModal: false,
       childCoverModalImage: null,
-      addMenuOpen: false
+      addMenuOpen: false,
+      showChangeAvatarModal: false
     };
   },
   methods: {
+    async updateAvatar(event) {
+      if (!event.isDefaultImage) {
+        try {
+          const response = await Services.ApiService.updateUser({
+            avatar: event.image
+          });
+          if (response.code === 0) {
+            await this.getUser();
+            this.notify({ message: "Updated Successfully!", level: "success" });
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      this.showChangeAvatarModal = false;
+      return true;
+    },
     onAddClicked(action: "book" | "slideshow" | "puzzle" | "child") {
       switch (action) {
         case "child":
@@ -210,11 +237,6 @@ export default {
       }
       this.addMenuOpen = false;
     },
-    onChangeAvatarClicked() {
-      this.notify({
-        message: `Upload avatar clicked. Still not working`
-      });
-    },
     onDeleteClicked() {
       this.notify({ message: "Delete button clicked. Still not working" });
     },

resources/scripts/applications/services/api.service.ts

@@ -19,6 +19,22 @@ export default class ApiService {
     }
   }
 
+  static async updateUser(payload: { name?: string; avatar?: string; profile_cover?: string; email?: string }) {
+    const options = {
+      method: 'PUT',
+      body: JSON.stringify(payload),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
+    try {
+      return (await fetch('/api/v1/client/user/', options)).json();
+    } catch (e) {
+      console.error(`updateUser ERROR: ${e.message}`);
+      return e;
+    }
+  }
+
   static async getChild(id: number): Promise<IApiResponse> {
     try {
       return (await fetch(`/api/v1/client/child/${id}`)).json();

start/routes.js

@@ -44,6 +44,7 @@ Route
     .group(() => {
       Route.post('connections/create', 'ClientApiController.createConnection');
       Route.get('user', 'ClientApiController.getUser');
+      Route.put('user', 'ClientApiController.updateUser');
       Route.post('child', 'ClientApiController.createChild');
       Route.get('child/:id', 'ClientApiController.getChild');
       Route.post('child/:id', 'ClientApiController.updateChild');