add drp list and popup detail drp

src/app-navigation.js

@@ -123,6 +123,10 @@ export default [
           {
             text: 'List Rekomendasi',
             path: '/drp/drp-approval/list-rekomendasi'
+          },
+          {
+            text: 'List DRP',
+            path: '/drp/drp-approval/drp-list'
           }
         ]
       }, 

src/router.js

@@ -29,6 +29,7 @@ import DrpPengadaan from './views/drp/drp-pengadaan';
 import DrpDokumen from './views/drp/drp-dokumen';
 import DrpApproval from './views/drp/drp-approval'
 import RecomendationList from './views/drp/recomendation-list.vue'
+import DrpList from './views/drp/drp-list.vue';
 
 /* General */
 import auth from "./auth";
@@ -343,6 +344,15 @@ const router = new createRouter({
       },
       component: RecomendationList
     },
+    {
+      path: "/drp/drp-approval/drp-list",
+      name: "list-drp",
+      meta: {
+        requiresAuth: true,
+        layout: defaultLayout
+      },
+      component: DrpList
+    },
   ],
   history: createWebHashHistory()
 });

src/views/drp/drp-list.vue

@@ -0,0 +1,249 @@
+<template>
+  <div>
+    <h3 class="content-block main-title">Approval DRP</h3>
+    <p class="content-block">Approval DRP>List DRP </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"
+          >
+            <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"
+              :fixed="true"
+            ></DxColumn>
+            <DxColumn
+              data-field="nomor"
+              :fixed="true"
+              caption="Nomor PRK"
+            ></DxColumn>
+            <DxColumn
+              :fixed="true"
+              :width="300"
+              data-field="namaPengadaan"
+              caption="Nama Pengadaan"
+            ></DxColumn>
+            <DxColumn data-field="lokasi" caption="Lokasi Pengadaan"></DxColumn>
+            <DxColumn
+              data-field="jenisPengadaan"
+              caption="Jenis Pengadaan"
+            ></DxColumn>
+            <DxColumn
+              data-field="unitInisiator"
+              caption="Divisi/Unit Inisiator Pengadaan"
+            ></DxColumn>
+            <DxColumn data-field="pagu" caption="Pagu Anggaran (Rp)"></DxColumn>
+            <DxColumn data-field="sumberDana" caption="Sumber Dana"></DxColumn>
+            <DxColumn
+              data-field="supplyPositioningMatrix"
+              caption="Supply Positioning Matrix"
+            ></DxColumn>
+            <DxColumn
+              data-field="metodePengadaan"
+              caption="Metode Pengadaan"
+            ></DxColumn>
+            <DxColumn
+              data-field="metodePenyampaian"
+              caption="Metode Penyampaian Dokumen Penawaran"
+            ></DxColumn>
+            <DxColumn
+              data-field="jenisKontrak"
+              caption="Jenis Perjanjian/Kontrak"
+            ></DxColumn>
+            <DxColumn
+              data-field="strategiPengadaan"
+              caption="Strategi Pemgadaan"
+            ></DxColumn>
+            <DxColumn
+              data-field="rencanaTanggal"
+              caption="Rencana Pelaksanaan Pengadaan"
+            ></DxColumn>
+            <DxColumn
+              data-field="targetTanggal"
+              caption="Target COD"
+            ></DxColumn>
+            <DxColumn data-field="hpe" caption="Nilai HPE (Rupiah)"></DxColumn>
+            <DxColumn type="buttons" caption="Aksi">
+              <DxButton
+                text="Detail"
+                icon="search"
+                hint="Detail"
+                :on-click="linkDetail"
+              />
+              <DxButton
+                text="Dokumen"
+                icon="attach"
+                hint="Dokumen Pendukung DRP"
+                :on-click="linkDokumen"
+              />
+            </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 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/pengadaan";
+
+const dataSource = new CustomStore({
+  key: "id",
+
+  load: () => {
+    return fetch(URL + "?size=100")
+      .then((response) => response.json())
+      .then((response) => {
+        console.log("drp pengadaan:", 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,
+  },
+  methods: {
+    linkDetail: function () {
+      location.href = "#/drp/drp-dokumen";
+    },
+    linkDokumen: function () {
+      location.href = "#/drp/drp-dokumen";
+    },
+  },
+  data() {
+    return {
+      //jsonUrl: URL,
+      dataSource,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/drp/drp-penyusunan.vue

@@ -5,15 +5,72 @@
     <div class="content-block">
       <div class="dx-card responsive-paddings">
         <div id="app-container">
-          <DxDataGrid ref="currDataGrid"
+          <DxPopup
+            v-model:visible="popupVisible"
+            :drag-enabled="false"
+            :hide-on-outside-click="true"
+            :show-close-button="false"
+            :show-title="true"
+            :width="914"
+            :height="672"
+            container=".dx-viewport"
+            :title="popupTitle"
+          >
+            <DxPosition at="center" my="center" collision="fit" />
+            <DxToolbarItem
+              widget="dxButton"
+              toolbar="top"
+              locate-in-menu="always"
+              :options="closeButtonOptions"
+              :visible="!isShowButton"
+            />
+            <DxToolbarItem
+              widget="dxButton"
+              toolbar="bottom"
+              location="after"
+              :options="closeButtonOptions"
+              v-model:visible="isShowButton"
+            />
+            <DxToolbarItem
+              widget="dxButton"
+              toolbar="bottom"
+              location="after"
+              :options="saveButtonOptions"
+              v-model:visible="isShowButton"
+            />
+            <template #content>
+              <div class="dx-fieldset">
+                <div class="dx-field">
+                  <div class="dx-field-label">Image as the icon</div>
+                  <div class="dx-field-value">
+                    <DxSelectBox
+                      :data-source="dropdown"
+                      drop-down-button-template="imageIcon"
+                    >
+                      <template #imageIcon="{}">
+                        <img
+                          src="images/icons/custom-dropbutton-icon.svg"
+                          class="custom-icon"
+                        />
+                      </template>
+                    </DxSelectBox>
+                  </div>
+                </div>
+              </div>
+              <DxScrollView width="100%" height="100%">
+                <div class="label">Options</div>
+                <DxDataGrid
+                  ref="currDataGrid"
                   :data-source="dataSource"
                   key-expr="id"
                   :allow-column-reordering="true"
-            :column-auto-width="true">
+                  :column-auto-width="true"
+                >
                   <DxEditing
                     :allow-adding="true"
                     :use-icons="true"
-                mode="popup">
+                    mode="popup"
+                  >
                     <DxTexts
                       add-row="Tambah"
                       edit-row="Ubah"
@@ -27,13 +84,73 @@
                         <DxRequiredRule message="Tahun harus diisi" />
                       </DxItem>
                     </DxForm>
-                <DxPopup
+                  </DxEditing>
-                    :hide-on-outside-click="true"
+                  <DxToolbar>
-                    :show-title="true"
+                    <DxItem name="groupPanel" />
-                    :width="400"
+                    <DxItem name="searchPanel" location="before" />
-                    :height="400"
+                    <DxItem name="addRowButton" show-text="always" css-class="">
-                    title="Form Penyusunan DRP">
+                      <DxTexts add-row="Tambah"></DxTexts>
+                    </DxItem>
+                    <DxItem name="exportButton" />
+                    <DxItem name="columnChooserButton" />
+                  </DxToolbar>
+                  <DxFilterRow :visible="false" />
+                  <DxColumn
+                    cell-template="row-cell-template"
+                    caption="No"
+                    :width="45"
+                  ></DxColumn>
+                  <DxColumn
+                    data-field=""
+                    caption="Jenis Dokumen"
+                    alignment="left"
+                  ></DxColumn>
+                  <DxColumn data-field="" caption="File"> </DxColumn>
+                  <DxColumn data-field="" caption="Keterangan"></DxColumn>
+                  <DxColumn type="buttons" caption="Aksi">
+                    <DxButton
+                      text="Dokumen"
+                      icon="edit"
+                      hint="Dokumen Pendukung DRP"
+                      on-click=""
+                    />
+                    <DxButton
+                      text="Detil"
+                      icon="trash"
+                      hint="Detil/Konten DRP "
+                      on-click=""
+                    />
+                  </DxColumn>
+                  <template #row-cell-template="{ data }">
+                    {{ data.rowIndex + 1 }}
+                  </template>
+                </DxDataGrid>
+                <div id="textBlock"> </div>
+              </DxScrollView>
+            </template>
           </DxPopup>
+
+          <DxDataGrid
+            ref="currDataGrid"
+            :data-source="dataSource"
+            key-expr="id"
+            :allow-column-reordering="true"
+            :column-auto-width="true"
+          >
+            <DxEditing :allow-adding="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>
             </DxEditing>
             <DxToolbar>
               <DxItem name="groupPanel" />
@@ -52,18 +169,35 @@
               :show-page-size-selector="true"
               :show-info="true"
               :show-navigation-buttons="true"
-            info-text="Hal {0} dari {1} ({2} data)" />
+              info-text="Hal {0} dari {1} ({2} data)"
+            />
             <DxFilterRow :visible="false" />
-            <DxColumn cell-template="row-cell-template" caption="No" :width="45"></DxColumn>
+            <DxColumn
-            <DxColumn data-field="tahun" caption="Tahun DRP" alignment="left"></DxColumn>
+              cell-template="row-cell-template"
-            <DxColumn data-field="approveStatus" caption="Status Approve" editor-type="dxCheckBox">
+              caption="No"
+              :width="45"
+            ></DxColumn>
+            <DxColumn
+              data-field="tahun"
+              caption="Tahun DRP"
+              alignment="left"
+            ></DxColumn>
+            <DxColumn
+              data-field="approveStatus"
+              caption="Status Approve"
+              editor-type="dxCheckBox"
+            >
               <DxLookup
                 display-expr="name"
                 value-expr="value"
                 :data-source="approveStatus"
               />
             </DxColumn>
-            <DxColumn data-field="approveDate" caption="Tanggal Approve" data-type="date"></DxColumn>
+            <DxColumn
+              data-field="approveDate"
+              caption="Tanggal Approve"
+              data-type="date"
+            ></DxColumn>
             <DxColumn type="buttons" caption="Aksi">
               <DxButton
                 text="Dokumen"
@@ -90,7 +224,12 @@
             <template #row-cell-template="{ data }">
               {{ data.rowIndex + 1 }}
             </template>
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Penyusunan DRP..."/>
+            <DxSearchPanel
+              :visible="true"
+              :highlight-case-sensitive="true"
+              :width="300"
+              placeholder="Cari Penyusunan DRP..."
+            />
           </DxDataGrid>
         </div>
       </div>
@@ -103,7 +242,6 @@ import DxDataGrid, {
   DxEditing,
   DxItem,
   DxForm,
-  DxPopup,
   DxColumn,
   DxFilterRow,
   DxPager,
@@ -116,7 +254,9 @@ import DxDataGrid, {
   DxLookup,
 } from "devextreme-vue/data-grid";
 import CustomStore from "devextreme/data/custom_store";
-
+import { DxPopup, DxToolbarItem, DxPosition } from "devextreme-vue/popup";
+import { DxScrollView } from "devextreme-vue/scroll-view";
+import { DxSelectBox } from "devextreme-vue/select-box";
 
 const approveStatus = [
   { name: "Penyusunan", value: 0 },
@@ -124,24 +264,26 @@ const approveStatus = [
   { name: "Rekomendasi Komite", value: 2 },
   { name: "Approval DIRUT", value: 3 },
   { name: "Approved", value: 4 },
-  { name: "Revisi DRP", value: 1 }
+  { name: "Revisi DRP", value: 1 },
 ];
 
-const URL = process.env.VUE_APP_ROOT_API+'/drp';
+const URL = process.env.VUE_APP_ROOT_API + "/drp";
 
 const dataSource = new CustomStore({
-  key: 'id',
+  key: "id",
 
   load: () => {
-      return fetch(URL+'?size=100')
+    return fetch(URL + "?size=100")
-      .then(response => response.json())
+      .then((response) => response.json())
-      .then(response => {
+      .then((response) => {
         return {
           data: response.data,
-          totalCount: response.pagination.totalRecords
+          totalCount: response.pagination.totalRecords,
         };
       })
-      .catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
+      .catch(() => {
+        throw new Error("Terdapat kesalahan memuat data");
+      });
   },
 
   insert: (values) => {
@@ -149,8 +291,8 @@ const dataSource = new CustomStore({
       method: "POST",
       body: JSON.stringify(values),
       headers: {
-                'Content-Type': 'application/json'
+        "Content-Type": "application/json",
-            }
+      },
     });
   },
 
@@ -159,8 +301,8 @@ const dataSource = new CustomStore({
       method: "PUT",
       body: JSON.stringify(values),
       headers: {
-              'Content-Type': 'application/json'
+        "Content-Type": "application/json",
-          }
+      },
     });
   },
 
@@ -174,7 +316,7 @@ const dataSource = new CustomStore({
 export default {
   setup() {
     return {
-      approveStatus
+      approveStatus,
     };
   },
   components: {
@@ -182,7 +324,6 @@ export default {
     DxEditing,
     DxItem,
     DxForm,
-    DxPopup,
     DxColumn,
     DxFilterRow,
     DxPager,
@@ -193,32 +334,63 @@ export default {
     DxButton,
     DxRequiredRule,
     DxLookup,
+    DxScrollView,
+    DxPopup,
+    DxToolbarItem,
+    DxPosition,
+    DxSelectBox,
   },
   methods: {
-    linkDokumen :  function() {
+    linkDokumen($event) {
-        location.href='#/drp/drp-dokumen';
+      console.log("event: ", $event.row.values);
+      this.popupVisible = true;
+      this.popupTitle = "Upload Dokumen Pendukung";
+      this.dataDrp = $event.row.values;
+      this.isShowButton = true;
+      console.log("drp: ", this.dataDrp);
+    },
+    linkDetail($event) {
+      this.popupVisible = true;
+      this.popupTitle = "Lihat Dokumen Pendukung";
+      this.dataDrp = $event.row.values.target;
+      this.isShowButton = false;
     },
-    linkDetail : function() {
-        location.href='#/drp/drp-dokumen';
-    }
   },
   data() {
     return {
       //jsonUrl: URL,
       dataSource,
-      }
+      dropdown: "",
+      popupVisible: false,
+      popupTitle: "",
+      dataDrp: "",
+      isShowButton: true,
+      saveButtonOptions: {
+        text: "SIMPAN",
+        onClick: () => {
+          this.popupVisible = false;
+          console.log("simpan");
         },
-}
+      },
+      closeButtonOptions: {
+        text: "BATAL",
+        onClick: () => {
+          this.popupVisible = false;
+        },
+      },
+    };
+  },
+};
 </script>
 
 <style lang="scss">
 .dx-link.dx-icon-attach.dx-link-icon {
-  color: #DBD203;
+  color: #dbd203;
 }
 .dx-link.dx-icon-search.dx-link-icon {
-  color: #FF9A62;
+  color: #ff9a62;
 }
 .dx-link.dx-icon-movetofolder.dx-link-icon {
-  color: #0996C2;
+  color: #0996c2;
 }
 </style>

src/views/drp/recomendation-list.vue

@@ -7,7 +7,7 @@
         <div id="app-container">
           <DxDataGrid
             ref="currDataGrid"
-            :data-source="dataSource"
+            :data-source="formData"
             key-expr="id"
             :allow-column-reordering="true"
             :column-auto-width="true"
@@ -63,16 +63,29 @@
               caption="No"
               :width="45"
             ></DxColumn>
-            <DxColumn data-field="" caption="Nama Pengadaan"></DxColumn>
+            <DxColumn data-field="nomorRkp" caption="Nomor RKP"></DxColumn>
             <DxColumn
-              data-field=""
+              data-field="namaPengadaan"
-              caption="Approval"
+              caption="Nama Pengadaan"
-              editor-type="dxCheckBox"
+              :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 data-field="" caption="Status"></DxColumn>
-            <DxColumn data-field="" caption="Tanggal Status"></DxColumn>
-            <DxColumn data-field="" caption="Catatan Rekomendasi"></DxColumn>
-            <DxColumn data-field="" caption="Tanggal Rekomendasi"></DxColumn>
             <DxColumn type="buttons" caption="Aksi">
               <DxButton name="edit" />
               <DxButton name="delete" />
@@ -93,7 +106,7 @@
               :visible="true"
               :highlight-case-sensitive="true"
               :width="300"
-              placeholder="Cari Penyusunan DRP..."
+              placeholder="Cari Rekomendasi DRP..."
             />
           </DxDataGrid>
         </div>
@@ -181,17 +194,57 @@ export default {
     DxTexts,
     DxButton,
   },
-  methods: {
-    linkDetail: function () {
-      location.href = "master-data/strategi-pengadaan";
-    },
-  },
   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>