Refactoring code module 01_metadata => 04_calendar

src/modules/01_metadata/views/04_calendar.vue

@@ -1,49 +1,48 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataSumCalendarObject } from "@/modules/01_metadata/interface/index/Calendar";
 
 import calendarComponent from "@/modules/01_metadata/components/calendar/calendarMain.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-
-const mixin = useCounterMixin();
 const $q = useQuasar();
+const { showLoader, hideLoader, messageError, genColor15 } = useCounterMixin();
 
-const { showLoader, hideLoader, messageError, genColor15 } = mixin;
+const listsSumCalendar = ref<DataSumCalendarObject[]>([]); //รายการสรุปวันหยุดในแต่ละเดือนประจำปี
+const year = ref<number>(new Date().getFullYear()); //ป๊
 
-const listsSumCalendar = ref<DataSumCalendarObject[]>([]);
-const year = ref<number>(new Date().getFullYear());
-
-/** function เรียกข้อมูลสรุปวันหยุด */
+/**
+ *  ดึงข้อมูลรายการสรุปวันหยุดในแต่ละเดือนประจำปี
+ */
 async function fetchDataSummaryCalendar() {
   showLoader();
   await http
     .get(config.API.summaryHolidayHistoryYear(year.value))
-    .then((res) => {
-      let data = res.data.result;
-      listsSumCalendar.value = [];
-      data.map((e: DataSumCalendarObject) => {
-        listsSumCalendar.value.push({
-          id: e.id,
-          monthFull: e.monthFull,
-          count: e.count,
-          color: genColor15(e.id),
-        });
-      });
+    .then(async (res) => {
+      let data = await res.data.result;
+      listsSumCalendar.value = data.map((e: DataSumCalendarObject) => ({
+        ...e,
+        color: genColor15(e.id),
+      }));
     })
-    .catch(async (e) => {
-      // await defaultListsSumCalendar;
-      messageError($q, e);
+    .catch((err) => {
+      messageError($q, err);
     })
     .finally(() => {
       hideLoader();
     });
 }
 
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ *
+ * จะทำการดึงข้อมูลสรุปวันหยุดในแต่ละเดือนประจำปี
+ */
 onMounted(async () => {
   await fetchDataSummaryCalendar();
 });
@@ -97,8 +96,8 @@ onMounted(async () => {
     <div class="col-9">
       <q-card bordered class="q-pa-md">
         <calendarComponent
-          v-model:dateYear="year"
-          :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
+          v-model:date-year="year"
+          :fetch-dataSummaryCalendar="fetchDataSummaryCalendar"
         />
       </q-card>
     </div>