Update core smartproc

.env

@@ -1,2 +1,3 @@
+VUE_APP_ROOT_URL=http://localhost:8080
 VUE_APP_ROOT_API=http://localhost:9090/api
 VUE_APP_PUBLIC_KEY=MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAx3MRA7zxvaWKrtmPl2hRJLFiyryvj0ZUlmWw9OZIgqwJUDBTsg5yFX4hCQrANV1yy5ibTqAn2APdNCdhGgp8R2YLWrUR2vVGbmnKXXzEDsFpT6cgo

public/css/style.css

@@ -197,10 +197,10 @@ h2 {
 h3 {
   color: #0996C2;
 }
-.dx-link .dx-link-edit .dx-icon-edit .dx-link-icon {
+.dx-link.dx-link-edit.dx-icon-edit.dx-link-icon {
   color: #e8d102;
 }
-.dx-link .dx-link-delete .dx-icon-trash .dx-link-icon {
+.dx-link.dx-link-delete.dx-icon-trash.dx-link-icon {
   color: #FF2C2C;
 }
 .dx-item-content .dx-toolbar-item-content {

src/app-navigation.js

@@ -73,7 +73,7 @@ export default [
     icon: "images/icon/ico-2-config.png",
     items: [
       {
-        text: 'Manajemen Roles',
+        text: 'Manajemen Role',
         path: '/master-config/roles-config',
       }, 
       {

src/auth.js

@@ -13,12 +13,52 @@ export default {
     try {
       // Send request
       console.log(email, password);
-      this._user = { ...defaultUser, email };
+      // this._user = { ...defaultUser, email };
 
-      return {
+      // return {
-        isOk: true,
+      //   isOk: true,
-        data: this._user
+      //   data: this._user
+      // };
+
+      const requestOptions = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: email, password: password }),
       };
+
+      const response = await fetch('http://localhost:9090/api/authentication/login', requestOptions);
+      const data = await response.json();
+
+      console.log(data);
+      //console.log(data.data.length);
+
+      // this._user = {
+      //   id: response.data.id,
+      //   email: response.data.role,
+      //   name: response.data.keterangan,
+      //   role_id: response.data.id,
+      // };
+
+      if(data.status == 'sukses') {
+        const defaultUser = {
+          email: data.data.email,
+          avatarUrl: 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png',
+          name: data.data.name,
+        };
+        this._user = { ...defaultUser };
+
+        return {
+          isOk: true,
+          data: this._user
+        };
+      } else {
+        //--- jika gagal munculkan pesan gagal
+        return {
+          isOk: false,
+          message: "Authentication failed"
+        };
+      }
+
     }
     catch {
       return {

src/layouts/single-card copy 2.vue

@@ -0,0 +1,125 @@
+<template>
+  <dx-scroll-view height="100%" width="40%" class="with-footer single-card">
+     <div class="logo-img">
+        <img src="images/logo_pln.png"/>
+     </div>
+     <div class="dx-card content">
+      <div class="header">
+        <div class="title">{{title}}</div>
+        <div class="description">{{description}}</div>
+      </div>
+      <slot />
+    </div>
+  </dx-scroll-view>
+  <dx-scroll-view height="100%" width="60%" class="single-card full-img">
+      <div class="center-card">
+        <h1 class="title-app">SMARTPROC</h1>
+        <p class="subtitle">Manajemen kontrak Pengadaan yang termonitoring dan Efisien</p>
+      </div>
+  </dx-scroll-view>
+</template>
+
+<script>
+import DxScrollView from "devextreme-vue/scroll-view";
+
+import { useRoute } from 'vue-router';
+import { watch, ref } from 'vue';
+
+export default {
+  components: {
+    DxScrollView
+  },
+  setup() {
+    const route = useRoute();
+
+    const title = ref(route.meta.title);
+    const description = ref("");
+
+    watch(() => route.path,
+     () => {
+        title.value = route.meta.title;
+        description.value = route.meta.description;
+     }
+    )
+    return {
+      title,
+      description
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "../themes/generated/variables.base.scss";
+
+/* SMARTPROC */
+.title-app {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 48px;
+  font-weight: bolder;
+  color: #FFFFFF;
+}
+.subtitle {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  color: #FFFFFF;
+}
+.logo-img {
+  width: 80%;
+  padding: 40px;
+  flex-grow: 0;
+}
+.full-img {
+  background: url("http://localhost:8080/images/bg-login.jpg"); 
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+.center-card {
+  position: absolute;
+  top: 50%;
+  left: 35%;
+  transform: translate(-50%, -50%);
+  padding: 10px;
+}
+.single-card {
+  width: 100%;
+  height: 100%;
+  background-color: #FFFFFF;
+
+  .dx-card {
+    width: 65%;
+    margin: auto auto;
+    padding: 40px;
+    flex-grow: 0;
+
+    .screen-x-small & {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+      box-shadow: none;
+      margin: 0;
+      border: 0;
+      flex-grow: 1;
+    }
+
+    .header {
+      margin-bottom: 30px;
+
+      .title {
+        color: $base-text-color;
+        line-height: 28px;
+        font-weight: 500;
+        font-size: 24px;
+      }
+
+      .description {
+        color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+        line-height: 18px;
+      }
+    }
+  }
+}
+</style>

src/layouts/single-card copy.vue

@@ -0,0 +1,83 @@
+<template>
+  <dx-scroll-view height="100%" width="100%" class="with-footer single-card">
+     <div class="dx-card content">
+      <div class="header">
+        <div class="title">{{title}}</div>
+        <div class="description">{{description}}</div>
+      </div>
+      <slot />
+    </div>
+  </dx-scroll-view>
+</template>
+
+<script>
+import DxScrollView from "devextreme-vue/scroll-view";
+
+import { useRoute } from 'vue-router';
+import { watch, ref } from 'vue';
+
+export default {
+  components: {
+    DxScrollView
+  },
+  setup() {
+    const route = useRoute();
+
+    const title = ref(route.meta.title);
+    const description = ref("");
+
+    watch(() => route.path,
+     () => {
+        title.value = route.meta.title;
+        description.value = route.meta.description;
+     }
+    )
+    return {
+      title,
+      description
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "../themes/generated/variables.base.scss";
+
+.single-card {
+  width: 100%;
+  height: 100%;
+
+  .dx-card {
+    width: 330px;
+    margin: auto auto;
+    padding: 40px;
+    flex-grow: 0;
+
+    .screen-x-small & {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+      box-shadow: none;
+      margin: 0;
+      border: 0;
+      flex-grow: 1;
+    }
+
+    .header {
+      margin-bottom: 30px;
+
+      .title {
+        color: $base-text-color;
+        line-height: 28px;
+        font-weight: 500;
+        font-size: 24px;
+      }
+
+      .description {
+        color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+        line-height: 18px;
+      }
+    }
+  }
+}
+</style>

src/layouts/single-card.vue

@@ -1,5 +1,8 @@
 <template>
-  <dx-scroll-view height="100%" width="100%" class="with-footer single-card">
+  <dx-scroll-view height="100%" width="40%" class="with-footer single-card">
+     <div class="logo-img">
+        <img src="images/logo_pln.png"/>
+     </div>
      <div class="dx-card content">
       <div class="header">
         <div class="title">{{title}}</div>
@@ -8,6 +11,12 @@
       <slot />
     </div>
   </dx-scroll-view>
+  <dx-scroll-view height="100%" width="60%" class="single-card full-img">
+      <div class="center-card">
+        <h1 class="title-app">SMARTPROC</h1>
+        <p class="subtitle">Manajemen kontrak Pengadaan yang termonitoring dan Efisien</p>
+      </div>
+  </dx-scroll-view>
 </template>
 
 <script>
@@ -43,12 +52,45 @@ export default {
 <style lang="scss">
 @import "../themes/generated/variables.base.scss";
 
+/* SMARTPROC */
+.title-app {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 48px;
+  font-weight: bolder;
+  color: #FFFFFF;
+}
+.subtitle {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  color: #FFFFFF;
+}
+.logo-img {
+  width: 80%;
+  padding: 40px;
+  flex-grow: 0;
+}
+.full-img {
+  background: url("http://localhost:8080/images/bg-login.jpg"); 
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+.center-card {
+  position: absolute;
+  top: 50%;
+  left: 35%;
+  transform: translate(-50%, -50%);
+  padding: 10px;
+}
 .single-card {
   width: 100%;
   height: 100%;
+  background-color: #FFFFFF;
 
   .dx-card {
-    width: 330px;
+    width: 65%;
     margin: auto auto;
     padding: 40px;
     flex-grow: 0;

src/router.js

@@ -74,7 +74,7 @@ const router = new createRouter({
       meta: {
         requiresAuth: false,
         layout: simpleLayout,
-        title: "Sign In"
+        title: "Log In"
       },
       component: loadView("login-form")
     },
@@ -84,8 +84,9 @@ const router = new createRouter({
       meta: {
         requiresAuth: false,
         layout: simpleLayout,
-        title: "Reset Password",
+        title: "Lupa Password",
-        description: "Please enter the email address that you used to register, and we will send you a link to reset your password via Email."
+        //description: "Please enter the email address that you used to register, and we will send you a link to reset your password via Email."
+        description: "Silahkan isi alamat email terdaftar, kami akan mengirim link untuk melakukan reset password."
       },
       component: loadView("reset-password-form")
     },

src/themes/generated/theme.base.css

@@ -22972,4 +22972,37 @@ input.dx-hidden {
   left: 0;
   background: rgba(0,0,0,.01);
   opacity: .01;
+}
+/* Add by Titan 2023/05/19 */
+h3 {
+  color: #0996C2;
+}
+.dx-link.dx-link-edit.dx-icon-edit.dx-link-icon {
+  color: #e8d102;
+}
+.dx-link.dx-link-delete.dx-icon-trash.dx-link-icon {
+  color: #FF2C2C;
+}
+.dx-item-content.dx-toolbar-item-content {
+  margin: 0 10px;
+}
+.dx-widget.dx-button.dx-button-mode-text.dx-button-normal.dx-button-has-icon.dx-closebutton {
+  left: 0px;
+}
+.dx-datagrid-addrow-button {
+  background: #0996C2;
+  color: #fff;
+}
+.dx-datagrid-addrow-button.dx-state-hover {
+  background: #0ea4d3;
+  color: #fff;
+}
+.dx-button-mode-contained .dx-icon {
+  color: #fff;
+}
+.dx-datagrid-headers {
+  background: #DAF0FA;
+}
+.dx-widget.dx-button.dx-button-mode-contained.dx-button-normal.dx-button-has-text {
+  left: 0px;
 }

src/views/drp/drp-penyusunan.vue

@@ -6,11 +6,10 @@
       <div class="dx-card responsive-paddings">
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
-            :data-source="customDataSource" 
+            :data-source="dataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
-            :column-auto-width="true"
+            :column-auto-width="true">
-            @exporting="onExporting">
             <DxEditing
                 :allow-adding="true"
                 :allow-updating="true"
@@ -26,7 +25,9 @@
                 cancel-row-changes="Batal"
                 ></DxTexts>
                 <DxForm label-location="top" :col-count="1">
-                  <DxItem dataField="tahun" />
+                  <DxItem dataField="tahun">
+                    <DxRequiredRule message="Tahun harus diisi" />
+                  </DxItem>
                 </DxForm>
                 <DxPopup
                     :hide-on-outside-click="true"
@@ -57,7 +58,7 @@
             <DxFilterRow :visible="false" />
             <DxColumn cell-template="row-cell-template" caption="No" :width="45"></DxColumn>
             <DxColumn data-field="tahun" caption="Tahun DRP"></DxColumn>
-            <DxColumn data-field="isApprove" caption="Status Approve"></DxColumn>
+            <DxColumn data-field="isApprove" caption="Status Approve" editor-type="dxCheckBox"></DxColumn>
             <DxColumn data-field="approveDate" caption="Tanggal Approve"></DxColumn>
             <DxColumn type="buttons" caption="Aksi">
               <DxButton name="edit"/>
@@ -76,11 +77,6 @@
               <DxText>{{ data.rowIndex +1 }}</DxText>
             </template>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Penyusunan DRP..."/>
-            <!--<DxExport
-              :enabled="true"
-              :formats="['xlsx', 'pdf']"
-              :allow-export-selected-data="true"
-            />-->
           </DxDataGrid>
         </div>
       </div>
@@ -104,15 +100,10 @@ import DxDataGrid, {
   DxButton
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
-import { Workbook } from 'exceljs';
-import { saveAs } from 'file-saver-es';
-import { exportDataGrid as exportDataGridToExcel } from 'devextreme/excel_exporter';
-import { jsPDF } from 'jspdf';
-import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
 
-const URL = process.env.VUE_APP_ROOT_API+'/jenisanggaran';
+const URL = process.env.VUE_APP_ROOT_API+'/drp';
 
-const customDataSource = new CustomStore({
+const dataSource = new CustomStore({
   key: 'id',
 
   load: () => {
@@ -171,52 +162,14 @@ export default {
     DxButton
   },
   methods: {
-    onExporting(e) {
+    linkDetail : function() {
-      e.cancel = true;
+        location.href='master-data/strategi-pengadaan';
-
-      switch (e.format) {
-        case "pdf": {
-          const doc = new jsPDF();
-          exportDataGridToPDF({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-          }).then(() => {
-            doc.save('Jenispengadaan.pdf');
-          });
-        }
-        break;
-
-        case "xlsx": {
-          const workbook = new Workbook();
-          const worksheet = workbook.addWorksheet('Penyusunan DRP');
-
-          exportDataGridToExcel({
-            component: e.component,
-            worksheet: worksheet,
-            autoFilterEnabled: true,
-          }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer) => {
-              saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
-            });
-          });
-        }
-        break;
-      }
-      
-    },
-    cloneIconClick(e) {
-      e.event.preventDefault();
-    },
-    linkDetail(e) {
-        console.log(e.id);
-        window.location.href= '/#/drp/drp-penyusunan';    
     }
   },
   data() {
       return {
           //jsonUrl: URL,
-          customDataSource,
+          dataSource,
       }
   },
 }

src/views/employees.js

@@ -0,0 +1,310 @@
+export const employees = [{
+  ID: 1,
+  FirstName: 'John',
+  LastName: 'Heart',
+  Prefix: 'Mr.',
+  Position: 'CEO',
+  BirthDate: '1964/03/16',
+  HireDate: '1995/01/15',
+  Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
+  Address: '351 S Hill St.',
+  StateID: 5,
+}, {
+  ID: 2,
+  FirstName: 'Olivia',
+  LastName: 'Peyton',
+  Prefix: 'Mrs.',
+  Position: 'Sales Assistant',
+  BirthDate: '1981/06/03',
+  HireDate: '2012/05/14',
+  Notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.',
+  Address: '807 W Paseo Del Mar',
+  StateID: 5,
+}, {
+  ID: 3,
+  FirstName: 'Robert',
+  LastName: 'Reagan',
+  Prefix: 'Mr.',
+  Position: 'CMO',
+  BirthDate: '1974/09/07',
+  HireDate: '2002/11/08',
+  Notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
+  Address: '4 Westmoreland Pl.',
+  StateID: 4,
+}, {
+  ID: 4,
+  FirstName: 'Greta',
+  LastName: 'Sims',
+  Prefix: 'Ms.',
+  Position: 'HR Manager',
+  BirthDate: '1977/11/22',
+  HireDate: '1998/04/23',
+  Notes: "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.",
+  Address: '1700 S Grandview Dr.',
+  StateID: 11,
+}, {
+  ID: 5,
+  FirstName: 'Brett',
+  LastName: 'Wade',
+  Prefix: 'Mr.',
+  Position: 'IT Manager',
+  BirthDate: '1968/12/01',
+  HireDate: '2009/03/06',
+  Notes: 'Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).',
+  Address: '1120 Old Mill Rd.',
+  StateID: 13,
+}, {
+  ID: 6,
+  FirstName: 'Sandra',
+  LastName: 'Johnson',
+  Prefix: 'Mrs.',
+  Position: 'Controller',
+  BirthDate: '1974/11/15',
+  HireDate: '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\nSandra has 2 daughters both of whom are accomplished gymnasts.",
+  Address: '4600 N Virginia Rd.',
+  StateID: 44,
+}, {
+  ID: 7,
+  FirstName: 'Kevin',
+  LastName: 'Carter',
+  Prefix: 'Mr.',
+  Position: 'Shipping Manager',
+  BirthDate: '1978/01/09',
+  HireDate: '2009/08/11',
+  Notes: 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.',
+  Address: '424 N Main St.',
+  StateID: 5,
+}, {
+  ID: 8,
+  FirstName: 'Cynthia',
+  LastName: 'Stanwick',
+  Prefix: 'Ms.',
+  Position: 'HR Assistant',
+  BirthDate: '1985/06/05',
+  HireDate: '2008/03/24',
+  Notes: 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!',
+  Address: '2211 Bonita Dr.',
+  StateID: 4,
+}, {
+  ID: 9,
+  FirstName: 'Kent',
+  LastName: 'Samuelson',
+  Prefix: 'Dr.',
+  Position: 'Ombudsman',
+  BirthDate: '1972/09/11',
+  HireDate: '2009/04/22',
+  Notes: 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field.    He is a classically trained musician and is a member of the Chamber Orchestra.',
+  Address: '12100 Mora Dr',
+  StateID: 26,
+}, {
+  ID: 10,
+  FirstName: 'Taylor',
+  LastName: 'Riley',
+  Prefix: 'Mr.',
+  Position: 'Network Admin',
+  BirthDate: '1982/08/14',
+  HireDate: '2012/04/14',
+  Notes: "If you are like the rest of us at DevAV, then you've probably reached out for help from Taylor. He does a great job as a member of our IT department.",
+  Address: '7776 Torreyson Dr',
+  StateID: 5,
+}, {
+  ID: 11,
+  FirstName: 'Sam',
+  LastName: 'Hill',
+  Prefix: 'Mr.',
+  Position: 'Sales Assistant',
+  BirthDate: '1984/02/17',
+  HireDate: '2012/02/01',
+  Notes: 'Sammy is proud to be a member of the DevAV team. He joined the team in 2012 and has been in the sales department from the beginning.\r\n\r\nHe has just picked up golf so you can find him on the links every weekend.',
+  Address: '645 Prospect Crescent',
+  StateID: 11,
+}, {
+  ID: 12,
+  FirstName: 'Kelly',
+  LastName: 'Rodriguez',
+  Prefix: 'Ms.',
+  Position: 'Support Assistant',
+  BirthDate: '1988/05/11',
+  HireDate: '2012/10/13',
+  Notes: "Kelly loves people and that's why she joined DevAV's support department. One of the funniest people in the company, she does stand-up on the weekends at the Laugh Factory.",
+  Address: '1601 W Mountain St.',
+  StateID: 5,
+}, {
+  ID: 13,
+  FirstName: 'Natalie',
+  LastName: 'Maguirre',
+  Prefix: 'Mrs.',
+  Position: 'Trainer',
+  BirthDate: '1977/10/07',
+  HireDate: '2008/06/19',
+  Notes: 'Natalie travels the US and teaches our partners how to explain the benefits of our products to customers.\r\n\r\nShe is a proud wife and mom and volunteers her time at the elementary school.',
+  Address: '6400 E Bixby Hill Rd',
+  StateID: 29,
+}, {
+  ID: 14,
+  FirstName: 'Walter',
+  LastName: 'Hobbs',
+  Prefix: 'Mr.',
+  Position: 'Programmer',
+  BirthDate: '1984/12/24',
+  HireDate: '2011/02/17',
+  Notes: "Walter has been developing apps and websites for DevAV since 2011. His passion is software and if you ever walk by his desk, you'll know why.\r\n\r\nWally once worked 72 hours straight - writing code and fixing bugs.",
+  Address: '10385 Shadow Oak Dr',
+  StateID: 13,
+}];
+
+export const states = [{
+  ID: 1,
+  Name: 'Alabama',
+}, {
+  ID: 2,
+  Name: 'Alaska',
+}, {
+  ID: 3,
+  Name: 'Arizona',
+}, {
+  ID: 4,
+  Name: 'Arkansas',
+}, {
+  ID: 5,
+  Name: 'California',
+}, {
+  ID: 6,
+  Name: 'Colorado',
+}, {
+  ID: 7,
+  Name: 'Connecticut',
+}, {
+  ID: 8,
+  Name: 'Delaware',
+}, {
+  ID: 9,
+  Name: 'District of Columbia',
+}, {
+  ID: 10,
+  Name: 'Florida',
+}, {
+  ID: 11,
+  Name: 'Georgia',
+}, {
+  ID: 12,
+  Name: 'Hawaii',
+}, {
+  ID: 13,
+  Name: 'Idaho',
+}, {
+  ID: 14,
+  Name: 'Illinois',
+}, {
+  ID: 15,
+  Name: 'Indiana',
+}, {
+  ID: 16,
+  Name: 'Iowa',
+}, {
+  ID: 17,
+  Name: 'Kansas',
+}, {
+  ID: 18,
+  Name: 'Kentucky',
+}, {
+  ID: 19,
+  Name: 'Louisiana',
+}, {
+  ID: 20,
+  Name: 'Maine',
+}, {
+  ID: 21,
+  Name: 'Maryland',
+}, {
+  ID: 22,
+  Name: 'Massachusetts',
+}, {
+  ID: 23,
+  Name: 'Michigan',
+}, {
+  ID: 24,
+  Name: 'Minnesota',
+}, {
+  ID: 25,
+  Name: 'Mississippi',
+}, {
+  ID: 26,
+  Name: 'Missouri',
+}, {
+  ID: 27,
+  Name: 'Montana',
+}, {
+  ID: 28,
+  Name: 'Nebraska',
+}, {
+  ID: 29,
+  Name: 'Nevada',
+}, {
+  ID: 30,
+  Name: 'New Hampshire',
+}, {
+  ID: 31,
+  Name: 'New Jersey',
+}, {
+  ID: 32,
+  Name: 'New Mexico',
+}, {
+  ID: 33,
+  Name: 'New York',
+}, {
+  ID: 34,
+  Name: 'North Carolina',
+}, {
+  ID: 35,
+  Name: 'Ohio',
+}, {
+  ID: 36,
+  Name: 'Oklahoma',
+}, {
+  ID: 37,
+  Name: 'Oregon',
+}, {
+  ID: 38,
+  Name: 'Pennsylvania',
+}, {
+  ID: 39,
+  Name: 'Rhode Island',
+}, {
+  ID: 40,
+  Name: 'South Carolina',
+}, {
+  ID: 41,
+  Name: 'South Dakota',
+}, {
+  ID: 42,
+  Name: 'Tennessee',
+}, {
+  ID: 43,
+  Name: 'Texas',
+}, {
+  ID: 44,
+  Name: 'Utah',
+}, {
+  ID: 45,
+  Name: 'Vermont',
+}, {
+  ID: 46,
+  Name: 'Virginia',
+}, {
+  ID: 47,
+  Name: 'Washington',
+}, {
+  ID: 48,
+  Name: 'West Virginia',
+}, {
+  ID: 49,
+  Name: 'Wisconsin',
+}, {
+  ID: 50,
+  Name: 'Wyoming',
+}, {
+  ID: 51,
+  Name: 'North Dakota',
+}];

src/views/instansi.js

@@ -0,0 +1,22 @@
+export const inst = [{
+      id: 1,
+      instansi: 'Instansi Bener',
+      alamat: 'Alamat Bener',
+      keterangan: 'Keterangan B',
+      isDelete: false
+    },
+    {
+        id: 2,
+        instansi: 'Instansi Kedua',
+        alamat: 'Alamat Bener',
+        keterangan: 'Keterangan B',
+        isDelete: false
+    },
+    {
+        id: 3,
+        instansi: 'Instansi Ketiga',
+        alamat: 'Alamat Bener',
+        keterangan: 'Keterangan B',
+        isDelete: false
+    }
+  ];

src/views/login-form copy.vue

@@ -1,13 +1,24 @@
 <template>
-  <form class="login-form" @submit.prevent="onSubmit">
+  <div class="wrapper">
+    <div class="content-wrapper">
+      <DxResponsiveBox>
+        <DxRow :ratio="1"/>
+        <DxRow :ratio="2" :shrink="2"/>
+        <DxRow :ratio="0.7"/>
+        <DxCol :ratio="0.5" :shrink="0.5"/>
+        <!-- The following columns appear on medium and large screens only -->
+        <DxCol :ratio="2" screen="md lg"/>
+        <DxCol :ratio="0.5" screen="md lg"/>
+    </DxResponsiveBox>
+      <form class="login-form" @submit.prevent="onSubmit">
     <dx-form :form-data="formData" :disabled="loading">
       <dx-item
         data-field="email"
         editor-type="dxTextBox"
         :editor-options="{ stylingMode: 'filled', placeholder: 'Email', mode: 'email' }"
       >
-        <dx-required-rule message="Email is required" />
+        <dx-required-rule message="Dibutuhkan alamat email" />
-        <dx-email-rule message="Email is invalid" />
+        <dx-email-rule message="Alamat email tidak valid" />
         <dx-label :visible="false" />
       </dx-item>
       <dx-item
@@ -15,13 +26,13 @@
         editor-type='dxTextBox'
         :editor-options="{ stylingMode: 'filled', placeholder: 'Password', mode: 'password' }"
       >
-        <dx-required-rule message="Password is required" />
+        <dx-required-rule message="Password harus diisi" />
         <dx-label :visible="false" />
       </dx-item>
       <dx-item
         data-field="rememberMe"
         editor-type="dxCheckBox"
-        :editor-options="{ text: 'Remember me', elementAttr: { class: 'form-text' } }"
+        :editor-options="{ text: 'Ingat saya', elementAttr: { class: 'form-text' } }"
       >
         <dx-label :visible="false" />
       </dx-item>
@@ -37,27 +48,22 @@
       <dx-item>
         <template #default>
           <div class="link">
-            <router-link to="/reset-password">Forgot password?</router-link>
+            <router-link to="/reset-password">Lupa password?</router-link>
           </div>
         </template>
       </dx-item>
-      <dx-button-item>
-        <dx-button-options
-          text="Create an account"
-          width="100%"
-          :on-click="onCreateAccountClick"
-        />
-      </dx-button-item>
       <template #signInTemplate>
         <div>
           <span class="dx-button-text">
             <dx-load-indicator v-if="loading" width="24px" height="24px" :visible="true" />
-            <span v-if="!loading">Sign In</span>
+            <span v-if="!loading">Log In</span>
           </span>
         </div>
       </template>
     </dx-form>
-  </form>
+      </form>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -70,6 +76,7 @@ import DxForm, {
   DxButtonItem,
   DxButtonOptions
 } from "devextreme-vue/form";
+import { DxResponsiveBox, DxCol, DxRow } from 'devextreme-vue/responsive-box';
 import notify from 'devextreme/ui/notify';
 
 import auth from "../auth";
@@ -119,7 +126,10 @@ export default {
     DxItem,
     DxLabel,
     DxButtonItem,
-    DxButtonOptions
+    DxButtonOptions,
+    DxResponsiveBox,
+    DxCol,
+    DxRow
   }
 };
 </script>
@@ -143,4 +153,6 @@ export default {
     color: rgba($base-text-color, alpha($base-text-color) * 0.7);
   }
 }
+
+html, body { height: 100%; }
 </style>

src/views/login-form.vue

@@ -116,7 +116,7 @@ export default {
     DxItem,
     DxLabel,
     DxButtonItem,
-    DxButtonOptions
+    DxButtonOptions,
   }
 };
 </script>
@@ -140,4 +140,6 @@ export default {
     color: rgba($base-text-color, alpha($base-text-color) * 0.7);
   }
 }
+
+html, body { height: 100%; }
 </style>

src/views/master-config/permissions-config.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-config/roles-config.vue

@@ -6,17 +6,17 @@
       <div class="dx-card responsive-paddings">
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
-            :data-source="customDataSource" 
+            :data-source="dataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
-            :column-auto-width="true"
+            :column-auto-width="true">
-            @exporting="onExporting">
             <DxRemoteOperations :group-paging="true" />
             <DxEditing
                 :allow-adding="true"
                 :allow-updating="true"
                 :allow-deleting="true"
                 :use-icons="true"
+                form="popup"
                 mode="popup">
                 <DxTexts 
                 add-row="Tambah"
@@ -27,16 +27,18 @@
                 cancel-row-changes="Batal"
                 ></DxTexts>
                 <DxForm label-location="top" :col-count="1">
-                  <DxItem dataField="role" />
+                  <DxItem dataField="role">
+                    <DxRequiredRule message="Role harus diisi" />
+                  </DxItem>
                   <DxItem dataField="keterangan" />
-                  <DxItem dataField="is_active" editor-type="dxCheckBox" />
+                  <DxItem dataField="isActive" editor-type="dxCheckBox"/>
                 </DxForm>
                 <DxPopup
                     :hide-on-outside-click="true"
                     :show-title="true"
                     :width="400"
                     :height="400"
-                    title="Form Manajemen Roles"
+                    title="Form Manajemen Role"
                 />
             </DxEditing>
             <DxToolbar>
@@ -61,17 +63,12 @@
             <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
             <DxColumn data-field="role" caption="Role"></DxColumn>
             <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
-            <DxColumn data-field="is_active" caption="Status"></DxColumn>
+            <DxColumn data-field="isActive" caption="Status"></DxColumn>
             <DxColumn type="buttons" caption="Aksi">
               <DxButton name="edit"/>
               <DxButton name="delete"/>
             </DxColumn>
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300"  placeholder="Cari Manajemen Roles..."/>
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Manajemen Role..."/>
-            <!--<DxExport
-              :enabled="true"
-              :formats="['xlsx', 'pdf']"
-              :allow-export-selected-data="true"
-            />-->
           </DxDataGrid>
         </div>
       </div>
@@ -91,18 +88,14 @@ import DxDataGrid, {
   DxPaging,
   DxSearchPanel,
   DxToolbar,
-  DxTexts
+  DxTexts,
+  DxRequiredRule
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
-import { Workbook } from 'exceljs';
-import { saveAs } from 'file-saver-es';
-import { exportDataGrid as exportDataGridToExcel } from 'devextreme/excel_exporter';
-import { jsPDF } from 'jspdf';
-import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
 
 const URL = process.env.VUE_APP_ROOT_API+'/roles';
 
-const customDataSource = new CustomStore({
+const dataSource = new CustomStore({
   key: 'id',
 
   load: () => {
@@ -151,62 +144,14 @@ export default {
     DxPaging,
     DxSearchPanel,
     DxToolbar,
-    DxTexts
+    DxTexts,
-  },
+    DxRequiredRule,
-  methods: {
-    onExporting(e) {
-      e.cancel = true;
-
-      switch (e.format) {
-        case "pdf": {
-          const doc = new jsPDF();
-          exportDataGridToPDF({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-          }).then(() => {
-            doc.save('Jenispengadaan.pdf');
-          });
-        }
-        break;
-
-        case "xlsx": {
-          const workbook = new Workbook();
-          const worksheet = workbook.addWorksheet('Manajemen Roles');
-
-          exportDataGridToExcel({
-            component: e.component,
-            worksheet: worksheet,
-            autoFilterEnabled: true,
-          }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer) => {
-              saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
-            });
-          });
-        }
-        break;
-      }
-      
-    },
-    onCellPrepared(e) {
-      var isEditing = e.row.isEditing, $links = e.cellElement.find(".dx-link");
-    
-      $links.text("");
-      
-      if(isEditing){
-          $links.filter(".dx-link-save").addClass("dx-icon-save").addClass("yellowClass");
-          $links.filter(".dx-link-cancel").addClass("dx-icon-revert").addClass("yellowClass");
-      } else {
-          $links.filter(".dx-link-edit").addClass("dx-icon-edit").addClass("greenClass");
-          $links.filter(".dx-link-delete").addClass("dx-icon-trash").addClass("redClass");
-      }
-    },
   },
   
   data() {
       return {
           //jsonUrl: URL,
-          customDataSource,
+          dataSource,
       }
   },
 }

src/views/master-config/users-config.vue

@@ -6,11 +6,10 @@
       <div class="dx-card responsive-paddings">
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
-            :data-source="customDataSource" 
+            :data-source="dataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
-            :column-auto-width="true"
+            :column-auto-width="true">
-            @exporting="onExporting">
             <DxRemoteOperations :group-paging="true" />
             <DxFilterPanel :visible="true"/>
             <DxEditing
@@ -32,16 +31,24 @@
                   <DxItem dataField="email" />
                   <DxItem dataField="password"/>
                   <DxItem dataField="nama" />
-                  <DxItem dataField="jabatan" />
+                  <DxItem dataField="instansiId">
-                  <DxItem dataField="instansi" />
+                    <DxRequiredRule message="Instansi harus dipilih" />
-                  <DxItem dataField="bidang" />
+                  </DxItem>
-                  <DxItem dataField="role_id" />
+                  <DxItem dataField="bidangId">
+                    <DxRequiredRule message="Bidang harus dipilih" />
+                  </DxItem>
+                  <DxItem dataField="jabatanId">
+                    <DxRequiredRule message="Nama Jabatan harus dipilih" />
+                  </DxItem>
+                  <DxItem dataField="roleId">
+                    <DxRequiredRule message="Role harus dipilih" />
+                  </DxItem>
                 </DxForm>
                 <DxPopup
                     :hide-on-outside-click="true"
                     :show-title="true"
                     :width="600"
-                    :height="600"
+                    :height="700"
                     title="Form Manajemen User"
                 />
             </DxEditing>
@@ -67,19 +74,24 @@
             <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
             <DxColumn data-field="nama" caption="Nama"></DxColumn>
             <DxColumn data-field="username" caption="Username"></DxColumn>
-            <DxColumn data-field="jabatan" caption="Jabatan"></DxColumn>
+            <DxColumn data-field="roleId" caption="Role">
-            <DxColumn data-field="role_id" caption="Role"></DxColumn>
+              <DxLookup display-expr="role" value-expr="id" :data-source="roles" :search-enabled="true" />
+            </DxColumn>
             <DxColumn data-field="email" caption="Email"></DxColumn>
+            <DxColumn data-field="instansiId" caption="Instansi">
+              <DxLookup display-expr="instansi" value-expr="id" :data-source="instansis" :search-enabled="true" />
+            </DxColumn>
+            <DxColumn data-field="bidangId" caption="Bidang">
+              <DxLookup display-expr="bidang" value-expr="id" :data-source="bidangs" :search-enabled="true" />
+            </DxColumn>
+            <DxColumn data-field="jabatanId" caption="Jabatan">
+              <DxLookup display-expr="jabatan" value-expr="id" :data-source="jabatans" :search-enabled="true" />
+            </DxColumn>
             <DxColumn type="buttons" caption="Aksi">
               <DxButton name="edit"/>
               <DxButton name="delete"/>
             </DxColumn>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300"  placeholder="Cari Manajemen User..."/>
-            <!--<DxExport
-              :enabled="true"
-              :formats="['xlsx', 'pdf']"
-              :allow-export-selected-data="true"
-            />-->
           </DxDataGrid>
         </div>
       </div>
@@ -99,18 +111,143 @@ import DxDataGrid, {
   DxPaging,
   DxSearchPanel,
   DxToolbar,
-  DxTexts
+  DxTexts,
+  DxRequiredRule,
+  DxLookup
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
-import { Workbook } from 'exceljs';
-import { saveAs } from 'file-saver-es';
-import { exportDataGrid as exportDataGridToExcel } from 'devextreme/excel_exporter';
-import { jsPDF } from 'jspdf';
-import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
 
 const URL = process.env.VUE_APP_ROOT_API+'/users';
+const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
+const URL_bidang = process.env.VUE_APP_ROOT_API+'/bidang';
+const URL_jabatan = process.env.VUE_APP_ROOT_API+'/jabatan';
+const URL_role = process.env.VUE_APP_ROOT_API+'/roles';
 
-const customDataSource = new CustomStore({
+const instansiOptions = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+      return fetch(URL_instansi+'?size=1000')
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.data);
+        return {
+          data: response.data
+        };
+      })
+      // .then(data => {
+      //   console.log(JSON.parse(data));
+      // })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_instansi+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.instansi);
+        return {
+          data: response.instansi
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});
+
+const bidangOptions = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+      return fetch(URL_bidang+'?size=1000')
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.data);
+        return {
+          data: response.data
+        };
+      })
+      // .then(data => {
+      //   console.log(JSON.parse(data));
+      // })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_bidang+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.bidang);
+        return {
+          data: response.bidang
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});
+
+const jabatanOptions = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+      return fetch(URL_jabatan+'?size=1000')
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.data);
+        return {
+          data: response.data
+        };
+      })
+      // .then(data => {
+      //   console.log(JSON.parse(data));
+      // })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_jabatan+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.jabatan);
+        return {
+          data: response.jabatan
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});
+
+const roleOptions = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+      return fetch(URL_role+'?size=1000')
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.data);
+        return {
+          data: response.data
+        };
+      })
+      // .then(data => {
+      //   console.log(JSON.parse(data));
+      // })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_role+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.role);
+        return {
+          data: response.role
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});
+
+const dataSource = new CustomStore({
   key: 'id',
 
   load: () => {
@@ -159,62 +296,18 @@ export default {
     DxPaging,
     DxSearchPanel,
     DxToolbar,
-    DxTexts
+    DxTexts,
+    DxRequiredRule,
+    DxLookup
   },
-  methods: {
-    onExporting(e) {
-      e.cancel = true;
-
-      switch (e.format) {
-        case "pdf": {
-          const doc = new jsPDF();
-          exportDataGridToPDF({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-          }).then(() => {
-            doc.save('Jenispengadaan.pdf');
-          });
-        }
-        break;
-
-        case "xlsx": {
-          const workbook = new Workbook();
-          const worksheet = workbook.addWorksheet('Manajemen User');
-
-          exportDataGridToExcel({
-            component: e.component,
-            worksheet: worksheet,
-            autoFilterEnabled: true,
-          }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer) => {
-              saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
-            });
-          });
-        }
-        break;
-      }
-      
-    },
-    onCellPrepared(e) {
-      var isEditing = e.row.isEditing, $links = e.cellElement.find(".dx-link");
-    
-      $links.text("");
-      
-      if(isEditing){
-          $links.filter(".dx-link-save").addClass("dx-icon-save").addClass("yellowClass");
-          $links.filter(".dx-link-cancel").addClass("dx-icon-revert").addClass("yellowClass");
-      } else {
-          $links.filter(".dx-link-edit").addClass("dx-icon-edit").addClass("greenClass");
-          $links.filter(".dx-link-delete").addClass("dx-icon-trash").addClass("redClass");
-      }
-    },
-  },
-  
   data() {
       return {
           //jsonUrl: URL,
-          customDataSource,
+          dataSource,
+          instansis: instansiOptions,
+          bidangs: bidangOptions,
+          jabatans: jabatanOptions,
+          roles: roleOptions
       }
   },
 }

src/views/master-data/bidang-page copy.vue

@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Bidang</h3>
+    <p class="content-block">Bidang</p>
+    <div class="content-block">
+      <div class="dx-card responsive-paddings">
+        <div id="app-container">
+          <DxDataGrid ref="currDataGrid"
+            :data-source="dataSource" 
+            key-expr="id"
+            :allow-column-reordering="true"
+            :column-auto-width="true"
+            @exporting="onExporting">
+            <DxRemoteOperations :group-paging="true" />
+            <DxEditing
+                :allow-adding="true"
+                :allow-updating="true"
+                :allow-deleting="true"
+                :use-icons="true"
+                mode="popup">
+                <DxTexts 
+                add-row="Tambah"
+                edit-row="Ubah"
+                delete-row="Hapus"
+                confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
+                save-row-changes="Simpan"
+                cancel-row-changes="Batal"
+                ></DxTexts>
+                <DxForm label-location="top" :col-count="1">
+                  <!--<DxItem dataField="instansiId" editor-type="dxSelectBox"/>-->
+                  <DxItem dataField="instansiId"/>
+                  <DxItem dataField="bidang">
+                    <DxRequiredRule message="Bidang harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Bidang"
+                />
+            </DxEditing>
+            <DxToolbar>
+                <DxItem name="groupPanel" />
+                <DxItem name="searchPanel" location="before"/>
+                <DxItem name="addRowButton" show-text="always" css-class="">
+                  <DxTexts add-row="Tambah"></DxTexts>
+                </DxItem>
+                <DxItem name="exportButton" />
+                <DxItem name="columnChooserButton" />
+            </DxToolbar>
+            <DxPaging :page-size="5" />
+            <DxPager 
+            :visible="true"
+            :allowed-page-sizes="[5, 10, 50]" 
+            :display-mode="compact" 
+            :show-page-size-selector="true" 
+            :show-info="true" 
+            :show-navigation-buttons="true"
+            info-text="Hal {0} dari {1} ({2} data)" />
+            <DxFilterRow :visible="false" />
+            <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
+            <DxColumn data-field="instansiId" caption="Instansi">
+              <DxLookup display-expr="instansi" value-expr="id" :data-source="instansis" :search-enabled="true" />
+            </DxColumn>
+            <DxColumn data-field="bidang" caption="Bidang"></DxColumn>
+            <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
+            <DxColumn type="buttons" caption="Aksi">
+              <DxButton name="edit"/>
+              <DxButton name="delete"/>
+            </DxColumn>
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300"  placeholder="Cari Bidang..."/>
+            <!--<DxExport
+              :enabled="true"
+              :formats="['xlsx', 'pdf']"
+              :allow-export-selected-data="true"
+            />-->
+          </DxDataGrid>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script> 
+import DxDataGrid, {
+  DxEditing,
+  DxItem,
+  DxForm,
+  DxPopup,
+  DxColumn,
+  DxFilterRow,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxToolbar,
+  DxTexts,
+  DxRequiredRule,
+  DxLookup
+} from "devextreme-vue/data-grid";
+import CustomStore from "devextreme/data/custom_store";
+import { Workbook } from 'exceljs';
+import { saveAs } from 'file-saver-es';
+import { exportDataGrid as exportDataGridToExcel } from 'devextreme/excel_exporter';
+import { jsPDF } from 'jspdf';
+import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
+const URL = process.env.VUE_APP_ROOT_API+'/bidang';
+const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
+
+const instansiOptions = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+      return fetch(URL_instansi+'?size=1000')
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.data);
+        return {
+          data: response.data
+        };
+      })
+      // .then(data => {
+      //   console.log(JSON.parse(data));
+      // })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_instansi+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.instansi);
+        return {
+          data: response.instansi
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});
+
+const dataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL+'?size=1000')
+      .then((response) => response.json())
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  insert: (values) => {
+        return fetch(URL, {
+            method: "POST",
+            body: JSON.stringify(values),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+    },
+
+  update: (key, values) => {
+      return fetch(URL + "/" + encodeURIComponent(key), {
+          method: "PUT",
+          body: JSON.stringify(values),
+          headers: {
+              'Content-Type': 'application/json'
+          }
+      });
+  },
+
+  remove: (key) => {
+      return fetch(URL + "/" + encodeURIComponent(key), {
+          method: "DELETE",
+      });
+  },
+});
+
+export default {
+  components: {
+    DxDataGrid,
+    DxEditing,
+    DxItem,
+    DxForm,
+    DxPopup,
+    DxColumn,
+    DxFilterRow,
+    DxPager,
+    DxPaging,
+    DxSearchPanel,
+    DxToolbar,
+    DxTexts,
+    DxRequiredRule,
+    DxLookup
+},
+  methods: {
+    onExporting(e) {
+      e.cancel = true;
+
+      switch (e.format) {
+        case "pdf": {
+          const doc = new jsPDF();
+          exportDataGridToPDF({
+            jsPDFDocument: doc,
+            component: e.component,
+            indent: 5,
+          }).then(() => {
+            doc.save('Bidang.pdf');
+          });
+        }
+        break;
+
+        case "xlsx": {
+          const workbook = new Workbook();
+          const worksheet = workbook.addWorksheet('Bidang');
+
+          exportDataGridToExcel({
+            component: e.component,
+            worksheet: worksheet,
+            autoFilterEnabled: true,
+          }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer) => {
+              saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
+            });
+          });
+        }
+        break;
+      }
+      
+    },
+    onCellPrepared(e) {
+      var isEditing = e.row.isEditing, $links = e.cellElement.find(".dx-link");
+    
+      $links.text("");
+      
+      if(isEditing){
+          $links.filter(".dx-link-save").addClass("dx-icon-save").addClass("yellowClass");
+          $links.filter(".dx-link-cancel").addClass("dx-icon-revert").addClass("yellowClass");
+      } else {
+          $links.filter(".dx-link-edit").addClass("dx-icon-edit").addClass("greenClass");
+          $links.filter(".dx-link-delete").addClass("dx-icon-trash").addClass("redClass");
+      }
+    },
+  },
+  
+  data() {
+      return {
+          //jsonUrl: URL,
+          dataSource,
+          instansis: instansiOptions,
+          // instansis: { 
+          //   items: instansiOptions, 
+          //   searchEnabled: true, value: '' 
+          // },
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

src/views/master-data/bidang-page.vue

@@ -6,8 +6,8 @@
       <div class="dx-card responsive-paddings">
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
-            :data-source="customDataSource" 
+            :data-source="dataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">
@@ -17,7 +17,6 @@
                 :allow-updating="true"
                 :allow-deleting="true"
                 :use-icons="true"
-                form="popup"
                 mode="popup">
                 <DxTexts 
                 add-row="Tambah"
@@ -28,8 +27,8 @@
                 cancel-row-changes="Batal"
                 ></DxTexts>
                 <DxForm label-location="top" :col-count="1">
-                  <DxItem dataField="instansi_id" editor-type="dxSelectBox"/>
+                  <!--<DxItem dataField="instansiId" editor-type="dxSelectBox"/>-->
-                  <!--<DxItem dataField="instansix_id" :data-source="instansiEditorOptions" editor-type="dxDropDownBox"/>-->
+                  <DxItem dataField="instansiId"/>
                   <DxItem dataField="bidang">
                     <DxRequiredRule message="Bidang harus diisi" />
                   </DxItem>
@@ -63,8 +62,8 @@
             info-text="Hal {0} dari {1} ({2} data)" />
             <DxFilterRow :visible="false" />
             <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
-            <DxColumn data-field="instansi_id" caption="Instansi">
+            <DxColumn data-field="instansiId" caption="Instansi">
-              <DxLookup display-expr="instansi" value-expr="id" :data-source="instansiEditorOptions" />
+              <DxLookup display-expr="instansi" value-expr="id" :data-source="instansis" :search-enabled="true" />
             </DxColumn>
             <DxColumn data-field="bidang" caption="Bidang"></DxColumn>
             <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
@@ -111,6 +110,8 @@ const URL = process.env.VUE_APP_ROOT_API+'/bidang';
 const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
 
 const instansiOptions = new CustomStore({
+  key: 'id',
+  
   load:() => {
       return fetch(URL_instansi+'?size=1000')
       .then((response) => response.json())
@@ -124,10 +125,22 @@ const instansiOptions = new CustomStore({
       //   console.log(JSON.parse(data));
       // })
       .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_instansi+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.instansi);
+        return {
+          data: response.instansi
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
   }
 });
 
-const customDataSource = new CustomStore({
+const dataSource = new CustomStore({
   key: 'id',
 
   load: () => {
@@ -233,11 +246,12 @@ export default {
   data() {
       return {
           //jsonUrl: URL,
-          customDataSource, 
+          dataSource,
-          instansiEditorOptions: { 
+          instansis: instansiOptions,
-            items: instansiOptions, 
+          // instansis: { 
-            searchEnabled: true, value: '' 
+          //   items: instansiOptions, 
-          },
+          //   searchEnabled: true, value: '' 
+          // },
       }
   },
 }

src/views/master-data/instansi-page.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/jabatan-page.vue

@@ -6,28 +6,31 @@
       <div class="dx-card responsive-paddings">
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
-            :data-source="customDataSource" 
+            :data-source="dataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
-            :column-auto-width="true"
+            :column-auto-width="true">
-            @exporting="onExporting">
             <DxRemoteOperations :group-paging="true" />
             <DxEditing
                 :allow-adding="true"
                 :allow-updating="true"
                 :allow-deleting="true"
                 :use-icons="true"
-                form="popup"
                 mode="popup">
                 <DxTexts 
-                add-row="Tambah"
+                    add-row="Tambah"
-                edit-row="Ubah"
+                    edit-row="Ubah"
-                delete-row="Hapus"
+                    delete-row="Hapus"
-                confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
+                    confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
-                save-row-changes="Simpan"
+                    save-row-changes="Simpan"
-                cancel-row-changes="Batal"
+                    cancel-row-changes="Batal"></DxTexts>
-                ></DxTexts>
                 <DxForm label-location="top" :col-count="1">
+                  <DxItem dataField="instansiId">
+                    <DxRequiredRule message="Instansi harus dipilih" />
+                  </DxItem>
+                  <DxItem dataField="bidangId">
+                    <DxRequiredRule message="Bidang harus dipilih" />
+                  </DxItem>
                   <DxItem dataField="jabatan">
                     <DxRequiredRule message="Nama Jabatan harus diisi" />
                   </DxItem>
@@ -37,7 +40,7 @@
                     :hide-on-outside-click="true"
                     :show-title="true"
                     :width="400"
-                    :height="400"
+                    :height="450"
                     title="Form Jabatan"
                 />
             </DxEditing>
@@ -61,6 +64,12 @@
             info-text="Hal {0} dari {1} ({2} data)" />
             <DxFilterRow :visible="false" />
             <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
+            <DxColumn data-field="instansiId" caption="Instansi">
+              <DxLookup display-expr="instansi" value-expr="id" :data-source="instansis" :search-enabled="true" />
+            </DxColumn>
+            <DxColumn data-field="bidangId" caption="Bidang">
+              <DxLookup display-expr="bidang" value-expr="id" :data-source="bidangs" :search-enabled="true" />
+            </DxColumn>
             <DxColumn data-field="jabatan" caption="Nama Jabatan"></DxColumn>
             <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
             <DxColumn type="buttons" caption="Aksi">
@@ -68,11 +77,6 @@
               <DxButton name="delete"/>
             </DxColumn>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300"  placeholder="Cari Jabatan..."/>
-            <!--<DxExport
-              :enabled="true"
-              :formats="['xlsx', 'pdf']"
-              :allow-export-selected-data="true"
-            />-->
           </DxDataGrid>
         </div>
       </div>
@@ -93,18 +97,78 @@ import DxDataGrid, {
   DxSearchPanel,
   DxToolbar,
   DxTexts,
-  DxRequiredRule
+  DxRequiredRule,
+  DxLookup
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
-import { Workbook } from 'exceljs';
-import { saveAs } from 'file-saver-es';
-import { exportDataGrid as exportDataGridToExcel } from 'devextreme/excel_exporter';
-import { jsPDF } from 'jspdf';
-import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
 
 const URL = process.env.VUE_APP_ROOT_API+'/jabatan';
+const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
+const URL_bidang = process.env.VUE_APP_ROOT_API+'/bidang';
 
-const customDataSource = new CustomStore({
+const instansiOptions = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+      return fetch(URL_instansi+'?size=1000')
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.data);
+        return {
+          data: response.data
+        };
+      })
+      // .then(data => {
+      //   console.log(JSON.parse(data));
+      // })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_instansi+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.instansi);
+        return {
+          data: response.instansi
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});
+
+const bidangOptions = new CustomStore({
+  key: 'id',
+  
+  load:() => {
+      return fetch(URL_bidang+'?size=1000')
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.data);
+        return {
+          data: response.data
+        };
+      })
+      // .then(data => {
+      //   console.log(JSON.parse(data));
+      // })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  },
+
+  byKey: (key) => {
+      return fetch(URL_bidang+'/' + key)
+      .then((response) => response.json())
+      .then(response => {
+        console.log(response.bidang);
+        return {
+          data: response.bidang
+        };
+      })
+      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+  }
+});
+
+const dataSource = new CustomStore({
   key: 'id',
 
   load: () => {
@@ -154,62 +218,16 @@ export default {
     DxSearchPanel,
     DxToolbar,
     DxTexts,
-    DxRequiredRule
+    DxRequiredRule,
-  },
+    DxLookup
-  methods: {
-    onExporting(e) {
-      e.cancel = true;
-
-      switch (e.format) {
-        case "pdf": {
-          const doc = new jsPDF();
-          exportDataGridToPDF({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-          }).then(() => {
-            doc.save('Jenispengadaan.pdf');
-          });
-        }
-        break;
-
-        case "xlsx": {
-          const workbook = new Workbook();
-          const worksheet = workbook.addWorksheet('Jabatan');
-
-          exportDataGridToExcel({
-            component: e.component,
-            worksheet: worksheet,
-            autoFilterEnabled: true,
-          }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer) => {
-              saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
-            });
-          });
-        }
-        break;
-      }
-      
-    },
-    onCellPrepared(e) {
-      var isEditing = e.row.isEditing, $links = e.cellElement.find(".dx-link");
-    
-      $links.text("");
-      
-      if(isEditing){
-          $links.filter(".dx-link-save").addClass("dx-icon-save").addClass("yellowClass");
-          $links.filter(".dx-link-cancel").addClass("dx-icon-revert").addClass("yellowClass");
-      } else {
-          $links.filter(".dx-link-edit").addClass("dx-icon-edit").addClass("greenClass");
-          $links.filter(".dx-link-delete").addClass("dx-icon-trash").addClass("redClass");
-      }
-    },
   },
   
   data() {
       return {
           //jsonUrl: URL,
-          customDataSource,
+          dataSource,
+          instansis: instansiOptions,
+          bidangs: bidangOptions,
       }
   },
 }

src/views/master-data/jenis-anggaran copy.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/jenis-anggaran.vue

@@ -6,8 +6,8 @@
       <div class="dx-card responsive-paddings">
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
-            :data-source="customDataSource" 
+            :data-source="dataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">
@@ -29,7 +29,7 @@
                   <DxItem dataField="jenisAnggaran">
                     <DxRequiredRule message="Jenis Anggaran harus diisi" />
                   </DxItem>
-                  <DxItem dataField="keterangan" />
+                  <DxItem dataField="keterangan"/>
                 </DxForm>
                 <DxPopup
                     :hide-on-outside-click="true"
@@ -66,7 +66,7 @@
               <DxButton name="delete"/>
             </DxColumn>
             <template #row-cell-template="{ data }">
-              <DxText>{{ data.rowIndex +1 }}</DxText>
+              <DxText>{{ data.rowIndex + data.component.pageIndex() + 1 }}</DxText>
             </template>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Jenis Anggaran..."/>
             <!--<DxExport
@@ -105,7 +105,7 @@ import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
 
 const URL = process.env.VUE_APP_ROOT_API+'/jenisanggaran';
 
-const customDataSource = new CustomStore({
+const dataSource = new CustomStore({
   key: 'id',
 
   load: () => {
@@ -206,7 +206,7 @@ export default {
   data() {
       return {
           //jsonUrl: URL,
-          customDataSource,
+          dataSource,
       }
   },
 }

src/views/master-data/jenis-kontrak copy.vue

@@ -6,7 +6,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/jenis-kontrak.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/jenis-pengadaan.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/lokasi-pengadaan.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/metode-pengadaan.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/metode-penyampaian.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/strategi-pengadaan.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/sumber-dana.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/supply-positioning-matrix.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/master-data/unit-inisiator.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">

src/views/reset-password-form.vue

@@ -6,8 +6,8 @@
         editor-type="dxTextBox"
         :editor-options="{ stylingMode: 'filled', placeholder: 'Email', mode: 'email' }"
       >
-        <dx-required-rule message="Email is required" />
+        <dx-required-rule message="Isi alamat email" />
-        <dx-email-rule message="Email is invalid" />
+        <dx-email-rule message="Alamat email tidak valid" />
         <dx-label :visible="false" />
       </dx-item>
       <dx-button-item>
@@ -23,7 +23,7 @@
       <dx-item>
         <template #default>
           <div class="login-link">
-            Return to <router-link to="/login-form">Sign In</router-link>
+            Kembali <router-link to="/login-form">Log In</router-link>
           </div>
         </template>
       </dx-item>
@@ -31,7 +31,7 @@
         <div>
           <span class="dx-button-text">
               <dx-load-indicator v-if="loading" width="24px" height="24px" :visible="true" />
-              <span v-if="!loading">Reset my password</span>
+              <span v-if="!loading">Reset password</span>
           </span>
         </div>
       </template>

src/views/rks-daftar.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
-            key-expr="ID"
+            key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
             @exporting="onExporting">