Refactor table column width and cell templates in RGangguan_PerRegu.vue, RGangguan_PerTanggal.vue, RKeluhan_PerFungsiBidang.vue, RKeluhan_PerKelompokKeluhan.vue, and RKeluhan_PerTanggal.vue components

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

@@ -40,9 +40,8 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        :width="60"
+        :width="50"
         alignment="center"
-        data-field="no"
         caption="NO"
         css-class="custom-table-column"
         cell-template="formatNumber"
@@ -559,15 +558,15 @@
         />
       </DxSummary>
 
-      <template #cellCenter="{ data }">
+      <template #formatText="{ data }">
-        <p class="cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
-      <template #formatText="{ data }">
+      <template #formatNumbering="{ data }">
-        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
-          {{ data.text }}
+          {{ data.rowIndex }}
         </p>
       </template>
 
@@ -1311,7 +1310,13 @@ const filterData = async (params: any) => {
   await requestGraphQl(queries.gangguan.rekap.gangguanPerRegu, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        data.value = result.data.data.rekapitulasiGangguanPerRegu
+        if (grouping.value.length > 0 && grouping.value[0].data != '') {
+          data.value = [...result.data.data.rekapitulasiGangguanPerRegu].sort((a, b) =>
+            a[grouping.value[0].data].localeCompare(b[grouping.value[0].data])
+          )
+        } else {
+          data.value = result.data.data.rekapitulasiGangguanPerRegu
+        }
       } else {
         data.value = []
       }

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

@@ -1044,7 +1044,13 @@ const filterData = async (params: any) => {
   await requestGraphQl(queries.gangguan.rekap.gangguanPerTanggal, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        data.value = result.data.data.rekapitulasiGangguanPerTanggal
+        if (grouping.value.length > 0 && grouping.value[0].data != '') {
+          data.value = [...result.data.data.rekapitulasiGangguanPerTanggal].sort((a, b) =>
+            a[grouping.value[0].data].localeCompare(b[grouping.value[0].data])
+          )
+        } else {
+          data.value = result.data.data.rekapitulasiGangguanPerTanggal
+        }
       } else {
         data.value = []
       }

src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue

@@ -1076,18 +1076,12 @@ const filterData = async (params: any) => {
   await requestGraphQl(queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        if (filters.value.groupBy) {
+        if (grouping.value.length > 0 && grouping.value[0].data != '') {
-          data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang]
+          data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang].sort(
-            .sort((a, b) => a.nama_uid.localeCompare(b.nama_uid))
+            (a, b) => a[grouping.value[0].data].localeCompare(b[grouping.value[0].data])
-            .map((item, index) => {
-              return { ...item, number: index + 1 }
-            })
-        } else {
-          data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang].map(
-            (item, index) => {
-              return { ...item, number: index + 1 }
-            }
           )
+        } else {
+          data.value = result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
         }
 
         reportMeta.value = {

src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue

@@ -1077,9 +1077,17 @@ const filterData = async (params: any) => {
   )
     .then((result) => {
       if (result.data.data != undefined) {
-        data.value = isGroupBy.value
+        const ref = isGroupBy.value
-          ? result.data.data.rekapitulasiKeluhanPerKelompokKeluhanUid
+          ? [...result.data.data.rekapitulasiKeluhanPerKelompokKeluhanUid]
-          : result.data.data.rekapitulasiKeluhanPerKelompokKeluhan
+          : [...result.data.data.rekapitulasiKeluhanPerKelompokKeluhan]
+
+        if (grouping.value.length > 0 && grouping.value[0].data != '') {
+          data.value = ref.sort((a, b) =>
+            a[grouping.value[0].data].localeCompare(b[grouping.value[0].data])
+          )
+        } else {
+          data.value = ref
+        }
       } else {
         data.value = []
       }

src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue

@@ -1077,7 +1077,15 @@ const filterData = async (params: any) => {
   await requestGraphQl(queries.keluhan.rekap.keluhanPerTanggal, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        data.value = result.data.data.rekapitulasiKeluhanPerTanggal
+        if (grouping.value.length > 0 && grouping.value[0].data != '') {
+          console.log([...result.data.data.rekapitulasiKeluhanPerTanggal])
+
+          data.value = [...result.data.data.rekapitulasiKeluhanPerTanggal].sort((a, b) =>
+            a[grouping.value[0].data].localeCompare(b[grouping.value[0].data])
+          )
+        } else {
+          data.value = result.data.data.rekapitulasiKeluhanPerTanggal
+        }
       } else {
         data.value = []
       }

src/utils/api/api.graphql.ts

@@ -411,6 +411,10 @@ export const queries = {
           ) {
             id_uid
             nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
             tanggal_lapor
             total
             total_durasi_response