Use ArrayStore instead of CustomStore

src/views/drp/drp-penyusunan.vue

@@ -2,10 +2,7 @@
   <div>
     <h3 class="content-block main-title">Penyusunan DRP</h3>
     <p class="content-block">Tahun DRP</p>
-    <div class="content-block">
+    <Popup
-      <div class="dx-card responsive-paddings">
-        <div id="app-container">
-          <DxPopup
       v-model:visible="isPopupUploadDokumenPendukung"
       :drag-enabled="false"
       :hide-on-outside-click="true"
@@ -15,7 +12,7 @@
       title="Upload Dokumen Pendukung"
     >
       <template #content>
-              <PopUpUploadDokumenPendukung :drpId="selectedDrpId" :drpTahun="selectedDrpTahun"/>
+        <PopUpUploadDokumenPendukung :drpId="selectedDrpId" :drpTahun="selectedDrpTahun" @addDokumenRKAP="addDokumenRKAP" @addDokumenPendukung="addDokumenPendukung" />
       </template>
       <DxToolbarItem
         widget="dxButton"
@@ -29,7 +26,10 @@
         location="after"
         toolbar="bottom"
       />
-          </DxPopup>
+    </Popup>
+    <div class="content-block">
+      <div class="dx-card responsive-paddings">
+        <div id="app-container">
           <DxDataGrid
             ref="currDataGrid"
             :data-source="dataSource"
@@ -56,6 +56,13 @@
                   <DxRequiredRule message="Tahun harus diisi" />
                 </DxItem>
               </DxForm>
+              <DxPopup
+                :hide-on-outside-click="true"
+                :show-title="true"
+                :width="400"
+                :height="400"
+                title="Form Penyusunan DRP">
+              </DxPopup>
             </DxEditing>
             <DxToolbar>
               <DxItem name="groupPanel" />
@@ -150,10 +157,11 @@ import DxDataGrid, {
   DxTexts,
   DxButton,
   DxRequiredRule,
+  DxPopup,
   // DxLookup,
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
-import DxPopup, { DxToolbarItem } from 'devextreme-vue/popup';
+import Popup, { DxToolbarItem } from 'devextreme-vue/popup';
 
 import PopUpUploadDokumenPendukung from './drp-upload-dokumen-pendukung.vue'
 
@@ -212,9 +220,6 @@ const dataSource = new CustomStore({
   },
 });
 
