add popup 'lihat dokumen pendukung' and 'upload dokumen pendukung'

src/views/drp/drp-penyusunan.vue

@@ -5,7 +5,7 @@
     <div class="content-block">
       <div class="dx-card responsive-paddings">
         <div id="app-container">
-          <DxPopup
+          <Popup
             v-model:visible="popupVisible"
             :drag-enabled="false"
             :hide-on-outside-click="true"
@@ -41,94 +41,209 @@
             <template #content>
               <div class="dx-fieldset">
                 <div class="dx-field">
-                  <div class="dx-field-label">Image as the icon</div>
+                  <div class="dx-field-label">Tahun DRP</div>
                   <div class="dx-field-value">
                     <DxSelectBox
                       :data-source="dropdown"
                       drop-down-button-template="imageIcon"
                     >
                       <template #imageIcon="{}">
-                        <img
+                        <!-- <img
                           src="images/icons/custom-dropbutton-icon.svg"
                           class="custom-icon"
-                        />
+                        /> -->
                       </template>
                     </DxSelectBox>
                   </div>
                 </div>
               </div>
-              <DxScrollView width="100%" height="100%">
+              <DxScrollView width="100%" height="100%" padding="100px">
-                <div class="label">Options</div>
+                <div id="textBlock">
-                <DxDataGrid
+                  <div>
-                  ref="currDataGrid"
+                    <div class="dx-fieldset-header">Dokumen RKAP *</div>
-                  :data-source="dataSource"
+                    <DxDataGrid
-                  key-expr="id"
+                      ref="currDataGrid"
-                  :allow-column-reordering="true"
+                      :data-source="dataDrpDokumen"
-                  :column-auto-width="true"
+                      key-expr="id"
-                >
+                      :allow-column-reordering="true"
-                  <DxEditing
+                      :column-auto-width="true"
-                    :allow-adding="true"
+                    >
-                    :use-icons="true"
+                      <DxEditing
-                    mode="popup"
+                        :allow-adding="true"
-                  >
+                        :use-icons="true"
-                    <DxTexts
+                        mode="popup"
-                      add-row="Tambah"
+                      >
-                      edit-row="Ubah"
+                        <DxTexts
-                      delete-row="Hapus"
+                          add-row="Tambah"
-                      confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
+                          edit-row="Ubah"
-                      save-row-changes="Simpan"
+                          delete-row="Hapus"
-                      cancel-row-changes="Batal"
+                          confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
-                    ></DxTexts>
+                          save-row-changes="Simpan"
-                    <DxForm label-location="top" :col-count="1">
+                          cancel-row-changes="Batal"
-                      <DxItem dataField="tahun">
+                        ></DxTexts>
-                        <DxRequiredRule message="Tahun harus diisi" />
+                        <DxForm label-location="top" :col-count="1">
-                      </DxItem>
+                          <DxItem dataField="tahun">
-                    </DxForm>
+                            <DxRequiredRule message="Tahun harus diisi" />
-                  </DxEditing>
+                          </DxItem>
-                  <DxToolbar>
+                        </DxForm>
-                    <DxItem name="groupPanel" />
+                        <DxPopup
-                    <DxItem name="searchPanel" location="before" />
+                          :hide-on-outside-click="true"
-                    <DxItem name="addRowButton" show-text="always" css-class="">
+                          :show-title="true"
-                      <DxTexts add-row="Tambah"></DxTexts>
+                          :width="400"
-                    </DxItem>
+                          :height="400"
-                    <DxItem name="exportButton" />
+                          title="Form Jenis Pengadaan"
-                    <DxItem name="columnChooserButton" />
+                        >
-                  </DxToolbar>
+                          <DxPosition
-                  <DxFilterRow :visible="false" />
+                            at="center"
-                  <DxColumn
+                            my="center"
-                    cell-template="row-cell-template"
+                            v-model:of="positionOf"
-                    caption="No"
+                            collision="fit"
-                    :width="45"
+                          />
-                  ></DxColumn>
+                        </DxPopup>
-                  <DxColumn
+                      </DxEditing>
-                    data-field=""
+                      <DxToolbar>
-                    caption="Jenis Dokumen"
+                        <DxItem name="groupPanel" />
-                    alignment="left"
+                        <DxItem name="searchPanel" location="before" />
-                  ></DxColumn>
+                        <DxItem
-                  <DxColumn data-field="" caption="File"> </DxColumn>
+                          name="addRowButton"
-                  <DxColumn data-field="" caption="Keterangan"></DxColumn>
+                          show-text="always"
-                  <DxColumn type="buttons" caption="Aksi">
+                          css-class=""
-                    <DxButton
+                        >
-                      text="Dokumen"
+                          <DxTexts add-row="Tambah"></DxTexts>
-                      icon="edit"
+                        </DxItem>
-                      hint="Dokumen Pendukung DRP"
+                        <DxItem name="exportButton" />
-                      on-click=""
+                        <DxItem name="columnChooserButton" />
-                    />
+                      </DxToolbar>
-                    <DxButton
+                      <DxFilterRow :visible="false" />
-                      text="Detil"
+                      <DxColumn
-                      icon="trash"
+                        cell-template="row-cell-template"
-                      hint="Detil/Konten DRP "
+                        caption="No"
-                      on-click=""
+                        :width="45"
-                    />
+                      ></DxColumn>
-                  </DxColumn>
+                      <DxColumn
-                  <template #row-cell-template="{ data }">
+                        data-field="jenisDokumenId"
-                    {{ data.rowIndex + 1 }}
+                        caption="Jenis Dokumen"
-                  </template>
+                        alignment="left"
-                </DxDataGrid>
+                      ></DxColumn>
-                <div id="textBlock"> </div>
+                      <DxColumn data-field="filename" caption="File">
+                      </DxColumn>
+                      <DxColumn
+                        data-field="keterangan"
+                        caption="Keterangan"
+                      ></DxColumn>
+                      <DxColumn type="buttons" caption="Aksi">
+                        <DxButton
+                          text="Dokumen"
+                          icon="edit"
+                          hint="Dokumen Pendukung DRP"
+                        />
+                        <DxButton
+                          text="Detil"
+                          icon="trash"
+                          hint="Detil/Konten DRP "
+                        />
+                      </DxColumn>
+                      <template #row-cell-template="{ data }">
+                        {{ data.rowIndex + 1 }}
+                      </template>
+                    </DxDataGrid>
+
+                    <div class="dx-fieldset-header">Dokumen Pendukung *</div>
+                    <DxDataGrid
+                      ref="currDataGrid"
+                      :data-source="dataDrpDokumenPendukung"
+                      key-expr="id"
+                      :allow-column-reordering="true"
+                      :column-auto-width="true"
+                    >
+                      <DxEditing
+                        :allow-adding="true"
+                        :use-icons="true"
+                        mode="popup"
+                      >
+                        <DxTexts
+                          add-row="Tambah"
+                          edit-row="Ubah"
+                          delete-row="Hapus"
+                          confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
+                          save-row-changes="Simpan"
+                          cancel-row-changes="Batal"
+                        ></DxTexts>
+                        <DxForm label-location="top" :col-count="1">
+                          <DxItem dataField="tahun">
+                            <DxRequiredRule message="Tahun harus diisi" />
+                          </DxItem>
+                        </DxForm>
+                        <DxPopup
+                          :hide-on-outside-click="true"
+                          :show-title="true"
+                          :width="400"
+                          :height="400"
+                          title="Form Jenis Pengadaan"
+                        >
+                          <DxPosition
+                            at="center"
+                            my="center"
+                            v-model:of="positionOf"
+                            collision="fit"
+                          />
+                        </DxPopup>
+                      </DxEditing>
+                      <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>
+                      <DxFilterRow :visible="false" />
+                      <DxColumn
+                        cell-template="row-cell-template"
+                        caption="No"
+                        :width="45"
+                      ></DxColumn>
+
+                      <DxColumn
+                        data-field="jenisDokumenId"
+                        caption="Jenis Dokumen"
+                        alignment="left"
+                      >
+                        <DxLookup
+                          display-expr="name"
+                          value-expr="value"
+                          :data-source="jenisDokumen"
+                        />
+                      </DxColumn>
+                      <DxColumn data-field="filename" caption="File">
+                      </DxColumn>
+                      <DxColumn data-field="" caption="Keterangan"></DxColumn>
+                      <DxColumn type="buttons" caption="Aksi">
+                        <DxButton
+                          text="Dokumen"
+                          icon="edit"
+                          hint="Dokumen Pendukung DRP"
+                        />
+                        <DxButton
+                          text="Detil"
+                          icon="trash"
+                          hint="Detil/Konten DRP "
+                        />
+                      </DxColumn>
+                      <template #row-cell-template="{ data }">
+                        {{ data.rowIndex + 1 }}
+                      </template>
+                    </DxDataGrid>
+                  </div>
+                </div>
               </DxScrollView>
             </template>
