Refactor CSS styles and fix formatting issues in MonalisaLK_EnergyNotSales.vue

This commit is contained in:
Dede Fuji Abdul
2024-03-11 22:42:15 +07:00
parent d8d5dc9f5b
commit 99afd50f37
40 changed files with 6887 additions and 2429 deletions

View File

@@ -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)