diff --git a/src/views/drp/drp-penyusunan.vue b/src/views/drp/drp-penyusunan.vue index 1fc8fc7..195762b 100644 --- a/src/views/drp/drp-penyusunan.vue +++ b/src/views/drp/drp-penyusunan.vue @@ -2,34 +2,34 @@

Penyusunan DRP

Tahun DRP

+ + + + +
- - - - - + + @@ -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, diff --git a/src/views/drp/drp-upload-dokumen-pendukung.vue b/src/views/drp/drp-upload-dokumen-pendukung.vue index 6ebe27d..37601fe 100644 --- a/src/views/drp/drp-upload-dokumen-pendukung.vue +++ b/src/views/drp/drp-upload-dokumen-pendukung.vue @@ -3,17 +3,26 @@
{{ drpTahun }}
- - + + diff --git a/src/views/drp/drp-upload-dokumen-popup/list-dokumen-pendukung.vue b/src/views/drp/drp-upload-dokumen-popup/list-dokumen-pendukung.vue index 212ee8b..98f465a 100644 --- a/src/views/drp/drp-upload-dokumen-popup/list-dokumen-pendukung.vue +++ b/src/views/drp/drp-upload-dokumen-popup/list-dokumen-pendukung.vue @@ -6,7 +6,9 @@
- + @@ -27,7 +29,7 @@ /> - + @@ -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(); }) diff --git a/src/views/drp/drp-upload-dokumen-popup/list-dokumen-rkap.vue b/src/views/drp/drp-upload-dokumen-popup/list-dokumen-rkap.vue index 161307a..e4266cc 100644 --- a/src/views/drp/drp-upload-dokumen-popup/list-dokumen-rkap.vue +++ b/src/views/drp/drp-upload-dokumen-popup/list-dokumen-rkap.vue @@ -5,8 +5,10 @@
- - + + @@ -27,7 +29,7 @@ /> - + @@ -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, () => { diff --git a/src/views/drp/drp-upload-dokumen-popup/upload-dokumen-pendukung.vue b/src/views/drp/drp-upload-dokumen-popup/upload-dokumen-pendukung.vue index d6dbece..4fee2dc 100644 --- a/src/views/drp/drp-upload-dokumen-popup/upload-dokumen-pendukung.vue +++ b/src/views/drp/drp-upload-dokumen-popup/upload-dokumen-pendukung.vue @@ -1,6 +1,6 @@ @@ -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); - }) } } } diff --git a/src/views/drp/drp-upload-dokumen-popup/upload-dokumen-rkap.vue b/src/views/drp/drp-upload-dokumen-popup/upload-dokumen-rkap.vue index 869db0e..b53d129 100644 --- a/src/views/drp/drp-upload-dokumen-popup/upload-dokumen-rkap.vue +++ b/src/views/drp/drp-upload-dokumen-popup/upload-dokumen-rkap.vue @@ -1,6 +1,6 @@ @@ -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, + }); + + }, } }