add another dialog type

src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue

@@ -14,7 +14,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -36,8 +36,7 @@
         :show-indicator="showIndicator"
         :show-pane="showPane"
         :shading="shading"
-        v-if="loading"
+        v-model:visible.sync="loadingData"
-        v-model:visible.sync="loading"
         :enabled="true"
       />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@@ -60,7 +59,7 @@
         alignment="center"
         data-field="no_laporan"
         caption="No Laporan"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -68,7 +67,7 @@
         alignment="center"
         data-field="waktu_lapor"
         caption="Tgl Lapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -76,7 +75,7 @@
         alignment="center"
         data-field="waktu_response"
         caption="Tgl Response"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -84,7 +83,7 @@
         alignment="center"
         data-field="waktu_recovery"
         caption="Tgl Recovery"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -115,7 +114,7 @@
         alignment="center"
         data-field="status_akhir"
         caption="Status"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -123,7 +122,7 @@
         alignment="center"
         data-field="idpel_nometer"
         caption="IDPEL/NO METER"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -147,7 +146,7 @@
         alignment="center"
         data-field="no_telp_pelapor"
         caption="No Telp Pelapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -174,26 +173,20 @@
         cell-template="formatText"
       />
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setDetailType(data.column.caption)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setDetailType(data.column.caption)">
           {{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right">
+        <p class="cursor-pointer !text-right" @click="setDetailType(data.column.caption)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -202,10 +195,11 @@
 
   <DetailDialog
     :open="dialogDetail"
-    title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
+    :title="detailType == 'table' ? 'Daftar Lapor ULang' : 'Detail Gangguan'"
     @on-close="closeDialog"
+    :full-width="detailType == 'table'"
   >
-    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+    <div v-if="detailType == 'form'" class="w-full 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-[170px] text-gray-800">No Laporan:</h3>
         <InputText :readonly="true" :value="dataSelected.no_laporan" class-name="flex-1" />
@@ -302,6 +296,130 @@
         />
       </div>
     </div>
+
+    <div v-if="detailType == 'table'" 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"
+          @exporting="onExporting"
+          :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"
+          />
+          <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
+            :position="position"
+            :show-indicator="showIndicator"
+            :show-pane="showPane"
+            :shading="shading"
+            v-model:visible="loadingSubData"
+            :enabled="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"
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_laporan"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Create Date"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="User"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            alignment="center"
+            data-field=""
+            caption="Keterangan"
+            :allow-resizing="false"
+            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>
+        </DxDataGrid>
+      </div>
+    </div>
+
+    <div v-if="detailType == 'table'" 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">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">Create Date:</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">User:</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">Keterangan:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
   </DetailDialog>
 </template>
 
@@ -309,7 +427,7 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type6 from '@/components/Form/FiltersType/Type6.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -326,14 +444,25 @@ import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K'
+import { apolloClient } from '@/utils/api/api.graphql'
+import { provideApolloClient } from '@vue/apollo-composable'
 
+const client = apolloClient()
+provideApolloClient(client)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataSelected = ref<any>({})
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
+const detailType = ref('form') // form, table
+
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -343,63 +472,128 @@ const reportMeta = ref({
   minJmlLapor: 1,
   maxJmlLapor: 1
 })
-const dataGridRef = ref<DxDataGrid | null>(null)
+
-const clearSelection = () => {
+const setDetailType = (columnCaption: string) => {
-  const dataGrid = dataGridRef.value!.instance!
+  console.log('Column Caption', columnCaption)
-  dataGrid.clearSelection()
+
-}
+  if (columnCaption == 'Jml Lapor') {
-const onSelectionChanged = ({ selectedRowsData }: any) => {
+    detailType.value = 'table'
-  if (selectedRowsData[0] != undefined) {
+  } else {
-    dataSelected.value = selectedRowsData[0]
+    detailType.value = 'form'
   }
-  clearSelection()
-  showDetail()
 }
 
-const showDetail = () => (dialogDetail.value = true)
+const getDetail = () => {
+  const dateValue = filters.value.periode.split(' s/d ')
+  const selected = dataSelected.value
 
-const closeDialog = () => (dialogDetail.value = false)
+  const query = {
-
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.daftar.melaporLebihDariSatuKali,
-  {
-    minJmlLapor: 1,
-    maxJmlLapor: 1,
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
-const filterData = (params: any) => {
-  const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
-  const dateValue = params.periode.split(' s/d ')
-  refetch({
-    minJmlLapor: minJmlLapor ? minJmlLapor : 1,
-    maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
     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: posko ? posko.id : 0,
+    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: uid ? uid.id : 0,
+    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: up3 ? up3.id : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+  }
+
+  const { onResult, onError, loading } = useQuery(
+    queries.keluhan.rekap.rekapKeluhanAllDetail,
+    query
+  )
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      dataSub.value = queryResult.data.detailKeluhanAll
+    }
   })
+
+  onError((error) => {
+    console.log(error)
+  })
+
+  watch(loading, (value) => {
+    loadingSubData.value = value
+  })
+}
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  if (detailType.value == 'table') {
+    getDetail()
+  }
+}
+
+const onDataSelectionChanged = ({
+  selectedRowsData,
+  selectedRowKeys,
+  currentSelectedRowKeys,
+  element,
+  component
+}: any) => {
+  if (selectedRowsData[0] != undefined) {
+    // console.log(selectedRowKeys)
+    // console.log(currentSelectedRowKeys)
+    // console.log(element)
+    // console.log(component)
+
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
+}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataSubSelected.value = data
+}
+
+const closeDialog = () => (dialogDetail.value = false)
+
+const filterData = (params: any) => {
+  const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.gangguan.daftar.melaporLebihDariSatuKali,
+    {
+      minJmlLapor: minJmlLapor ? minJmlLapor : 1,
+      maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
+      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: posko ? posko.id : 0,
+      idUid: uid ? uid.id : 0,
+      idUp3: up3 ? up3.id : 0
+    }
+  )
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali
     }
 
     reportMeta.value = filters.value
-    console.log(queryResult.data)
   })
+
   onError((error) => {
     console.log(error)
   })
+
+  watch(loading, (value) => {
+    loadingData.value = value
+  })
 }
 
 const onExporting = (e: any) => {