smartproc-fe/src/views/drp/drp-upload-dokumen-popup/list-dokumen-pendukung.vue

<template>
  <h4>Dokumen Pendukung <span style="color: red;">*</span></h4>

  <div style="display: flex; justify-content: end;">
    <DxButton styling-mode="contained" type="default" @click="addDokumen" icon="plus" text="Tambah" />
  </div>

  <DxPopup v-model:visible="isFormOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Dokumen Pendukung" :width="600" :height="450">
    <PopupUploadDokumenPendukung :drpId="drpId" :drpTahun="drpTahun" :dokumen-data="dokumenData" @close="isFormOpen = false" />
  </DxPopup>

  <DxPopup v-model:visible="isRemoveConfirmationDialogOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Hapus Dokumen Pendukung?" :width="400" :height="300">
    <template #content>
      Hapus Dokumen Pendukung?
    </template>
    <DxToolbarItem
      widget="dxButton"
      :options="removeDokumenButtonOptions"
      location="after"
      toolbar="bottom"
    />
    <DxToolbarItem
      widget="dxButton"
      :options="cancelRemoveButtonOptions"
      location="after"
      toolbar="bottom"
    />
  </DxPopup>

  <DxDataGrid ref="datagrid" :data-source="dataSource" :remote-operations="true" :column-auto-width="true">
    <DxColumn data-field="jenisDokumenId" caption="Jenis Dokumen" alignment="left">
      <DxLookup :data-source="jenisDokumens" display-expr="name" value-expr="id" :search-enabled="true" />
    </DxColumn>
    <DxColumn data-field="filename" caption="File" />
    <DxColumn data-field="keterangan" caption="Keterangan" />
    <DxColumn type="buttons" caption="Aksi" :fixed="true">
      <DxDataButton text="Edit" hint="Edit Dokumen Pendukung" icon="edit" @click="editDokumen" />
      <DxDataButton text="Delete" hint="Hapus Dokumen Pendukung" icon="trash" @click="removeDokumen" />
    </DxColumn>
    <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>
</template>

<script setup>
import http from "@/utils/http";
import jenisDokumens from "@/store/jenis-dokumen";
import {
  DxColumn,
  DxDataGrid,
  DxItem,
  DxLookup,
  DxPager,
  DxPaging,
  DxTexts,
  DxToolbar,
  DxButton as DxDataButton
} from "devextreme-vue/data-grid";
import PopupUploadDokumenPendukung from "@/views/drp/drp-upload-dokumen-popup/upload-dokumen-pendukung.vue";
import DxPopup, {DxToolbarItem} from "devextreme-vue/popup";
import DxButton from "devextreme-vue/button";
import {defineProps, ref} from "vue";
import CustomStore from "devextreme/data/custom_store";

const props = defineProps(['drpId', 'drpTahun']);

const URL = process.env.VUE_APP_ROOT_API + '/drp';
const URL_UPLOAD = process.env.VUE_APP_ROOT_API + '/drp/upload/dokumen';

const datagrid = ref(null)
const isFormOpen = ref(false);
const isRemoveConfirmationDialogOpen = ref(false);
const dokumenData = ref();

const addDokumen = () => {
  isFormOpen.value = !isFormOpen.value;
}

const editDokumen = (e) => {
  dokumenData.value = e.row.data;
  isFormOpen.value = !isFormOpen.value;
}

const removeDokumenButtonOptions = ref({
  text: 'Hapus',
  async onClick() {
    await http.delete(URL_UPLOAD, {
      filename: dokumenData.value.filename
    })
    isRemoveConfirmationDialogOpen.value = false
  }
})

const removeDokumen = (e) => {
  isRemoveConfirmationDialogOpen.value = true;
  dokumenData.value = e.row.data;
  datagrid.value.instance.refresh();
};

const cancelRemoveButtonOptions = ref({
  text: 'Batal',
  onClick() {
    isRemoveConfirmationDialogOpen.value = false;
  }
})

function isNotEmpty(value) {
  return value !== undefined && value !== null && value !== '';
}

const dataSource = 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}/${props.drpId}/${params}`, {
      headers: {
        'Authorization': `Bearer ${window.localStorage.getItem('access_token')}`,
      }
    })
      .then((response) => response.json())
      .then((data) => {
        return {
          data: data.dataDrpDokumenPendukung,
          totalCount: 100,
          summary: 100,
          groupCount: 100,
        }
      })
      .catch(() => {
        throw new Error('Data Loading Error');
      });
  },

  insert: (values) => {
    return fetch(`${URL}/${props.drpId}`, {
      method: "POST",
      body: JSON.stringify(values),
      headers: {
        'Content-Type': 'application/json'
      }
    });
  },

  update: (key, values) => {
    return fetch(`${URL}/${props.drpId}` + "/" + encodeURIComponent(key), {
      method: "PUT",
      body: JSON.stringify(values),
      headers: {
        'Content-Type': 'application/json'
      }
    });
  },

  remove: (key) => {
    return fetch(`${URL}/${props.drpId}` + "/" + encodeURIComponent(key), {
      method: "DELETE",
    });
  },
});

</script>

<style scoped>
a.dx-link.dx-icon-edit.dx-link-icon {
    color: orange !important;
}

a.dx-link.dx-icon-trash.dx-link-icon {
    color: red !important;
}
</style>