Use ArrayStore instead of CustomStore

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 CustomStore from "devextreme/data/custom_store";
+import {defineProps, defineEmits, ref, watch} from "vue";
+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,74 +117,21 @@ const cancelRemoveButtonOptions = ref({
   }
 })
 
-function isNotEmpty(value) {
-  return value !== undefined && value !== null && value !== '';
+const addDokumenPendukung = (payload) => {
+  emit('addDokumenPendukung', payload);
+  documents.value.push(payload)
+  isFormOpen.value = false;
+  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.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",
-    });
-  },
+const dataSource = new DataSource({
+  store: new ArrayStore({
+    data: documents.value,
+    key: 'filename',
+  }),
 });
 
+
 watch(() => props.drpId, () => {
   datagrid.value.instance.refresh();
 })