smartproc-fe/src/views/drp/recomendation-list.vue

<template>
  <div>
    <h3 class="content-block main-title">Approval DRP</h3>
    <p class="content-block">Approval DRP > List Rekomendasi </p>
    <div class="content-block">
      <div class="dx-card responsive-paddings">
        <div id="app-container">
          <DxDataGrid
            ref="currDataGrid"
            :data-source="formData"
            key-expr="id"
            :allow-column-reordering="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="tahun">
                  <DxRequiredRule message="Tahun harus diisi" />
                </DxItem>
              </DxForm>
              <DxPopup
                :hide-on-outside-click="true"
                :show-title="true"
                :width="400"
                :height="400"
                title="Form Penyusunan DRP"
              >
              </DxPopup>
            </DxEditing>
            <DxToolbar>
              <DxItem name="groupPanel" />
              <DxItem name="searchPanel" location="before" />
              <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
              cell-template="row-cell-template"
              caption="No"
              :width="45"
            ></DxColumn>
            <DxColumn data-field="nomorRkp" caption="Nomor RKP"></DxColumn>
            <DxColumn
              data-field="namaPengadaan"
              caption="Nama Pengadaan"
              :width="252"
            ></DxColumn>
            <DxColumn
              data-field="approval"
              caption="Approval"
            ></DxColumn>
            <DxColumn data-field="status" caption="Status"></DxColumn>
            <DxColumn
              data-field="tanggalStatus"
              caption="Tanggal Status"
            ></DxColumn>
            <DxColumn
              data-field="catatanRekomendasi"
              caption="Catatan Rekomendasi"
            ></DxColumn>
            <DxColumn
              data-field="tanggalRekomendasi"
              caption="Tanggal Rekomendasi"
            ></DxColumn>
            <DxColumn type="buttons" caption="Aksi">
              <DxButton name="edit" />
              <DxButton name="delete" />
              <DxButton
                text="Detail"
                icon="increaseindent"
                hint="Detail"
                :on-click="linkDetail"
              />
            </DxColumn>
            <DxColumn type="adaptive" :width="50">
              <DxButton hint="detail" icon="copy" />
            </DxColumn>
            <template #row-cell-template="{ data }">
              <DxText>{{ data.rowIndex + 1 }}</DxText>
            </template>
            <DxSearchPanel
              :visible="true"
              :highlight-case-sensitive="true"
              :width="300"
              placeholder="Cari Rekomendasi DRP..."
            />
          </DxDataGrid>
        </div>
      </div>
    </div>
  </div>
</template>

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

const URL = process.env.VUE_APP_ROOT_API + "/drp";

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

  load: () => {
    return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
      .then((response) => response.json())
      .then((response) => {
        return {
          data: response.data,
          totalCount: response.pagination.totalRecords,
        };
      })
      .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,
    DxButton,
  },
  data() {
    return {
      //jsonUrl: URL,
      dataSource,
    };
  },
  setup() {
    const formData = [
      {
        id: 1,
        nomorRkp: "PRK/2023/1/001",
        namaPengadaan:
          "Pengadaan Jasa Konsultansi Penyusunan Feasibility Study, Basic Design, dan HPE Proyek Gasifikasi Wilayah  Sumatra Utara",
        approval: "Approval VP",
        status: "Tolak",
        tanggalStatus: "11/01/2022",
        catatanRekomendasi: "Lorem Insum ",
        tanggalRekomendasi: "11/01/2022",
      },
      {
        id: 2,
        nomorRkp: "PRK/2023/1/002",
        namaPengadaan:
          "Pengadaan Jasa Konsultansi Penyusunan Feasibility Study, Basic Design, dan HPE Proyek Gasifikasi Wilayah  Aceh",
        approval: "Approval VP",
        status: "Setuju",
        tanggalStatus: "11/01/2022",
        catatanRekomendasi: "Lorem Insum ",
        tanggalRekomendasi: "11/01/2022",
      },
      {
        id: 3,
        nomorRkp: "PRK/2023/1/001",
        namaPengadaan:
          "Pengadaan Jasa Konsultansi Penyusunan Feasibility Study, Basic Design, dan HPE Proyek Gasifikasi Wilayah  Aceh",
        approval: "Approval VP",
        status: "Tolak",
        tanggalStatus: "11/01/2022",
        catatanRekomendasi: "Lorem Insum ",
        tanggalRekomendasi: "11/01/2022",
      },
    ];
    return {
      formData,
    };
  },
  methods: {
    linkDetail: function () {
      location.href = "master-data/strategi-pengadaan";
    },
  },
};
</script>

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