Update core smartproc

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" 
-            key-expr="ID"
+            :data-source="dataSource" 
+            key-expr="id"
             :allow-column-reordering="true"
-            :column-auto-width="true"
-            @exporting="onExporting">
+            :column-auto-width="true">
             <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..."/>
-            <!--<DxExport
-              :enabled="true"
-              :formats="['xlsx', 'pdf']"
-              :allow-export-selected-data="true"
-            />-->
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Manajemen Role..."/>
           </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
-  },
-  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");
-      }
-    },
+    DxTexts,
+    DxRequiredRule,
   },
   
   data() {
       return {
           //jsonUrl: URL,
-          customDataSource,
+          dataSource,
       }
   },
 }