Refactor table column name and add new GraphQL query for gangguan cleansing transaksi TM

src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue

@@ -96,10 +96,10 @@
         :width="150"
         alignment="center"
         data-field="nama_posko"
-        caption="Nama Unit"
+        caption="Posko"
         css-class="custom-table-column"
         cell-template="formatText"
-        name="namaUnit"
+        name="namaPosko"
         :group-index="3"
       />
 

src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue

@@ -12,10 +12,10 @@
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
       @selection-changed="onSelectionChanged"
-      :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
+      :word-wrap-enabled="true"
     >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
@@ -39,110 +39,141 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        :width="170"
+        width="200"
         alignment="center"
-        data-field="uid"
+        data-field="nama_uid"
         caption="Nama Unit"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="januari"
+          data-field="month1"
           data-type="number"
           caption="Januari"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="februari"
+          data-field="month2"
           data-type="number"
           caption="Februari"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="maret"
+          data-field="month3"
           data-type="number"
           caption="Maret"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="april"
+          data-field="month4"
           data-type="number"
           caption="April"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="mei"
+          data-field="month5"
           data-type="number"
           caption="Mei"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="juni"
+          data-field="month6"
           data-type="number"
           caption="Juni"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="juli"
+          data-field="month7"
           data-type="number"
           caption="Juli"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="agustus"
+          data-field="month8"
           data-type="number"
           caption="Agustus"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="september"
+          data-field="month9"
           data-type="number"
           caption="September"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="oktober"
+          data-field="month10"
           data-type="number"
           caption="Oktober"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="november"
+          data-field="month11"
           data-type="number"
           caption="November"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn
-          :width="100"
           alignment="center"
-          data-field="desember"
+          data-field="month12"
           data-type="number"
           caption="Desember"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
+
+      <template #formatText="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatPercentage="{ data }">
+        <p class="text-right">
+          {{ isNumber(data.text) ? formatPercentage(data.text) : 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>
+
+      <template #formatTime="{ data }">
+        <p class="!text-right cursor-pointer">
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -150,7 +181,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -169,6 +200,9 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -209,11 +243,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.rekap.rekapGangguanAlihPosko,
+  queries.gangguan.rekap.gangguanCleansingTransaksiTM,
   {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
   }
@@ -228,7 +262,7 @@ const filterData = (params: any) => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : 0,
+    idUlp: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
@@ -245,4 +279,346 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    data.value = [
+      {
+        id: 0,
+        id_uid: 180,
+        nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
+        id_up3: 182,
+        nama_up3: 'UP3 DUMAI',
+        id_ulp: 18210,
+        nama_ulp: 'ULP DURI',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 1,
+        id_uid: 56,
+        nama_uid: 'DISTRIBUSI BANTEN',
+        id_up3: 16,
+        nama_up3: 'UP3 SERPONG',
+        id_ulp: 56620,
+        nama_ulp: 'UP3 SERPONG',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 2,
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52000,
+        nama_up3: 'UP3 KUDUS',
+        id_ulp: 52002,
+        nama_ulp: 'ULP JEPARA',
+        month1: 0,
+        month2: 5,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 3,
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31200,
+        nama_up3: 'UP3 PALU',
+        id_ulp: 31290,
+        nama_ulp: 'ULP KOLONEDALE',
+        month1: 0,
+        month2: 2,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 4,
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31200,
+        nama_up3: 'UP3 PALU',
+        id_ulp: 31240,
+        nama_ulp: 'ULP DONGGALA',
+        month1: 0,
+        month2: 2,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 5,
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31200,
+        nama_up3: 'UP3 PALU',
+        id_ulp: 31270,
+        nama_ulp: 'ULP POSO',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 6,
+        id_uid: 32,
+        nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
+        id_up3: 32400,
+        nama_up3: 'UP3 PINRANG',
+        id_ulp: 32430,
+        nama_ulp: 'ULP PEKKABATA',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 7,
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52500,
+        nama_up3: 'UP3 CILACAP',
+        id_ulp: 52505,
+        nama_ulp: 'ULP KROYA',
+        month1: 0,
+        month2: 2,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 8,
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52000,
+        nama_up3: 'UP3 KUDUS',
+        id_ulp: 52008,
+        nama_ulp: 'ULP CEPU',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 9,
+        id_uid: 32,
+        nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
+        id_up3: 32300,
+        nama_up3: 'UP3 KENDARI',
+        id_ulp: 32320,
+        nama_ulp: 'ULP WUA WUA',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 10,
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52200,
+        nama_up3: 'UP3 PURWOKERTO',
+        id_ulp: 52201,
+        nama_ulp: 'ULP PURWOKERTO KOTA',
+        month1: 0,
+        month2: 3,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 11,
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52000,
+        nama_up3: 'UP3 KUDUS',
+        id_ulp: 52003,
+        nama_ulp: 'ULP BANGSRI',
+        month1: 0,
+        month2: 7,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 12,
+        id_uid: 32,
+        nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
+        id_up3: 32600,
+        nama_up3: 'UP3 PALOPO',
+        id_ulp: 32680,
+        nama_ulp: 'ULP RANTEPAO',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 13,
+        id_uid: 287,
+        nama_uid: 'DISTRIBUSI BALI',
+        id_up3: 328,
+        nama_up3: 'UP3 BALI TIMUR',
+        id_ulp: 55200,
+        nama_ulp: 'ULP GIANYAR',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 14,
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52500,
+        nama_up3: 'UP3 CILACAP',
+        id_ulp: 52504,
+        nama_ulp: 'ULP KEBUMEN',
+        month1: 0,
+        month2: 15,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 15,
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13300,
+        nama_up3: 'UP3 SOLOK',
+        id_ulp: 13339,
+        nama_ulp: 'ULP SUNGAI RUMBAI',
+        month1: 0,
+        month2: 2,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      }
+    ]
+  }
+})
 </script>

src/utils/api/api.graphql.ts

@@ -578,6 +578,43 @@ export const queries = {
   },
   gangguan: {
     rekap: {
+      gangguanCleansingTransaksiTM: gql`
+        query rekapitulasiGangguanCleansingTransaksiTM(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiGangguanCleansingTransaksiTM(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            month1
+            month2
+            month3
+            month4
+            month5
+            month6
+            month7
+            month8
+            month9
+            month10
+            month11
+            month12
+          }
+        }
+      `,
       gangguanRatingPerRegu: gql`
         query rekapitulasiGangguanRatingPerRegu(
           $dateFrom: Date!