Refactor component structure and add BufferDialog component

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue

@@ -12,12 +12,19 @@
 
   <Anomali_LAPPGP_LPT
     :data="data"
-    :loading="loadingData"
     :filters="filters"
     @update:data-sub="dataSub = $event"
     @update:loading-sub-data="loadingSubData = $event"
+    @update:marking="marking = $event"
   />
-  <Anomali_LAPPGP_LPP :data="dataSub" />
+  <Anomali_LAPPGP_LPP
+    :data="dataSub"
+    :filters="filters"
+    :marking="marking"
+    @update:loading-sub-data="loadingSubData = $event"
+  />
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -29,6 +36,7 @@ import Filters from '@/components/Form/Filters.vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -37,6 +45,7 @@ const dataSub = ref<any[]>([])
 const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const marking = ref<any>(0)
 const filters = ref({
   jenisLaporan: {
     id: 1,

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue

@@ -1,7 +1,4 @@
 <template>
-  <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
-  </div>
   <DxDataGrid
     ref="dataGridRef"
     :allow-column-reordering="true"
@@ -71,7 +68,7 @@
     <DxColumn
       :width="170"
       alignment="center"
-      data-field=""
+      data-field="nama_petugas"
       caption="Nama Petugas"
       css-class="custom-table-column"
       cell-template="formatText"
@@ -85,11 +82,11 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_total"
           data-type="number"
           caption="a"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberTotalWo"
         />
       </DxColumn>
     </DxColumn>
@@ -102,33 +99,33 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="anomali_pln_mobile_marking"
+          data-field="wo_pln_mobile"
           data-type="number"
           caption="b"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberPLNMobile"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="anomali_cc123_marking"
+          data-field="wo_cc123"
           data-type="number"
           caption="c"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberCC"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="total_anomali_marking"
           data-type="number"
           caption="d=b+c"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberTotal"
+          :calculate-display-value="(rowData: any) => rowData.wo_pln_mobile + rowData.wo_cc123"
         />
       </DxColumn>
     </DxColumn>
@@ -141,7 +138,7 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_anomali_pln_mobile_marking"
+          data-field="persen_anomali_pln_mobile"
           data-type="number"
           caption="e=b/a"
           css-class="custom-table-column"
@@ -152,7 +149,7 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_anomali_cc123_marking"
+          data-field="persen_anomali_cc123"
           data-type="number"
           caption="f=c/a"
           css-class="custom-table-column"
@@ -163,17 +160,102 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_anomali_marking"
           data-type="number"
           caption="g=e+f"
           css-class="custom-table-column"
           cell-template="formatPercentage"
+          :calculate-display-value="
+            (rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
+          "
         />
       </DxColumn>
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberTotalWo="{ data }">
+      <p
+        class="text-right"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberPLNMobile="{ data }">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: 1
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberCC="{ data }">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: 2
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberTotal="{ data }">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: 0
+          })
+        "
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -185,23 +267,576 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer">
+      <p
+        class="text-right"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer">
+      <p
+        class="text-left"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
         {{ data.text }}
       </p>
     </template>
 
     <template #formatTime="{ data }">
-      <p class="!text-right">
+      <p
+        class="!text-right"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
     </template>
   </DxDataGrid>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Detail Anomali Penanganan Pengaduan Berulang Petugas"
+    @on-close="closedialogDetail"
+    :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"
+          :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"
+            :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"
+          />
+
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_uid"
+            caption="UIW/D"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_up3"
+            caption="UP3"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_ulp"
+            caption="Rayon"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Nama Petugas"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_laporan"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="No Laporan Referensi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_lapor"
+            caption="Tgl/Jam Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_response"
+            caption="Tgl/Jam Datang"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_recovery"
+            caption="Tgl/Jam 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="durasi_dispatch_time"
+            caption="Durasi Penugasan Regu"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_perjalanan"
+            caption="Durasi Perjalanan Regu"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="distance"
+            caption="Jarak Closing (m)"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="dispatch_by"
+            caption="Dispacth Oleh"
+            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="150"
+            alignment="center"
+            data-field="keterangan_pelapor"
+            caption="Keterangan Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="media"
+            caption="Sumber Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="diselesaikan_oleh"
+            caption="Diselesaikan Oleh"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <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=""
+            caption="Status Induk"
+            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=""
+            caption="Referensi Marking Induk"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kode_gangguan"
+            caption="Kode Gangguan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jenis_gangguan"
+            caption="Jenis Gangguan"
+            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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tindakan"
+            caption="Tindakan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+
+          <template #formatText="{ data }">
+            <p class="text-left cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatNumber="{ data }">
+            <p class="text-right cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatTime="{ data }">
+            <p>
+              {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+            </p>
+          </template>
+        </DxDataGrid>
+      </div>
+    </div>
+    <div class="w-full mb-4 lg:w-[30%] lg:float-right">
+      <div class="p-4 space-y-2 bg-white rounded-xl">
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">UIW/D:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_uid" 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">UP3:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_up3" 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">Rayon:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" 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">Nama Petugas:</h3>
+          <InputText :readonly="true" value="" 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 Laporan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.no_laporan" 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 Laporan Referensi:</h3>
+          <InputText :readonly="true" value="" 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/Jam Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" 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/Jam Datang:</h3>
+          <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/Jam Nyala:</h3>
+          <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)
+                ? 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)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_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 Penugasan Regu:</h3>
+          <InputText
+            :readonly="true"
+            class-name="flex-1"
+            :value="
+              parseInt(dataSubSelected?.durasi_dispatch_time)
+                ? formatWaktu(dataSubSelected?.durasi_dispatch_time)
+                : '-'
+            "
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan Regu:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_perjalanan)
+                ? formatWaktu(dataSubSelected?.durasi_perjalanan)
+                : '-'
+            "
+            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">Jarak Closing (m):</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.distance" 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">Dispatch Oleh:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.dispatch_by" 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">IDPEL/NO METER:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" 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">Nama Pelapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_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">Alamat Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            type="textarea"
+            :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"
+          />
+        </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"
+            type="textarea"
+            :value="dataSubSelected?.keterangan_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">Sumber Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.media" 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">Diselesaikan Oleh:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.diselesaikan_oleh"
+            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">Status:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.status_akhir" 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">Status Induk:</h3>
+          <InputText :readonly="true" value="" 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">Referensi Marking:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.referensi_marking"
+            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">Referensi Marking Induk:</h3>
+          <InputText :readonly="true" value="" 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">Kode Gangguan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.kode_gangguan" 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">Jenis Gangguan:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.jenis_gangguan"
+            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">Penyebab:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" 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">Tindakan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -211,6 +846,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxGrouping,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -224,25 +860,110 @@ import { Workbook } from 'exceljs'
 import { computed, ref } from 'vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 const props = defineProps({