-let dataDrpDokumen = [];
-let dataDrpDokumenPendukung = [];
-
 export default {
   setup() {
     return {
@@ -238,6 +243,7 @@ export default {
     // DxLookup,
     DxPopup,
     DxToolbarItem,
+    Popup,
     PopUpUploadDokumenPendukung,
   },
   methods: {
@@ -260,14 +266,20 @@ export default {
     onShowing() {
       //
     },
+    addDokumenRKAP(payload) {
+      this.dataDrpDokumen.push(payload)
+    },
+    addDokumenPendukung(payload) {
+      this.dataDrpDokumenPendukung.push(payload)
+    },
   },
   data() {
     return {
       //jsonUrl: URL,
       dataSource,
       dropdown: "",
-      dataDrpDokumen,
+      dataDrpDokumen: [],
-      dataDrpDokumenPendukung,
+      dataDrpDokumenPendukung: [],
       isPopupUploadDokumenPendukung: false,
       selectedDrpId: null,
       selectedDrpTahun: null,

src/views/drp/drp-upload-dokumen-pendukung.vue

@@ -3,17 +3,26 @@
   <div>{{ drpTahun }}</div>
 
   <DxScrollView>
-    <ListDokumenRKAP :drpId="props.drpId" :drpTahun="props.drpTahun" />
+    <ListDokumenRKAP :drpId="props.drpId" :drpTahun="props.drpTahun" @addDokumenRKAP="addDokumenRKAP" />
-    <ListDokumenPendukung :drpId="props.drpId" :drpTahun="props.drpTahun" />
+    <ListDokumenPendukung :drpId="props.drpId" :drpTahun="props.drpTahun" @addDokumenPendukung="addDokumenPendukung" />
   </DxScrollView>
 </template>
 
 <script setup>
-import {defineProps} from 'vue'
+import {defineProps, defineEmits} from 'vue'
 import {DxScrollView} from "devextreme-vue/scroll-view";
 
 import ListDokumenRKAP from './drp-upload-dokumen-popup/list-dokumen-rkap.vue';
 import ListDokumenPendukung from './drp-upload-dokumen-popup/list-dokumen-pendukung.vue';
 
 const props = defineProps(['drpId', 'drpTahun']);
+const emit = defineEmits(['addDokumenRKAP', 'addDokumenPendukung']);
+
+const addDokumenRKAP = (payload) => {
+  emit('addDokumenRKAP', payload)
+}
+
+const addDokumenPendukung = (payload) => {
+  emit('addDokumenPendukung', payload)
+}
 </script>

src/views/drp/drp-upload-dokumen-popup/list-dokumen-pendukung.vue

@@ -6,7 +6,9 @@
   </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" />
+    <template #content>
+      <PopupUploadDokumenPendukung v-if="isFormOpen" :drpId="drpId" :drpTahun="drpTahun" :dokumen-data="dokumenData" @close="isFormOpen = false" @addDokumenPendukung="addDokumenPendukung" />
+    </template>
   </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">
@@ -27,7 +29,7 @@
     />
   </DxPopup>
 
-  <DxDataGrid ref="datagrid" :data-source="dataSource" :remote-operations="true" :column-auto-width="true">
+  <DxDataGrid ref="datagrid" :data-source="dataSource" key-expr="filename" :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>
@@ -65,18 +67,22 @@ import {
 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, watch} from "vue";
+import {defineProps, defineEmits, ref, watch} from "vue";
-import CustomStore from "devextreme/data/custom_store";
+import ArrayStore from "devextreme/data/array_store";
+import DataSource from "devextreme/data/data_source";
 
 const props = defineProps(['drpId', 'drpTahun']);
+const emit = defineEmits(['addDokumenPendukung']);
 
-const URL = process.env.VUE_APP_ROOT_API + '/drp';
+
+// 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 documents = ref([])
 
 const addDokumen = () => {
   isFormOpen.value = !isFormOpen.value;
@@ -93,14 +99,15 @@ const removeDokumenButtonOptions = ref({
     await http.delete(URL_UPLOAD, {
       filename: dokumenData.value.filename
     })
-    isRemoveConfirmationDialogOpen.value = false
+    isRemoveConfirmationDialogOpen.value = false;
+    documents.value.splice(dokumenData.value.id, 1);
+    datagrid.value.instance.refresh();
   }
 })
 
 const removeDokumen = (e) => {
   isRemoveConfirmationDialogOpen.value = true;
   dokumenData.value = e.row.data;
-  datagrid.value.instance.refresh();
 };
 
 const cancelRemoveButtonOptions = ref({
@@ -110,73 +117,20 @@ const cancelRemoveButtonOptions = ref({
   }
 })
 
-function isNotEmpty(value) {
+const addDokumenPendukung = (payload) => {
-  return value !== undefined && value !== null && value !== '';
+  emit('addDokumenPendukung', payload);
+  documents.value.push(payload)
+  isFormOpen.value = false;
+  datagrid.value.instance.refresh();
 }
 
-const dataSource = new CustomStore({
+const dataSource = new DataSource({
-  key: 'id',
+  store: new ArrayStore({
-  load(loadOptions) {
+    data: documents.value,
-    let params = '?';
+    key: 'filename',
-    [
+  }),
-      '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: data.dataDrpDokumenPendukung.length,
-        }
-      })
-      .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",
-    });
-  },
-});
 
 watch(() => props.drpId, () => {
   datagrid.value.instance.refresh();

src/views/drp/drp-upload-dokumen-popup/list-dokumen-rkap.vue

@@ -5,8 +5,10 @@
     <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 RKAP" :width="600" :height="450">
+  <DxPopup v-model:visible="isFormOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Dokumen RKAP" :width="600" :height="450" @showing="onShowing" @hidiing="onHiding">
-    <PopupUploadDokumenRkap :drpId="drpId" :drpTahun="drpTahun" :dokumenData="dokumenData" @close="isFormOpen = false" />
+    <template #content>
+      <PopupUploadDokumenRkap v-if="isFormOpen" :drpId="drpId" :drpTahun="drpTahun" :dokumenData="dokumenData" @close="isFormOpen = false" @addDokumenRKAP="addDokumenRKAP" />
+    </template>
   </DxPopup>
 
   <DxPopup v-model:visible="isRemoveConfirmationDialogOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Hapus Dokumen RKAP?" :width="400" :height="300">
@@ -27,7 +29,7 @@
     />
   </DxPopup>
 
-  <DxDataGrid ref="datagrid" :data-source="dataSource" :remote-operations="true" :column-auto-width="true">
+  <DxDataGrid ref="datagrid" :data-source="dataSource" :remote-operations="false" :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>
@@ -65,18 +67,21 @@ import {
 import PopupUploadDokumenRkap from "@/views/drp/drp-upload-dokumen-popup/upload-dokumen-rkap.vue";
 import DxPopup, {DxToolbarItem} from "devextreme-vue/popup";
 import DxButton from "devextreme-vue/button";
-import {defineProps, ref, watch} from "vue";
+import {defineEmits, defineProps, ref, watch} from "vue";
-import CustomStore from "devextreme/data/custom_store";
+import ArrayStore from "devextreme/data/array_store";
+import DataSource from "devextreme/data/data_source";
 
 const props = defineProps(['drpId', 'drpTahun']);
+const emit = defineEmits(['addDokumenRKAP']);
 
-const URL = process.env.VUE_APP_ROOT_API + '/drp';
+// 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 isRemoveConfirmationDialogOpen = ref(false);
 const isFormOpen = ref(false);
 const dokumenData = ref();
+const documents = ref([])
 
 const addDokumen = () => {
   isFormOpen.value = !isFormOpen.value;
@@ -93,14 +98,15 @@ const removeDokumenButtonOptions = ref({
     await http.delete(URL_UPLOAD, {
       filename: dokumenData.value.filename
     })
-    isRemoveConfirmationDialogOpen.value = false
+    isRemoveConfirmationDialogOpen.value = false;
+    documents.value.splice(dokumenData.value.id, 1);
+    datagrid.value.instance.refresh();
   }
 })
 
 const removeDokumen = (e) => {
   isRemoveConfirmationDialogOpen.value = true;
   dokumenData.value = e.row.data;
-  datagrid.value.instance.refresh();
 };
 
 
@@ -111,72 +117,29 @@ const cancelRemoveButtonOptions = ref({
   }
 })
 
-function isNotEmpty(value) {
+const onShowing = () => {
-  return value !== undefined && value !== null && value !== '';
+  dokumenData.value = null;
+  datagrid.value.instance.refresh();
 }
 
-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.dataDrpDokumen,
-          totalCount: data.dataDrpDokumen.length,
-        }
-      })
-      .catch(() => {
-        throw new Error('Data Loading Error');
-      });
-  },
 
-  insert: (values) => {
+const onHiding = () => {
-    return fetch(`${URL}/${props.drpId}`, {
+  dokumenData.value = null;
-      method: "POST",
+  datagrid.value.instance.refresh();
-      body: JSON.stringify(values),
-      headers: {
-        'Content-Type': 'application/json'
 }
-    });
-  },
 
-  update: (key, values) => {
+const addDokumenRKAP = (payload) => {
-    return fetch(`${URL}/${props.drpId}` + "/" + encodeURIComponent(key), {
+  emit('addDokumenRKAP', payload);
-      method: "PUT",
+  documents.value.push(payload)
-      body: JSON.stringify(values),
+  isFormOpen.value = false;
-      headers: {
+  datagrid.value.instance.refresh();
-        'Content-Type': 'application/json'
 }
-    });
-  },
 
-  remove: (key) => {
+const dataSource = new DataSource({
-    return fetch(`${URL}/${props.drpId}` + "/" + encodeURIComponent(key), {
+  store: new ArrayStore({
-      method: "DELETE",
+    data: documents.value,
-    });
+    key: 'filename',
-  },
+  }),
 });
 
 watch(() => props.drpId, () => {

src/views/drp/drp-upload-dokumen-popup/upload-dokumen-pendukung.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <form ref="popupUploadDokumenPendukungRef" method="post" :action="uploadUrl" enctype="multipart/form-data" @submit.prevent="handleSubmit">
+    <form ref="popupUploadDokumenPendukungRef" method="post" :action="uploadUrl" enctype="multipart/form-data">
       <input type="hidden" name="drpId" :value="drpId" />
       <input type="hidden" name="jenisDokumenId" :value="0" />
       <div class="dx-field">
@@ -10,7 +10,7 @@
         <div class="dx-field-label">Keterangan</div>
         <DxTextBox name="keterangan" value="" class="dx-field-value" />
       </div>
-      <DxButton class="button" text="Simpan" type="success" :use-submit-behavior="true" />
+      <DxButton class="button" text="Simpan" type="success" :use-submit-behavior="false" @click="addDocument" />
     </form>
   </div>
 </template>
@@ -20,9 +20,8 @@ import jenisDokumens from '@/store/jenis-dokumen.js';
 import { DxTextBox } from 'devextreme-vue/text-box';
 import { DxButton } from 'devextreme-vue/button';
 import { DxFileUploader } from 'devextreme-vue/file-uploader';
-import http from "@/utils/http";
 
-const URL = process.env.VUE_APP_ROOT_API + '/drp';
+// const URL = process.env.VUE_APP_ROOT_API + '/drp';
 const URL_UPLOAD = process.env.VUE_APP_ROOT_API + '/drp/upload/dokumen';
 
 export default {
@@ -43,44 +42,17 @@ export default {
     }
   },
 
+  mounted() {
+    //
+  },
+
   methods: {
     handleSubmit(e) {
       e.preventDefault();
-      this.uploadFile();
+      this.addDocument();
-      this.saveDocument();
     },
 
-    saveDocument() {
+    addDocument() {
-      const form = this.$refs.popupUploadDokumenPendukungRef;
-
-      const filename = form.file.files[0].name;
-
-      const data = {
-        id: this.$props.drpId,
-        approveStatus: 'Penyusunan',
-        'isApprove': false,
-        "dataDrpDokumen": [
-          {
-            "jenisDokumenId": form.jenisDokumenId.value,
-            "filename": filename,
-            "keterangan": form.keterangan.value,
-          },
-        ]
-      };
-
-      http.post(URL, data)
-        .then((res) => res.json())
-        .then((json) => {
-          console.log(json)
-
-          this.$emit('close');
-        })
-        .catch(e => {
-          console.error(e);
-        })
-    },
-
-    uploadFile() {
       const form = this.$refs.popupUploadDokumenPendukungRef;
 
       const formData = new FormData();
@@ -92,17 +64,13 @@ export default {
       formData.append('keterangan', form.keterangan.value);
       formData.append('file', file);
 
-      console.log(this.uploadUrl, 'this.uploadUrl')
+      this.$emit('addDokumenPendukung', {
+        filename: file.name,
+        jenisDokumenId: form.jenisDokumenId.value,
+        keterangan: form.keterangan.value,
+        formData,
+      });
 
-      http.post(this.uploadUrl, formData)
-        .then((res) => res.json())
-        .then((json) => {
-          console.log(json)
-        })
-        .catch(e => {
-          alert('fail')
-          console.error(e);
-        })
     }
   }
 }

src/views/drp/drp-upload-dokumen-popup/upload-dokumen-rkap.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <form ref="popupUploadDokumenRkapRef" method="post" :action="uploadUrl" enctype="multipart/form-data" @submit.prevent="handleSubmit">
+    <form ref="popupUploadDokumenRkapRef" method="post" :action="uploadUrl" enctype="multipart/form-data">
       <input type="hidden" name="drpId" :value="drpId" />
       <input type="hidden" name="jenisDokumenId" :value="1" />
       <div class="dx-field">
@@ -10,7 +10,7 @@
         <div class="dx-field-label">Keterangan</div>
         <DxTextBox name="keterangan" value="" class="dx-field-value" />
       </div>
-      <DxButton class="button" text="Simpan" type="success" :use-submit-behavior="true" />
+      <DxButton class="button" text="Simpan" type="success" :use-submit-behavior="false" @click="addDocument" />
     </form>
   </div>
 </template>
@@ -20,9 +20,8 @@ import jenisDokumens from '@/store/jenis-dokumen.js';
 import { DxTextBox } from 'devextreme-vue/text-box';
 import { DxButton } from 'devextreme-vue/button';
 import { DxFileUploader } from 'devextreme-vue/file-uploader';
-import http from "@/utils/http";
 
-const URL = process.env.VUE_APP_ROOT_API + '/drp';
+// const URL = process.env.VUE_APP_ROOT_API + '/drp';
 const URL_UPLOAD = process.env.VUE_APP_ROOT_API + '/drp/upload/dokumen';
 
 export default {
@@ -50,41 +49,10 @@ export default {
   methods: {
     handleSubmit(e) {
       e.preventDefault();
-      this.uploadFile();
+      this.addDocument();
-      this.saveDocument();
     },
 
-    saveDocument() {
+    addDocument() {
-      const form = this.$refs.popupUploadDokumenRkapRef;
-
-      const filename = form.file.files[0].name;
-
-      const data = {
-        id: this.$props.drpId,
-        approveStatus: 'Penyusunan',
-        'isApprove': false,
-        "dataDrpDokumen": [
-          {
-            "jenisDokumenId": form.jenisDokumenId.value,
-            "filename": filename,
-            "keterangan": form.keterangan.value,
-          },
-        ]
-      };
-
-      http.post(URL, data)
-        .then((res) => res.json())
-        .then((json) => {
-          console.log(json, 'success');
-
-          this.$emit('close');
-        })
-        .catch(e => {
-          console.error(e);
-        })
-    },
-
-    uploadFile() {
       const form = this.$refs.popupUploadDokumenRkapRef;
 
       const formData = new FormData();
@@ -96,16 +64,14 @@ export default {
       formData.append('keterangan', form.keterangan.value);
       formData.append('file', file);
 
-      http.post(this.uploadUrl, formData)
+      this.$emit('addDokumenRKAP', {
-        .then((res) => res.json())
+        filename: file.name,
-        .then((json) => {
+        jenisDokumenId: form.jenisDokumenId.value,
-          console.log(json)
+        keterangan: form.keterangan.value,
-        })
+        formData,
-        .catch(e => {
+      });
-          alert('fail')
+
-          console.error(e);
+    },
-        })
-    }
   }
 }
 </script>