Refactor grouping logic in RGangguan_PerTanggal.vue, Type13.vue, and RGangguan_PerRegu.vue

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">
+    <div class="flex flex-col flex-1 space-y-2" v-if="ulp.id == 0">
-      <label class="filter-input-label">Group By Kode Unit Distribusi:</label>
+      <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="[
+      <InlineRadioGroup
-        { id: 1, title: 'Tidak' },
+        @update:group-value="(value) => (data.groupBy = value.id === 2)"
-        { id: 2, title: 'Ya, Grupkan' }
+        :radio-items="[
-      ]" />
+          { id: 1, title: 'Tidak' },
+          { id: 2, title: 'Ya, Grupkan' }
+        ]"
+      />
     </div>
   </div>
-
 </template>

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"
+        :data-field="group.data"
-        caption="UID"
+        :caption="group.caption"
         css-class="custom-table-column"
-        group-index="0"
+        cell-template="formatText"
-        v-if="isGroupBy"
+        :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 {

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 {

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"
+        :data-field="group.data"
-        caption="UID"
+        :caption="group.caption"
         css-class="custom-table-column"
-        :group-index="0"
+        cell-template="formatText"
-        name="NamaUID"
+        :group-index="index"
-        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
       />
       <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))

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"
+        :data-field="group.data"
-        caption="UID"
+        :caption="group.caption"
         css-class="custom-table-column"
-        :group-index="0"
+        cell-template="formatText"
-        name="NamaUID"
+        :group-index="index"
-        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
       />
       <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

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"
+        :data-field="group.data"
-        caption="UID"
+        :caption="group.caption"
         css-class="custom-table-column"
-        :group-index="0"
+        cell-template="formatText"
-        v-if="isGroupBy"
+        :group-index="index"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field=""
-        caption="Seluruh Distribusi"
-        css-class="custom-table-column"
-        :group-index="0"
-        v-else
       />
       <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 {