From a09fbeb29e46a50f648b2badb17644dc9c63edb0 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Fri, 27 Sep 2024 17:02:03 +0700
Subject: [PATCH] fix: change history function

---
 .../HistoryEditComponent.vue                  | 28 ++++++-------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/components/03_customer-management/HistoryEditComponent.vue b/src/components/03_customer-management/HistoryEditComponent.vue
index 5e72025c..c7edb621 100644
--- a/src/components/03_customer-management/HistoryEditComponent.vue
+++ b/src/components/03_customer-management/HistoryEditComponent.vue
@@ -53,8 +53,6 @@ const columns: QTableColumn[] = [
 ];
 
 const currentDate = ref();
-const currentData = ref();
-const currentIndex = ref(0);
 const isHistoryData = ref(false);
 const formatList = ref<NewEmployeeHistory[]>([]);
 
@@ -281,9 +279,9 @@ function mapName(field: string): { title: string; i18n: string } {
   return { title: '-', i18n: '-' };
 }
 
-async function groupEmployeeHistory(
+function groupEmployeeHistory(
   historyList: EmployeeHistory[],
-): Promise<NewEmployeeHistory[]> {
+): NewEmployeeHistory[] {
   const grouped = historyList.reduce((acc, curr) => {
     const updatedAt = new Date(curr.updatedAt);
     const dateKey = `${updatedAt.getFullYear()}-${updatedAt.getMonth() + 1}-${updatedAt.getDate()}`;
@@ -346,22 +344,14 @@ async function groupEmployeeHistory(
 }
 
 onMounted(async () => {
-  const newList = await groupEmployeeHistory(historyList.value);
-  formatList.value = newList;
-
-  currentDate.value = formatList.value[currentIndex.value].date;
-  currentData.value = formatList.value[currentIndex.value].data;
+  formatList.value = groupEmployeeHistory(historyList.value);
+  currentDate.value =
+    formatList.value.at(0)?.date || formatDate(new Date().toISOString());
 });
 
-watch(
-  () => currentDate.value,
-  (i) => {
-    const dateKey = formatDate(i);
-    isHistoryData.value = formatList.value.some(
-      (item) => item.date === dateKey,
-    );
-  },
-);
+const currentData = computed(() => {
+  return formatList.value.find((v) => v.date === currentDate.value)?.data || [];
+});
 </script>
 
 <template>
@@ -412,7 +402,7 @@ watch(
       </div>
     </div>
 
-    <div v-if="isHistoryData && currentData?.length > 0">
+    <div v-if="currentData?.length > 0">
       <q-table
         flat
         class="table-border"