Refactor DatePicker.vue and api.graphql.ts, and RKeluhan_BerdasarMedia.vue files

src/components/DatePicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { PhCalendarBlank } from '@phosphor-icons/vue'
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import VueTailwindDatepicker from 'vue-tailwind-datepicker'
 
 const dateValue = ref(
@@ -76,6 +76,10 @@ const customShortcuts = () => {
 watch(dateValue, (newValue) => {
   emit('update:dateValue', newValue)
 })
+
+onMounted(() => {
+  emit('update:dateValue', dateValue.value)
+})
 </script>
 
 <template>

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

@@ -1,35 +1,84 @@
 <template>
-  <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)"
+  <Filters
-    @run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4">
+    @reset-form="data = []"
+    :report-button="true"
+    @run-search="() => filterData(filters)"
+    @run-report="() => exportToPDF(reportMeta, data, true)"
+    class="mb-4"
+  >
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+    <DxDataGrid
-      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      ref="dataGridRef"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
+      :allow-column-reordering="true"
-      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      class="max-h-[calc(100vh-140px)] mb-10"
-      :word-wrap-enabled="true">
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onDataSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <!--  -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+      <DxColumn
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
+        css-class="custom-table-column"
-        data-field="no" cell-template="formatNumber" />
+        :width="50"
-      <DxColumn :width="170" data-field="media" caption="Nama Media" alignment="center" cell-template="formatText"
+        alignment="center"
-        css-class="custom-table-column" header-cell-template="title-header" />
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+        data-field="no"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="170"
+        data-field="media"
+        caption="Nama Media"
+        alignment="center"
+        cell-template="formatText"
+        css-class="custom-table-column"
+        header-cell-template="title-header"
+      />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-        <DxColumn v-for="i in 31" :width="100" alignment="center" :data-field="`tgl${i}`" data-type="number"
+        <DxColumn
-          :caption="i" css-class="custom-table-column" cell-template="formatNumber" />
+          v-for="i in 31"
+          :width="100"
+          alignment="center"
+          :data-field="`tgl${i}`"
+          data-type="number"
+          :caption="i"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
-      <DxColumn :width="170" alignment="center" data-field="total" caption="Total" css-class="custom-table-column"
+      <DxColumn
-        cell-template="formatNumber" />
+        :width="170"
+        alignment="center"
+        data-field="total"
+        caption="Total"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
 
       <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
@@ -40,12 +89,12 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="setDate(data.column.caption)">
           {{
-    isNumber(data.text)
+            isNumber(data.text)
-      ? data.column.caption == '%'
+              ? data.column.caption == '%'
-        ? formatPercentage(data.text)
+                ? formatPercentage(data.text)
-        : formatNumber(data.text)
+                : formatNumber(data.text)
-      : data.text
+              : data.text
-  }}
+          }}
         </p>
       </template>
 
@@ -56,66 +105,208 @@
       </template>
 
       <DxSummary>
-        <DxTotalItem display-format="Total" show-in-column="media" css-class="text-white !text-l eft" />
+        <DxTotalItem
-        <DxTotalItem v-for="i in 31" summary-type="sum" display-format="{0}" :column="`tgl${i}`"
+          display-format="Total"
-          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+          show-in-column="media"
-        <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          css-class="text-white !text-l eft"
-          :customize-text="(e: any) => formatNumber(e.value)" />
+        />
+        <DxTotalItem
+          v-for="i in 31"
+          summary-type="sum"
+          display-format="{0}"
+          :column="`tgl${i}`"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
       </DxSummary>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan Berdasarkan Media" @on-close="closeDialog"
+  <DetailDialog
-    :full-width="true">
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Gangguan Berdasarkan Media"
+    @on-close="closeDialog"
+    :full-width="true"
+  >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
-        <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
+        <DxDataGrid
-          :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
+          :allow-column-reordering="true"
-          :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
+          class="max-h-[calc(100vh-140px)]"
-          @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          :column-width="100"
+          @exporting="onExportingDetail"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
+          <DxPager
-            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+            :visible="true"
+            :allowed-page-sizes="[20, 50, 100]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
           <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+          <DxExport
+            :enabled="true"
+            :formats="['pdf', 'xlsx', 'document']"
+            :allow-export-selected-data="false"
+          />
 
