Update text alignment and number formatting

This commit is contained in:
Dede Fuji Abdul
2024-03-06 17:01:06 +07:00
parent b67886d473
commit bfeabfdaee
15 changed files with 55313 additions and 1224 deletions

View File

@ -22,13 +22,13 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="cellDefault" />
caption="Nama Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" cell-template="cellDefault" />
caption="Alamat Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="cellDefault" />
caption="Keterangan Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
caption="Status" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
@ -46,7 +46,7 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_media"
caption="Tgl Media" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media"
caption="Keterangan Media" cell-template="cellDefault" />
caption="Keterangan Media" cell-template="cellLeft" />
<template #cellCenter="{ data }">
<p class="cursor-pointer">
@ -54,7 +54,7 @@
</p>
</template>
<template #cellDefault="{ data }">
<template #cellLeft="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>

View File

@ -19,11 +19,11 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number"
caption="No" />
caption="No" cell-template="cellRight" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
caption="Pembuat Laporan" cell-template="cellDefault" />
caption="Pembuat Laporan" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
caption="Tgl Lapor" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
@ -37,25 +37,25 @@
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" cell-template="data-waktu" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
caption="Posko Asal" cell-template="cellDefault" />
caption="Posko Asal" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
caption="Posko Tujuan" cell-template="cellDefault" />
caption="Posko Tujuan" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
caption="Status" cell-template="cellCenter" />
caption="Status" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="cellDefault" />
caption="Nama Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" cell-template="cellDefault" />
caption="Alamat Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="250" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="cellDefault" />
caption="Keterangan Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" cell-template="cellCenter" />
caption="Sumber Lapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
caption="Posko" cell-template="cellDefault" />
caption="Posko" cell-template="cellLeft" />
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()">
@ -63,7 +63,7 @@
</p>
</template>
<template #cellDefault="{ data }">
<template #cellLeft="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
{{ data.text }}
</p>

View File

@ -36,17 +36,17 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="cellDefault" />
caption="Nama Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" cell-template="cellDefault" />
caption="Alamat Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="cellDefault" />
caption="Keterangan Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
cell-template="cellDefault" />
cell-template="cellLeft" />
<template #cellCenter="{ data }">
<p class="cursor-pointer">
@ -54,7 +54,7 @@
</p>
</template>
<template #cellDefault="{ data }">
<template #cellLeft="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>

View File

@ -27,7 +27,7 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
cell-template="cellCenter" />
cell-template="cellRight" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" cell-template="data-waktu" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
@ -37,17 +37,17 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="cellDefault" />
caption="Nama Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" cell-template="cellDefault" />
caption="Alamat Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="cellDefault" />
caption="Keterangan Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" cell-template="cellDefault" />
caption="Sumber Lapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
cell-template="cellDefault" />
cell-template="cellLeft" />
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()">
@ -55,12 +55,18 @@
</p>
</template>
<template #cellDefault="{ data }">
<template #cellLeft="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<p class="text-right cursor-pointer" @click="showData()">
{{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<p class="cursor-pointer" @click="showData()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
@ -175,6 +181,7 @@ import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, isNumber } from '@/utils/numbers'
const position = { of: '#data' }
const showIndicator = ref(true)

View File

@ -51,17 +51,17 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="cellDefault" />
caption="Nama Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" cell-template="cellDefault" />
caption="Alamat Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="cellDefault" />
caption="Keterangan Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" cell-template="cellDefault" />
caption="Sumber Lapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
cell-template="cellDefault" />
cell-template="cellLeft" />
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()">
@ -69,7 +69,7 @@
</p>
</template>
<template #cellDefault="{ data }">
<template #cellLeft="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
{{ data.text }}
</p>

View File

@ -39,15 +39,15 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="cellDefault" />
caption="Nama Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" cell-template="cellDefault" />
caption="Alamat Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="cellDefault" />
caption="Keterangan Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
cell-template="cellDefault" />
cell-template="cellLeft" />
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()">
@ -55,7 +55,7 @@
</p>
</template>
<template #cellDefault="{ data }">
<template #cellLeft="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
{{ data.text }}
</p>

View File

@ -36,17 +36,17 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="cellDefault" />
caption="Nama Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" cell-template="cellDefault" />
caption="Alamat Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="cellDefault" />
caption="Keterangan Pelapor" cell-template="cellLeft" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" cell-template="cellCenter" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
cell-template="cellDefault" />
cell-template="cellLeft" />
<template #cellCenter="{ data }">
<p class="cursor-pointer">
@ -54,7 +54,7 @@
</p>
</template>
<template #cellDefault="{ data }">
<template #cellLeft="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>