-          </DxPopup>
+          </Popup>
 
           <DxDataGrid
             ref="currDataGrid"
@@ -151,6 +266,20 @@
                   <DxRequiredRule message="Tahun harus diisi" />
                 </DxItem>
               </DxForm>
+              <DxPopup
+                :hide-on-outside-click="true"
+                :show-title="true"
+                :width="400"
+                :height="400"
+                title="Form Jenis Pengadaan"
+              >
+                <DxPosition
+                  at="center"
+                  my="center"
+                  v-model:of="positionOf"
+                  collision="fit"
+                />
+              </DxPopup>
             </DxEditing>
             <DxToolbar>
               <DxItem name="groupPanel" />
@@ -185,14 +314,8 @@
             <DxColumn
               data-field="approveStatus"
               caption="Status Approve"
-              editor-type="dxCheckBox"
+              alignment="left"
-            >
+            ></DxColumn>
-              <DxLookup
-                display-expr="name"
-                value-expr="value"
-                :data-source="approveStatus"
-              />
-            </DxColumn>
             <DxColumn
               data-field="approveDate"
               caption="Tanggal Approve"
@@ -252,9 +375,14 @@ import DxDataGrid, {
   DxButton,
   DxRequiredRule,
   DxLookup,
+  DxPopup,
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
-import { DxPopup, DxToolbarItem, DxPosition } from "devextreme-vue/popup";
+import {
+  DxPopup as Popup,
+  DxToolbarItem,
+  DxPosition,
+} from "devextreme-vue/popup";
 import { DxScrollView } from "devextreme-vue/scroll-view";
 import { DxSelectBox } from "devextreme-vue/select-box";
 
@@ -313,6 +441,52 @@ const dataSource = new CustomStore({
   },
 });
 
