From a44bd3b050fd5337b7ebc81ef14acb802c714e67 Mon Sep 17 00:00:00 2001
From: Titan Hadiyan <titanhadiyan@gmail.com>
Date: Sun, 4 Jun 2023 21:47:32 +0700
Subject: [PATCH] DRP Pengadaan, Pengadaan Dokumen list

---
 package.json                            |   2 +-
 src/views/drp/drp-cetak.vue             | 200 ++++++++++++++++++++++-
 src/views/drp/drp-pengadaan-dokumen.vue | 206 ++++++++++++++++++++++--
 src/views/drp/drp-pengadaan.vue         | 108 +++++++++----
 src/views/drp/drp-penyusunan.vue        |   2 +-
 src/views/drp/drp-revisi.vue            | 201 ++++++++++++++++++++++-
 vue.config.js                           |  11 +-
 7 files changed, 677 insertions(+), 53 deletions(-)

diff --git a/package.json b/package.json
index 9de1833..cdbd3e2 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vue",
+  "name": "smartproc-plngg",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/src/views/drp/drp-cetak.vue b/src/views/drp/drp-cetak.vue
index 91411c7..fa4d785 100644
--- a/src/views/drp/drp-cetak.vue
+++ b/src/views/drp/drp-cetak.vue
@@ -1,13 +1,205 @@
 <template>
   <div>
-    <h2 class="content-block">Drp Cetak</h2>
+    <h3 class="content-block main-title">Cetak DRP</h3>
+    <p class="content-block">Cetak DRP</p>
     <div class="content-block">
       <div class="dx-card responsive-paddings">
