Update profile page

src/views/profile-page.vue

@@ -1,51 +1,83 @@
 <template>
   <div>
-    <h2 class="content-block">Profile</h2>
+    <h2 class="content-block">Lihat Profil</h2>
 
     <div class="content-block dx-card responsive-paddings">
-      <div class="form-avatar">
-        <img :src="imageSrc" />
-      </div>
-      <span>{{ formData.Notes }}</span>
-    </div>
+      <DxForm :form-data="formData">
+        <template #avatar-template="{}">
+          <div class="form-avatar">
+            <img :src="imageSrc" />
+          </div>
+        </template>
+        <DxGroupItem :col-count="8" css-class="first-group">
+          <DxSimpleItem :col-span="1" template="avatar-template" />
+          <DxGroupItem :col-span="7">
+            <DxGroupItem :col-count="1">
+              <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="jabatan_id" 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" />
+            </DxGroupItem>
+            <DxGroupItem :col-count="2">
+              <DxSimpleItem data-field="email" />
+              <DxSimpleItem data-field="phone" />
+            </DxGroupItem>
+          </DxGroupItem>
+        </DxGroupItem>
 
-    <div class="content-block dx-card responsive-paddings">
-      <dx-form
-        id="form"
-        label-location="top"
-        :form-data="formData"
-        :colCountByScreen="colCountByScreen"
-      />
+      </DxForm>
     </div>
   </div>
 </template>
 
 <script>
-import DxForm from "devextreme-vue/form";
+import {
+  DxForm,
+  DxSimpleItem,
+  DxGroupItem,
+  // DxLabel,
+} from 'devextreme-vue/form';
 
 export default {
   props: {
     picture: String
   },
+  data() {
+    return {
+      bidangOptions: {
+        items: ['Bidang 1', 'Bidang 2', 'Bidang 3'],
+        searchEnabled: true,
+        value: null,
+      },
+      jabatanOptions: {
+        items: ['Jabatan 1', 'Jabatan 2', 'Jabatan 3'],
+        searchEnabled: true,
+        value: null,
+      },
+      roleOptions: {
+        items: ['Role 1', 'Role 2', 'Role 3'],
+        searchEnabled: true,
+        value: null,
+      }
+    }
+  },
   setup() {
-    const picture = "images/employees/06.png";
-    
+    const picture = "images/employees/02.png";
+
     const imageSrc = `https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/${picture}`;
     const formData = {
-      ID: 7,
-      FirstName: "Sandra",
-      LastName: "Johnson",
-      Prefix: "Mrs.",
-      Position: "Controller",
-      Picture: picture,
-      BirthDate: new Date("1974/11/5"),
-      HireDate: new Date("2005/05/11"),
-      Notes:
-        "Sandra is a CPA and has been our controller since 2008. " +
-        "She loves to interact with staff so if you`ve not met her, be certain to say hi." +
-        "\r\n\r\n" +
-        "Sandra has 2 daughters both of whom are accomplished gymnasts.",
-      Address: "4600 N Virginia Rd."
+      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,
@@ -61,7 +93,9 @@ export default {
     };
   },
   components: {
-    DxForm
+    DxForm,
+    DxSimpleItem,
+    DxGroupItem,
   }
 };
 </script>
@@ -70,6 +104,7 @@ export default {
 .form-avatar {
   float: left;
   height: 120px;
+  border-radius: 50%;
   width: 120px;
   margin-right: 20px;
   border: 1px solid rgba(0, 0, 0, 0.1);