Remove console.log statement in DGangguan_MLD1K.vue

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

@@ -474,8 +474,6 @@ const reportMeta = ref({
 })
 
 const setDetailType = (columnCaption: string) => {
-  console.log('Column Caption', columnCaption)
-
   if (columnCaption == 'Jml Lapor') {
     detailType.value = 'table'
   } else {

src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.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"
@@ -37,8 +37,7 @@
         :show-indicator="showIndicator"
         :show-pane="showPane"
         :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
+        v-model:visible="loadingData"
         :enabled="true"
       />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@@ -178,40 +177,33 @@
         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">
-          {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+        <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>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
-    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+  <DetailDialog
+    :open="dialogDetail"
+    :title="detailType == 'table' ? 'Daftar Lapor ULang' : 'Detail Gangguan'"
+    @on-close="closeDialog"
+    :full-width="detailType == 'table'"
+  >
+    <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" />
@@ -313,6 +305,130 @@
         <InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
       </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"
+            :calculate-display-value="(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="create_date"
+            caption="Create Date"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="create_by"
+            caption="User"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            alignment="center"
+            data-field="keterangan"
+            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="dataSubSelected?.create_date" 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="dataSubSelected?.create_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">Keterangan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
   </DetailDialog>
 </template>
 
@@ -347,11 +463,58 @@ 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 closedialogDetail = () => (dialogDetail.value = false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
+const detailType = ref('form') // form, table
 
-const closeDialog = () => {
-  dialogDetail.value = false
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  minJmlLapor: 1,
+  maxJmlLapor: 1,
+  periode: ''
+})
+
+const setDetailType = (columnCaption: string) => {
+  if (columnCaption == 'Jml Lapor') {
+    detailType.value = 'table'
+  } else {
+    detailType.value = 'form'
+  }
+}
+
+const getDetail = async () => {
+  const dateValue = filters.value.periode.split(' s/d ')
+  const selected = dataSelected.value
+
+  const query = {
+    noLaporan: selected?.no_laporan ? selected?.no_laporan : ''
+  }
+  loadingSubData.value = false
+  await requestGraphQl(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKaliDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanLaporLebihDariSatuKali
+      } else {
+        dataSub.value = []
+      }
+
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -361,16 +524,27 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSubSelected.value = null
   dialogDetail.value = true
+  if (detailType.value == 'table') {
+    getDetail()
+  }
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataSubSelected.value = data
+}
+
+const closeDialog = () => (dialogDetail.value = false)
+
 const onExporting = (e: any) => {
   const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
 
@@ -565,9 +739,6 @@ const onExporting = (e: any) => {
   }
 }
 
-const data = ref<any[]>([])
-const loading = ref(false)
-
 const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
@@ -588,7 +759,7 @@ const filterData = async (params: any) => {
     idUp3: up3 ? up3.id : 0
   }
 
-  loading.value = true
+  loadingData.value = true
   await requestGraphQl(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, query)
     .then((result) => {
       if (result.data.data != undefined) {
@@ -603,20 +774,10 @@ const filterData = async (params: any) => {
       console.error(err)
     })
     .finally(() => {
-      loading.value = false
+      loadingData.value = false
     })
 }
 
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
-  minJmlLapor: 1,
-  maxJmlLapor: 1,
-  periode: ''
-})
-
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [