Initial Smartproc

2023-05-27 07:03:08 +07:00
parent b3feeb7809
commit fc7a97585a
90 changed files with 89395 additions and 0 deletions
@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <h2 class="content-block">Jenis Kontrak</h2>
+    <div class="content-block">
+      <div class="dx-card responsive-paddings">
+        <div id="app-container">
+          <DxDataGrid ref="currDataGrid"
+            :data-source="customDataSource" 
+            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"
+                mode="popup">
+                <DxForm label-location="top" :col-count="1">
+                  <DxItem dataField="kontrak" />
+                  <DxItem dataField="keterangan" />
+                  <DxItem dataField="isactive" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Jenis Kontrak"
+                />
+            </DxEditing>
+            <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" />
+            <DxSelection mode="multiple"/>
+            <DxColumn data-field="id" caption="ID"></DxColumn>
+            <DxColumn data-field="kontrak" caption="Jenis Kontrak"></DxColumn>
+            <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
+            <DxColumn data-field="isactive" caption="Status">
+              <dx-lookup
+                display-expr="name"
+                value-expr="value"
+                :data-source="statuses"
+              />
+            </DxColumn>
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" />
+            <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,
+  DxLookup,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxExport,
+  DxSelection,
+} 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 statuses = [
+  { name: "Aktif", value: 1 },
+  { name: "Tidak Aktif", value: 0 }
+];
+
+const URL = process.env.VUE_APP_ROOT_API+'/jeniskontrak';
+
+const customDataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL)
+      .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 {
+  setup() {
+    return {
+      statuses
+    };
+  },
+  components: {
+    DxDataGrid,
+    DxEditing,
+    DxItem,
+    DxForm,
+    DxPopup,
+    DxColumn,
+    DxFilterRow,
+    DxLookup,
+    DxPager,
+    DxPaging,
+    DxSearchPanel,
+    DxExport,
+    DxSelection,
+  },
+  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('Jeniskontrak.pdf');
+          });
+        }
+        break;
+
+        case "xlsx": {
+          const workbook = new Workbook();
+          const worksheet = workbook.addWorksheet('Jenis Kontrak');
+
+          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;
+      }
+      
+    },
+  },
+  data() {
+      return {
+          //jsonUrl: URL,
+          customDataSource,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>