refector code

src/components/ToolBar.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
+import { useCounterMixin } from '@/stores/mixin'
+import { useChekIn } from '@/stores/chekin'
+
 import type { DataDateMonthObject } from '@/interface/index/Main'
 
 import Popup from '@/components/PopUp.vue'
-// import HeaderPopup from "@/components/HeaderPopup.vue";
-// import FormTime from "@/components/FormTime.vue";
-import { useCounterMixin } from '@/stores/mixin'
-import { useChekIn } from '@/stores/chekin'
 
-const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
 const stores = useChekIn()
-const { monthYear2Thai } = mixin
+const { monthYear2Thai } = useCounterMixin()
 
+/**
+ * props จาก components HistoryView
+ */
 const props = defineProps({
   fetchData: {
     type: Function,
@@ -25,37 +26,57 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:year'])
 
-const filterYear = ref<number>(stores.year)
-const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ')
+const filterYear = ref<number>(stores.year) //ปีงบประมาณ
+const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ') //หัว popup
 const dateMonth = ref<DataDateMonthObject>({
   month: new Date().getMonth(),
   year: stores.year,
 })
+const modalPopup = ref<boolean>(false) // modal เพิ่มรายการลงเวลากรณีพิเศษ
 
-watch(
-  () => stores.year,
-  () => {
-    dateMonth.value.year = stores.year
-  }
-)
-
+/**
+ * ฟังก์ชันอัปเดทปีงบประมาณ
+ * @param type ประเภท year,mount
+ */
 function filterYearFn(type: string) {
   const year = type === 'year' ? filterYear.value : dateMonth.value.year
+  //ส่งค่า ปีงบประมาณ กลับ
   emit('update:year', year, dateMonth.value.month)
 }
 
-const modalPopup = ref<boolean>(false)
+/**
+ * เปิด popup เพิ่มรายการลงเวลากรณีพิเศษ
+ */
 function onClickopen() {
   modalPopup.value = true
 }
+
+/**
+ * ปิด popup เพิ่มรายการลงเวลากรณีพิเศษ
+ */
 function onClickClose() {
   modalPopup.value = false
 }
 
+/**
+ * แปลงวันเดือนปีเป็นเดือนและปีในภาษาไทย
+ * @param val วันเดือนปี
+ * @returns  เดือนและปีในภาษาไทย
+ */
 const monthYearThai = (val: DataDateMonthObject) => {
   if (val == null) return ''
   else return monthYear2Thai(val.month, val.year)
 }
+
+/**
+ * watch การเปลี่ยนแปลงของ stores.year
+ */
+watch(
+  () => stores.year,
+  (newYear) => {
+    dateMonth.value.year = newYear
+  }
+)
 </script>
 <template>
   <div class="items-center col-12 row q-pb-sm">