fix: employee history date picker

src/components/03_customer-management/HistoryEditComponent.vue

@@ -55,6 +55,7 @@ const columns: QTableColumn[] = [
 const currentDate = ref();
 const currentData = ref();
 const currentIndex = ref(0);
+const isHistoryData = ref(false);
 const formatList = ref<NewEmployeeHistory[]>([]);
 
 const fieldName = [
@@ -201,6 +202,19 @@ const fieldName = [
   },
 ];
 
+function nextDate(pre: boolean = false) {
+  const date = new Date(currentDate.value);
+  pre ? date.setDate(date.getDate() - 1) : date.setDate(date.getDate() + 1);
+  const dateKey = formatDate(date.toString());
+  currentDate.value = dateKey;
+}
+
+function formatDate(date: string) {
+  const updatedAt = new Date(date);
+  const dateKey = `${updatedAt.getFullYear()}-${updatedAt.getMonth() + 1}-${updatedAt.getDate()}`;
+  return dateKey;
+}
+
 function isValidDate(dateString: string): boolean {
   if (typeof dateString !== 'string' || dateString.length < 24) {
     return false;
@@ -294,10 +308,12 @@ onMounted(async () => {
 });
 
 watch(
-  () => currentIndex.value,
+  () => currentDate.value,
   (i) => {
-    currentDate.value = formatList.value[i].date;
-    currentData.value = formatList.value[i].data;
+    const dateKey = formatDate(i);
+    isHistoryData.value = formatList.value.some(
+      (item) => item.date === dateKey,
+    );
   },
 );
 </script>
@@ -308,31 +324,49 @@ watch(
       class="row full-width justify-center q-py-sm header-border"
       style="background: hsla(var(--info-bg) / 0.1)"
     >
-      <div class="surface-1 q-py-sm q-px-sm row items-center">
+      <div class="surface-1 q-py-sm q-px-sm row items-center no-wrap">
         <q-btn
           flat
-          :disable="currentIndex === formatList.length - 1"
           color="info"
           padding="0"
           icon="mdi-chevron-left"
-          @click="currentIndex++"
+          @click="nextDate(true)"
         />
-        <span class="text-weight-medium q-px-xl">
-          {{ dateFormat(currentDate) }}
-        </span>
+        <VueDatePicker
+          id="input-birth-date"
+          for="input-birth-date"
+          class="date-picker"
+          utc
+          autoApply
+          :teleport="true"
+          v-model="currentDate"
+          :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+          :enableTimePicker="false"
+        >
+          <template #year="{ value }">
+            {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+          </template>
+          <template #trigger>
+            <span class="text-weight-medium q-px-xl">
+              {{ dateFormat(currentDate) }}
+            </span>
+          </template>
+        </VueDatePicker>
         <q-btn
           flat
-          :disable="currentIndex === 0"
           color="info"
           padding="0"
           icon="mdi-chevron-right"
-          @click="currentIndex--"
+          @click="nextDate()"
         />
       </div>
     </div>
 
     <q-table
-      v-if="currentData?.length > 0"
+      v-if="isHistoryData && currentData?.length > 0"
       flat
       class="table-border"
       table-header-class="surface-2"
@@ -454,4 +488,9 @@ watch(
 :deep(.q-stepper__dot.row.flex-center.q-stepper__line.relative-position) {
   color: hsl(var(--info-bg)) !important;
 }
+
+.date-picker {
+  cursor: pointer;
+  font-family: 'Noto Sans Thai', sans-serif;
+}
 </style>

src/css/quasar.variables.scss

@@ -74,6 +74,10 @@ div.fullscreen.q-drawer__backdrop {
   font-family: 'Noto Sans Thai', sans-serif;
 }
 
+.dp__overlay_cell.dp__overlay_cell_pad {
+  font-family: 'Noto Sans Thai', sans-serif;
+}
+
 .disabled,
 .disabled *,
 [disabled],