Feat: disable calendar

components/Sribaduga/KalenderReservasi/index.vue

@@ -138,6 +138,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)"
                   >
                     <div
@@ -146,10 +152,13 @@
                         null
                       "
                       class="flex h-[88px] items-center justify-center text-[14px] font-[600] text-gray-500 opacity-0 hover:opacity-100"
-                      @click="handleOpenDialogTambahReservasi()"
+                      @click="
+                        handleOpenDialogTambahReservasi(dateData, sessionData)
+                      "
                     >
                       <p>{{ sessionData.session.name }}</p>
                     </div>
+
                     <div
                       v-else
                       class="flex h-[88px] items-center"
@@ -235,7 +244,7 @@
 
 <script>
 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'
@@ -277,6 +286,7 @@ export default {
         nameKey: 'instance-name',
         attractionId: 'c64143d6-d630-4ccf-8529-483b9b737a52',
       },
+      thisDay: new Date(),
     }
   },
 
@@ -465,6 +475,17 @@ export default {
 
       return null
     },
+    getDisabledDate(date, 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
       this.orderAndSessionValue = sessionData
@@ -611,10 +632,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')

utils/index.js

@@ -2,37 +2,43 @@ 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)
   }
   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 })
   }
   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: {},
     })
   }
 }