Refactor CSS styles and fix formatting issues in MonalisaLK_EnergyNotSales.vue
This commit is contained in:
@@ -63,7 +63,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -72,7 +72,7 @@
|
||||
data-type="number"
|
||||
caption="Selesai"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@@ -81,7 +81,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -90,7 +90,7 @@
|
||||
data-type="number"
|
||||
caption="InProgress"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@@ -99,7 +99,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -108,7 +108,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -135,7 +135,7 @@
|
||||
data-type="number"
|
||||
caption="> SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -144,7 +144,7 @@
|
||||
data-type="number"
|
||||
caption="≤ SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||
@@ -155,7 +155,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -182,7 +182,7 @@
|
||||
data-type="number"
|
||||
caption="> SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -191,22 +191,30 @@
|
||||
data-type="number"
|
||||
caption="≤ SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||
<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 #defaults="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||
<template #formatText="{ data }">
|
||||
<p class="cursor-pointer !text-left" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
@@ -269,7 +277,7 @@
|
||||
"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -277,7 +285,7 @@
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -285,7 +293,7 @@
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -294,7 +302,7 @@
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -303,7 +311,7 @@
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -312,7 +320,7 @@
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -321,7 +329,7 @@
|
||||
caption="Durasi Recovery Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -330,7 +338,7 @@
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -339,7 +347,7 @@
|
||||
caption="IDPEL/NO METER"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -348,7 +356,7 @@
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@@ -357,7 +365,7 @@
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -366,7 +374,7 @@
|
||||
caption="No Tlp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@@ -375,7 +383,7 @@
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -384,7 +392,7 @@
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -393,7 +401,7 @@
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@@ -402,22 +410,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>
|
||||
@@ -581,6 +589,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