From fe5261d27f2e04018205a8d9e0f056f697dba9c2 Mon Sep 17 00:00:00 2001
From: Mulia Nasution <mul14@refactory.id>
Date: Mon, 5 Jun 2023 23:58:02 +0700
Subject: [PATCH] fixing popup tambah

---
 src/views/drp/drp-penyusunan-dokumen.vue | 398 +++++++++++++++++++++++
 src/views/drp/drp-penyusunan.vue         | 351 +-------------------
 2 files changed, 409 insertions(+), 340 deletions(-)
 create mode 100644 src/views/drp/drp-penyusunan-dokumen.vue

diff --git a/src/views/drp/drp-penyusunan-dokumen.vue b/src/views/drp/drp-penyusunan-dokumen.vue
new file mode 100644
index 0000000..82fef4c
--- /dev/null
+++ b/src/views/drp/drp-penyusunan-dokumen.vue
@@ -0,0 +1,398 @@
+<template>
+  <DxScrollView width="100%" height="100%" padding="100px">
+    <div id="textBlock">
+      <div>
+        <div class="dx-fieldset-header">Dokumen RKAP *</div>
+        <DxDataGrid
+          ref="currDataGrid"
+          :data-source="dsDrpDokumen"
+          key-expr="id"
+          :allow-column-reordering="true"
+          :column-auto-width="true"
+          @editor-preparing="onEditorPreparing"
+        >
+          <DxEditing
+            :allow-adding="true"
+            :allow-updating="true"
+            :allow-deleting="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="jenisDokumenId">
+                <DxRequiredRule message="Jenis dokumen harus diisi" />
+              </DxItem>
+              <DxItem dataField="filename">
+                <DxRequiredRule message="File dokumen harus diisi" />
+              </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
+              :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
+              :data-source="jenisDokumen"
+              value-expr="ID"
+              display-expr="Name"
+            />
+          </DxColumn>
+          <DxColumn data-field="filename" caption="File"> </DxColumn>
+          <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
+          <DxColumn type="buttons" caption="Aksi">
+            <DxButton text="edit" icon="edit" />
+            <DxButton text="remove" icon="trash" />
+          </DxColumn>
+          <template #row-cell-template="{ data }">
+            {{ data.rowIndex + 1 }}
+          </template>
+        </DxDataGrid>
+
+        <div class="dx-fieldset-header">Dokumen Pendukung *</div>
+        <DxDataGrid
+          ref="currDataGrid"
+          :data-source="dsDrpDokumenPendukung"
+          key-expr="id"
+          :allow-column-reordering="true"
+          :column-auto-width="true"
+          @editor-preparing="onEditorPreparing"
+        >
+          <DxEditing
+            :allow-adding="true"
+            :allow-updating="true"
+            :allow-deleting="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="jenisDokumenId">
+                <DxRequiredRule message="Jenis dokumen harus diisi" />
+              </DxItem>@editor-preparing="onEditorPreparing"
+              <DxItem dataField="filename">
+                <DxRequiredRule message="File dokumen harus diisi" />
+              </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
+              :hide-on-outside-click="true"
+              :show-title="true"
+              :width="400"
+              :height="400"
+              title="Tambah"
+            >
+              <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="keterangan" caption="Keterangan"></DxColumn>
+          <DxColumn type="buttons" caption="Aksi">
+            <DxButton text="edit" icon="edit" />
+            <DxButton text="remove" icon="trash" />
+          </DxColumn>
+          <template #row-cell-template="{ data }">
+            {{ data.rowIndex + 1 }}
+          </template>
+        </DxDataGrid>
+      </div>
+    </div>
+  </DxScrollView>
+</template>
+<script>
+import CustomStore from "devextreme/data/custom_store";
+import { DxScrollView } from "devextreme-vue/scroll-view";
+import DxTextArea from "devextreme-vue/text-area";
+import {
+  DxDataGrid,
+  DxEditing,
+  DxTexts,
+  DxForm,
+  DxColumn,
+  DxItem,
+  DxRequiredRule,
+  DxToolbar,
+  DxPopup,
+} from "devextreme-vue/data-grid";
+
+const URL = process.env.VUE_APP_ROOT_API + "/drp";
+
+const dsDrpDokumen = new CustomStore({
+  key: "id",
+  load() {
+    return fetch(URL + "/3" + process.env.VUE_APP_PAGE_SIZE)
+      .then((response) => response.json())
+      .then((data) => ({
+        data: data.dataDrpDokumen,
+        totalCount: data.totalCount,
+      }))
+      .catch(() => {
+        throw new Error("Data Loading Error");
+      });
+  },
+
+  insert: (values) => {
+    return fetch(URL + "/upload/dokumen", {
+      method: "POST",
+      body: JSON.stringify(values),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  },
+
+  update: (key, values) => {
+    return fetch(URL + "/upload/dokumen/" + encodeURIComponent(key), {
+      method: "PUT",
+      body: JSON.stringify(values),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  },
+
+  remove: (key) => {
+    return fetch(URL + "/upload/dokumen/" + encodeURIComponent(key), {
+      method: "DELETE",
+    });
+  },
+});
+
+const dsDrpDokumenPendukung = new CustomStore({
+  key: "id",
+  load() {
+    return fetch(URL + "/3" + process.env.VUE_APP_PAGE_SIZE)
+      .then((response) => response.json())
+      .then((data) => ({
+        data: data.dataDrpDokumenPendukung,
+        totalCount: data.totalCount,
+      }))
+      .catch(() => {
+        throw new Error("Data Loading Error");
+      });
+  },
+
+  insert: (values) => {
+    return fetch(URL + "/upload/dokumen", {
+      method: "POST",
+      body: JSON.stringify(values),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  },
+
+  update: (key, values) => {
+    return fetch(URL + "/upload/dokumen/" + encodeURIComponent(key), {
+      method: "PUT",
+      body: JSON.stringify(values),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  },
+
+  remove: (key) => {
+    return fetch(URL + "/upload/dokumen/" + encodeURIComponent(key), {
+      method: "DELETE",
+    });
+  },
+});
+
+export default {
+  setup() {
+    return {};
+  },
+
+  components: {
+    DxScrollView,
+    DxTextArea,
+    DxDataGrid,
+    DxEditing,
+    DxTexts,
+    DxForm,
+    DxColumn,
+    DxItem,
+    DxRequiredRule,
+    DxToolbar,
+    DxPopup,
+  },
+  // created() {
+  //   this.$watch(
+  //     () => this.$route.params,
+  //     () => {
+  //       this.fetchData();
+  //     },
+  //     { immediate: true }
+  //   );
+  // },
+  methods: {
+    // fetchData() {
+    //   return fetch(URL + "/3" + process.env.VUE_APP_PAGE_SIZE)
+    //     .then((response) => response.json())
+    //     .then((data) => {
+    //       return (this.dsDrpDokumen = data.dataDrpDokumen);
+    //     })
+    //     .catch(() => {
+    //       throw new Error("Data Loading Error");
+    //     });
+    // },
+    onChangeUploadFile($event) {
+      console.log("upload file value", $event);
+      this.fileNames = $event.value;
+      console.log("file", this.fileNames);
+      console.log("changes ", this.changes);
+    },
+    formAction($event) {
+      console.log("Form: ", $event);
+    },
+    onFilesUploaded($event) {
+      console.log("file uploaded", $event);
+    },
+
+    onEditorPreparing(e) {
+      /* 
+      same case reference: https://supportcenter.devexpress.com/ticket/details/t963821/how-to-add-fileuploader-in-a-datagrid-popup-edit-insert-form
+      official document: https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Editing/#Customize_Editors
+      */
+
+      // temporary solution
+      if (e.dataField == "filename" && e.parentType === "dataRow") {
+        // const defaultValueChangeHandler = e.editorOptions.onValueChanged;
+        e.editorName = "dxFileUploader"; // Change the editor's type
+        e.editorOptions.uploadMode = "Instantly";
+        e.editorOptions.Multiple = false;
+
+        e.editorOptions.onValueChanged = function (args) {
+          var formData = new FormData();
+
+          formData.append(args.value[0].name, args.value[0]);
+          
+
+          console.log("form data", formData);
+          console.log("args form,", args.value);
+          // Override the default handler
+          // ...
+          // Custom commands go here
+          // ...
+          // If you want to modify the editor value, call the setValue function:
+          // e.setValue(newValue);
+          e.setValue(formData)
+          // Otherwise, call the default handler:
+          // defaultValueChangeHandler(args);
+        };
+      }
+    },
+  },
+  data() {
+    return {
+      dsDrpDokumen,
+      dsDrpDokumenPendukung,
+      formRefName: "tree-view",
+    };
+  },
+};
+</script>
+<style lang="scss">
+.dx-overlay-content .dx-popup-content {
+  height: 517px;
+  min-height: auto;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/src/views/drp/drp-penyusunan.vue b/src/views/drp/drp-penyusunan.vue
index 2e0065d..f9ae004 100644
--- a/src/views/drp/drp-penyusunan.vue
+++ b/src/views/drp/drp-penyusunan.vue
@@ -43,266 +43,11 @@
                 <div class="dx-field">
                   <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
-                          src="images/icons/custom-dropbutton-icon.svg"
-                          class="custom-icon"
-                        /> -->
-                      </template>
-                    </DxSelectBox>
+                    {{ year }}
                   </div>
                 </div>
               </div>
-              <DxScrollView width="100%" height="100%" padding="100px">
-                <div id="textBlock">
-                  <div>
-                    <div class="dx-fieldset-header">Dokumen RKAP *</div>
-                    <DxDataGrid
-                      ref="currDataGrid"
-                      :data-source="dataDrpDokumen"
-                      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"
-                      >
-                        <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="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
-                          :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
-                          :data-source="jenisDokumen"
-                          value-expr="ID"
-                          display-expr="Name"
-                        /> -->
-                      </DxColumn>
-                      <DxColumn data-field="filename" caption="File">
-                      </DxColumn>
-                      <DxColumn
-                        data-field="keterangan"
-                        caption="Keterangan"
-                      ></DxColumn>
-                      <DxColumn type="buttons" caption="Aksi">
-                        <DxButton text="edit" icon="edit" />
-                        <DxButton text="remove" icon="trash" />
-                      </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"
-                      @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"
-                      >
-                        <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="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
-                          :hide-on-outside-click="true"
-                          :show-title="true"
-                          :width="400"
-                          :height="400"
-                          title="Tambah"
-                        >
-                          <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="keterangan"
-                        caption="Keterangan"
-                      ></DxColumn>
-                      <DxColumn type="buttons" caption="Aksi">
-                        <DxButton text="edit" icon="edit" />
-                        <DxButton text="remove" icon="trash" />
-                      </DxColumn>
-                      <template #row-cell-template="{ data }">
-                        {{ data.rowIndex + 1 }}
-                      </template>
-                    </DxDataGrid>
-                  </div>
-                </div>
-              </DxScrollView>
+              <PopupUploadDokumen :id="passId" />
             </template>
           </Popup>
 
@@ -450,10 +195,7 @@ import {
   DxToolbarItem,
   DxPosition,
 } 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";
+import PopupUploadDokumen from './drp-penyusunan-dokumen.vue'
 
 const approveStatus = [
   { name: "Penyusunan", value: 0 },
@@ -510,51 +252,6 @@ 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() {
@@ -578,30 +275,16 @@ export default {
     DxRequiredRule,
     // DxLookup,
     DxPopup,
-    DxScrollView,
     Popup,
     DxToolbarItem,
     DxPosition,
-    DxSelectBox,
-    DxFileUploader,
-    DxTextArea,
+    PopupUploadDokumen,
   },
   methods: {
     linkDokumen($event) {
-      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);
-
+      // console.log($event);
+      this.year = $event.row.data.tahun
+      this.passId = $event.row.key
       this.popupVisible = true;
       this.popupTitle = "Upload Dokumen Pendukung";
       this.isShowButton = true;
@@ -617,30 +300,21 @@ 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 {
       //jsonUrl: URL,
+      passId: '',
       dataSource,
-      dropdown: "",
+      year: "200",
       popupVisible: false,
       popupTitle: "",
       isShowButton: true,
-      dataDrpDokumen,
-      dataDrpDokumenPendukung,
-      fileNames: [],
       saveButtonOptions: {
         text: "Simpan",
-        onClick: () => {
+        onClick: ($event) => {
           this.popupVisible = false;
-          console.log("simpan");
+          console.log("simpan", $event);
         },
       },
       closeButtonOptions: {
@@ -664,9 +338,6 @@ export default {
 .dx-link.dx-icon-movetofolder.dx-link-icon {
   color: #0996c2;
 }
-.dx-scrollable {
-  padding-bottom: 50px;
-}
 .dx-field {
   display: flex;
   flex-direction: column;