defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor date formatting and add conditional dialog display

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-29 23:43:49 +07:00
parent ecd685227d
commit 3ca721e389
5 changed files with 134 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
View File

@ -572,9 +572,11 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
if (date.value != '') {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -601,12 +603,9 @@ const onExportingDetail = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
if (date.value != '') {
showDetail()
}
}
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {

5
src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
View File

@ -602,9 +602,11 @@ const clearSelection = () => {
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
if (date.value != '') {
dialogDetail.value = true
getDetail()
}
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -638,12 +640,9 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
if (date.value != '') {
showDetail()
}
}
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]

13
src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
View File

@ -821,6 +821,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import { reformatDate } from '@/utils/texts'
const client = apolloClient()
provideApolloClient(client)
@ -890,7 +891,15 @@ const getDetail = async () => {
: new Date().toISOString().slice(0, 10),
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
namaRegional: '',
isSelesai: progressSelected.value,
media: '',
tanggal: selected?.tanggal_lapor
? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
: '',
namaIssuetype: '',
namaSubissuetype: ''
}
loadingSubData.value = true
@ -918,9 +927,11 @@ const clearSelection = () => {
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {

90
src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
View File

@ -47,7 +47,7 @@
<DxColumnFixing :enabled="true" />
<DxColumn
:width="100"
:width="50"
alignment="center"
caption="NO"
css-class="custom-table-column"
@ -81,7 +81,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanTotal"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
@ -91,7 +91,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
:width="70"
@ -111,6 +111,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
:width="70"
@ -248,7 +249,7 @@
<DxGroupItem
summary-type="sum"
display-format="Total"
show-in-column="no"
show-in-column="nama_ulp"
css-class="!text-left"
:show-in-group-footer="true"
/>
@ -392,7 +393,7 @@
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="no"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxTotalItem
@ -517,13 +518,13 @@
</DxSummary>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right">
<p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="!text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -534,7 +535,43 @@
</p>
</template>
<template #formatText="{ data }">
<template #formatNumberLaporanTotal="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatText="{ data }" @click="setAgreementDialog(false, 0)">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
@ -619,7 +656,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_response"
caption="Dalam Proses Bidang"
:allow-resizing="false"
css-class="custom-table-column"
@ -628,7 +665,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_recovery"
caption="Selesai Bidang Unit"
:allow-resizing="false"
css-class="custom-table-column"
@ -655,7 +692,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="status_akhir"
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
@ -709,7 +746,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_ulp"
caption="Rayon"
:allow-resizing="false"
css-class="custom-table-column"
@ -718,7 +755,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="uraian"
caption="Uraian"
:allow-resizing="false"
css-class="custom-table-column"
@ -727,7 +764,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="respon_pelanggan"
caption="Respon Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
@ -771,7 +808,7 @@
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.dalam_proses_bidang"
:value="dataSubSelected?.waktu_response"
class-name="flex-1"
/>
</div>
@ -780,7 +817,7 @@
<h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.selesai_bidang_unit"
:value="dataSubSelected?.waktu_recovery"
class-name="flex-1"
/>
</div>
@ -856,7 +893,7 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
<InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -874,7 +911,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataSubSelected?.response_pelanggan"
:value="dataSubSelected?.respon_pelanggan"
class-name="flex-1"
/>
</div>
@ -931,6 +968,13 @@ const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const setAgreementDialog = (status: boolean, progress: number) => {
agreeToShowDialog.value = status
progressSelected.value = progress
}
const filterData = async (params: any) => {
const dateValue = params.periode.split(' s/d ')
@ -984,7 +1028,13 @@ const getDetail = async () => {
: new Date().toISOString().slice(0, 10),
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
isSelesai: progressSelected.value,
media: '',
tanggal: '',
namaIssuetype: '',
namaSubissuetype: ''
}
loadingSubData.value = true
@ -1012,9 +1062,11 @@ const clearSelection = () => {
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {

38
src/utils/texts.ts
View File

@ -62,4 +62,40 @@ const getMonthNumber = (monthName: string) => {
]
return months.indexOf(monthName) + 1
}
export { splitRoutePath, getMonthName, getMonthNameShort, getMonthNumber }
const reformatDate = (inputDate: string, originalFormat: string, targetFormat: string): string => {
// Parsing tanggal dari format asli
const originalDate = parseDate(inputDate, originalFormat)
// Format tanggal dalam format yang diinginkan
const formattedDate = formatDateToString(originalDate, targetFormat)
return formattedDate
}
const parseDate = (inputDate: string, format: string): Date => {
// Pisahkan tanggal, bulan, dan tahun dari input berdasarkan format
const parts = inputDate.split(/[^0-9]+/)
const formatParts = format.split(/[^a-zA-Z]+/)
// Buat objek tanggal baru dengan mengambil nilai dari format yang diberikan
const dateValues: any = {}
for (let i = 0; i < formatParts.length; i++) {
if (formatParts[i]) {
dateValues[formatParts[i]] = parseInt(parts[i], 10)
}
}
// Format tanggal dalam format yang diinginkan
return new Date(dateValues['yyyy'], dateValues['MM'] - 1, dateValues['dd'])
}
const formatDateToString = (date: Date, format: string): string => {
const day = date.getDate().toString().padStart(2, '0')
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const year = date.getFullYear().toString()
// Ganti placeholder dengan nilai tanggal, bulan, dan tahun
return format.replace('yyyy', year).replace('MM', month).replace('dd', day)
}
export { reformatDate, splitRoutePath, getMonthName, getMonthNameShort, getMonthNumber }