smartproc-fe/src/views/drp/drp-pengadaan-dokumen.vue

<template>
  <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';

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>