smartproc-fe/src/views/master-data/jenis-kontrak copy.vue

<template>
  <div>
    <h2 class="content-block">Jenis Kontrak</h2>
    <div class="content-block">
      <div class="dx-card responsive-paddings">
        <div id="app-container">
          <DxDataGrid ref="currDataGrid"
            :data-source="customDataSource" 
            key-expr="id"
            :allow-column-reordering="true"
            :column-auto-width="true"
            @exporting="onExporting">
            <DxRemoteOperations :group-paging="true" />
            <DxEditing
                :allow-adding="true"
                :allow-updating="true"
                :allow-deleting="true"
                mode="popup">
                <DxForm label-location="top" :col-count="1">
                  <DxItem dataField="kontrak" />
                  <DxItem dataField="keterangan" />
                  <DxItem dataField="isactive" />
                </DxForm>
                <DxPopup
                    :hide-on-outside-click="true"
                    :show-title="true"
                    :width="400"
                    :height="400"
                    title="Form Jenis Kontrak"
                />
            </DxEditing>
            <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)" />
            <DxFilterRow :visible="false" />
            <DxSelection mode="multiple"/>
            <DxColumn data-field="id" caption="ID"></DxColumn>
            <DxColumn data-field="kontrak" caption="Jenis Kontrak"></DxColumn>
            <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
            <DxColumn data-field="isactive" caption="Status">
              <dx-lookup
                display-expr="name"
                value-expr="value"
                :data-source="statuses"
              />
            </DxColumn>
            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" />
            <DxExport
              :enabled="true"
              :formats="['xlsx', 'pdf']"
              :allow-export-selected-data="true"
            />
          </DxDataGrid>
        </div>
      </div>
    </div>
  </div>
</template>

<script> 
import DxDataGrid, {
  DxEditing,
  DxItem,
  DxForm,
  DxPopup,
  DxColumn,
  DxFilterRow,
  DxLookup,
  DxPager,
  DxPaging,
  DxSearchPanel,
  DxExport,
  DxSelection,
} from "devextreme-vue/data-grid";
import CustomStore from "devextreme/data/custom_store";
import { Workbook } from 'exceljs';
import { saveAs } from 'file-saver-es';
import { exportDataGrid as exportDataGridToExcel } from 'devextreme/excel_exporter';
import { jsPDF } from 'jspdf';
import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';

const statuses = [
  { name: "Aktif", value: 1 },
  { name: "Tidak Aktif", value: 0 }
];

const URL = process.env.VUE_APP_ROOT_API+'/jeniskontrak';

const customDataSource = new CustomStore({
  key: 'id',

  load: () => {
      return fetch(URL)
      .then((response) => response.json())
      .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': 'application/json'
          }
      });
  },

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

export default {
  setup() {
    return {
      statuses
    };
  },
  components: {
    DxDataGrid,
    DxEditing,
    DxItem,
    DxForm,
    DxPopup,
    DxColumn,
    DxFilterRow,
    DxLookup,
    DxPager,
    DxPaging,
    DxSearchPanel,
    DxExport,
    DxSelection,
  },
  methods: {
    onExporting(e) {
      e.cancel = true;

      switch (e.format) {
        case "pdf": {
          const doc = new jsPDF();
          exportDataGridToPDF({
            jsPDFDocument: doc,
            component: e.component,
            indent: 5,
          }).then(() => {
            doc.save('Jeniskontrak.pdf');
          });
        }
        break;

        case "xlsx": {
          const workbook = new Workbook();
          const worksheet = workbook.addWorksheet('Jenis Kontrak');

          exportDataGridToExcel({
            component: e.component,
            worksheet: worksheet,
            autoFilterEnabled: true,
          }).then(() => {
            workbook.xlsx.writeBuffer().then((buffer) => {
              saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
            });
          });
        }
        break;
      }
      
    },
  },
  data() {
      return {
          //jsonUrl: URL,
          customDataSource,
      }
  },
}
</script>

<style lang="scss">
</style>