-  data: Array as () => any[]
+  data: Array as () => any[],
+  filters: Object as () => any,
+  marking: {
+    type: Number,
+    default: 0
+  }
 })
+const filters = computed(() => props.filters)
+const emit = defineEmits(['update:loadingSubData'])
 const data = computed(() => props.data)
-const dataSub = ref([])
+const dataSub = ref<any[]>([])
-const dataSelected = ref({})
+const dataSelected = ref<any>(null)
-const dataSubSelected = ref({})
+const dataSubSelected = ref<any>(null)
 const dialogDetail = ref(false)
+const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const parameterRequest = ref<any>({
+  media: null
+})
+const closedialogDetail = () => (dialogDetail.value = false)
+
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.media != null) {
+    agreeToShowDialog.value = true
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
+
+const resetData = () => {
+  dataSub.value = []
+  dataSubSelected.value = null
+}
+
+const getDetail = async () => {
+  resetData()
+  const { jenisLaporan } = filters.value
+
+  const selected = dataSelected.value
+  const query = {
+    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+    idUid: selected?.id_uid ? selected?.id_uid : 0,
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    media: parameterRequest.value?.media,
+    isMarking: props.marking,
+    idPetugas: selected?.id_petugas ? selected?.id_petugas : 0
+  }
+
+  loadingSubData.value = true
+  emit('update:loadingSubData', loadingSubData.value)
+  await requestGraphQl(
+    jenisLaporan.name == 'Laporan Berulang Unit'
+      ? queries.anomali.gangguan.petugasBerulangDetailSub
+      : jenisLaporan.name == 'Laporan Rating Negatif'
+        ? queries.anomali.gangguan.petugasRatingNegatifDetailSub
+        : queries.anomali.gangguan.petugasSkipStepDetailSub,
+    query
+  )
+    .then((result) => {
+      if (result.data.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          dataSub.value =
+            result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          dataSub.value =
+            result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif
+        } else {
+          dataSub.value =
+            result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep
+        }
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+      dialogDetail.value = true
+      emit('update:loadingSubData', loadingSubData.value)
+    })
+}
+
 const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
+
 const showDetail = () => {
   clearSelection()
-  dialogDetail.value = true
+  dataSub.value = []
-}
+  dataSubSelected.value = null
-const closeDialog = () => {
+  if (agreeToShowDialog.value) {
-  dialogDetail.value = false
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
@@ -277,7 +998,14 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
+}
+
+const onExportingDetail = (e: any) => {}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataSubSelected.value = data
 }
 </script>

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue

@@ -227,7 +227,10 @@
     </DxColumn>
 
     <template #formatNumberPLNMobileMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -239,7 +242,10 @@
     </template>
 
     <template #formatNumberPLNMobileNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -251,7 +257,10 @@
     </template>
 
     <template #formatNumberCCMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -263,7 +272,10 @@
     </template>
 
     <template #formatNumberCCNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -275,7 +287,7 @@
     </template>
 
     <template #formatNumberTotalMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 1)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 1 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -287,7 +299,7 @@
     </template>
 
     <template #formatNumberTotalNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 2)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 2 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -299,7 +311,10 @@
     </template>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -311,19 +326,25 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-left cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ data.text }}
       </p>
     </template>
 
     <template #formatTime="{ data }">
