DRP Pengadaan, Pengadaan Dokumen list

2023-06-04 21:47:32 +07:00
parent e99601c910
commit a44bd3b050
7 changed files with 677 additions and 53 deletions
@@ -1,13 +1,199 @@
 <template>
-  <div>
-    <h2 class="content-block">Drp Pengadaan Dokumen</h2>
-    <div class="content-block">
-      <div class="dx-card responsive-paddings">
-        Put your content here
-      </div>
-    </div>
-  </div>
+  <DxScrollView>
+    <DxDataGrid
+      :data-source="dsPengadaanDokumen"
+      :remote-operations="true"
+      :column-auto-width="true"
+      >
+      <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" editor-type="dxSelectBox">
+            <DxRequiredRule message="Jenis dokumen harus dipilih" />  
+          </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" />
+        </DxForm>
+        <DxPopup
+            :hide-on-outside-click="true"
+            :show-title="true"
+            :width="400"
+            :height="450"
+            title="Upload Dokumen Pendukung Teknis">
+        </DxPopup>
+        <DxColumn
+            data-field="jenisDokumenId"
+            caption="Jenis Dokumen"
+            alignment="left"
+            >
+            <DxLookup
+                display-expr="name"
+                value-expr="id"
+                :data-source="jenisDokumens"
+                :search-enabled="true"
+              />  
+        </DxColumn>
+        <DxColumn data-field="filename" caption="File">
+        </DxColumn>
+        <DxColumn
+            data-field="keterangan"
+            caption="Keterangan"></DxColumn>
+        </DxEditing>
+        <DxToolbar>
+          <DxItem name="searchPanel" location="before"/>
+          <DxItem name="addRowButton" show-text="always" css-class="">
+            <DxTexts add-row="Tambah"></DxTexts>
+          </DxItem>
+        </DxToolbar>
+        <DxPaging :page-size="5" />
+        <DxPager 
+        :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)" />
+    </DxDataGrid>
+  </DxScrollView>
 </template>
+<script>
+import { DxScrollView } from "devextreme-vue/scroll-view";
+import {
+DxDataGrid, DxEditing, DxTexts, DxForm, DxColumn, DxItem, DxRequiredRule, DxToolbar, DxPaging, DxPager, DxPopup
+} from 'devextreme-vue/data-grid';
+import { DxFileUploader } from "devextreme-vue/file-uploader";
+import CustomStore from 'devextreme/data/custom_store';
+import { DxLookup } from 'devextreme-vue/lookup';

-<style lang="scss">
-</style>
+function isNotEmpty(value) {
+  return value !== undefined && value !== null && value !== '';
+}
+
+const jenisDokumens = [
+  { name: "Dokumen RKAP", id: 0 },
+  { name: "Dokumen Pendukung", id: 1 },
+  { name: "Dokumen Pendukung Data Teknis", id: 3 },
+];
+
+const URL = process.env.VUE_APP_ROOT_API+'/drp/pengadaan/3';
+
+const dsPengadaanDokumen = new CustomStore({
+key: 'id',
+  load(loadOptions) {
+    let params = '?';
+    [
+      'skip',
+      'take',
+      'requireTotalCount',
+      'requireGroupCount',
+      'sort',
+      'filter',
+      'totalSummary',
+      'group',
+      'groupSummary',
+    ].forEach((i) => {
+      if (i in loadOptions && isNotEmpty(loadOptions[i])) { params += `${i}=${JSON.stringify(loadOptions[i])}&`; }
+    });
+    params = params.slice(0, -1);
+    return fetch(URL+`${params}`)
+      .then((response) => response.json())
+      .then((data) => (
+        {
+        data: data.data.dataDrpPengadaanDokumen,
+        totalCount: data.pagination.totalRecords,
+        summary: data.pagination.totalRecords,
+        groupCount: data.totalRecords,
+      }))
+      .catch(() => { throw new Error('Data Loading Error'); });
+  },
+
+  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': 'application/json'
+          }
+      });
+  },
+
+  remove: (key) => {
+      return fetch(URL + "/" + encodeURIComponent(key), {
+          method: "DELETE",
+      });
+  },
+});
+
+export default {
+  setup() {
+    return {
+      jenisDokumens
+    };
+  },
+
+  components: {
+      DxDataGrid,
+      DxEditing,
+      DxTexts,
+      DxForm,
+      DxColumn, 
+      DxItem, 
+      DxRequiredRule, 
+      DxScrollView,
+      DxToolbar, 
+      DxPaging, 
+      DxPager,
+      DxPopup,
+      DxFileUploader,
+      DxLookup
+  },
+  
+  methods: {
+    onChangeUploadFile($event) {
+      this.fileNames = $event.value;
+      console.log("file", this.fileNames);
+    },
+  },
+
+  data() {
+    return {
+      dsPengadaanDokumen,
+    };
+  },
+};
+
+  </script>