From d41a2516c3424d0bc31236d9ae6da1772e9bfebb Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 3 Sep 2024 10:53:11 +0700
Subject: [PATCH] Refactoring code dashboard

---
 src/components/Dialogs/PopupReplyInbox.vue |  79 ++++----
 src/views/Dashboard.vue                    | 166 ++++++++-------
 src/views/MainLayout.vue                   | 225 +++++++++++----------
 src/views/login.vue                        |  26 ++-
 4 files changed, 265 insertions(+), 231 deletions(-)

diff --git a/src/components/Dialogs/PopupReplyInbox.vue b/src/components/Dialogs/PopupReplyInbox.vue
index 1eed8b25..272140c3 100644
--- a/src/components/Dialogs/PopupReplyInbox.vue
+++ b/src/components/Dialogs/PopupReplyInbox.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref } from "vue";
+import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar } from "quasar";
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+
 const $q = useQuasar();
+const { showLoader, hideLoader, success, messageError, dialogConfirm } =
+  useCounterMixin(); //เรียกฟังก์ชันกลาง
 
-const { showLoader, hideLoader, success, messageError } = mixin;
-
-const myForm = ref<any>();
+/**
+ * props จาก components Dashborad
+ */
 const props = defineProps({
   modal: {
     type: Boolean,
@@ -28,29 +30,30 @@ const props = defineProps({
   },
 });
 
-const subject = ref<string>("");
-const body = ref<string>("");
-async function submit() {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      // props.savaForm(reason.value);
-      showLoader();
-      await http
-        .put(config.API.replyMessage(props.idInbox), {
-          subject: subject.value,
-          body: body.value,
-        })
-        .then((res) => {
-          props.clickClose()
-          success($q, "ส่งข้อความสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    }
+const subject = ref<string>(""); // หัวข้อ
+const body = ref<string>(""); //ข้อความ
+
+/**
+ * ยืนยันการจตอบกลับการส่งข้อความ
+ */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.replyMessage(props.idInbox), {
+        subject: subject.value,
+        body: body.value,
+      })
+      .then(() => {
+        props.clickClose();
+        success($q, "ส่งข้อความสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 </script>
@@ -58,7 +61,7 @@ async function submit() {
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="width: 40vw; max-width: 40vw">
-      <q-form ref="myForm">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader tittle="ส่งข้อความ" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
@@ -71,7 +74,7 @@ async function submit() {
                   outlined
                   dense
                   lazy-rules
-                  :rules="[(val) => !!val || 'กรุณากรอกหัวข้อ']"
+                  :rules="[(val:string) => !!val || 'กรุณากรอกหัวข้อ']"
                   v-model="subject"
                   label="หัวข้อ"
                 />
@@ -83,7 +86,7 @@ async function submit() {
                   outlined
                   dense
                   lazy-rules
-                  :rules="[(val) => !!val || 'กรุณากรอกข้อความ']"
+                  :rules="[(val:string) => !!val || 'กรุณากรอกข้อความ']"
                   v-model="body"
                   label="ข้อความ"
                 />
@@ -93,15 +96,7 @@ async function submit() {
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="ส่งข้อความ"
-            color="public"
-            @click="submit"
-            class="q-px-md"
-          >
-            <!-- icon="mdi-content-save-outline" -->
+          <q-btn label="ส่งข้อความ" color="public" type="submit">
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 09bb224d..b66d1ed0 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -6,12 +6,13 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import PopupReplyInbox from "@/components/Dialogs/PopupReplyInbox.vue";
 import type {
   ResponseInbox,
   DataInbox,
 } from "@/interface/response/dashboard/dashboard";
 
+import PopupReplyInbox from "@/components/Dialogs/PopupReplyInbox.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const {
@@ -23,25 +24,35 @@ const {
   dialogRemove,
 } = mixin;
 
-const splitterModel = ref<number>(30);
-const link = ref<string>("0");
-const inboxList = ref<DataInbox[]>([]);
-const data = ref<DataInbox[]>([]);
+const splitterModel = ref<number>(30); // ขนาดของกล่องข้อความ
+const link = ref<string>("0"); // รายการกล่องข้อความ
+const inboxList = ref<DataInbox[]>([]); //ข้อมูลรายการกล่องข้อความ
+const data = ref<DataInbox[]>([]); //ข้อมูลกล่องข้อความ
+const totalInbox = ref<number>(0); // จำนวนกล่องข้อความ
+const scrollTargetRef = ref<any>(null);
+//กำหนดรูปแบบแสดงวนเวลา
+const thaiOptions: Intl.DateTimeFormatOptions = {
+  hour: "2-digit",
+  minute: "2-digit",
+};
+const isLoadInbox = ref<boolean>(false); // สถานะการโหลด
+const modalReply = ref<boolean>(false); // ตอบกลับข้อความ
 
-onMounted(async () => {
-  await getData(1);
-});
-
-const isLoadInbox = ref<boolean>(false);
-const getData = async (index: number) => {
+/**
+ * โหลดรายการกล่องข้องความ
+ * เมื่อ index = 1 โชว์โหลด ถ้าไม่ไม่แสดง
+ *
+ * @param index หน้าที่ต้องการโหลด
+ */
+async function getData(index: number) {
   isLoadInbox.value = false;
   index === 1 && showLoader();
   index != 0 &&
     (await http
       .get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
-      .then((res: any) => {
-        const data = res.data.result.data;
-        totalInbox.value = res.data.result.total;
+      .then(async (res) => {
+        const data = await res.data.result.data;
+        totalInbox.value = await res.data.result.total;
 
         let list: DataInbox[] = [];
         data.map((e: ResponseInbox) => {
@@ -66,15 +77,19 @@ const getData = async (index: number) => {
         }
       })
       .catch((e) => {
-        // messageError($q, e);
+        messageError($q, e);
       })
       .finally(() => {
         isLoadInbox.value = true;
         hideLoader();
       }));
-};
+}
 
-const selectInbox = (id: string) => {
+/**
+ * เลือกแสดงกล่องข้อความ
+ * @param id ข้อความ
+ */
+function selectInbox(id: string) {
   http
     .get(config.API.msgInboxDelete(id))
     .then(() => {
@@ -84,54 +99,71 @@ const selectInbox = (id: string) => {
         item.isOpen = true;
       }
     })
-    .catch((err) => {});
-};
-const deleteData = (id: string) => {
-  dialogRemove($q, () => removeData(id));
-};
-
-//รอ api ลบ
-const removeData = async (id: string) => {
-  showLoader();
-  await http
-    .delete(config.API.msgInboxDelete(id))
-    .then(() => {
-      success($q, "ลบข้อมูลสำเร็จ");
-      const position = inboxList.value.findIndex((item) => item.no === id);
-      if (position !== -1) {
-        inboxList.value.splice(position, 1);
-        data.value = [];
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      if (inboxList.value.length === 6) {
-        inboxList.value = [];
-        getData(1);
-      }
-      hideLoader();
+    .catch((err) => {
+      messageError($q, err);
     });
-};
-const fileOpen = (url: string) => {
-  window.open(url, "_blank");
-};
+}
 
-// Dialog Reply
-const modalReply = ref<boolean>(false);
+/**
+ * ยืนยันการลบกล่องข้อความ
+ * @param id
+ */
+function deleteData(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.msgInboxDelete(id))
+      .then(() => {
+        // เมื่แ ข้อความเหลือ 6 เรียกโหลดรายการกล่องข้องความใหม่
+        if (inboxList.value.length === 6) {
+          inboxList.value = [];
+          getData(1);
+        }
+        const position = inboxList.value.findIndex((item) => item.no === id);
+        if (position !== -1) {
+          inboxList.value.splice(position, 1);
+          data.value = [];
+        }
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * ดาวน์โหลดเอกสารแนบ
+ * @param url ลิงก์โหลดเอกสาร
+ */
+function fileOpen(url: string) {
+  window.open(url, "_blank");
+}
+
+/**
+ * เปิด popup การตอบกลับข้อความ
+ */
 function dialogRepleOpen() {
   modalReply.value = true;
 }
 
+/**
+ * ปิด popup การตอบกลับข้อความ
+ */
 function modalReplyClose() {
   modalReply.value = false;
 }
 
-const scrollTargetRef = ref<any>(null);
-const totalInbox = ref<number>(0);
-
-function onLoad(index: number, done: any) {
+/**
+ * ฟังก์ชัน onLoad ทำงานเมื่อโหลดข้อมูลเพิ่มเติมในรายการแจ้งเตือน
+ *
+ * @param index - ของรายการที่กำลังโหลด
+ * @param done - ฟังก์ชันที่เรียกเมื่อการโหลดเสร็จสิ้น
+ */
+function onLoad(index: number, done: Function) {
   const num = index === 1 ? 0 : index++;
   if (inboxList.value.length < totalInbox.value && isLoadInbox) {
     setTimeout(() => {
@@ -140,10 +172,10 @@ function onLoad(index: number, done: any) {
     }, 3000);
   }
 }
-const thaiOptions: Intl.DateTimeFormatOptions = {
-  hour: "2-digit",
-  minute: "2-digit",
-};
+
+onMounted(async () => {
+  await getData(1);
+});
 </script>
 
 <!-- page:หน้าแรก -->
@@ -308,14 +340,6 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
                     color="red"
                     @click="deleteData(d.no)"
                   />
-                  <!-- <q-btn
-                    flat
-                    round
-                    dense
-                    icon="mdi-dots-vertical"
-                    size="10px"
-                    color="grey-7"
-                  /> -->
                 </div>
               </q-item-section>
             </q-item>
@@ -355,14 +379,6 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
                     </q-list>
                   </q-menu>
                 </div>
-
-                <!-- <q-btn
-                  unelevated
-                  size="12px"
-                  dense
-                  class="q-ml-md q-px-sm bg-blue-1 text-blue-7"
-                  label="ดาวน์โหลดทั้งหมด"
-                /> -->
               </div>
             </div>
           </div>
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index db51afe2..32c6f0c5 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch, onBeforeMount } from "vue";
-import { useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
 import { storeToRefs } from "pinia";
-import { scroll, useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { logout, tokenParsed } from "@/plugins/auth";
+import { useQuasar } from "quasar";
 
-import http from "@/plugins/http";
+import { useRoute } from "vue-router";
 import config from "@/app.config";
+import http from "@/plugins/http";
+import { logout, tokenParsed } from "@/plugins/auth";
+import checkPermission from "@/plugins/checkPermission";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 
 import type {
   ScrollType,
@@ -16,15 +17,12 @@ import type {
   optionType,
 } from "../interface/request/main/main";
 import { menuList } from "../interface/request/main/main";
-import checkPermission from "@/plugins/checkPermission";
 
-// import { useroleUserDataStore } from "@/stores/roleUser";
-
-const { setVerticalScrollPosition } = scroll;
+const $q = useQuasar();
 const store = useDataStore();
 const route = useRoute();
-const link = ref<string>("");
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { loader } = storeToRefs(store);
+const { changeTab } = store;
 const {
   showLoader,
   hideLoader,
@@ -33,22 +31,16 @@ const {
   messageError,
   date2Thai,
   dialogConfirm,
-} = mixin;
+} = useCounterMixin();
 
-// const DataStore = useroleUserDataStore();
-// const { fetchroleUser } = DataStore;
-
-const id = ref<string>("");
-const $q = useQuasar();
-const { loader } = storeToRefs(store);
-const { changeTab } = store;
-const miniState = ref<boolean>(false);
-const drawerR = ref<boolean>(false);
-const rightActive = ref<boolean>(false);
+const fullname = ref<string>(""); // ชื่อผู้ใช้งาน
+const link = ref<string>("");
+const miniState = ref<boolean>(false); // ย่อเมนูหลัก
+const drawerR = ref<boolean>(false); //ปุ่มย่อขวา
+const rightActive = ref<boolean>(false); // แสดงแถบด้านขวา
 const resize = ref<number>(0);
 const active = ref<number>(0);
 const drawerL = ref<boolean>(false);
-const fullname = ref<string>("");
 const role = ref<string[]>([]);
 const reles = ref<any[]>([]);
 const notiTrigger = ref<boolean>(false);
@@ -75,6 +67,9 @@ const options = ref<optionType[]>([
   },
 ]);
 
+/**
+ * fetch จำนวนของกาแจ้งเตือน
+ */
 async function fetchmsgNoread() {
   await http
     .get(config.API.msgNoread())
@@ -86,8 +81,17 @@ async function fetchmsgNoread() {
     });
 }
 
-const statusLoad = ref<boolean>(false);
-const getDataNotification = async (index: number, type: string) => {
+const statusLoad = ref<boolean>(false); // สถานการโหลด
+
+/**
+ * fetch ข้อมูลรายการแจ้งเตือน
+ * ุ ถ้า type === 'DEL' notiList = [] แล้วจำโหลดข่อมูลรายการใหม่
+ * แต่ถ่าไม่ notiList จะ เพิ่มข้อมูลรายการไปเรื่อยๆ
+ *
+ * @param index รายการแจ้งเตือน
+ * @param type ประเภทรายการโหลด โหลดหลัง Delete, โหลดปกติ
+ */
+async function getDataNotification(index: number, type: string) {
   const thaiOptions: Intl.DateTimeFormatOptions = {
     hour: "2-digit",
     minute: "2-digit",
@@ -97,7 +101,6 @@ const getDataNotification = async (index: number, type: string) => {
     .then((res: any) => {
       const response = res.data.result.data;
       totalInbox.value = res.data.result.total;
-
       let list: notiType[] = [];
       if (type === "DEL") {
         notiList.value = [];
@@ -121,58 +124,45 @@ const getDataNotification = async (index: number, type: string) => {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {});
-};
-
-onBeforeMount(async () => {
-  reles.value = await tokenParsed();
-  //  ดิงชื่อผู้ใช้งานจาก keycloak
-  const tokenParsedData: any = await tokenParsed();
-  if (tokenParsedData != null) {
-    fullname.value = tokenParsedData.name;
-    role.value = tokenParsedData.role;
-  }
-});
+    });
+}
 
 /**
  * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
  */
-const toggleBtnRight = () => {
+function toggleBtnRight() {
   drawerR.value = !drawerR.value;
-};
+}
 
 /**
  * toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px
  * ปกติเป็นการย่อโดยใช้ Ministate
  */
-const toggleBtnLeft = () => {
+function toggleBtnLeft() {
   if (window.innerWidth < 1024) {
     drawerL.value = !drawerL.value;
   } else {
     miniState.value = !miniState.value;
   }
-};
+}
 
 /**
  * Event onScroll นำ ตำแหน่ง top ที่ scroll
  * ใช้ function updateScroll
  */
-const onScroll = (scroll: ScrollType) => {
+function onScroll(scroll: ScrollType) {
   const { position } = scroll;
-
   updateScroll(position);
-};
+}
 
 /**
  * updateScroll เป็น function active แทปด้านขวา
  */
-const updateScroll = (position: number) => {
+function updateScroll(position: number) {
   // เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
   if (position === void 0) {
     position = document.documentElement.scrollTop || document.body.scrollTop;
   }
-
   let last;
 
   /**
@@ -187,38 +177,14 @@ const updateScroll = (position: number) => {
       tocEl.scrollIntoView({ block: "nearest" });
     }
   }
-};
+}
 
 /**
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
  */
-const activeBtn = () => {
+function activeBtn() {
   return route.name == "registryDetail" && rightActive.value;
-};
-
-/**
- * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
- * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
- * เริ่มเข้ามา state rightActive เป็น state ที่โชว์ ปุ่มขวา
- * ยังจับ boolean ผิด จึงต้อง set
- */
-onMounted(async () => {
-  await fetchmsgNoread();
-  // await getDataNotification(1, "NOMAL");
-  myEventHandler(null, false);
-  window.addEventListener("resize", (e: any) => {
-    myEventHandler(e, true);
-  });
-});
-
-/**
- * เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
- */
-onUnmounted(() => {
-  window.removeEventListener("resize", (e: any) => {
-    myEventHandler(e, true);
-  });
-});
+}
 
 /**
  * @param e event ของ resize
@@ -230,7 +196,7 @@ onUnmounted(() => {
  * rightActive = true ; แสดงปุ่ม drawer ด้าน ขวา
  * rightActive = false; ไม่แสดงปุ่ม drawer ด้าน ขวา
  */
-const myEventHandler = (e: any, setSCroll: boolean) => {
+function myEventHandler(e: any, setSCroll: boolean) {
   if (setSCroll) {
     resize.value = e.target.innerWidth;
   } else {
@@ -249,7 +215,7 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
       }
     }
   }
-};
+}
 
 /**
  * ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
@@ -257,60 +223,63 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
  * แต่จะไม่ active เมื่อ path นั้น มี child path  /main/อื่นๆ
  * @param path string
  */
-const activeMenu = (path: string) => {
+function activeMenu(path: string) {
   const bool = route.name === path;
-
   return bool;
-};
+}
 
 /**
  * logout keycloak
  * confirm ก่อนออกจากระบบ
  */
-const doLogout = () => {
+function doLogout() {
   dialogConfirm(
     $q,
     async () => {
       logout();
     },
-    // keycloak.logout({
-    //   redirectUri: `${window.location.protocol}//${window.location.host}/`,
-    // })
-    // authen with keycloak client
     "ยืนยันการออกจากระบบ",
     "ต้องการออกจากระบบใช่หรือไม่?"
   );
-};
-
-function deleteCookie(name: string) {
-  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
 }
 
-const clickDelete = async (id: string, index: number) => {
+/**
+ * ยืนยีนการลบรายการข้อความแจ้งเตือน
+ *
+ * @param id ข้อความแจ้งเตือน
+ * @param index ตำแหน่งของข้อมูล
+ */
+async function clickDelete(id: string, index: number) {
   dialogRemove($q, async () => {
     showLoader();
     await http
       .delete(config.API.msgId(id))
-      .then(() => {
+      .then(async () => {
+        notiList.value.length === 7 && (await getDataNotification(1, "DEL"));
         notiList.value.splice(index, 1);
-        success($q, "ลบข้อมูลสำเร็จ");
         totalInbox.value--;
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
-      .finally(async () => {
-        notiList.value.length === 7 && getDataNotification(1, "DEL");
+      .finally(() => {
         hideLoader();
       });
   });
-};
+}
 
-const totalInbox = ref<number>(0);
-const totalNoti = ref<number>(0);
-const page = ref<number>(0);
+const totalInbox = ref<number>(0); //จำนวนของรายการแจ้งเตือน
+const totalNoti = ref<number>(0); //จำนวนของการแจ้งเตือน
+const page = ref<number>(0); // หน้า
 
-function onLoad(index: any, done: any) {
+/**
+ * ฟังก์ชัน onLoad ทำงานเมื่อโหลดข้อมูลเพิ่มเติมในรายการแจ้งเตือน
+ *
+ * @param index - ของรายการที่กำลังโหลด
+ * @param done - ฟังก์ชันที่เรียกเมื่อการโหลดเสร็จสิ้น
+ */
+function onLoad(index: any, done: Function) {
   if (
     notiList.value.length < totalInbox.value ||
     (notiList.value.length === 0 && totalInbox.value === 0)
@@ -322,14 +291,20 @@ function onLoad(index: any, done: any) {
     }, 1500);
   }
 }
-const handleButtonClick = () => {
+
+/**
+ *
+ * ใช้เพื่อสร้างและเปิดหน้าต่างคู่มือการใช้งาน
+ * ถ้า config.generatePopupPath() ส่งคืน URL ที่เป็นฐาน, จะทำการเปิดหน้าต่างใหม่ด้วยเส้นทางและ query string ที่สร้างขึ้น
+ * ถ้าไม่มีเส้นทางที่จะใช้ จะพิมพ์ข้อความลงใน console เพื่อแจ้งว่าไม่มีคู่มือสำหรับหน้านี้
+ */
+function handleButtonClick() {
   const currentPath = route.name;
   const queryParams = { role: "admin" }; // Replace with your query parameters
   const queryString = new URLSearchParams(queryParams).toString();
 
   // Assuming config.generatePopupPath() returns a base URL
   const popupBasePath = config.generatePopupPath(currentPath);
-  console.log(currentPath);
 
   if (popupBasePath) {
     const popupPath = `${popupBasePath}?${queryString}`;
@@ -337,8 +312,14 @@ const handleButtonClick = () => {
   } else {
     console.log("No manual available for this page:", currentPath);
   }
-};
+}
 
+/**
+ * ฟังก์ชัน watch การเปลี่ยนแปลงของค่า notiTrigger
+ * เมื่อค่า notiTrigger เปลี่ยนเป็น false,
+ * ฟังก์ชันนี้จะทำการอัปเดตรายการแจ้งเตือนทั้งหมดให้เป็นสถานะ "เปิดอ่านแล้ว"
+ * จากนั้นจะเรียกฟังก์ชัน fetchmsgNoread เพื่อดึงข้อมูลข้อความที่ยังไม่ได้อ่าน
+ */
 watch(
   () => notiTrigger.value,
   () => {
@@ -352,6 +333,44 @@ watch(
     }
   }
 );
+
+/**
+ * ฮุกนี้จะถูกเรียกก่อนที่คอมโพเนนต์จะถูก onMounted
+ * กำหนดบทบาทและชื่อผู้ใช้งานจาก Keycloak
+ */
+onBeforeMount(async () => {
+  reles.value = await tokenParsed();
+
+  //  ดิงชื่อผู้ใช้งานจาก keycloak
+  const tokenParsedData: any = await tokenParsed();
+  if (tokenParsedData != null) {
+    fullname.value = tokenParsedData.name;
+    role.value = tokenParsedData.role;
+  }
+});
+
+/**
+ * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
+ * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
+ * เริ่มเข้ามา state rightActive เป็น state ที่โชว์ ปุ่มขวา
+ * ยังจับ boolean ผิด จึงต้อง set
+ */
+onMounted(async () => {
+  await fetchmsgNoread();
+  myEventHandler(null, false);
+  window.addEventListener("resize", (e: any) => {
+    myEventHandler(e, true);
+  });
+});
+
+/**
+ * เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
+ */
+onUnmounted(() => {
+  window.removeEventListener("resize", (e: any) => {
+    myEventHandler(e, true);
+  });
+});
 </script>
 
 <!-- โครงเว็บ -->
diff --git a/src/views/login.vue b/src/views/login.vue
index 3fd79f58..8e5e8548 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,30 +1,31 @@
 <!-- authen with keycloak client -->
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import axios from "axios";
-import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import CustomComponent from "@/components/CustomDialog.vue";
-import { setAuthen, authenticated, tokenParsed } from "@/plugins/auth";
+import axios from "axios";
 
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { setAuthen, authenticated, tokenParsed } from "@/plugins/auth";
+import CustomComponent from "@/components/CustomDialog.vue";
+
+const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const $q = useQuasar(); //ใช้ noti quasar
 
 const { showLoader, hideLoader, messageError } = mixin;
 const isDisplay = ref<boolean>(true); // check display login page
 
-const username = ref<string>("");
-const password = ref<string>("");
+const username = ref<string>(""); // ผู้ใช้
+const password = ref<string>(""); // รหัสผ่าน
 
 /**
- * @description ฟังก์ชั่นเข้าสู่ระบบ
+ * ฟังก์ชั่นเข้าสู่ระบบ
  */
 async function onSubmit() {
   showLoader();
-  const formdata = new URLSearchParams();
 
+  const formdata = new URLSearchParams();
   formdata.append("username", username.value);
   formdata.append("password", password.value);
 
@@ -54,8 +55,11 @@ async function onSubmit() {
     });
 }
 
+/**
+ * ทำงานเมื่อ components ถูกเรียกใช้งาน
+ */
 onMounted(async () => {
-  // check authen and role of system
+  //ตรวจสอบการยืนยันตัวตนของผู้ใช้งาน
   const checkAuthen = await authenticated();
   if (checkAuthen) {
     isDisplay.value = false;