defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add min-width utility classes and format table cells

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-03-13 22:15:20 +07:00
parent 6af6066b7f
commit 6852a8cb84
6 changed files with 475 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
View File

@@ -18,7 +18,6 @@
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onDataSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
@@ -51,6 +50,7 @@
css-class="custom-table-column"
data-type="number"
data-field="no"
cell-template="formatNumber"
/>
<!-- <DxColumn
@@ -78,6 +78,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
@@ -87,6 +88,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
@@ -95,7 +97,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-templete="percent"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@@ -114,7 +116,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-templete="percent"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
@@ -127,6 +129,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@@ -135,6 +138,7 @@
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@@ -143,7 +147,7 @@
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-templete="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@@ -152,7 +156,7 @@
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-templete="data-waktu"
cell-template="formatTime"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -163,6 +167,7 @@
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@@ -171,6 +176,7 @@
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
@@ -183,6 +189,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@@ -191,6 +198,7 @@
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@@ -199,7 +207,7 @@
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-templete="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@@ -208,7 +216,7 @@
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-templete="data-waktu"
cell-template="formatTime"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -219,6 +227,7 @@
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@@ -227,6 +236,7 @@
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
@@ -236,236 +246,270 @@
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white"
css-class="text-white !text-left"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_selesai"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}%"
summary-type="avg"
display-format="{0}"
column="persen_selesai"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_inproses"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}%"
summary-type="avg"
display-format="{0}"
column="persen_inproses"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
summary-type="avg"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
summary-type="min"
display-format="{0}"
column="min_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
summary-type="sum"
summary-type="max"
display-format="{0}"
column="max_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
summary-type="avg"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
summary-type="min"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
summary-type="sum"
summary-type="max"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white"
css-class="text-white !text-left"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_selesai"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}%"
summary-type="avg"
display-format="{0}"
column="persen_selesai"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_inproses"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}%"
summary-type="avg"
display-format="{0}"
column="persen_inproses"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
summary-type="avg"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
summary-type="min"
display-format="{0}"
column="min_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
summary-type="max"
display-format="{0}"
column="max_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
summary-type="avg"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
summary-type="min"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
summary-type="max"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
</DxSummary>
@@ -475,8 +519,16 @@
</p>
</template>
<template #percent="{ data }">
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
<template #formatNumber="{ data }">
<p class="!text-right cursor-pointer" @click="showDialogDataSelected()">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatText="{ data }">
@@ -858,6 +910,7 @@ import { useQuery } from '@vue/apollo-composable'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const position = { of: '#data' }
const showIndicator = ref(true)