Initial Smartproc

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

@@ -0,0 +1,247 @@
+<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="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"
+                :use-icons="true"
+                form="popup"
+                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="instansi_id" editor-type="dxSelectBox"/>
+                  <!--<DxItem dataField="instansix_id" :data-source="instansiEditorOptions" editor-type="dxDropDownBox"/>-->
+                  <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="instansi_id" caption="Instansi">
+              <DxLookup display-expr="instansi" value-expr="id" :data-source="instansiEditorOptions" />
+            </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({
+  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'); });
+  }
+});
+
+const customDataSource = 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,
+          customDataSource, 
+          instansiEditorOptions: { 
+            items: instansiOptions, 
+            searchEnabled: true, value: '' 
+          },
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Instansi</h3>
+    <p class="content-block">Instansi</p>
+    <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"
+                :use-icons="true"
+                form="popup"
+                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="instansi">
+                    <DxRequiredRule message="Instansi harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="alamat"/>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Instansi"
+                />
+            </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="instansi" caption="Instansi"></DxColumn>
+            <DxColumn data-field="alamat" caption="Alamat"></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 Instansi..."/>
+            <!--<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
+} 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+'/instansi';
+
+const customDataSource = 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
+  },
+  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('Instansi');
+
+          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,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Jabatan</h3>
+    <p class="content-block">Jabatan</p>
+    <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"
+                :use-icons="true"
+                form="popup"
+                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="jabatan">
+                    <DxRequiredRule message="Nama Jabatan harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Jabatan"
+                />
+            </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="jabatan" caption="Nama Jabatan"></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 Jabatan..."/>
+            <!--<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
+} 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 customDataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL+'?size=100')
+      .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
+  },
+  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,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Jenis Anggaran</h3>
+    <p class="content-block">Jenis Anggaran</p>
+    <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 :paging="true" :filtering="true" :sorting="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="jenisAnggaran" />
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Jenis Anggaran">
+                </DxPopup>
+            </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 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+            <DxFilterRow :visible="false" />
+            <DxColumn cell-template="row-cell-template" caption="No" :width="45"></DxColumn>
+            <DxColumn data-field="jenisAnggaran" caption="Jenis Anggaran"></DxColumn>
+            <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
+            <DxColumn type="buttons" caption="Aksi">
+              <DxButton name="edit"/>
+              <DxButton name="delete"/>
+              <DxButton hint="detail" icon="copy"/>
+            </DxColumn>
+            <template #row-cell-template="{ data }">
+              <DxText>{{ data.rowIndex+1 }}</DxText>
+            </template>
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Jenis Anggaran..."/>
+            <!--<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,
+  DxRemoteOperations
+} 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?=1000';
+
+const customDataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL)
+      .then(response => response.json())
+      .then(response => {
+        return {
+          data: response.data,
+          totalCount: response.pagination.totalRecords
+        };
+      })
+      .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,
+    DxRemoteOperations
+  },
+  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('Jenis Anggaran');
+
+          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();
+    }
+  },
+  
+  data() {
+      return {
+          //jsonUrl: URL,
+          customDataSource,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Jenis Anggaran</h3>
+    <p class="content-block">Jenis Anggaran</p>
+    <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">
+            <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="jenisAnggaran">
+                    <DxRequiredRule message="Jenis Anggaran harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Jenis Anggaran">
+                </DxPopup>
+            </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 cell-template="row-cell-template" caption="No" :width="45"></DxColumn>
+            <DxColumn data-field="jenisAnggaran" caption="Jenis Anggaran"></DxColumn>
+            <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
+            <DxColumn type="buttons" caption="Aksi">
+              <DxButton name="edit"/>
+              <DxButton name="delete"/>
+            </DxColumn>
+            <template #row-cell-template="{ data }">
+              <DxText>{{ data.rowIndex +1 }}</DxText>
+            </template>
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Jenis Anggaran..."/>
+            <!--<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
+} 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 customDataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL+'?size=100')
+      .then(response => response.json())
+      .then(response => {
+        return {
+          data: response.data,
+          totalCount: response.pagination.totalRecords
+        };
+      })
+      .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
+  },
+  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('Jenis Anggaran');
+
+          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();
+    }
+  },
+  
+  data() {
+      return {
+          //jsonUrl: URL,
+          customDataSource,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -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>

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

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Jenis Kontrak</h3>
+    <p class="content-block">Jenis Kontrak</p>
+    <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"
+                :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="jeniskontrak">
+                    <DxRequiredRule message="Jenis kontrak harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Jenis Kontrak"
+                />
+            </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="jeniskontrak" caption="Jenis Kontrak"></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 Jenis Kontrak..."/>
+            <!--<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
+} 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+'/jeniskontrak';
+
+const customDataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL+'?size=100')
+      .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
+  },
+  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('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;
+      }
+      
+    },
+    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,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Jenis Pengadaan</h3>
+    <p class="content-block">Jenis Pengadaan</p>
+    <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"
+                :use-icons="true"
+                form="popup"
+                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="jenisPengadaan">
+                    <DxRequiredRule message="Jenis pengadaan harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Jenis Pengadaan">
+                    <DxPosition
+                      at="center"
+                      my="center"
+                      v-model:of="positionOf"
+                      collision="fit"/>
+                </DxPopup>
+            </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="jenisPengadaan" caption="Jenis Pengadaan"></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 Jenis Pengadaan..."/>
+            <!--<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
+} 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';
+import { DxPosition } from "devextreme-vue/context-menu";
+
+const URL = process.env.VUE_APP_ROOT_API+'/jenispengadaan';
+
+const customDataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL+'?size=100')
+      .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,
+    DxPosition,
+    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('Jenis Pengadaan');
+
+          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,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Lokasi</h3>
+    <p class="content-block">Lokasi</p>
+    <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"
+                :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="lokasi">
+                    <DxRequiredRule message="Lokasi harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Lokasi"
+                />
+            </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="lokasi" caption="Lokasi"></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 Lokasi..."/>
+            <!--<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
+} 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+'/lokasi';
+
+const customDataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL+'?size=100')
+      .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
+  },
+  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('Lokasi');
+
+          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,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Metode Pengadaan</h3>
+    <p class="content-block">Metode Pengadaan</p>
+    <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">
+            <DxColumnChooser :enabled="false"/>
+            <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="metodePengadaan">
+                    <DxRequiredRule message="Metode pengadaan harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Metode Pengadaan"
+                />
+            </DxEditing>
+            <DxToolbar>
+                <DxItem name="groupPanel" />
+                <DxItem name="searchPanel" location="before"/>
+                <DxItem name="addRowButton" show-text="always" location="after">
+                  <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="metodePengadaan" caption="Metode Pengadaan"></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 Metode Pengadaan..."/>
+            <!--<DxExport
+              :enabled="true"
+              :formats="['xlsx', 'pdf']"
+              :allow-export-selected-data="true"
+            />-->
+          </DxDataGrid>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script> 
+import DxDataGrid, {
+  DxColumnChooser,
+  DxEditing,
+  DxItem,
+  DxForm,
+  DxPopup,
+  DxColumn,
+  DxFilterRow,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxToolbar,
+  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+'/metodepengadaan';
+
+const customDataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL+'?size=100')
+      .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,
+    DxColumnChooser,
+    DxEditing,
+    DxItem,
+    DxForm,
+    DxPopup,
+    DxColumn,
+    DxFilterRow,
+    DxPager,
+    DxPaging,
+    DxSearchPanel,
+    DxToolbar,
+    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('Metode Pengadaan');
+
+          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,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Metode Penyampaian</h3>
+    <p class="content-block">Metode Penyampaian</p>
+    <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"
+                :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="metodepenyampaian">
+                    <DxRequiredRule message="Metode penyampaian harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Metode Penyampaian"
+                />
+            </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="metodepenyampaian" caption="Metode Penyampaian"></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 Metode Penyampaian..."/>
+            <!--<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
+} 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+'/metodepenyampaian';
+
+const customDataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL+'?size=100')
+      .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
+  },
+  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('Metode Penyampaian');
+
+          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,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Strategi Pengadaan</h3>
+    <p class="content-block">Strategi Pengadaan</p>
+    <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"
+                :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="strategipengadaan">
+                    <DxRequiredRule message="Strategi pengadaan harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Strategi Pengadaan"
+                />
+            </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="strategipengadaan" caption="Strategi Pengadaan"></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 Strategi Pengadaan..."/>
+            <!--<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
+} 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+'/strategipengadaan';
+
+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 {
+  components: {
+    DxDataGrid,
+    DxEditing,
+    DxItem,
+    DxForm,
+    DxPopup,
+    DxColumn,
+    DxFilterRow,
+    DxPager,
+    DxPaging,
+    DxSearchPanel,
+    DxToolbar,
+    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('Strategi Pengadaan');
+
+          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,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Sumber Dana</h3>
+    <p class="content-block">Sumber Dana</p>
+    <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"
+                :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="sumberDana">
+                    <DxRequiredRule message="Sumber dana harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Sumber Dana"
+                />
+            </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="sumberDana" caption="Sumber Dana"></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 Sumber Dana..."/>
+            <!--<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
+} 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+'/sumberdana';
+
+const customDataSource = new CustomStore({
+  key: 'id',
+
+  load: () => {
+      return fetch(URL+'?size=100')
+      .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
+  },
+  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('Sumber Dana');
+
+          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,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Supply Positioning Matrix</h3>
+    <p class="content-block">Supply Positioning Matrix</p>
+    <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"
+                :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="supplypositioningmatrix">
+                    <DxRequiredRule message="Supply positioning matrix harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Supply Positioning Matrix"
+                />
+            </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="supplypositioningmatrix" caption="Supply Positioning Matrix"></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 Supply Positioning Matrix..."/>
+            <!--<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
+} 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+'/supplypositioningmatrix';
+
+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 {
+  components: {
+    DxDataGrid,
+    DxEditing,
+    DxItem,
+    DxForm,
+    DxPopup,
+    DxColumn,
+    DxFilterRow,
+    DxPager,
+    DxPaging,
+    DxSearchPanel,
+    DxToolbar,
+    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('Supply Positioning Matrix');
+
+          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,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Divisi/Unit Inisiator Pengadaan</h3>
+    <p class="content-block">Divisi/Unit Inisiator Pengadaan</p>
+    <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"
+                :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="unitInisiator">
+                    <DxRequiredRule message="Unit inisiator harus diisi" />
+                  </DxItem>
+                  <DxItem dataField="keterangan" />
+                </DxForm>
+                <DxPopup
+                    :hide-on-outside-click="true"
+                    :show-title="true"
+                    :width="400"
+                    :height="400"
+                    title="Form Divisi/Unit Inisiator Pengadaan"
+                />
+            </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="unitInisiator" caption="Divisi/Unit Inisiator Pengadaan"></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 Divisi/Unit Inisiator Pengadaan..."/>
+            <!--<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
+} 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+'/unitinisiator';
+
+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 {
+  components: {
+    DxDataGrid,
+    DxEditing,
+    DxItem,
+    DxForm,
+    DxPopup,
+    DxColumn,
+    DxFilterRow,
+    DxPager,
+    DxPaging,
+    DxSearchPanel,
+    DxToolbar,
+    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('unitinisiator.pdf');
+          });
+        }
+        break;
+
+        case "xlsx": {
+          const workbook = new Workbook();
+          const worksheet = workbook.addWorksheet('Jenis Pengadaan');
+
+          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,
+      }
+  },
+}
+</script>
+
+<style lang="scss">
+</style>