From 09cc5f1a68f0e75e516ea251aae173f21d387489 Mon Sep 17 00:00:00 2001 From: Mulia Nasution Date: Wed, 31 May 2023 16:07:56 +0700 Subject: [PATCH] add drp list and popup detail drp --- src/app-navigation.js | 4 + src/router.js | 10 + src/views/drp/drp-list.vue | 249 ++++++++++++++++++++ src/views/drp/drp-penyusunan.vue | 340 ++++++++++++++++++++------- src/views/drp/recomendation-list.vue | 83 +++++-- 5 files changed, 587 insertions(+), 99 deletions(-) create mode 100644 src/views/drp/drp-list.vue diff --git a/src/app-navigation.js b/src/app-navigation.js index 577d115..cdd0a89 100644 --- a/src/app-navigation.js +++ b/src/app-navigation.js @@ -123,6 +123,10 @@ export default [ { text: 'List Rekomendasi', path: '/drp/drp-approval/list-rekomendasi' + }, + { + text: 'List DRP', + path: '/drp/drp-approval/drp-list' } ] }, diff --git a/src/router.js b/src/router.js index 88b8831..e212a22 100644 --- a/src/router.js +++ b/src/router.js @@ -29,6 +29,7 @@ import DrpPengadaan from './views/drp/drp-pengadaan'; import DrpDokumen from './views/drp/drp-dokumen'; import DrpApproval from './views/drp/drp-approval' import RecomendationList from './views/drp/recomendation-list.vue' +import DrpList from './views/drp/drp-list.vue'; /* General */ import auth from "./auth"; @@ -343,6 +344,15 @@ const router = new createRouter({ }, component: RecomendationList }, + { + path: "/drp/drp-approval/drp-list", + name: "list-drp", + meta: { + requiresAuth: true, + layout: defaultLayout + }, + component: DrpList + }, ], history: createWebHashHistory() }); diff --git a/src/views/drp/drp-list.vue b/src/views/drp/drp-list.vue new file mode 100644 index 0000000..ee39161 --- /dev/null +++ b/src/views/drp/drp-list.vue @@ -0,0 +1,249 @@ + + + + + diff --git a/src/views/drp/drp-penyusunan.vue b/src/views/drp/drp-penyusunan.vue index 8802330..a05fc0d 100644 --- a/src/views/drp/drp-penyusunan.vue +++ b/src/views/drp/drp-penyusunan.vue @@ -5,65 +5,199 @@
- + + + + + + + + - - + + - - - - - - - + > + + + + + - - - - - - - + + + + + + + + :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)" + /> - - - + + + - + - + - +
@@ -103,7 +242,6 @@ import DxDataGrid, { DxEditing, DxItem, DxForm, - DxPopup, DxColumn, DxFilterRow, DxPager, @@ -116,7 +254,9 @@ import DxDataGrid, { DxLookup, } from "devextreme-vue/data-grid"; import CustomStore from "devextreme/data/custom_store"; - +import { DxPopup, DxToolbarItem, DxPosition } from "devextreme-vue/popup"; +import { DxScrollView } from "devextreme-vue/scroll-view"; +import { DxSelectBox } from "devextreme-vue/select-box"; const approveStatus = [ { name: "Penyusunan", value: 0 }, @@ -124,57 +264,59 @@ const approveStatus = [ { name: "Rekomendasi Komite", value: 2 }, { name: "Approval DIRUT", value: 3 }, { name: "Approved", value: 4 }, - { name: "Revisi DRP", value: 1 } + { name: "Revisi DRP", value: 1 }, ]; -const URL = process.env.VUE_APP_ROOT_API+'/drp'; +const URL = process.env.VUE_APP_ROOT_API + "/drp"; const dataSource = new CustomStore({ - key: 'id', + key: "id", load: () => { - return fetch(URL+'?size=100') - .then(response => response.json()) - .then(response => { + return fetch(URL + "?size=100") + .then((response) => response.json()) + .then((response) => { return { data: response.data, - totalCount: response.pagination.totalRecords + totalCount: response.pagination.totalRecords, }; }) - .catch(() => { throw new Error('Terdapat kesalahan memuat data'); }); + .catch(() => { + throw new Error("Terdapat kesalahan memuat data"); + }); }, insert: (values) => { - return fetch(URL, { - method: "POST", - body: JSON.stringify(values), - headers: { - 'Content-Type': 'application/json' - } - }); - }, + return fetch(URL, { + method: "POST", + body: JSON.stringify(values), + headers: { + "Content-Type": "application/json", + }, + }); + }, update: (key, values) => { - return fetch(URL + "/" + encodeURIComponent(key), { - method: "PUT", - body: JSON.stringify(values), - headers: { - 'Content-Type': 'application/json' - } - }); + return fetch(URL + "/" + encodeURIComponent(key), { + method: "PUT", + body: JSON.stringify(values), + headers: { + "Content-Type": "application/json", + }, + }); }, remove: (key) => { - return fetch(URL + "/" + encodeURIComponent(key), { - method: "DELETE", - }); + return fetch(URL + "/" + encodeURIComponent(key), { + method: "DELETE", + }); }, }); export default { setup() { return { - approveStatus + approveStatus, }; }, components: { @@ -182,7 +324,6 @@ export default { DxEditing, DxItem, DxForm, - DxPopup, DxColumn, DxFilterRow, DxPager, @@ -193,32 +334,63 @@ export default { DxButton, DxRequiredRule, DxLookup, + DxScrollView, + DxPopup, + DxToolbarItem, + DxPosition, + DxSelectBox, }, methods: { - linkDokumen : function() { - location.href='#/drp/drp-dokumen'; + linkDokumen($event) { + console.log("event: ", $event.row.values); + this.popupVisible = true; + this.popupTitle = "Upload Dokumen Pendukung"; + this.dataDrp = $event.row.values; + this.isShowButton = true; + console.log("drp: ", this.dataDrp); + }, + linkDetail($event) { + this.popupVisible = true; + this.popupTitle = "Lihat Dokumen Pendukung"; + this.dataDrp = $event.row.values.target; + this.isShowButton = false; }, - linkDetail : function() { - location.href='#/drp/drp-dokumen'; - } }, data() { - return { - //jsonUrl: URL, - dataSource, - } + return { + //jsonUrl: URL, + dataSource, + dropdown: "", + popupVisible: false, + popupTitle: "", + dataDrp: "", + isShowButton: true, + saveButtonOptions: { + text: "SIMPAN", + onClick: () => { + this.popupVisible = false; + console.log("simpan"); + }, + }, + closeButtonOptions: { + text: "BATAL", + onClick: () => { + this.popupVisible = false; + }, + }, + }; }, -} +}; diff --git a/src/views/drp/recomendation-list.vue b/src/views/drp/recomendation-list.vue index 8be2df3..f005216 100644 --- a/src/views/drp/recomendation-list.vue +++ b/src/views/drp/recomendation-list.vue @@ -7,7 +7,7 @@
- + + + + + + - - - - @@ -93,7 +106,7 @@ :visible="true" :highlight-case-sensitive="true" :width="300" - placeholder="Cari Penyusunan DRP..." + placeholder="Cari Rekomendasi DRP..." />
@@ -181,17 +194,57 @@ export default { DxTexts, DxButton, }, - methods: { - linkDetail: function () { - location.href = "master-data/strategi-pengadaan"; - }, - }, data() { return { //jsonUrl: URL, dataSource, }; }, + setup() { + const formData = [ + { + id: 1, + nomorRkp: "PRK/2023/1/001", + namaPengadaan: + "Pengadaan Jasa Konsultansi Penyusunan Feasibility Study, Basic Design, dan HPE Proyek Gasifikasi Wilayah Sumatra Utara", + approval: "Approval VP", + status: "Tolak", + tanggalStatus: "11/01/2022", + catatanRekomendasi: "Lorem Insum ", + tanggalRekomendasi: "11/01/2022", + }, + { + id: 2, + nomorRkp: "PRK/2023/1/002", + namaPengadaan: + "Pengadaan Jasa Konsultansi Penyusunan Feasibility Study, Basic Design, dan HPE Proyek Gasifikasi Wilayah Aceh", + approval: "Approval VP", + status: "Setuju", + tanggalStatus: "11/01/2022", + catatanRekomendasi: "Lorem Insum ", + tanggalRekomendasi: "11/01/2022", + }, + { + id: 3, + nomorRkp: "PRK/2023/1/001", + namaPengadaan: + "Pengadaan Jasa Konsultansi Penyusunan Feasibility Study, Basic Design, dan HPE Proyek Gasifikasi Wilayah Aceh", + approval: "Approval VP", + status: "Tolak", + tanggalStatus: "11/01/2022", + catatanRekomendasi: "Lorem Insum ", + tanggalRekomendasi: "11/01/2022", + }, + ]; + return { + formData, + }; + }, + methods: { + linkDetail: function () { + location.href = "master-data/strategi-pengadaan"; + }, + }, };