Tabel Material

src/components/Pages/Material/Daftar/Material_DGMYG.vue

@@ -7,14 +7,15 @@
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
-      @exporting=""
+      @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
@@ -41,49 +42,56 @@
         :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
+        cell-template="formatNumber"
       />
 
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="nomo_gangguan"
+        data-field="no_laporan"
         caption="Nomor Gangguan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="nama_pelanggan"
+        data-field="nama_pelapor"
         caption="Nama Pelanggan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="300"
         alignment="center"
-        data-field="isi_laporan"
+        data-field="keterangan_pelapor"
         caption="Isi Laporan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="300"
         alignment="center"
-        data-field="penyebab_gangguan"
+        data-field="penyebab"
         caption="Penyebab Gangguan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="waktu_padam"
+        data-field="waktu_lapor"
         caption="Tgl Padam"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="waktu_recovery"
         caption="Tgl Nyala"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -91,40 +99,123 @@
         alignment="center"
         data-field="regu"
         caption="Regu"
+        cell-template="formatText"
       />
       <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field="sumber"
+          data-field="media"
           caption="Sumber"
+          cell-template="formatText"
         />
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field=""
+          data-field="nama_material"
           caption="Nama"
+          cell-template="formatText"
         />
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field="satuan"
+          data-field="satuan_material"
           caption="Satuan"
+          cell-template="formatText"
         />
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field="volume"
+          data-field="volume_material"
           caption="Vol"
+          cell-template="formatText"
         />
       </DxColumn>
