Update pagination and allowed page sizes in RGangguan_ALL.vue and add summary and group items in RGangguan_JenisGangguanSE.vue

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

@@ -24,10 +24,10 @@
       column-resizing-mode="widget"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="40" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 40, 60]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
@@ -54,6 +54,7 @@
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
+        cell-template="formatNumber"
       />
       <DxColumn
         :width="150"
@@ -308,12 +309,6 @@
         />
       </DxColumn>
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showDialogDataSelected()">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
           {{ data.text }}

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

@@ -20,7 +20,6 @@
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
       @selection-changed="onSelectionChanged"
-      :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
@@ -257,135 +256,146 @@
           :show-in-group-footer="true"
           column="no"
           display-format="Total"
-          cell-template="formatNumber"
+          css-class="!text-left"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="laporan.total"
           summary-type="sum"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="laporan.sudahSelesai.jml"
           summary-type="sum"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="laporan.sudahSelesai.persen"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="laporan.belumSelesai.jml"
           summary-type="sum"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="laporan.belumSelesai.persen"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="responseTime.menit.total"
           summary-type="sum"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="responseTime.menit.rataRata"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="responseTime.menit.max"
-          summary-type="sum"
+          summary-type="max"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="responseTime.menit.min"
-          summary-type="sum"
+          summary-type="min"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="responseTime.laporan.lebihSla"
           summary-type="sum"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="responseTime.laporan.kurangSla"
           summary-type="sum"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="recoveryTime.menit.total"
           summary-type="sum"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="recoveryTime.menit.rataRata"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="recoveryTime.menit.max"
-          summary-type="sum"
+          summary-type="max"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="recoveryTime.menit.min"
-          summary-type="sum"
+          summary-type="min"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="recoveryTime.laporan.lebihSla"
           summary-type="sum"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="recoveryTime.laporan.kurangSla"
           summary-type="sum"
           display-format="{0}"
-          cell-template="formatNumber"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
       </DxSummary>
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}

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

@@ -63,6 +63,16 @@
         css-class="custom-table-column"
         cell-template="cellCenter"
       />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="kode"
+        caption="Kode"
+        css-class="custom-table-column"
+        cell-template="cellCenter"
+        name="kodeGroup"
+        :group-index="0"
+      />
       <DxColumn
         :width="150"
         alignment="center"
@@ -272,6 +282,151 @@
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
+
+      <DxSummary>
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="no"
+          display-format="Total"
+          css-class="!text-left"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="total_selesai"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="persen_selesai"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="total_inproses"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="persen_inproses"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="total_durasi_response"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="avg_durasi_response"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="max_durasi_response"
+          summary-type="min"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="min_durasi_response"
+          summary-type="max"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="total_diatas_sla_response"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="total_dibawah_sla_response"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="total_durasi_recovery"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="avg_durasi_recovery"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="max_durasi_recovery"
+          summary-type="max"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="min_durasi_recovery"
+          summary-type="min"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="total_diatas_sla_recovery"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="total_dibawah_sla_recovery"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
 </template>
@@ -290,7 +445,9 @@ import {
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxGroupItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'