From 4031e8cdf6725d732a4dfd335df04c9b37dc47d6 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 8 Apr 2024 20:06:30 +0700
Subject: [PATCH] Refactor grouping logic in RGangguan_PerTanggal.vue,
 Type13.vue, and RGangguan_PerRegu.vue

---
 src/components/Form/FiltersType/Type13.vue    | 39 ++++++--
 .../Gangguan/Rekap/RGangguan_PerRegu.vue      | 81 ++++++++++++++--
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   | 25 ++++-
 .../Rekap/RKeluhan_PerFungsiBidang.vue        | 92 +++++++++++++++----
 .../Rekap/RKeluhan_PerKelompokKeluhan.vue     | 91 ++++++++++++++----
 .../Keluhan/Rekap/RKeluhan_PerTanggal.vue     | 89 +++++++++++++++---
 6 files changed, 352 insertions(+), 65 deletions(-)

diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
index 50c0401..00e0b98 100755
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -67,12 +67,22 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
+      <Select
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :selected="up3"
+        :placeholder="up3Placeholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Layanan Pelanggan:</label>
-      <Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
+      <Select
+        @update:selected="setUlp($event)"
+        :data="itemsUlp"
+        :selected="ulp"
+        :placeholder="ulpPlaceholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -80,14 +90,25 @@ onMounted(() => {
       <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
 
-    <div class="flex flex-col flex-1 space-y-2">
-      <label class="filter-input-label">Group By Kode Unit Distribusi:</label>
+    <div class="flex flex-col flex-1 space-y-2" v-if="ulp.id == 0">
+      <label class="filter-input-label"
+        >Group By
+        {{
+          uid.id != 0
+            ? up3.id != 0
+              ? 'Unit Layanan Pelanggan'
+              : 'Unit Pelaksanaan Pelayanan Pelanggan'
+            : 'Kode Unit Distribusi'
+        }}:</label
+      >
 
-      <InlineRadioGroup @update:group-value="(value) => (data.groupBy = value.id === 2)" :radio-items="[
-        { id: 1, title: 'Tidak' },
-        { id: 2, title: 'Ya, Grupkan' }
-      ]" />
+      <InlineRadioGroup
+        @update:group-value="(value) => (data.groupBy = value.id === 2)"
+        :radio-items="[
+          { id: 1, title: 'Tidak' },
+          { id: 2, title: 'Ya, Grupkan' }
+        ]"
+      />
     </div>
   </div>
-
 </template>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index a4c9746..97c2963 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -49,13 +49,15 @@
         :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
       />
       <DxColumn
-        :width="120"
+        v-if="grouping.length > 0"
+        v-for="(group, index) in grouping"
+        :width="150"
         alignment="center"
-        data-field="nama_uid"
-        caption="UID"
+        :data-field="group.data"
+        :caption="group.caption"
         css-class="custom-table-column"
-        group-index="0"
-        v-if="isGroupBy"
+        cell-template="formatText"
+        :group-index="index"
       />
       <DxColumn
         :width="150"
@@ -1006,6 +1008,12 @@ const reportMeta = ref({
   periode: '',
   groupBy: false
 })
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Seluruh Unit'
+  }
+])
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
@@ -1225,6 +1233,67 @@ const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
+  isGroupBy.value = params.groupBy
+  if (isGroupBy.value) {
+    if (uid.id != 0) {
+      grouping.value = [
+        {
+          data: 'nama_up3',
+          caption: 'UP3'
+        }
+      ]
+
+      if (up3.id != 0 || posko.id != 0) {
+        grouping.value = [
+          {
+            data: 'nama_ulp',
+            caption: 'ULP'
+          }
+        ]
+      }
+    } else {
+      grouping.value = [
+        {
+          data: 'nama_uid',
+          caption: 'UID'
+        }
+      ]
+    }
+  } else {
+    if (uid.id != 0) {
+      grouping.value = [
+        {
+          data: 'nama_uid',
+          caption: 'UID'
+        }
+      ]
+
+      if (up3.id != 0) {
+        grouping.value = [
+          {
+            data: 'nama_up3',
+            caption: 'UP3'
+          }
+        ]
+
+        if (posko.id != 0) {
+          grouping.value = [
+            {
+              data: 'nama_ulp',
+              caption: 'ULP'
+            }
+          ]
+        }
+      }
+    } else {
+      grouping.value = [
+        {
+          data: '',
+          caption: 'Seluruh Unit'
+        }
+      ]
+    }
+  }
 
   const query = {
     dateFrom: dateValue[0]
@@ -1241,7 +1310,7 @@ const filterData = async (params: any) => {
   loadingData.value = true
   await requestGraphQl(queries.gangguan.rekap.gangguanPerRegu, query)
     .then((result) => {
-      isGroupBy.value = params.groupBy
+      
       if (result.data.data != undefined) {
         data.value = result.data.data.rekapitulasiGangguanPerRegu
       } else {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index 007a34b..15856cb 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -58,6 +58,15 @@
         group-index="0"
         v-if="isGroupBy"
       />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field=""
+        caption="Seluruh Unit"
+        css-class="custom-table-column"
+        group-index="0"
+        v-else
+      />
       <DxColumn
         :width="170"
         alignment="center"
@@ -849,6 +858,20 @@ const reportMeta = ref({
   periode: '',
   groupBy: false
 })
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Seluruh Unit'
+  },
+  {
+    data: 'nama_uid',
+    caption: 'UID'
+  },
+  {
+    data: 'nama_up3',
+    caption: 'UP3'
+  }
+])
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
@@ -958,6 +981,7 @@ const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
+  isGroupBy.value = params.groupBy
 
   const query = {
     dateFrom: dateValue[0]
@@ -974,7 +998,6 @@ const filterData = async (params: any) => {
   loadingData.value = true
   await requestGraphQl(queries.gangguan.rekap.gangguanPerTanggal, query)
     .then((result) => {
-      isGroupBy.value = params.groupBy
       if (result.data.data != undefined) {
         data.value = result.data.data.rekapitulasiGangguanPerTanggal
       } else {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index 1e6d13d..e39f947 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -47,26 +47,18 @@
         data-type="number"
         caption="No"
         cell-template="formatNumber"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
       />
       <DxColumn
-        :width="120"
+        v-if="grouping.length > 0"
+        v-for="(group, index) in grouping"
+        :width="150"
         alignment="center"
-        data-field="nama_uid"
-        caption="UID"
+        :data-field="group.data"
+        :caption="group.caption"
         css-class="custom-table-column"
-        :group-index="0"
-        name="NamaUID"
-        v-if="isGroupBy"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field=""
-        caption="Seluruh Distribusi"
-        css-class="custom-table-column"
-        :group-index="0"
-        name="Distribusi"
-        v-else
+        cell-template="formatText"
+        :group-index="index"
       />
       <DxColumn
         :width="170"
@@ -875,6 +867,12 @@ const reportMeta = ref({
   periode: '',
   groupBy: false
 })
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Seluruh Unit'
+  }
+])
 
 let total = 0
 let total_selesai = 0
@@ -1000,6 +998,67 @@ const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
+  isGroupBy.value = params.groupBy
+  if (isGroupBy.value) {
+    if (uid.id != 0) {
+      grouping.value = [
+        {
+          data: 'nama_up3',
+          caption: 'UP3'
+        }
+      ]
+
+      if (up3.id != 0 || ulp.id != 0) {
+        grouping.value = [
+          {
+            data: 'nama_ulp',
+            caption: 'ULP'
+          }
+        ]
+      }
+    } else {
+      grouping.value = [
+        {
+          data: 'nama_uid',
+          caption: 'UID'
+        }
+      ]
+    }
+  } else {
+    if (uid.id != 0) {
+      grouping.value = [
+        {
+          data: 'nama_uid',
+          caption: 'UID'
+        }
+      ]
+
+      if (up3.id != 0) {
+        grouping.value = [
+          {
+            data: 'nama_up3',
+            caption: 'UP3'
+          }
+        ]
+
+        if (ulp.id != 0) {
+          grouping.value = [
+            {
+              data: 'nama_ulp',
+              caption: 'ULP'
+            }
+          ]
+        }
+      }
+    } else {
+      grouping.value = [
+        {
+          data: '',
+          caption: 'Seluruh Unit'
+        }
+      ]
+    }
+  }
 
   const query = {
     dateFrom: dateValue[0]
@@ -1017,7 +1076,6 @@ const filterData = async (params: any) => {
   await requestGraphQl(queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        isGroupBy.value = params.groupBy
         if (filters.value.groupBy) {
           data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang]
             .sort((a, b) => a.nama_uid.localeCompare(b.nama_uid))
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index df0b989..def15ec 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -50,24 +50,15 @@
         cell-template="formatNumber"
       />
       <DxColumn
-        :width="120"
+        v-if="grouping.length > 0"
+        v-for="(group, index) in grouping"
+        :width="150"
         alignment="center"
-        data-field="nama_uid"
-        caption="UID"
+        :data-field="group.data"
+        :caption="group.caption"
         css-class="custom-table-column"
-        :group-index="0"
-        name="NamaUID"
-        v-if="isGroupBy"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field=""
-        caption="Seluruh Distribusi"
-        css-class="custom-table-column"
-        :group-index="0"
-        name="Distribusi"
-        v-else
+        cell-template="formatText"
+        :group-index="index"
       />
       <DxColumn
         :width="170"
@@ -872,6 +863,12 @@ const reportMeta = ref({
   periode: '',
   groupBy: false
 })
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Seluruh Distribusi'
+  }
+])
 
 let total = 0
 let total_selesai = 0
@@ -997,6 +994,67 @@ const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
+  isGroupBy.value = params.groupBy
+  if (isGroupBy.value) {
+    if (uid.id != 0) {
+      grouping.value = [
+        {
+          data: 'nama_up3',
+          caption: 'UP3'
+        }
+      ]
+
+      if (up3.id != 0 || ulp.id != 0) {
+        grouping.value = [
+          {
+            data: 'nama_ulp',
+            caption: 'ULP'
+          }
+        ]
+      }
+    } else {
+      grouping.value = [
+        {
+          data: 'nama_uid',
+          caption: 'UID'
+        }
+      ]
+    }
+  } else {
+    if (uid.id != 0) {
+      grouping.value = [
+        {
+          data: 'nama_uid',
+          caption: 'UID'
+        }
+      ]
+
+      if (up3.id != 0) {
+        grouping.value = [
+          {
+            data: 'nama_up3',
+            caption: 'UP3'
+          }
+        ]
+
+        if (ulp.id != 0) {
+          grouping.value = [
+            {
+              data: 'nama_ulp',
+              caption: 'ULP'
+            }
+          ]
+        }
+      }
+    } else {
+      grouping.value = [
+        {
+          data: '',
+          caption: 'Seluruh Distribusi'
+        }
+      ]
+    }
+  }
 
   const query = {
     dateFrom: dateValue[0]
@@ -1018,7 +1076,6 @@ const filterData = async (params: any) => {
     query
   )
     .then((result) => {
-      isGroupBy.value = params.groupBy
       if (result.data.data != undefined) {
         data.value = isGroupBy.value
           ? result.data.data.rekapitulasiKeluhanPerKelompokKeluhanUid
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index e3588b9..0552066 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -58,22 +58,15 @@
         cell-template="formatText"
       />
       <DxColumn
-        :width="170"
+        v-if="grouping.length > 0"
+        v-for="(group, index) in grouping"
+        :width="150"
         alignment="center"
-        data-field="nama_uid"
-        caption="UID"
+        :data-field="group.data"
+        :caption="group.caption"
         css-class="custom-table-column"
-        :group-index="0"
-        v-if="isGroupBy"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field=""
-        caption="Seluruh Distribusi"
-        css-class="custom-table-column"
-        :group-index="0"
-        v-else
+        cell-template="formatText"
+        :group-index="index"
       />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn
@@ -875,6 +868,12 @@ const reportMeta = ref({
   periode: '',
   groupBy: false
 })
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Seluruh Distribusi'
+  }
+])
 
 let total = 0
 let total_selesai = 0
@@ -1000,6 +999,67 @@ const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
+  isGroupBy.value = params.groupBy
+  if (isGroupBy.value) {
+    if (uid.id != 0) {
+      grouping.value = [
+        {
+          data: 'nama_up3',
+          caption: 'UP3'
+        }
+      ]
+
+      if (up3.id != 0 || ulp.id != 0) {
+        grouping.value = [
+          {
+            data: 'nama_ulp',
+            caption: 'ULP'
+          }
+        ]
+      }
+    } else {
+      grouping.value = [
+        {
+          data: 'nama_uid',
+          caption: 'UID'
+        }
+      ]
+    }
+  } else {
+    if (uid.id != 0) {
+      grouping.value = [
+        {
+          data: 'nama_uid',
+          caption: 'UID'
+        }
+      ]
+
+      if (up3.id != 0) {
+        grouping.value = [
+          {
+            data: 'nama_up3',
+            caption: 'UP3'
+          }
+        ]
+
+        if (ulp.id != 0) {
+          grouping.value = [
+            {
+              data: 'nama_ulp',
+              caption: 'ULP'
+            }
+          ]
+        }
+      }
+    } else {
+      grouping.value = [
+        {
+          data: '',
+          caption: 'Seluruh Unit'
+        }
+      ]
+    }
+  }
 
   const query = {
     dateFrom: dateValue[0]
@@ -1016,7 +1076,6 @@ const filterData = async (params: any) => {
   loadingData.value = true
   await requestGraphQl(queries.keluhan.rekap.keluhanPerTanggal, query)
     .then((result) => {
-      isGroupBy.value = params.groupBy
       if (result.data.data != undefined) {
         data.value = result.data.data.rekapitulasiKeluhanPerTanggal
       } else {