+
+      <template #formatText="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
-  <BufferDialog v-if="loading" />
+
+  <DetailDialog :open="dialogDetail" title="Detail Gangguan dan Material" @on-close="closeDialog">
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Gangguan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Isi Laporan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab Gangguan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.penyebab" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Padam:</h3>
+        <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Nyala:</h3>
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Regu:</h3>
+        <InputText :readonly="true" :value="dataSelected?.regu" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber:</h3>
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Satuan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.satuan_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Vol:</h3>
+        <InputText :readonly="true" :value="dataSelected?.volume_material" class-name="flex-1" />
+      </div>
+    </div>
+  </DetailDialog>
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -145,12 +236,19 @@ import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const loading = ref(false)
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingData = ref(false)
 
 const resetData = () => {
   data.value = []
@@ -170,10 +268,10 @@ const filterData = async (params: any) => {
       : new Date().toISOString().slice(0, 10),
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
-    posko: posko ? posko.id : 0
+    idPosko: posko ? posko.id : 0
   }
 
-  loading.value = true
+  loadingData.value = true
   await requestGraphQl(queries.material.daftar.daftarGangguanDanMaterialDipakai, query)
     .then((result) => {
       if (result.data.data != undefined) {
@@ -186,8 +284,33 @@ const filterData = async (params: any) => {
       console.error(err)
     })
     .finally(() => {
-      loading.value = false
+      loadingData.value = false
     })
 }
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
+}
+
+const onExporting = (e: any) => {}
+
 const filters = ref()
 </script>

src/components/Pages/Material/Rekap/Material_RPM.vue

@@ -7,14 +7,15 @@
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
-      @exporting=""
+      @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
@@ -41,14 +42,16 @@
         :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
+        cell-template="formatNumber"
       />
 
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="kode_material"
+        data-field="kode"
         caption="Kode Material"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -56,6 +59,7 @@
         alignment="center"
         data-field="nama_material"
         caption="Nama Material"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -63,6 +67,7 @@
         alignment="center"
         data-field="satuan"
         caption="Satuan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -70,6 +75,7 @@
         alignment="center"
         data-field="sumber_material"
         caption="Sumber Material"
+        cell-template="formatText"
       />
       <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
         <DxColumn
@@ -80,11 +86,77 @@
           data-type="number"
           :caption="i"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="total"
+        caption="Jumlah"
+        cell-template="formatNumber"
+      />
+
+      <template #formatText="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
-  <BufferDialog v-if="loading" />
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Pemakaian Material"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Kode Material:</h3>
+        <InputText :readonly="true" :value="dataSelected?.kode" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Material:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Satuan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.satuan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Material:</h3>
+        <InputText :readonly="true" :value="dataSelected?.sumber_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full" v-for="i in 31">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl {{ i }}:</h3>
+        <InputText :readonly="true" :value="dataSelected[`tgl${i}`]" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Jumlah:</h3>
+        <InputText :readonly="true" :value="dataSelected?.total" class-name="flex-1" />
+      </div>
+    </div>
+  </DetailDialog>
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -105,12 +177,19 @@ import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const loading = ref(false)
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingData = ref(false)
 
 const resetData = () => {
   data.value = []
@@ -132,7 +211,7 @@ const filterData = async (params: any) => {
     posko: posko ? posko.id : 0
   }
 
-  loading.value = true
+  loadingData.value = true
   await requestGraphQl(queries.material.rekap.rekapitulasiPemakaianMaterial, query)
     .then((result) => {
       if (result.data.data != undefined) {
@@ -145,8 +224,33 @@ const filterData = async (params: any) => {
       console.error(err)
     })
     .finally(() => {
-      loading.value = false
+      loadingData.value = false
     })
 }
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
+}
+
+const onExporting = (e: any) => {}
+
 const filters = ref()
 </script>

src/utils/api/api.graphql.ts

@@ -862,6 +862,71 @@ export const queries = {
           }
         }
       `,
+      gangguanRatingDetail: gql`
+        query detailRekapitulasiGangguanBerdasarkanRating(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $idRegu: Int!
+          $namaRegional: String!
+          $isSelesai: Int
+          $isNonRating: Int
+          $nilaiRating: Int
+        ) {
+          detailRekapitulasiGangguanBerdasarkanRating(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            idRegu: $idRegu
+            namaRegional: $namaRegional
+            isSelesai: $isSelesai
+            isNonRating: $isNonRating
+            nilaiRating: $nilaiRating
+          ) {
+            alamat_pelapor
+            diselesaikan_oleh
+            dispatch_oleh
+            durasi_dispatch_time
+            durasi_recovery_time
+            durasi_response_time
+            id
+            idpel_nometer
+            id_posko
+            id_uid
+            id_ulp
+            id_up3
+            is_marking
+            is_non_rating
+            is_selesai
+            jarak_closing
+            jenis_gangguan
+            keterangan_pelapor
+            kode_gangguan
+            media
+            nama_pelapor
+            nama_posko
+            nama_regional
+            nama_uid
+            nama_ulp
+            nama_up3
+            nilai_rating
+            no_laporan
+            no_telp_pelapor
+            pembuat_laporan
+            penyebab
+            referensi_marking
+            status_akhir
+            tindakan
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
       gangguanRatingPerPosko: gql`
         query rekapitulasiGangguanRatingPerPosko(
           $dateFrom: Date!
@@ -4042,27 +4107,29 @@ export const queries = {
         query DaftardaftarGangguanDanMaterialDipakai(
           $dateFrom: Date!
           $dateTo: Date!
-          $posko: String
+          $idPosko: Int
           $idUid: Int
           $idUp3: Int
         ) {
           daftarGangguanDanMaterialDipakai(
             dateFrom: $dateFrom
             dateTo: $dateTo
-            distribusi: $idUid
+            idUid: $idUid
-            area: $idUp3
+            idUp3: $idUp3
-            posko: $posko
+            idPosko: $idPosko
           ) {
-            isi_laporan
+            id
-            nama_material
+            no_laporan
-            nama_pelanggan
+            nama_pelapor
-            nomor_gangguan
+            keterangan_pelapor
-            penyebab_gangguan
+            penyebab
+            waktu_lapor
+            waktu_recovery
             regu
-            satuan
+            media
-            sumber
+            nama_material
-            volume
+            satuan_material
-            waktu_padam
+            volume_material
           }
         }
       `
@@ -4072,18 +4139,19 @@ export const queries = {
         query DaftarrekapitulasiPemakaianMaterial(
           $dateFrom: Date!
           $dateTo: Date!
-          $posko: String
+          $idPosko: Int
           $idUid: Int
           $idUp3: Int
         ) {
           rekapitulasiPemakaianMaterial(
             dateFrom: $dateFrom
             dateTo: $dateTo
-            distribusi: $idUid
+            idUid: $idUid
-            area: $idUp3
+            idUp3: $idUp3
-            posko: $posko
+            idPosko: $idPosko
           ) {
-            kode_material
+            id
+            kode
             nama_material
             satuan
             sumber_material
@@ -4118,6 +4186,7 @@ export const queries = {
             tgl7
             tgl8
             tgl9
+            total
           }
         }
       `