+// const dataDrpDokumen = new CustomStore({
+//   key: "id",
+//   load: (key) => {
+//     return fetch(URL + "/" + encodeURIComponent(key) + "?size=100")
+//       .then((response) => response.json())
+//       .then((response) => {
+//         console.log("res", response.dataDrpDokumen);
+//         console.log("key: ", key);
+//         return {
+//           data: response.dataDrpDokumen,
+//         };
+//       })
+//       .catch(() => {
+//         throw new Error("Terdapat kesalahan memuat data");
+//       });
+//   },
+
+//   insert: (values) => {
+//     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": "applicatoin/json",
+//       },
+//     });
+//   },
+
+//   remove: (key) => {
+//     return fetch(URL + "/" + encodeURIComponent(key), {
+//       method: "DELETE",
+//     });
+//   },
+// });
+let dataDrpDokumen = [];
+let dataDrpDokumenPendukung = [];
+
 export default {
   setup() {
     return {
@@ -334,25 +508,36 @@ export default {
     DxButton,
     DxRequiredRule,
     DxLookup,
-    DxScrollView,
     DxPopup,
+    DxScrollView,
+    Popup,
     DxToolbarItem,
     DxPosition,
     DxSelectBox,
   },
   methods: {
     linkDokumen($event) {
-      console.log("event: ", $event.row.values);
+      fetch(URL + "/" + $event.row.data.id)
+        .then((response) => response.json())
+        .then((response) => {
+          return (
+            (this.dataDrpDokumen = response.dataDrpDokumen),
+            (this.dataDrpDokumenPendukung = response.dataDrpDokumenPendukung)
+          );
+        })
+        .catch(() => {
+          throw new Error("Terdapat kesalahan memuat data");
+        });
+      // dataDrpDokumen.key($event.row.data.id)
+      // dataDrpDokumen.load($event.row.data.id);
+
       this.popupVisible = true;
       this.popupTitle = "Upload Dokumen Pendukung";
-      this.dataDrp = $event.row.values;
       this.isShowButton = true;
-      console.log("drp: ", this.dataDrp);
     },
-    linkDetail($event) {
+    linkDetail() {
       this.popupVisible = true;
       this.popupTitle = "Lihat Dokumen Pendukung";
-      this.dataDrp = $event.row.values.target;
       this.isShowButton = false;
     },
   },
@@ -363,17 +548,18 @@ export default {
       dropdown: "",
       popupVisible: false,
       popupTitle: "",
-      dataDrp: "",
       isShowButton: true,
+      dataDrpDokumen,
+      dataDrpDokumenPendukung,
       saveButtonOptions: {
-        text: "SIMPAN",
+        text: "Simpan",
         onClick: () => {
           this.popupVisible = false;
           console.log("simpan");
         },
       },
       closeButtonOptions: {
-        text: "BATAL",
+        text: "Batal",
         onClick: () => {
           this.popupVisible = false;
         },
@@ -393,4 +579,17 @@ export default {
 .dx-link.dx-icon-movetofolder.dx-link-icon {
   color: #0996c2;
 }
+.dx-scrollable {
+  padding-bottom: 50px;
+}
+.dx-field {
+  display: flex;
+  flex-direction: column;
+}
+.dx-fieldset-header {
+  position: relative;
+  margin-bottom: -30px;
+  z-index: 20;
+  width: fit-content;
+}
 </style>