Refactor CSS styles and fix formatting issues in MonalisaLK_EnergyNotSales.vue
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"
|
||||
@@ -68,7 +69,7 @@
|
||||
data-field="fungsi_bidang"
|
||||
caption="Fungsi Bidang"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cell-left"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@@ -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"
|
||||
@@ -143,7 +149,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -152,7 +158,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@@ -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"
|
||||
@@ -199,7 +209,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -208,7 +218,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@@ -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,122 +248,137 @@
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_selesai"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}%"
|
||||
column="persen_selesai"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_inproses"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}%"
|
||||
column="persen_inproses"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @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 #cell-left="{ data }">
|
||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="cursor-pointer !text-left" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
@@ -414,7 +441,7 @@
|
||||
"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -422,7 +449,7 @@
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -430,7 +457,7 @@
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -439,7 +466,7 @@
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -448,7 +475,7 @@
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -457,7 +484,7 @@
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -466,7 +493,7 @@
|
||||
caption="Durasi Recovery Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -475,7 +502,7 @@
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -484,7 +511,7 @@
|
||||
caption="IDPEL/NO METER"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -493,7 +520,7 @@
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@@ -502,7 +529,7 @@
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -511,7 +538,7 @@
|
||||
caption="No Tlp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@@ -520,7 +547,7 @@
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -529,7 +556,7 @@
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -538,7 +565,7 @@
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -547,22 +574,22 @@
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
@@ -728,6 +755,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, isNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
|
||||
Reference in New Issue
Block a user