Save user profile

src/auth.js

@@ -27,6 +27,7 @@ export default {
       const data = response.data;
 
       this._user = {
+        userId: data.data.userId,
         username: data.data.username,
         email: data.data.email,
         role: data.data.role,

src/views/profile-page.vue

@@ -3,6 +3,7 @@
     <h2 class="content-block">Lihat Profil</h2>
 
     <div class="content-block dx-card responsive-paddings">
+      <form @submit.prevent="handleSubmit">
       <DxForm :form-data="formData">
         <template #avatar-template="{}">
           <div class="form-avatar">
@@ -16,11 +17,11 @@
               <DxSimpleItem data-field="nama" />
             </DxGroupItem>
             <DxGroupItem :col-count="2">
-              <DxSimpleItem data-field="bidang_id" editor-type="dxSelectBox" :editor-options="bidangOptions" css-class="bt-5" />
+              <DxSimpleItem data-field="bidangId" editor-type="dxSelectBox" :editor-options="bidangOptions" css-class="bt-5" />
-              <DxSimpleItem data-field="jabatan_id" editor-type="dxSelectBox" :editor-options="jabatanOptions" css-class="bt-5" />
+              <DxSimpleItem data-field="jabatanId" editor-type="dxSelectBox" :editor-options="jabatanOptions" css-class="bt-5" />
             </DxGroupItem>
             <DxGroupItem :col-count="1">
-              <DxSimpleItem data-field="role_id" editor-type="dxSelectBox" :editor-options="roleOptions" />
+              <DxSimpleItem data-field="roleId" editor-type="dxSelectBox" :editor-options="roleOptions" />
             </DxGroupItem>
             <DxGroupItem :col-count="2">
               <DxSimpleItem data-field="email" />
@@ -28,8 +29,12 @@
             </DxGroupItem>
           </DxGroupItem>
         </DxGroupItem>
-
+        <DxButtonItem
+          :button-options="{ text: 'Simpan', type: 'success', useSubmitBehavior: true }"
+          horizontal-alignment="right"
+        />
       </DxForm>
+      </form>
     </div>
   </div>
 </template>
@@ -39,8 +44,12 @@ import {
   DxForm,
   DxSimpleItem,
   DxGroupItem,
+  DxButtonItem,
   // DxLabel,
 } from 'devextreme-vue/form';
+import notify from 'devextreme/ui/notify';
+
+const baseUrl = process.env.VUE_APP_ROOT_API;
 
 export default {
   props: {
@@ -48,6 +57,16 @@ export default {
   },
   data() {
     return {
+      formData: {
+        nama: '',
+        username: '',
+        email: '',
+        roleId: null,
+        bidangId: null,
+        jabatanId: null,
+        instansiId: null,
+        phone: '',
+      },
       bidangOptions: {
         items: ['Bidang 1', 'Bidang 2', 'Bidang 3'],
         searchEnabled: true,
@@ -65,20 +84,35 @@ export default {
       }
     }
   },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+
+      fetch(`${baseUrl}/users/${this.formData.userId}`, {
+        method: 'PUT',
+        body: JSON.stringify(this.formData),
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+        },
+      })
+      .then((res) => res.json())
+      .then(() => {
+        notify({
+          message: 'Profil telah disimpan.',
+          position: {
+            my: 'center top',
+            at: 'center top',
+          },
+        }, 'success', 3000);
+      })
+    },
+  },
   setup() {
     const picture = "images/employees/02.png";
 
     const imageSrc = `https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/${picture}`;
-    const formData = {
+
-      nama: 'Sample Name',
-      username: 'sample',
-      email: 'sample@yopmail.com',
-      role_id: 1,
-      bidang_id: 1,
-      jabatan_id: 1,
-      instansi_id: 1,
-      phone: '08123456789',
-    };
     const colCountByScreen = {
       xs: 1,
       sm: 2,
@@ -88,7 +122,6 @@ export default {
 
     return {
       imageSrc,
-      formData,
       colCountByScreen
     };
   },
@@ -96,6 +129,25 @@ export default {
     DxForm,
     DxSimpleItem,
     DxGroupItem,
+    DxButtonItem,
+  },
+
+  mounted() {
+    const user = JSON.parse(window.localStorage.getItem('user'));
+    this.formData.userId = user.userId;
+
+    fetch(`${baseUrl}/users/${user.userId}`)
+      .then((res) => res.json())
+      .then((json) => {
+        this.formData.nama = json.nama;
+        this.formData.username = json.username;
+        this.formData.email = json.email;
+        this.formData.phone = json.phone;
+        this.formData.roleId = json.roleId;
+        this.formData.bidangId = json.bidangId;
+        this.formData.instansiId = json.instansiId;
+        this.formData.jabatanId = json.jabatanId;
+      })
   }
 };
 </script>