Add min-width utility classes and format table cells
This commit is contained in:
Dede Fuji Abdul
@ -51,6 +51,7 @@
|
||||
data-type="number"
|
||||
data-field="no"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<!-- <DxColumn
|
||||
:width="120"
|
||||
@ -78,6 +79,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 +89,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -95,7 +98,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
@ -106,6 +109,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -114,7 +118,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -127,6 +131,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -135,6 +140,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -163,6 +169,7 @@
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -171,6 +178,7 @@
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -183,6 +191,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -191,6 +200,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -219,6 +229,7 @@
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -227,6 +238,7 @@
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -236,124 +248,149 @@
|
||||
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>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||
<p class="!text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</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 }">
|
||||
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||
<p class="!text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
@ -730,6 +767,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)
|
||||
|
||||
Reference in New Issue
Block a user