From eaffc6c91f5af846908da3c0e74858d1a7cf9859 Mon Sep 17 00:00:00 2001 From: Rizki Firmansyah Date: Thu, 30 May 2024 14:59:20 +0700 Subject: [PATCH 1/2] feat: make date disable when date option < currentDate --- .../Sribaduga/KalenderReservasi/index.vue | 38 ++++++++++++++++--- utils/index.js | 30 +++++++++------ 2 files changed, 50 insertions(+), 18 deletions(-) diff --git a/components/Sribaduga/KalenderReservasi/index.vue b/components/Sribaduga/KalenderReservasi/index.vue index a6ae4dce..ae592736 100644 --- a/components/Sribaduga/KalenderReservasi/index.vue +++ b/components/Sribaduga/KalenderReservasi/index.vue @@ -136,6 +136,12 @@ v-for="dateData in dateDataList" :key="dateData.dateNumber" class="cursor-pointer" + :class="{ + 'bg-gray-200': getDisabledDate( + dateData.rawDateData, + sessionData.session.startTime + ), + }" @click="handleClickDate(dateData, sessionData)" >

{{ sessionData.session.name }}

+
import { mapState } from 'vuex' -import { formatDate } from '~/utils' +import { formatDate, getCurrentTime } from '~/utils' import DialogDetailReservasi from '~/components/Sribaduga/DialogDetailReservasi' import DialogReschedule from '~/components/Sribaduga/DialogReschedule' import DialogTambahReservasi from '~/components/Sribaduga/DialogTambahReservasi' @@ -275,6 +284,7 @@ export default { nameKey: 'instance-name', attractionId: 'c64143d6-d630-4ccf-8529-483b9b737a52', }, + thisDay: new Date(), } }, @@ -463,6 +473,15 @@ export default { return null }, + getDisabledDate(date, sessionStartTime) { + return ( + formatDate(date, 'yyyy-MM-dd') < + formatDate(this.thisDay, 'yyyy-MM-dd') || + (formatDate(date, 'yyyy-MM-dd') === + formatDate(this.thisDay, 'yyyy-MM-dd') && + getCurrentTime() > sessionStartTime) + ) + }, handleClickDate(dateData, sessionData) { this.dateValue = dateData this.orderAndSessionValue = sessionData @@ -609,10 +628,17 @@ export default { this.closeDialogReschedule() this.closeDialogDetailReservasi() }, - handleOpenDialogTambahReservasi() { - this.$store.commit('add_reservation/setIsOpenForm', true) - this.$store.commit('add_reservation/setRefetchCalendar', false) - this.isNewReservation = true + handleOpenDialogTambahReservasi(dateData, sessionData) { + if ( + !this.getDisabledDate( + dateData.rawDateData, + sessionData.session.startTime + ) + ) { + this.$store.commit('add_reservation/setIsOpenForm', true) + this.$store.commit('add_reservation/setRefetchCalendar', false) + this.isNewReservation = true + } }, handleOpenDialogUbahDetail() { this.$store.commit('modals/CLOSE', 'detail-reservasi') diff --git a/utils/index.js b/utils/index.js index 217a5d81..d4f2424f 100644 --- a/utils/index.js +++ b/utils/index.js @@ -2,7 +2,7 @@ import { formatInTimeZone } from 'date-fns-tz' import { isValid, parse } from 'date-fns' import id from 'date-fns/locale/id' -export function generateItemsPerPageOptions (itemsPerPage) { +export function generateItemsPerPageOptions(itemsPerPage) { const options = [] for (let i = 1; i <= 5; i++) { options.push(itemsPerPage * i) @@ -10,7 +10,7 @@ export function generateItemsPerPageOptions (itemsPerPage) { return options } -export function formatDate (date, format = 'dd/MM/yyyy') { +export function formatDate(date, format = 'dd/MM/yyyy') { // check if valid date if (isValid(new Date(date))) { return formatInTimeZone(date, 'Asia/Bangkok', format, { locale: id }) @@ -18,21 +18,27 @@ export function formatDate (date, format = 'dd/MM/yyyy') { return '-' } -export function formatedStringDate (date) { +export function getCurrentTime() { + return formatInTimeZone(new Date(), 'Asia/Bangkok', 'HH:mm', { locale: id }) +} + +export function formatedStringDate(date) { const parsedDate = parse(date, 'yyyy-MM-dd', new Date()) return parsedDate } -export function formatExcelDate (date, formatDate = 'dd MMMM yyyy') { +export function formatExcelDate(date, formatDate = 'dd MMMM yyyy') { const dateExcel = new Date(Math.round((date - 25569) * 86400 * 1000)) // Excel date to JavaScript date if (isValid(new Date(dateExcel))) { - return formatInTimeZone(dateExcel, 'Asia/Bangkok', formatDate, { locale: id }) + return formatInTimeZone(dateExcel, 'Asia/Bangkok', formatDate, { + locale: id, + }) } return '-' } -export function base64ToBlobUrl (base64, type) { +export function base64ToBlobUrl(base64, type) { const binStr = atob(base64) const len = binStr.length const arr = new Uint8Array(len) @@ -44,11 +50,11 @@ export function base64ToBlobUrl (base64, type) { return url } -export function convertToRupiah (value) { +export function convertToRupiah(value) { return value.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' }) } -function dividerNumberHandle (value, divider) { +function dividerNumberHandle(value, divider) { let result = value / divider const mod = value % divider const digitTrunc = Math.trunc(result).toString() // for know digit without decimal @@ -63,7 +69,7 @@ function dividerNumberHandle (value, divider) { return result.toLocaleString('id-ID').replace(',', '.') } -export function formatNumberToUnit (value) { +export function formatNumberToUnit(value) { let result = value.toLocaleString('id-ID') if (value > 9999) { const digitValue = value.toString().length - 1 @@ -73,7 +79,7 @@ export function formatNumberToUnit (value) { return result } -export function convertToUnit (value) { +export function convertToUnit(value) { const units = ['', 'ribu', 'juta', 'miliyar', 'triliun'] let unitIndex = 0 if (value > 9999) { @@ -85,12 +91,12 @@ export function convertToUnit (value) { return units[unitIndex] } -export function resetQueryParamsUrl (context) { +export function resetQueryParamsUrl(context) { if (Object.keys(context.$route.query).length > 0) { // replace query params url with empty object context.$router.replace({ path: context.$route.path, - query: {} + query: {}, }) } } From 3ea562a970c6a8b9b8825d6a392181a88a9afe81 Mon Sep 17 00:00:00 2001 From: Rizki Firmansyah Date: Fri, 31 May 2024 13:59:29 +0700 Subject: [PATCH 2/2] refactor getDisableDate function --- components/Sribaduga/KalenderReservasi/index.vue | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/components/Sribaduga/KalenderReservasi/index.vue b/components/Sribaduga/KalenderReservasi/index.vue index 7ada4f33..6f6c71bc 100644 --- a/components/Sribaduga/KalenderReservasi/index.vue +++ b/components/Sribaduga/KalenderReservasi/index.vue @@ -476,13 +476,15 @@ export default { return null }, getDisabledDate(date, sessionStartTime) { - return ( - formatDate(date, 'yyyy-MM-dd') < - formatDate(this.thisDay, 'yyyy-MM-dd') || - (formatDate(date, 'yyyy-MM-dd') === - formatDate(this.thisDay, 'yyyy-MM-dd') && - getCurrentTime() > sessionStartTime) - ) + const dateToCompare = formatDate(date, 'yyyy-MM-dd') + const today = formatDate(this.thisDay, 'yyyy-MM-dd') + const currentTime = getCurrentTime() + + const isBeforeToday = dateToCompare < today + const isAfterSessionStart = + dateToCompare === today && currentTime > sessionStartTime + + return isBeforeToday || isAfterSessionStart }, handleClickDate(dateData, sessionData) { this.dateValue = dateData