smartproc-fe/src/views/master-data/jabatan-page.vue

<template>
  <div>
    <h3 class="content-block main-title">Jabatan</h3>
    <p class="content-block">Jabatan</p>
    <div class="content-block">
      <div class="dx-card responsive-paddings">
        <div id="app-container">
          <DxDataGrid ref="currDataGrid"
            :data-source="dataSource" 
            key-expr="id"
            :allow-column-reordering="true"
            :column-auto-width="true">
            <DxRemoteOperations :group-paging="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="instansiId">
                    <DxRequiredRule message="Instansi harus dipilih" />
                  </DxItem>
                  <DxItem dataField="bidangId">
                    <DxRequiredRule message="Bidang harus dipilih" />
                  </DxItem>
                  <DxItem dataField="jabatan">
                    <DxRequiredRule message="Nama Jabatan harus diisi" />
                  </DxItem>
                  <DxItem dataField="keterangan" />
                </DxForm>
                <DxPopup
                    :hide-on-outside-click="true"
                    :show-title="true"
                    :width="400"
                    :height="450"
                    title="Form Jabatan"
                />
            </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>
            <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" />
            <DxColumn data-field="id" caption="No" :width="45"></DxColumn>
            <DxColumn data-field="instansiId" caption="Instansi">
              <DxLookup 
                  :data-source="instansis"
                  display-expr="instansi" 
                  value-expr="id"/>
            </DxColumn>
            <DxColumn data-field="bidangId" caption="Bidang">
              <DxLookup display-expr="bidang" value-expr="id" :data-source="bidangs"/>
            </DxColumn>
            <DxColumn data-field="jabatan" caption="Nama Jabatan"></DxColumn>
            <DxColumn data-field="keterangan" caption="Keterangan"></DxColumn>
            <DxColumn type="buttons" caption="Aksi">
              <DxButton name="edit"/>
              <DxButton name="delete"/>
            </DxColumn>
            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300"  placeholder="Cari Jabatan..."/>
          </DxDataGrid>
        </div>
      </div>
    </div>
  </div>
</template>

<script> 
import DxDataGrid, {
  DxEditing,
  DxItem,
  DxForm,
  DxPopup,
  DxColumn,
  DxFilterRow,
  DxPager,
  DxPaging,
  DxSearchPanel,
  DxToolbar,
  DxTexts,
  DxRequiredRule,
  DxLookup
} from "devextreme-vue/data-grid";
import CustomStore from "devextreme/data/custom_store";

const URL = process.env.VUE_APP_ROOT_API+'/jabatan';
const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
const URL_bidang = process.env.VUE_APP_ROOT_API+'/bidang';

const instansiOptions = new CustomStore({
  key: 'id',
  
  load:() => {
      return fetch(URL_instansi+process.env.VUE_APP_PAGE_SIZE)
      .then((response) => response.json())
      .then(response => {
        console.log(response.data);
        return {
          data: response.data
        };
      })
      // .then(data => {
      //   console.log(JSON.parse(data));
      // })
      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
  },

  byKey: (key) => {
      return fetch(URL_instansi+'/' + key)
      .then((response) => response.json())
      .then(response => {
        console.log(response.instansi);
        return {
          data: response.instansi
        };
      })
      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
  }
});

const bidangOptions = new CustomStore({
  key: 'id',
  
  load:() => {
      return fetch(URL_bidang+process.env.VUE_APP_PAGE_SIZE)
      .then((response) => response.json())
      .then(response => {
        console.log(response.data);
        return {
          data: response.data
        };
      })
      // .then(data => {
      //   console.log(JSON.parse(data));
      // })
      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
  },

  byKey: (key) => {
      return fetch(URL_bidang+'/' + key)
      .then((response) => response.json())
      .then(response => {
        console.log(response.bidang);
        return {
          data: response.bidang
        };
      })
      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
  }
});

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

  load: () => {
      return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
      .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 {
  components: {
    DxDataGrid,
    DxEditing,
    DxItem,
    DxForm,
    DxPopup,
    DxColumn,
    DxFilterRow,
    DxPager,
    DxPaging,
    DxSearchPanel,
    DxToolbar,
    DxTexts,
    DxRequiredRule,
    DxLookup
  },
  
  data() {
      return {
          //jsonUrl: URL,
          dataSource,
          instansis: instansiOptions,
          bidangs: bidangOptions,
      }
  },
}
</script>

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