From 6db5ac633c0dc2541d55a4689e70bbebd362a06c Mon Sep 17 00:00:00 2001
From: Mulia Nasution <mul14@refactory.id>
Date: Fri, 2 Jun 2023 16:55:23 +0700
Subject: [PATCH] add popup 'tambah' in penyusunan drp table

---
 src/views/drp/drp-penyusunan.vue | 158 +++++++++++++++++++++++--------
 1 file changed, 119 insertions(+), 39 deletions(-)

diff --git a/src/views/drp/drp-penyusunan.vue b/src/views/drp/drp-penyusunan.vue
index a5164f4..f024534 100644
--- a/src/views/drp/drp-penyusunan.vue
+++ b/src/views/drp/drp-penyusunan.vue
@@ -67,9 +67,19 @@
                       key-expr="id"
                       :allow-column-reordering="true"
                       :column-auto-width="true"
+                      @row-inserting="
+                        ($event) => {
+                          $event.data.filename = fileNames.map(
+                            (name) => name.name
+                          );
+                        }
+                      "
                     >
                       <DxEditing
+                        v-if="isShowButton"
                         :allow-adding="true"
+                        :allow-updating="true"
+                        :allow-deleting="true"
                         :use-icons="true"
                         mode="popup"
                       >
@@ -82,8 +92,32 @@
                           cancel-row-changes="Batal"
                         ></DxTexts>
                         <DxForm label-location="top" :col-count="1">
-                          <DxItem dataField="tahun">
-                            <DxRequiredRule message="Tahun harus diisi" />
+                          <DxItem dataField="jenisDokumenId">
+                            <DxRequiredRule
+                              message="Jenis dokumen harus diisi"
+                            />
+                          </DxItem>
+                          <DxItem dataField="filename">
+                            <div class="fileuploader-container">
+                              <DxFileUploader
+                                select-button-text="Browse File"
+                                label-text=""
+                                accept="*"
+                                upload-url=""
+                                upload-mode="instantly"
+                                @value-changed="onChangeUploadFile"
+                              />
+                            </div>
+                          </DxItem>
+                          <DxItem dataField="keterangan">
+                            <DxRequiredRule message="Keterangan harus diisi">
+                              <DxTextArea
+                                v-model:height="height"
+                                :max-length="maxLength"
+                                v-model:value="value"
+                                v-model:auto-resize-enabled="autoResizeEnabled"
+                              />
+                            </DxRequiredRule>
                           </DxItem>
                         </DxForm>
                         <DxPopup
@@ -124,7 +158,13 @@
                         data-field="jenisDokumenId"
                         caption="Jenis Dokumen"
                         alignment="left"
-                      ></DxColumn>
+                      >
+                        <!-- <DxLookup
+                          :data-source="jenisDokumen"
+                          value-expr="ID"
+                          display-expr="Name"
+                        /> -->
+                      </DxColumn>
                       <DxColumn data-field="filename" caption="File">
                       </DxColumn>
                       <DxColumn
@@ -132,16 +172,8 @@
                         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 "
-                        />
+                        <DxButton text="edit" icon="edit" />
+                        <DxButton text="remove" icon="trash" />
                       </DxColumn>
                       <template #row-cell-template="{ data }">
                         {{ data.rowIndex + 1 }}
@@ -155,9 +187,19 @@
                       key-expr="id"
                       :allow-column-reordering="true"
                       :column-auto-width="true"
+                      @row-inserting="
+                        ($event) => {
+                          $event.data.filename = fileNames.map(
+                            (name) => name.name
+                          );
+                        }
+                      "
                     >
                       <DxEditing
+                        v-if="isShowButton"
                         :allow-adding="true"
+                        :allow-updating="true"
+                        :allow-deleting="true"
                         :use-icons="true"
                         mode="popup"
                       >
@@ -170,8 +212,32 @@
                           cancel-row-changes="Batal"
                         ></DxTexts>
                         <DxForm label-location="top" :col-count="1">
