Add DRP document

2023-06-06 04:49:08 +07:00
parent adb490bacc
commit 89577aa56e
8 changed files with 742 additions and 362 deletions
--- a/src/views/drp/drp-upload-dokumen-popup/list-dokumen-pendukung.vue
+++ b/src/views/drp/drp-upload-dokumen-popup/list-dokumen-pendukung.vue
@@ -0,0 +1,193 @@
+<template>
+  <h4>Dokumen Pendukung <span style="color: red;">*</span></h4>
+
+  <div style="display: flex; justify-content: end;">
+    <DxButton styling-mode="contained" type="default" @click="addDokumen" icon="plus" text="Tambah" />
+  </div>
+
+  <DxPopup v-model:visible="isFormOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Dokumen Pendukung" :width="600" :height="450">
+    <PopupUploadDokumenPendukung :drpId="drpId" :drpTahun="drpTahun" :dokumen-data="dokumenData" @close="isFormOpen = false" />
+  </DxPopup>
+
+  <DxPopup v-model:visible="isRemoveConfirmationDialogOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Hapus Dokumen Pendukung?" :width="400" :height="300">
+    <template #content>
+      Hapus Dokumen Pendukung?
+    </template>
+    <DxToolbarItem
+      widget="dxButton"
+      :options="removeDokumenButtonOptions"
+      location="after"
+      toolbar="bottom"
+    />
+    <DxToolbarItem
+      widget="dxButton"
+      :options="cancelRemoveButtonOptions"
+      location="after"
+      toolbar="bottom"
+    />
+  </DxPopup>
+
+  <DxDataGrid ref="datagrid" :data-source="dataSource" :remote-operations="true" :column-auto-width="true">
+    <DxColumn data-field="jenisDokumenId" caption="Jenis Dokumen" alignment="left">
+      <DxLookup :data-source="jenisDokumens" display-expr="name" value-expr="id" :search-enabled="true" />
+    </DxColumn>
+    <DxColumn data-field="filename" caption="File" />
+    <DxColumn data-field="keterangan" caption="Keterangan" />
+    <DxColumn type="buttons" caption="Aksi" :fixed="true">
+      <DxDataButton text="Edit" hint="Edit Dokumen Pendukung" icon="edit" @click="editDokumen" />
+      <DxDataButton text="Delete" hint="Hapus Dokumen Pendukung" icon="trash" @click="removeDokumen" />
+    </DxColumn>
+    <DxToolbar>
+      <DxItem name="searchPanel" location="before" />
+      <DxItem name="addRowButton" show-text="always" css-class="">
+        <DxTexts add-row="Tambah"></DxTexts>
+      </DxItem>
+    </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)" />
+  </DxDataGrid>
+</template>
+
+<script setup>
+import http from "@/utils/http";
+import jenisDokumens from "@/store/jenis-dokumen";
+import {
+  DxColumn,
+  DxDataGrid,
+  DxItem,
+  DxLookup,
+  DxPager,
+  DxPaging,
+  DxTexts,
+  DxToolbar,
+  DxButton as DxDataButton
+} from "devextreme-vue/data-grid";
+import PopupUploadDokumenPendukung from "@/views/drp/drp-upload-dokumen-popup/upload-dokumen-pendukung.vue";
+import DxPopup, {DxToolbarItem} from "devextreme-vue/popup";
+import DxButton from "devextreme-vue/button";
+import {defineProps, ref} from "vue";
+import CustomStore from "devextreme/data/custom_store";
+
+const props = defineProps(['drpId', 'drpTahun']);
+
+const URL = process.env.VUE_APP_ROOT_API + '/drp';
+const URL_UPLOAD = process.env.VUE_APP_ROOT_API + '/drp/upload/dokumen';
+
+const datagrid = ref(null)
+const isFormOpen = ref(false);
+const isRemoveConfirmationDialogOpen = ref(false);
+const dokumenData = ref();
+
+const addDokumen = () => {
+  isFormOpen.value = !isFormOpen.value;
+}
+
+const editDokumen = (e) => {
+  dokumenData.value = e.row.data;
+  isFormOpen.value = !isFormOpen.value;
+}
+
+const removeDokumenButtonOptions = ref({
+  text: 'Hapus',
+  async onClick() {
+    await http.delete(URL_UPLOAD, {
+      filename: dokumenData.value.filename
+    })
+    isRemoveConfirmationDialogOpen.value = false
+  }
+})
+
+const removeDokumen = (e) => {
+  isRemoveConfirmationDialogOpen.value = true;
+  dokumenData.value = e.row.data;
+  datagrid.value.instance.refresh();
+};
+
+const cancelRemoveButtonOptions = ref({
+  text: 'Batal',
+  onClick() {
+    isRemoveConfirmationDialogOpen.value = false;
+  }
+})
+
+function isNotEmpty(value) {
+  return value !== undefined && value !== null && value !== '';
+}
+
+const dataSource = new CustomStore({
+  key: 'id',
+  load(loadOptions) {
+    let params = '?';
+    [
+      'skip',
+      'take',
+      'requireTotalCount',
+      'requireGroupCount',
+      'sort',
+      'filter',
+      'totalSummary',
+      'group',
+      'groupSummary',
+    ].forEach((i) => {
+      if (i in loadOptions && isNotEmpty(loadOptions[i])) {
+        params += `${i}=${JSON.stringify(loadOptions[i])}&`;
+      }
+    });
+    params = params.slice(0, -1);
+    return fetch(`${URL}/${props.drpId}/${params}`, {
+      headers: {
+        'Authorization': `Bearer ${window.localStorage.getItem('access_token')}`,
+      }
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        return {
+          data: data.dataDrpDokumenPendukung,
+          totalCount: 100,
+          summary: 100,
+          groupCount: 100,
+        }
+      })
+      .catch(() => {
+        throw new Error('Data Loading Error');
+      });
+  },
+
+  insert: (values) => {
+    return fetch(`${URL}/${props.drpId}`, {
+      method: "POST",
+      body: JSON.stringify(values),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+  },
+
+  update: (key, values) => {
+    return fetch(`${URL}/${props.drpId}` + "/" + encodeURIComponent(key), {
+      method: "PUT",
+      body: JSON.stringify(values),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+  },
+
+  remove: (key) => {
+    return fetch(`${URL}/${props.drpId}` + "/" + encodeURIComponent(key), {
+      method: "DELETE",
+    });
+  },
+});
+
+</script>
+
+<style scoped>
+a.dx-link.dx-icon-edit.dx-link-icon {
+    color: orange !important;
+}
+
+a.dx-link.dx-icon-trash.dx-link-icon {
+    color: red !important;
+}
+</style>