AndriDiki/smartproc-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use ArrayStore instead of CustomStore

Browse Source
This commit is contained in:
Mulia Nasution 2023-06-06 12:23:03 +07:00
parent b0fc56e3f0
commit 45f530e12b
6 changed files with 140 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/drp/drp-penyusunan.vue
View File

@ -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">
<div class="dx-card responsive-paddings">
<div id="app-container">
<DxPopup
<Popup
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,
dataDrpDokumenPendukung,
dataDrpDokumen: [],
dataDrpDokumenPendukung: [],
isPopupUploadDokumenPendukung: false,
selectedDrpId: null,
selectedDrpTahun: null,

15
src/views/drp/drp-upload-dokumen-pendukung.vue
View File

@ -3,17 +3,26 @@
<div>{{ drpTahun }}</div>
<DxScrollView>
<ListDokumenRKAP :drpId="props.drpId" :drpTahun="props.drpTahun" />
<ListDokumenPendukung :drpId="props.drpId" :drpTahun="props.drpTahun" />
<ListDokumenRKAP :drpId="props.drpId" :drpTahun="props.drpTahun" @addDokumenRKAP="addDokumenRKAP" />
<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>

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

@ -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();
})

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

@ -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">
<PopupUploadDokumenRkap :drpId="drpId" :drpTahun="drpTahun" :dokumenData="dokumenData" @close="isFormOpen = false" />
<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">
<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 CustomStore from "devextreme/data/custom_store";
import {defineEmits, defineProps, 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(['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) {
return value !== undefined && value !== null && value !== '';
const onShowing = () => {
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) => {
return fetch(`${URL}/${props.drpId}`, {
method: "POST",
body: JSON.stringify(values),
headers: {
'Content-Type': 'application/json'
}
});
},
const onHiding = () => {
dokumenData.value = null;
datagrid.value.instance.refresh();
}
update: (key, values) => {
return fetch(`${URL}/${props.drpId}` + "/" + encodeURIComponent(key), {
method: "PUT",
body: JSON.stringify(values),
headers: {
'Content-Type': 'application/json'
}
});
},
const addDokumenRKAP = (payload) => {
emit('addDokumenRKAP', payload);
documents.value.push(payload)
isFormOpen.value = false;
datagrid.value.instance.refresh();
}
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, () => {

62
src/views/drp/drp-upload-dokumen-popup/upload-dokumen-pendukung.vue
View File

@ -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.saveDocument();
this.addDocument();
},
saveDocument() {
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() {
addDocument() {
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);
})
}
}
}

60
src/views/drp/drp-upload-dokumen-popup/upload-dokumen-rkap.vue
View File

@ -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.saveDocument();
this.addDocument();
},
saveDocument() {
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() {
addDocument() {
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)
.then((res) => res.json())
.then((json) => {
console.log(json)
})
.catch(e => {
alert('fail')
console.error(e);
})
}
this.$emit('addDokumenRKAP', {
filename: file.name,
jenisDokumenId: form.jenisDokumenId.value,
keterangan: form.keterangan.value,
formData,
});
},
}
}
</script>