-      <p class="!text-right" @click="setParameterRequest(null, null)">
+      <p class="!text-right" @click="setParameterRequest({ media: null, marking: null })">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
     </template>
@@ -435,6 +456,19 @@
       />
     </DxSummary>
   </DxDataGrid>
+
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">
+      Laporan Pengaduan {{ parameterRequest.media != null ? parameterRequest.media : '' }}
+      {{
+        parameterRequest.marking != null
+          ? parameterRequest.marking == 1
+            ? 'Marking'
+            : 'Non Marking'
+          : ''
+      }}
+    </h1>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -468,31 +502,27 @@ const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
   data: Array as () => any[],
-  filters: Object as () => any,
+  filters: Object as () => any
-  loading: {
-    type: Boolean,
-    default: false
-  }
 })
+const emit = defineEmits(['update:dataSub', 'update:loadingSubData', 'update:marking'])
 const filters = ref<any>(computed(() => props.filters))
 const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>(null)
 const dataSubSelected = ref<any>(null)
 const dialogDetail = ref(false)
-const loadingData = ref(computed(() => props.loading))
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
-const mediaSelected = ref<any>(null)
+const parameterRequest = ref<any>({
-const markingSelected = ref<any>(null)
+  media: null,
+  marking: null
+})
 
-const emit = defineEmits(['update:dataSub', 'update:loadingSubData'])
+const setParameterRequest = (data: any) => {
-
+  parameterRequest.value = data
-const setParameterRequest = (media: any, marking: any) => {
+  const parameter = parameterRequest.value
-  mediaSelected.value = media
+  if (parameter.media != null && parameter.marking != null) {
-  markingSelected.value = marking
+    emit('update:marking', parameter.marking)
-
-  if (media != null && marking != null) {
     agreeToShowDialog.value = true
   } else {
     agreeToShowDialog.value = false
@@ -506,27 +536,16 @@ const resetData = () => {
 
 const getDetail = async () => {
   resetData()
-  const { ulp, uid, up3, jenisLaporan, periode } = filters.value
+  const { jenisLaporan } = filters.value
-  console.table('LAPPGU', jenisLaporan)
-  console.log('Media', mediaSelected.value)
-  console.log('isMarking', markingSelected.value)
-  console.log('periode', periode)
 
-  const dateValue = periode.split(' s/d ')
   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,
-    namaRegional: '',
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
-    media: mediaSelected.value,
+    media: parameterRequest.value?.media,
-    isMarking: markingSelected.value
+    isMarking: parameterRequest.value?.marking
   }
 
   loadingSubData.value = true
@@ -542,11 +561,12 @@ const getDetail = async () => {
     .then((result) => {
       if (result.data.data != undefined) {
         if (jenisLaporan.name == 'Laporan Berulang Unit') {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitBerulang
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasBerulang
         } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitRatingNegatif
+          dataSub.value =
+            result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif
         } else {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitSkipStep
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasSkipStep
         }
       } else {
         dataSub.value = []

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue

@@ -10,8 +10,14 @@
     />
   </Filters>
 
-  <Anomali_LAPPGU_LPT :data="data" :loading="loadingData" :filters="filters" />
+  <Anomali_LAPPGU_LPT
+    :data="data"
+    :filters="filters"
+    @update:loading-sub-data="loadingData = $event"
+  />
   <Anomali_LAPPGU_LPP :data="dataSecond" />
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -23,6 +29,7 @@ import { onMounted, ref, watch } from 'vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue

@@ -276,7 +276,10 @@
     </DxColumn>
 
     <template #formatNumberPLNMobileMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -288,7 +291,10 @@
     </template>
 
     <template #formatNumberPLNMobileNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -300,7 +306,10 @@
     </template>
 
     <template #formatNumberCCMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -312,7 +321,10 @@
     </template>
 
     <template #formatNumberCCNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -324,7 +336,7 @@
     </template>
 
     <template #formatNumberTotalMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 1)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 1 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -336,7 +348,7 @@
     </template>
 
     <template #formatNumberTotalNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 2)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 2 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -348,7 +360,10 @@
     </template>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -360,19 +375,25 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-left cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ data.text }}
       </p>
     </template>
 
     <template #formatTime="{ data }">
-      <p class="!text-right" @click="setParameterRequest(null, null)">
+      <p class="!text-right" @click="setParameterRequest({ media: null, marking: null })">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
     </template>
@@ -787,7 +808,7 @@
             :width="150"
             alignment="center"
             data-field="tindakan"
-            caption="Tindaan"
+            caption="Tindakan"
             css-class="custom-table-column"
             cell-template="formatText"
           />
@@ -1052,17 +1073,13 @@ import InputText from '@/components/InputText.vue'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
-const loading = ref(computed(() => props.loading))
 const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
   data: Array as () => any[],
-  filters: Object as () => any,
+  filters: Object as () => any
-  loading: {
-    type: Boolean,
-    default: false
-  }
 })
+const emit = defineEmits(['update:loadingSubData'])
 const filters = ref<any>(computed(() => props.filters))
 const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
@@ -1073,14 +1090,15 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
-const mediaSelected = ref<any>(null)
+const parameterRequest = ref<any>({
-const markingSelected = ref<any>(null)
+  media: null,
+  marking: null
+})
 
-const setParameterRequest = (media: any, marking: any) => {
+const setParameterRequest = (data: any) => {
-  mediaSelected.value = media
+  parameterRequest.value = data
-  markingSelected.value = marking
+  const parameter = parameterRequest.value
-
+  if (parameter.media != null && parameter.marking != null) {
-  if (media != null && marking != null) {
     agreeToShowDialog.value = true
   } else {
     agreeToShowDialog.value = false
@@ -1094,11 +1112,7 @@ const resetData = () => {
 
 const getDetail = async () => {
   resetData()
-  const { ulp, uid, up3, jenisLaporan, periode } = filters.value
+  const { jenisLaporan, periode } = filters.value
-  console.table('LAPPGU', jenisLaporan)
-  console.log('Media', mediaSelected.value)
-  console.log('isMarking', markingSelected.value)
-  console.log('periode', periode)
 
   const dateValue = periode.split(' s/d ')
   const selected = dataSelected.value
@@ -1113,11 +1127,12 @@ const getDetail = async () => {
     idUid: selected?.id_uid ? selected?.id_uid : 0,
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
     namaRegional: '',
-    media: mediaSelected.value,
+    media: parameterRequest.value?.media,
-    isMarking: markingSelected.value
+    isMarking: parameterRequest.value?.marking
   }
 
   loadingSubData.value = true
+  emit('update:loadingSubData', true)
   await requestGraphQl(
     jenisLaporan.name == 'Laporan Berulang Unit'
       ? queries.anomali.gangguan.unitBerulangDetail
@@ -1145,6 +1160,7 @@ const getDetail = async () => {
     .finally(() => {
       loadingSubData.value = false
       dialogDetail.value = true
+      emit('update:loadingSubData', false)
     })
 }
 

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

@@ -684,7 +684,59 @@ const reportMeta = ref({
 })
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
+// const ratingToShow = ref(0)
+// const nonRating = ref(0)
 
+// const setAgreementDialog = (
+//   status: boolean,
+//   progress: number,
+//   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

src/components/Pages/Transaksi/Transaksi.vue

@@ -7,6 +7,7 @@
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -118,7 +119,7 @@
       />
     </DxDataGrid>
   </div>
-  <BufferDialog v-if="loading" />
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -142,13 +143,17 @@ import { Workbook } from 'exceljs'
 import { Type17 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
+const data = ref<any[]>([])
+const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
-const loading = ref(false)
+const loadingData = ref(false)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -182,9 +187,21 @@ const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
-const onSelectionChanged = ({ selectedRowsData }: any) => {
+const showDetail = () => {
-  const data = selectedRowsData[0]
   clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }
 
 const onRowPrepared = (e: any) => {
@@ -199,53 +216,41 @@ const onRowPrepared = (e: any) => {
   }
 }
 
-const data = [
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  },
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  },
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  }
-]
-
 const filters = ref()
-const filterData = (filters: any) => {
+const resetData = () => {
-  console.log(filters)
+  data.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, idUid, idUp3 } = params
+  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),
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    posko: posko ? posko.id : 0
+  }
+
+  loadingData.value = true
+  await requestGraphQl(queries.transaksi.transaksiAPKT, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiPemakaianMaterial
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 </script>

src/utils/api/api.graphql.ts

@@ -3533,6 +3533,59 @@ export const queries = {
           }
         }
       `,
+      petugasBerulangDetailSub: gql`
+        query subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+          $idPetugas: Int!
+        ) {
+          subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+            idPetugas: $idPetugas
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_response_time
+            durasi_recovery_time
+            durasi_dispatch_time
+            durasi_perjalanan
+            distance
+            dispatch_by
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            diselesaikan_oleh
+            status_akhir
+            kode_gangguan
+            jenis_gangguan
+            penyebab
+            tindakan
+          }
+        }
+      `,
       petugasBerulangDetail: gql`
         query detailAnomaliPenangananPengaduanGangguanPetugasBerulang(
           $namaRegional: String!
@@ -3617,6 +3670,63 @@ export const queries = {
           }
         }
       `,
+      petugasRatingNegatifDetailSub: gql`
+        query subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+          $idPetugas: Int!
+        ) {
+          subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+            idPetugas: $idPetugas
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_response_time
+            durasi_recovery_time
+            durasi_dispatch_time
+            durasi_perjalanan
+            distance
+            dispatch_by
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            diselesaikan_oleh
+            status_akhir
+            kode_gangguan
+            jenis_gangguan
+            penyebab
+            tindakan
+          }
+        }
+      `,
       petugasRatingNegatifDetail: gql`
         query detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
           $namaRegional: String!
@@ -3701,6 +3811,63 @@ export const queries = {
           }
         }
       `,
+      petugasSkipStepDetailSub: gql`
+        query subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+          $idPetugas: Int!
+        ) {
+          subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+            idPetugas: $idPetugas
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_response_time
+            durasi_recovery_time
+            durasi_dispatch_time
+            durasi_perjalanan
+            distance
+            dispatch_by
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            diselesaikan_oleh
+            status_akhir
+            kode_gangguan
+            jenis_gangguan
+            penyebab
+            tindakan
+          }
+        }
+      `,
       petugasSkipStepDetail: gql`
         query detailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
           $namaRegional: String!