Refactoring code module 11_discipline

src/modules/11_discipline/components/3_InvestigateDisciplinary/Calendar.vue

@@ -1,24 +1,25 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
+
+import config from "@/app.config";
+import http from "@/plugins/http";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
 import type { CalendarOptions } from "@fullcalendar/core";
+
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
-import { useQuasar } from "quasar";
-import config from "@/app.config";
-import http from "@/plugins/http";
-
-import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { monthYear2Thai, showLoader, hideLoader, messageError } = mixin;
 
 const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { monthYear2Thai, showLoader, hideLoader, messageError } = mixin;
 
 /**
  * Option ของปฏิทิน
@@ -128,6 +129,44 @@ const reason = ref("ยกเลิกการลา");
 const model = ref(null);
 const modeCancel = ref(true);
 
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+
+const dateYear = ref<number>(new Date().getFullYear());
+async function updateMonth(e: DataDateMonthObject) {
+  if (e != null) {
+    dateYear.value = e.year;
+
+    changCalendar();
+  }
+}
+
+/**
+ * ฟังก์ชั่นยกเลิก model
+ * @param text
+ */
+async function cancel(text: string) {
+  title.value = text;
+  modalCancel.value = true;
+  modeCancel.value = true;
+}
+/**
+ * ฟังก์ชั่นเปิด model
+ * @param text
+ */
+async function view(text: string) {
+  title.value = text;
+  modalCancel.value = true;
+  modeCancel.value = false;
+}
+
+function monthYearThai(val: DataDateMonthObject) {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+}
+
 async function fetchCalendar() {
   showLoader();
   await http
@@ -151,74 +190,16 @@ async function fetchCalendar() {
     });
 }
 
+function changCalendar() {
+  fetchCalendar();
+}
+
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
   fetchCalendar();
 });
-
-function changCalendar() {
-  fetchCalendar();
-}
-
-/**
- * ฟังก์ชั่นยกเลิก model
- * @param text
- */
-const cancel = async (text: string) => {
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = true;
-};
-/**
- * ฟังก์ชั่นเปิด model
- * @param text
- */
-const view = async (text: string) => {
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = false;
-};
-
-// filter calendar left
-const filterLists = ref<any[]>([
-  {
-    id: "x1",
-    name: "นางสาววารุณี แต้มคู",
-    color: "green",
-  },
-  {
-    id: "x2",
-    name: "นางสาวสมศรี ใจดี",
-    color: "grey",
-  },
-  {
-    id: "x3",
-    name: "นายสมชาย สุขใจ",
-    color: "grey",
-  },
-]);
-const filterVal = ref(["x1"]);
-
-const dateMonth = ref<DataDateMonthObject>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
-
-const dateYear = ref<number>(new Date().getFullYear());
-const updateMonth = async (e: DataDateMonthObject) => {
-  if (e != null) {
-    dateYear.value = e.year;
-
-    changCalendar();
-  }
-};
-
-const monthYearThai = (val: DataDateMonthObject) => {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
-};
 </script>
 <template>
   <div class="q-ma-sm">
@@ -418,13 +399,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  /* border: 2px solid #17a259; */
-  /* border-radius: 50%;
-  height: 25px;
-  width: 25px;
-  font-weight: bold;
-  color: white !important;
-  background: #17a259; */
 }
 
 .fc-day-today .fc-daygrid-day-frame {