Refactor code: Remove unnecessary code and update placeholders

This commit is contained in:
kur0nek-o
2024-03-01 11:05:34 +07:00
parent 7997adacb9
commit 61105e8e02
8 changed files with 647 additions and 35 deletions

View File

@ -41,10 +41,11 @@
<DxColumn
css-class="custom-table-column"
:width="50"
:width="100"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
data-field="no"
caption="No"
/>
<DxColumn
@ -53,7 +54,17 @@
data-field="tipe_keluhan"
caption="Jenis Keluhan"
css-class="custom-table-column"
cell-template="cell-left"
/>
<!-- <DxColumn
:width="170"
alignment="center"
data-field="tipe_keluhan"
caption="Jenis Keluhan"
name="tipeKeluhan"
css-class="custom-table-column"
:group-index="0"
/> -->
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
@ -97,6 +108,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="percent"
/>
</DxColumn>
</DxColumn>
@ -213,11 +225,257 @@
</DxColumn>
</DxColumn>
<DxSummary>
<DxGroupItem
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_selesai"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}%"
column="persen_selesai"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_inproses"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}%"
column="persen_inproses"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_durasi_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="min_durasi_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="max_durasi_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_durasi_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_selesai"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}%"
column="persen_selesai"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_inproses"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}%"
column="persen_inproses"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="min_durasi_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="max_durasi_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_recovery"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_recovery"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_recovery"
css-class="text-white"
/>
</DxSummary>
<template #data-waktu="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
<template #percent="{ data }">
<p>{{ data.text }}%</p>
</template>
<template #cell-left="{ data }">
<p class="text-left">
{{ data.text }}
</p>
</template>
</DxDataGrid>
</div>
</template>
@ -236,7 +494,10 @@ import {
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxTotalItem,
DxGroupItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -320,6 +581,7 @@ const GET_DATA = gql`
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),