-          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+          <DxColumn
-            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
+            css-class="custom-table-column"
-            caption="No" cell-template="formatNumber" />
+            :width="50"
-          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
+            alignment="center"
-            css-class="custom-table-column" cell-template="formatText" />
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+            data-type="number"
-            css-class="custom-table-column" cell-template="formatText" />
+            caption="No"
-          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
+            cell-template="formatNumber"
-            css-class="custom-table-column" cell-template="formatText" />
+          />
-          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
+          <DxColumn
-            css-class="custom-table-column" cell-template="formatText" />
+            :width="150"
-          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            alignment="center"
-            css-class="custom-table-column" cell-template="formatTime" />
+            data-field="no_laporan"
-          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            caption="No Laporan"
-            css-class="custom-table-column" cell-template="formatTime" />
+            css-class="custom-table-column"
-          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
+            cell-template="formatText"
-            css-class="custom-table-column" cell-template="formatText" />
+          />
-          <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
+          <DxColumn
-            css-class="custom-table-column" cell-template="formatText" />
+            :width="150"
-          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+            alignment="center"
-            css-class="custom-table-column" cell-template="formatText" />
+            data-field="waktu_lapor"
-          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            caption="Tgl Lapor"
-            css-class="custom-table-column" cell-template="formatText" />
+            css-class="custom-table-column"
-          <DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            cell-template="formatText"
-            css-class="custom-table-column" cell-template="formatText" />
+          />
-          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+          <DxColumn
-            css-class="custom-table-column" cell-template="formatText" />
+            :width="150"
-          <DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+            alignment="center"
-            css-class="custom-table-column" cell-template="formatText" />
+            data-field="waktu_response"
-          <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
+            caption="Tgl Datang"
-            css-class="custom-table-column" cell-template="formatText" />
+            css-class="custom-table-column"
-          <DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan"
+            cell-template="formatText"
-            css-class="custom-table-column" cell-template="formatText" />
+          />
-          <DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
+          <DxColumn
-            css-class="custom-table-column" cell-template="formatText" />
+            :width="150"
+            alignment="center"
+            data-field="waktu_recovery"
+            caption="Tgl Nyala"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_response_time"
+            caption="Durasi Response Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_recovery_time"
+            caption="Durasi Recovery Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="status_akhir"
+            caption="Status"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="referensi_marking"
+            caption="Referensi Marking"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="idpel_nometer"
+            caption="IDPEL/NO METER"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_pelapor"
+            caption="Nama Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="alamat_pelapor"
+            caption="Alamat Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_telp_pelapor"
+            caption="No Telp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="keterangan_pelapor"
+            caption="Keterangan Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_posko"
+            caption="Posko"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tindakan"
+            caption="Tidakan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="penyebab"
+            caption="Penyebab"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -151,28 +342,46 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_response"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_recovery"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
+          <InputText
-      ? formatWaktu(dataSubSelected?.durasi_response_time)
+            :readonly="true"
-      : '-'
+            :value="
-    " class-name="flex-1" />
+              parseInt(dataSubSelected?.durasi_response_time)
+                ? formatWaktu(dataSubSelected?.durasi_response_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+          <InputText
-      ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+            :readonly="true"
-      : '-'
+            :value="
-    " class-name="flex-1" />
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -182,7 +391,11 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.referensi_marking"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -197,17 +410,29 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.alamat_pelapor"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_telp_pelapor"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_pelapor"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -240,7 +465,6 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
-  DxLoadPanel,
   DxPager,
   DxPaging,
   DxScrolling,
@@ -293,6 +517,7 @@ const setDate = (value: any) => {
     const dateValue = filters.value.periode.split(' s/d ')
     const dateYear = dateValue[0].split('-').reverse().join('-').slice(0, -2) + tanggal
     console.log('date', dateYear)
+    console.log('filters', filters.value)
     date.value = dateYear
   } else {
     date.value = ''
@@ -301,12 +526,12 @@ const setDate = (value: any) => {
 
 const getDetail = async () => {
   const ref = dataSelected.value
-
+  const { posko, uid, up3 } = filters.value
   const query = {
     tanggal: date.value,
-    posko: ref?.id_posko ? ref?.id_posko : 0,
+    posko: posko ? posko.id : 0,
-    idUid: ref?.id_uid ? ref?.id_uid : 0,
+    idUid: uid ? uid.id : 0,
-    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    idUp3: up3 ? up3.id : 0,
     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
     media: ref?.media ? ref?.media : ''
   }

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

@@ -128,7 +128,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRatingTotal"
           />
           <DxColumn
             alignment="center"
@@ -136,7 +136,7 @@
             data-type="number"
             caption="1"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRating1"
           />
           <DxColumn
             alignment="center"
@@ -144,7 +144,7 @@
             data-type="number"
             caption="2"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRating2"
           />
           <DxColumn
             alignment="center"
@@ -152,7 +152,7 @@
             data-type="number"
             caption="3"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRating3"
           />
           <DxColumn
             alignment="center"
@@ -160,7 +160,7 @@
             data-type="number"
             caption="4"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRating4"
           />
           <DxColumn
             alignment="center"
@@ -168,7 +168,7 @@
             data-type="number"
             caption="5"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRating5"
           />
           <DxColumn
             alignment="center"
@@ -188,7 +188,7 @@
           data-type="number"
           caption="Jml"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberJmlNonRating"
         />
         <DxColumn
           alignment="center"
@@ -201,19 +201,49 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p
+          class="text-left cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: false,
+              progress: 0,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
           {{ data.text }}
         </p>
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: false,
+              progress: 0,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
           {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: false,
+              progress: 0,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -225,7 +255,17 @@
       </template>
 
       <template #formatNumberLaporanTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -237,7 +277,17 @@
       </template>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 1,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -249,7 +299,17 @@
       </template>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 2,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -261,10 +321,174 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p
+          class="!text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: false,
+              progress: 0,
+              rating: 0,
+              nonRating: 0
+            })
+          "
+        >
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
+
+      <template #formatNumberRatingTotal="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 0,
+              nonRating: 2
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRating1="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 1,
+              nonRating: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRating2="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 2,
+              nonRating: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRating3="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 3,
+              nonRating: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRating4="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 4,
+              nonRating: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRating5="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 5,
+              nonRating: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberJmlNonRating="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              dialog: true,
+              progress: 0,
+              rating: 0,
+              nonRating: 1
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 
@@ -640,7 +864,6 @@ import {
   DxColumnFixing,
   DxExport,
   DxGrouping,
-  DxLoadPanel,
   DxPager,
   DxPaging,
   DxScrolling,
@@ -684,64 +907,14 @@ const reportMeta = ref({
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
   periode: ''
 })
-const agreeToShowDialog = ref(false)
+const parameterRequest = ref({
-const progressSelected = ref(0)
+  dialog: false,
-// const ratingToShow = ref(0)
+  progress: 0,
-// const nonRating = ref(0)
+  rating: 0,
-
+  nonRating: 0
-// const setAgreementDialog = (
+})
-//   status: boolean,
+const setParameterRequest = (data: any) => {
-//   progress: number,
+  parameterRequest.value = data
-//   rating: number,
-//   ratingStatus: number
-// ) => {
-//   agreeToShowDialog.value = status
-//   progressSelected.value = progress
-//   ratingToShow.value = rating
-//   nonRating.value = ratingStatus
-// }
-
-// const getDetail = async () => {
-//   const dateValue = filters.value.periode.split(' s/d ')
-//   const ref = dataSelected.value
-
-//   const query = {
-//     dateFrom: dateValue[0]
-//       ? dateValue[0].split('-').reverse().join('-')
-//       : new Date().toISOString().slice(0, 10),
-//     dateTo: dateValue[1]
-//       ? dateValue[1].split('-').reverse().join('-')
-//       : new Date().toISOString().slice(0, 10),
-//     posko: ref?.id_ulp ? ref?.id_ulp : 0,
-//     idUid: ref?.id_uid ? ref?.id_uid : 0,
-//     idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
-//     idRegu: ref?.id_regu ? ref?.id_regu : 0,
-//     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-//     isSelesai: progressSelected.value,
-//     isNonRating: nonRating.value,
-//     nilaiRating: ratingToShow.value
-//   }
-
-//   loadingSubData.value = true
-//   await requestGraphQl(queries.gangguan.rekap.gangguanRatingDetail, query)
-//     .then((result) => {
-//       if (result.data.data != undefined) {
-//         dataSub.value = result.data.data.detailRekapitulasiGangguanBerdasarkanRating
-//       } else {
-//         dataSub.value = []
-//       }
-//     })
-//     .catch((err) => {
-//       console.error(err)
-//     })
-//     .finally(() => {
-//       loadingSubData.value = false
-//       dialogDetail.value = true
-//     })
-// }
-const setAgreementDialog = (status: boolean, progress: number) => {
-  agreeToShowDialog.value = status
-  progressSelected.value = progress
 }
 
 const getDetail = async () => {
@@ -755,24 +928,21 @@ const getDetail = async () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref?.id_posko ? ref?.id_posko : 0,
+    posko: ref?.id_ulp ? ref?.id_ulp : 0,
     idUid: ref?.id_uid ? ref?.id_uid : 0,
     idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
     idRegu: ref?.id_regu ? ref?.id_regu : 0,
-    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-    media: ref?.media ? ref?.media : '',
+    isSelesai: parameterRequest.value.progress,
-    isSelesai: progressSelected.value,
+    isNonRating: parameterRequest.value.nonRating,
-    tanggal: '',
+    nilaiRating: parameterRequest.value.rating
-    namaIssuetype: '',
-    namaSubissuetype: ''
   }
 
   loadingSubData.value = true
-  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
+  await requestGraphQl(queries.gangguan.rekap.gangguanRatingDetail, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        dataSub.value = result.data.data.detailGangguan
+        dataSub.value = result.data.data.detailRekapitulasiGangguanBerdasarkanRating
       } else {
         dataSub.value = []
       }
@@ -785,6 +955,52 @@ const getDetail = async () => {
       dialogDetail.value = true
     })
 }
+// const setAgreementDialog = (status: boolean, progress: number) => {
+//   agreeToShowDialog.value = status
+//   progressSelected.value = progress
+// }
+
+// const getDetail = async () => {
+//   const dateValue = filters.value.periode.split(' s/d ')
+//   const ref = dataSelected.value
+
+//   const query = {
+//     dateFrom: dateValue[0]
+//       ? dateValue[0].split('-').reverse().join('-')
+//       : new Date().toISOString().slice(0, 10),
+//     dateTo: dateValue[1]
+//       ? dateValue[1].split('-').reverse().join('-')
+//       : new Date().toISOString().slice(0, 10),
+//     posko: ref?.id_posko ? ref?.id_posko : 0,
+//     idUid: ref?.id_uid ? ref?.id_uid : 0,
+//     idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+//     idRegu: ref?.id_regu ? ref?.id_regu : 0,
+//     idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
+//     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+//     media: ref?.media ? ref?.media : '',
+//     isSelesai: progressSelected.value,
+//     tanggal: '',
+//     namaIssuetype: '',
+//     namaSubissuetype: ''
+//   }
+
+//   loadingSubData.value = true
+//   await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
+//     .then((result) => {
+//       if (result.data.data != undefined) {
+//         dataSub.value = result.data.data.detailGangguan
+//       } else {
+//         dataSub.value = []
+//       }
+//     })
+//     .catch((err) => {
+//       console.error(err)
+//     })
+//     .finally(() => {
+//       loadingSubData.value = false
+//       dialogDetail.value = true
+//     })
+// }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
@@ -795,7 +1011,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (parameterRequest.value.dialog) {
     getDetail()
   }
 }

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

@@ -453,13 +453,12 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
   DxColumnFixing,
   DxExport,
-  DxLoadPanel,
   DxPaging,
   DxPager,
   DxSummary,
@@ -561,30 +560,23 @@ const filterData = async (params: any) => {
 
 const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
+  const { ulp, uid, up3 } = filters.value
   const selected = dataSelected.value
 
   const query = {
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
-    isSelesai: 0,
-    media: selected?.media ? selected?.media : '',
     tanggal: date.value,
-    namaIssuetype: '',
+    idPosko: ulp ? ulp.id : 0,
-    namaSubissuetype: ''
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    media: selected?.media ? selected?.media : '',
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : ''
   }
 
   loadingSubData.value = true
-  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        dataSub.value = result.data.data.detailKeluhanAll
+        dataSub.value = result.data.data.detailRekapitulasiKeluhanBerdasarkanMedia
       } else {
         dataSub.value = []
       }

src/utils/api/api.graphql.ts

@@ -597,6 +597,47 @@ export const queries = {
           }
         }
       `,
+      keluhanBerdasarkanMediaDetail: gql`
+        query detailRekapitulasiKeluhanBerdasarkanMedia(
+          $tanggal: String!
+          $idPosko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $namaRegional: String
+          $media: String
+        ) {
+          detailRekapitulasiKeluhanBerdasarkanMedia(
+            tanggal: $tanggal
+            idPosko: $idPosko
+            idUid: $idUid
+            idUp3: $idUp3
+            namaRegional: $namaRegional
+            media: $media
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_response_time
+            durasi_recovery_time
+            status_akhir
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            respon_pelanggan
+          }
+        }
+      `,
       rekapKeluhanBerdasarkanMedia: gql`
         query rekapitulasiKeluhanBerdasarkanMedia(
           $dateFrom: Date!