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

2024-04-08 20:06:30 +07:00 · 2024-04-08 20:06:30 +07:00 · 4031e8cdf6
commit 4031e8cdf6
parent 8695a13d39
6 changed files with 352 additions and 65 deletions
--- 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>
--- 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 {
--- 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 {
--- 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))
--- 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
--- 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 {