WIP

src/views/drp/drp-penyusunan.vue

@@ -2,6 +2,81 @@
   <div>
     <h3 class="content-block main-title">Penyusunan DRP</h3>
     <p class="content-block">Penyusunan DRP</p>
+    <Popup v-model:visible="isPopupUploadDokumenPendukungOpen" title="Upload Dokumen Pendukung">
+      <DxScrollView
+      >
+      <DxTextBox
+        :disabled="true"
+        :value="popupUploadDokumenPendukungData.tahun"
+        :width="100"
+      />
+      <div style="display: flex; justify-content: space-between;">
+        <h3>Dokumen RKAP *</h3>
+        <button @click="openTambahDokumenRKAP">Tambah</button>
+      </div>
+      <DxDataGrid>
+        <DxToolbar>
+          <DxItem name="groupPanel" />
+          <DxItem name="searchPanel" location="before" />
+          <DxItem name="addRowButton" show-text="always" css-class="">
+            <DxTexts add-row="Tambah"></DxTexts>
+          </DxItem>
+          <DxItem name="exportButton" />
+          <DxItem name="columnChooserButton" />
+        </DxToolbar>
+      </DxDataGrid>
+
+      <div style="display: flex; justify-content: space-between;">
+        <h3>Dokumen Pendukung *</h3>
+        <button @click="openTambahDokumenPendukung">Tambah</button>
+      </div>
+      <DxDataGrid>
+        <DxToolbar>
+          <DxItem name="groupPanel" />
+          <DxItem name="searchPanel" location="before" />
+          <DxItem name="addRowButton" show-text="always" css-class="">
+            <DxTexts add-row="Tambah"></DxTexts>
+          </DxItem>
+          <DxItem name="exportButton" />
+          <DxItem name="columnChooserButton" />
+        </DxToolbar>
+      </DxDataGrid>
+
+      </DxScrollView>
+    </Popup>
+
+
+    <Popup v-model:visible="isPopupTambahDokumenPendukungOpen">
+      <DxScrollView>
+        <div>
+          <label>Jenis Dokumen</label>
+          <select name="" id="">
+            <option value="">1</option>
+            <option value="">2</option>
+          </select>
+        </div>
+
+        <div>
+          <label>File/Dokumen</label>
+          <input type="file" />
+        </div>
+
+        <div>
+          <label>Keterangan</label>
+          <select name="" id="">
+            <option value="">1</option>
+            <option value="">2</option>
+          </select>
+        </div>
+      </DxScrollView>
+    </Popup>
+
+
+
+
+
+
+
     <div class="content-block">
       <div class="dx-card responsive-paddings">
         <div id="app-container">
@@ -203,7 +278,7 @@
                 text="Dokumen"
                 icon="attach"
                 hint="Dokumen Pendukung DRP"
-                :on-click="linkDokumen"
+                :on-click="openPopupUploadDokumenPendukung"
               />
               <DxButton
                 text="Detil"
@@ -246,6 +321,7 @@ import DxDataGrid, {
   DxFilterRow,
   DxPager,
   DxPaging,
+  DxPopup,
   DxSearchPanel,
   DxToolbar,
   DxTexts,
@@ -254,9 +330,11 @@ import DxDataGrid, {
   DxLookup,
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
-import { DxPopup, DxToolbarItem, DxPosition } from "devextreme-vue/popup";
+import DxTextBox from 'devextreme-vue/text-box';
+import { DxPopup as Popup, DxToolbarItem, DxPosition } from "devextreme-vue/popup";
 import { DxScrollView } from "devextreme-vue/scroll-view";
 import { DxSelectBox } from "devextreme-vue/select-box";
+// import { DxGroupItem } from 'devextreme-vue/form';
 
 const approveStatus = [
   { name: "Penyusunan", value: 0 },
@@ -339,8 +417,18 @@ export default {
     DxToolbarItem,
     DxPosition,
     DxSelectBox,
+    Popup,
+    DxTextBox,
+    // DxGroupItem,
   },
   methods: {
+    openPopupUploadDokumenPendukung($event) {
+      this.isPopupUploadDokumenPendukungOpen = true;
+      this.popupUploadDokumenPendukungData = $event.row.data;
+    },
+    openTambahDokumenPendukung() {
+      this.isPopupTambahDokumenPendukungOpen = true;
+    },
     linkDokumen($event) {
       console.log("event: ", $event.row.values);
       this.popupVisible = true;
@@ -362,6 +450,9 @@ export default {
   data() {
     return {
       //jsonUrl: URL,
+      isPopupUploadDokumenPendukungOpen: false,
+      popupUploadDokumenPendukungData: {},
+      isPopupTambahDokumenPendukungOpen: false,
       dataSource,
       dropdown: "",
       popupVisible: false,
@@ -396,4 +487,12 @@ export default {
 .dx-link.dx-icon-movetofolder.dx-link-icon {
   color: #0996c2;
 }
+
+#scrollview {
+  height: auto;
+  position: absolute;
+  top: 0;
+  bottom: 300px;
+  padding: 20px;
+}
 </style>

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

@@ -0,0 +1,19 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+
+  mounted() {
+
+  }
+}
+</script>