-                          <DxItem dataField="tahun">
-                            <DxRequiredRule message="Tahun harus diisi" />
+                          <DxItem dataField="jenisDokumenId">
+                            <DxRequiredRule
+                              message="Jenis dokumen harus diisi"
+                            />
+                          </DxItem>
+                          <DxItem dataField="filename">
+                            <div class="fileuploader-container">
+                              <DxFileUploader
+                                select-button-text="Browse File"
+                                label-text=""
+                                accept="*"
+                                upload-url=""
+                                upload-mode="instantly"
+                                @value-changed="onChangeUploadFile"
+                              />
+                            </div>
+                          </DxItem>
+                          <DxItem dataField="keterangan">
+                            <DxRequiredRule message="Keterangan harus diisi">
+                              <DxTextArea
+                                v-model:height="height"
+                                :max-length="maxLength"
+                                v-model:value="keterangan"
+                                v-model:auto-resize-enabled="autoResizeEnabled"
+                              />
+                            </DxRequiredRule>
                           </DxItem>
                         </DxForm>
                         <DxPopup
@@ -179,7 +245,7 @@
                           :show-title="true"
                           :width="400"
                           :height="400"
-                          title="Form Jenis Pengadaan"
+                          title="Tambah"
                         >
                           <DxPosition
                             at="center"
@@ -214,26 +280,21 @@
                         caption="Jenis Dokumen"
                         alignment="left"
                       >
-                        <DxLookup
+                        <!-- <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
+                        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 "
-                        />
+                        <DxButton text="edit" icon="edit" />
+                        <DxButton text="remove" icon="trash" />
                       </DxColumn>
                       <template #row-cell-template="{ data }">
                         {{ data.rowIndex + 1 }}
@@ -252,12 +313,13 @@
             :allow-column-reordering="true"
             :column-auto-width="true"
           >
-          <DxEditing
-                :allow-adding="true"
-                :allow-updating="true"
-                :allow-deleting="true"
-                :use-icons="true"
-                mode="popup">
+            <DxEditing
+              :allow-adding="true"
+              :allow-updating="true"
+              :allow-deleting="true"
+              :use-icons="true"
+              mode="popup"
+            >
               <DxTexts
                 add-row="Tambah"
                 edit-row="Ubah"
@@ -379,7 +441,7 @@ import DxDataGrid, {
   DxTexts,
   DxButton,
   DxRequiredRule,
-  DxLookup,
+  // DxLookup,
   DxPopup,
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
@@ -390,6 +452,8 @@ import {
 } from "devextreme-vue/popup";
 import { DxScrollView } from "devextreme-vue/scroll-view";
 import { DxSelectBox } from "devextreme-vue/select-box";
+import { DxFileUploader } from "devextreme-vue/file-uploader";
+import DxTextArea from "devextreme-vue/text-area";
 
 const approveStatus = [
   { name: "Penyusunan", value: 0 },
@@ -406,7 +470,7 @@ const dataSource = new CustomStore({
   key: "id",
 
   load: () => {
-    return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
+    return fetch(URL + process.env.VUE_APP_PAGE_SIZE)
       .then((response) => response.json())
       .then((response) => {
         return {
@@ -512,13 +576,15 @@ export default {
     DxTexts,
     DxButton,
     DxRequiredRule,
-    DxLookup,
+    // DxLookup,
     DxPopup,
     DxScrollView,
     Popup,
     DxToolbarItem,
     DxPosition,
     DxSelectBox,
+    DxFileUploader,
+    DxTextArea,
   },
   methods: {
     linkDokumen($event) {
@@ -553,7 +619,13 @@ export default {
       this.isShowButton = true;
       console.log("drp: ", this.dataDrp);
     },
-   
+    onChangeUploadFile($event) {
+      this.fileNames = $event.value;
+      console.log("file", this.fileNames);
+    },
+    logEvent(eventName) {
+      console.log("event", eventName.value);
+    },
   },
   data() {
     return {
@@ -565,6 +637,7 @@ export default {
       isShowButton: true,
       dataDrpDokumen,
       dataDrpDokumenPendukung,
+      fileNames: [],
       saveButtonOptions: {
         text: "Simpan",
         onClick: () => {
@@ -606,4 +679,11 @@ export default {
   z-index: 20;
   width: fit-content;
 }
+.fileuploader-container {
+  border: solid 1px #dbd203;
+  padding: 0;
+}
+.dx-fileuploader-wrapper {
+  padding: 0;
+}
 </style>