-        Put your content here
+        <div id="app-container">
+          <DxDataGrid
+            ref="currDataGrid"
+            :data-source="dataSource"
+            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 Cetak 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="tahun" caption="Tahun DRP" alignment="left"></DxColumn>
+            <DxColumn data-field="isPrint" caption="Status"></DxColumn>
+            <DxColumn data-field="printDate" caption="Tanggal Cetak"></DxColumn>
+            <DxColumn type="buttons" caption="Aksi" :fixed="true">
+              <DxButton
+                text="Dokumen"
+                icon="print"
+                hint="Cetak Dokumen DRP"
+                :on-click="linkDokumen"
+              >
+              </DxButton>
+              <DxButton
+                text="Dokumen"
+                icon="file"
+                hint="List Rekomendasi"
+                :on-click="linkDokumen"
+              >
+              </DxButton>
+              <DxButton
+                text="Dokumen"
+                icon="print"
+                hint="Cetak Dokumen DRP"
+                :on-click="linkDokumen"
+              >
+                <template #default>
+                  <IconEye />
+                </template>
+              </DxButton>
+            </DxColumn>
+            <template #row-cell-template="{ data }">
+              <DxText>{{ data.rowIndex + 1 }}</DxText>
+            </template>
+            <DxSearchPanel
+              :visible="true"
+              :highlight-case-sensitive="true"
+              :width="300"
+              placeholder="Cari Cetak DRP..."
+            />
+          </DxDataGrid>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
-<style lang="scss">
-</style>
+<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";
+import IconEye from '../../components/icons/IconEye.vue';
+
+const URL = process.env.VUE_APP_ROOT_API + "/drp/approval";
+
+const dataSource = new CustomStore({
+  key: "id",
+
+  load: () => {
+    return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
+      .then((response) => response.json())
+      .then((response) => {
+        console.log("drp:", response.data);
+        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,
+    IconEye
+  },
+  methods: {
+    linkDetail(e) {
+      location.href='#/drp/drp-pengadaan?drpid='+e.row.data.id;
+    },
+  },
+  data() {
+    return {
+      //jsonUrl: URL,
+      dataSource,
+    };
+  },
+};
+</script>
diff --git a/src/views/drp/drp-pengadaan-dokumen.vue b/src/views/drp/drp-pengadaan-dokumen.vue
index 71e94f6..c0b1a6c 100644
--- a/src/views/drp/drp-pengadaan-dokumen.vue
+++ b/src/views/drp/drp-pengadaan-dokumen.vue
@@ -1,13 +1,199 @@
 <template>
-  <div>
-    <h2 class="content-block">Drp Pengadaan Dokumen</h2>
-    <div class="content-block">
-      <div class="dx-card responsive-paddings">
-        Put your content here
-      </div>
-    </div>
-  </div>
+  <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';
 
-<style lang="scss">
-</style>
+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>
diff --git a/src/views/drp/drp-pengadaan.vue b/src/views/drp/drp-pengadaan.vue
index b17e58f..717a372 100644
--- a/src/views/drp/drp-pengadaan.vue
+++ b/src/views/drp/drp-pengadaan.vue
@@ -1,10 +1,24 @@
 <template>
   <div>
     <h3 class="content-block main-title">DRP Pengadaan</h3>
-    <p class="content-block">Detil / Konten DRP</p>
+    <p class="content-block">
+      <DxMenu orientation="horizontal" @item-click="itemClick">
+        <DxItem icon="home" text="Home"></DxItem>
+        <DxItem text="Tahun DRP"></DxItem>
+      </DxMenu></p>
     <div class="content-block">
       <div class="dx-card responsive-paddings">
         <div id="app-container">
+          <DxPopup
+            v-model:visible="isPopupDokumenPengadaan"
+            :drag-enabled="false"
+            :hide-on-outside-click="true"
+            :show-close-button="true"
+            :show-title="true"
+            title="Dokumen Pendukung Teknis"
+            >
+            <PopUpPengadaanDokumen :key="id"/>
+          </DxPopup>
           <DxDataGrid ref="currDataGrid"
             :data-source="dataSource" 
             key-expr="id"
@@ -17,12 +31,12 @@
                 :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"
+                    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="4">
                   <DxItem dataField="nomor" :col-span="2">
@@ -74,9 +88,10 @@
                 <DxPopup
                     :hide-on-outside-click="true"
                     :show-title="true"
-                    
-                    title="Form DRP Pengadaan">
-                </DxPopup>
+                    :width="400"
+                    :height="400"
+                    title="Form DRP Pengadaan"
+                ></DxPopup>
             </DxEditing>
             <DxToolbar>
                 <DxItem name="groupPanel" />
@@ -84,8 +99,6 @@
                 <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 
@@ -143,8 +156,14 @@
               />
             </DxColumn>
             <DxColumnFixing :enabled="true" />
-            <DxColumn :allow-fixing="false" type="buttons" caption="Aksi">
+            <DxColumn type="buttons" caption="Aksi">
               <DxButton name="edit"/>
+              <DxButton
+                text="detil"
+                icon="alignright"
+                hint="Detil Pengadaan"
+                :on-click="toggleDokumenPengadaan"
+              />
               <DxButton name="delete"/>
             </DxColumn>
             <template #row-cell-template="{ data }">
@@ -163,13 +182,13 @@
   </div>
 </template>
 
-<script> 
+<script>
+import { DxPopup } from "devextreme-vue/popup";
 import {
   DxDataGrid, 
   DxEditing,
   DxItem,
   DxForm,
-  DxPopup,
   DxColumn,
   DxFilterRow,
   DxPager,
@@ -180,9 +199,13 @@ import {
   DxRequiredRule,
   DxLookup,
   DxColumnFixing,
-  DxFormat
+  DxFormat,
+  DxButton
 } from "devextreme-vue/data-grid";
+import DxMenu from 'devextreme-vue/menu';
 import CustomStore from "devextreme/data/custom_store";
+import 'whatwg-fetch';
+import PopUpPengadaanDokumen from './drp-pengadaan-dokumen.vue';
 
 const URL = process.env.VUE_APP_ROOT_API+'/drp/pengadaan/list';
 const URL_metodepenyampaian = process.env.VUE_APP_ROOT_API+'/metodepenyampaian';
@@ -343,20 +366,20 @@ const dataSource = new CustomStore({
   key: 'id',
 
   load: () => {
-    let uri = window.location.href.split('?');
-    let drpid = '';
-    if(uri.length == 2) {
-      let vars = uri[1].split('&');
-      let getVars = {};
-      let tmp = '';
-      vars.forEach(function(v) {
-        tmp = v.split('=');
-        if(tmp.length == 2)
-          getVars[tmp[0]] = tmp[1];
-      });
-      //console.log(getVars['drpid']);
-      drpid = getVars['drpid'];
-    }
+      let uri = window.location.href.split('?');
+      let drpid = '';
+      if(uri.length == 2) {
+        let vars = uri[1].split('&');
+        let getVars = {};
+        let tmp = '';
+        vars.forEach(function(v) {
+          tmp = v.split('=');
+          if(tmp.length == 2)
+            getVars[tmp[0]] = tmp[1];
+        });
+        //console.log(getVars['drpid']);
+        drpid = getVars['drpid'];
+      }
     
       return fetch(URL+'/'+drpid)
       .then(response => response.json())
@@ -413,7 +436,27 @@ export default {
     DxRequiredRule,
     DxLookup,
     DxColumnFixing,
-    DxFormat
+    DxFormat,
+    DxMenu,
+    DxButton,
+    PopUpPengadaanDokumen
+  },
+
+  methods: {
+    itemClick(e) {
+      console.log(e);
+      switch (e.itemIndex) {
+        case 1:
+          location.href='#/drp/drp-penyusunan';
+        break;
+        default:
+        location.href='#/home';
+      }
+    },
+    toggleDokumenPengadaan(e) {
+      console.log(e);
+      this.isPopupDokumenPengadaan = !this.isPopupDokumenPengadaan;      
+    },
   },
 
   data() {
@@ -428,7 +471,8 @@ export default {
           sumberdana: sumberdanaOptions,
           jenispengadaan: jenispengadaanOptions,
           metodepengadaan: metodepengadaanOptions,
-          strategipengadaan: strategipengadaanOptions
+          strategipengadaan: strategipengadaanOptions,
+          isPopupDokumenPengadaan: false
       }
   },
 }
diff --git a/src/views/drp/drp-penyusunan.vue b/src/views/drp/drp-penyusunan.vue
index d787b5e..2e0065d 100644
--- a/src/views/drp/drp-penyusunan.vue
+++ b/src/views/drp/drp-penyusunan.vue
@@ -398,7 +398,7 @@
               <DxButton
                 text="Detil"
                 icon="search"
-                hint="Detil/Konten DRP "
+                hint="Detil/Konten DRP"
                 :on-click="linkDetail"
               />
               <DxButton
diff --git a/src/views/drp/drp-revisi.vue b/src/views/drp/drp-revisi.vue
index d61e600..2acd361 100644
--- a/src/views/drp/drp-revisi.vue
+++ b/src/views/drp/drp-revisi.vue
@@ -1,13 +1,206 @@
 <template>
   <div>
-    <h2 class="content-block">Drp Revisi</h2>
+    <h3 class="content-block main-title">Revisi DRP</h3>
+    <p class="content-block">Revisi DRP </p>
     <div class="content-block">
       <div class="dx-card responsive-paddings">
-        Put your content here
+        <div id="app-container">
+          <DxDataGrid
+            ref="currDataGrid"
+            :data-source="dataSource"
+            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 Approval  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="tahun" caption="Tahun DRP"></DxColumn>
+            <DxColumn
+              data-field="approveStatus"
+              caption="Status Approve"
+              editor-type="dxCheckBox"
+            ></DxColumn>
+            <DxColumn data-field="" caption="VP Pengadaan"></DxColumn>
+            <DxColumn data-field="" caption="Komite Value for Money"></DxColumn>
+            <DxColumn data-field="" caption="Direktur Utama"></DxColumn>
+            <DxColumn type="buttons" caption="Aksi" :fixed="true">
+              <DxButton
+                text="Dokumen"
+                hint="Dokumen Pendukung DRP"
+                :on-click="linkDokumen"
+              >
+                <template #default>
+                  <IconEye />
+                </template>
+              </DxButton>
+              <DxButton
+                text="Detil"
+                hint="Detil/Konten DRP"
+                :on-click="linkDetail">
+                <template #default>
+                  <IconDocChecked />
+                </template>
+              </DxButton>
+            </DxColumn>
+            <template #row-cell-template="{ data }">
+              <DxText>{{ data.rowIndex + 1 }}</DxText>
+            </template>
+            <DxSearchPanel
+              :visible="true"
+              :highlight-case-sensitive="true"
+              :width="300"
+              placeholder="Cari Approval DRP..."
+            />
+          </DxDataGrid>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
-<style lang="scss">
-</style>
+<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";
+import IconEye from '../../components/icons/IconEye.vue';
+import IconDocChecked from '../../components/icons/IconDocChecked.vue';
+
+const URL = process.env.VUE_APP_ROOT_API + "/drp/approval";
+
+const dataSource = new CustomStore({
+  key: "id",
+
+  load: () => {
+    return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
+      .then((response) => response.json())
+      .then((response) => {
+        console.log("drp:", response.data);
+        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,
+    IconEye,
+    IconDocChecked
+  },
+  methods: {
+    linkDetail(e) {
+      location.href='#/drp/drp-pengadaan?drpid='+e.row.data.id;
+    },
+  },
+  data() {
+    return {
+      //jsonUrl: URL,
+      dataSource,
+    };
+  },
+};
+</script>
diff --git a/vue.config.js b/vue.config.js
index e868574..604746c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +1,12 @@
 process.env.VUE_APP_VERSION = require('./package.json').version
 
-module.exports = {};
+module.exports = {
+    chainWebpack: config => {
+        config
+            .plugin('html')
+            .tap(args => {
+                args[0].title = "Smartproc PLN-GG";
+                return args;
+            })
+    }
+};