From 36c07f791c26060c666928c90c096f21a27e744b Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 1 Jul 2024 09:19:17 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B9=E0=B9=88=E0=B8=A1=E0=B8=B7=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.config.ts        |  122 ++--
 src/views/MainLayout.vue | 1462 ++++++++++++++++----------------------
 2 files changed, 692 insertions(+), 892 deletions(-)

diff --git a/src/app.config.ts b/src/app.config.ts
index 264dd6bd..f9ac13c9 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -1,85 +1,107 @@
 /**ใช้รวมไฟล์ย่อยๆ ของ api แต่ละไฟล์ */
 
 /** API Metadata */
-import manageOrganization from "./api/manage/api.organization";
-import managePerson from "./api/manage/api.person";
-import managePosition from "./api/manage/api.position";
-import managePositionEmployee from "./api/manage/api.positionEmployee";
-import manageInsignia from "./api/manage/api.insignia";
-import manageHoliday from "./api/manage/api.holiday";
+import manageOrganization from "./api/manage/api.organization"
+import managePerson from "./api/manage/api.person"
+import managePosition from "./api/manage/api.position"
+import managePositionEmployee from "./api/manage/api.positionEmployee"
+import manageInsignia from "./api/manage/api.insignia"
+import manageHoliday from "./api/manage/api.holiday"
 
 /** API Tree List */
-import organizationTreeList from "./api/02_organizational/api.treelist";
+import organizationTreeList from "./api/02_organizational/api.treelist"
 
 /** API Structure & Org Chart */
-import organizationChart from "./api/02_organizational/api.chart";
+import organizationChart from "./api/02_organizational/api.chart"
 
 /** API Profile List */
-import profile from "./api/registry/api.profile";
-import registry from "./api/registry/api.registry";
+import profile from "./api/registry/api.profile"
+import registry from "./api/registry/api.registry"
 
 /** API dashboard  */
-import message from "./api/00_dashboard/api.message";
+import message from "./api/00_dashboard/api.message"
 
 /** API reports  */
-import reports from "./api/reports/api.report";
+import reports from "./api/reports/api.report"
 
 /** API โครงสร้างอัตรากำลัง*/
-import organization from "./api/02_organizational/api.organization";
+import organization from "./api/02_organizational/api.organization"
 
-import file from "./api/file/api.file";
+import file from "./api/file/api.file"
 
 /** API ManagementUsers*/
-import menagement from "./api/manage/api.management";
+import menagement from "./api/manage/api.management"
 
 /** API ระเมินผลการปฏิบัติราชการระดับบุคคล*/
-import KPI from "./api/14_KPI/api.KPI";
+import KPI from "./api/14_KPI/api.KPI"
 
 /** API เงินเดือน/ค่าจ้าง*/
-import development from "./api/15_development/api.development";
+import development from "./api/15_development/api.development"
 
 // environment variables
-export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
-export const qualifyDisableExamPanel = import.meta.env
-  .VITE_QUALIFY_DISABLE_EMAM_PANEL;
-export const qualifyExamPanel = import.meta.env.VITE_QUALIFY_EXAM_PANEL;
+export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL
+export const qualifyDisableExamPanel = import.meta.env.VITE_QUALIFY_DISABLE_EMAM_PANEL
+export const qualifyExamPanel = import.meta.env.VITE_QUALIFY_EXAM_PANEL
 
+const path = "http://localhost:3008"
+
+const generatePopupPath = (routeName: any) => {
+	if (routeName.includes("viewLogs")) {
+		return `${path}/build-and-deploy`
+	}
+	if (routeName.includes("manageUsers")) {
+		return `${path}/build-and-deploy`
+	}
+	if (routeName.includes("manageRoles")) {
+		return `${path}/build-and-deploy`
+	}
+	if (routeName.includes("managePermission")) {
+		return `${path}/build-and-deploy`
+	} else {
+		return manualConfig[routeName as keyof typeof manualConfig]
+	}
+}
+
+const manualConfig = {
+	dashboard: `${path}/build-and-deploy`,
+}
 const API = {
-  //Metadata
-  ...manageOrganization,
-  ...managePerson,
-  ...managePosition,
-  ...managePositionEmployee,
-  ...manageInsignia,
-  ...manageHoliday,
+	//Metadata
+	...manageOrganization,
+	...managePerson,
+	...managePosition,
+	...managePositionEmployee,
+	...manageInsignia,
+	...manageHoliday,
 
-  // โครงสร้างอัตรากำลัง
-  ...organization,
+	// โครงสร้างอัตรากำลัง
+	...organization,
 
-  //Tree List
-  ...organizationTreeList,
-  ...organizationChart,
+	//Tree List
+	...organizationTreeList,
+	...organizationChart,
 
-  //profile
-  ...profile,
-  ...registry,
+	//profile
+	...profile,
+	...registry,
 
-  //dashboard
-  ...message,
+	//dashboard
+	...message,
 
-  //reports
-  ...reports,
+	//reports
+	...reports,
 
-  /*file*/
-  ...file,
+	/*file*/
+	...file,
 
-  /**  menagement*/
-  ...menagement,
-  /** KPI*/
-  ...KPI,
-  ...development,
-};
+	/**  menagement*/
+	...menagement,
+	/** KPI*/
+	...KPI,
+	...development,
+}
 
 export default {
-  API: API,
-};
+	API: API,
+	generatePopupPath,
+}
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index dc2cbcbe..1c210203 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,187 +1,170 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from "vue";
-import keycloak from "@/plugins/keycloak";
-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 { ref, onMounted, onUnmounted, watch } from "vue"
+import keycloak from "@/plugins/keycloak"
+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 http from "@/plugins/http";
-import config from "@/app.config";
+import http from "@/plugins/http"
+import config from "@/app.config"
 
-import type {
-  ScrollType,
-  notiType,
-  optionType,
-} from "../interface/request/main/main";
-import { menuList } from "../interface/request/main/main";
-import checkPermission from "@/plugins/checkPermission";
+import type { ScrollType, notiType, 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 store = useDataStore();
-const route = useRoute();
-const link = ref<string>("");
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  showLoader,
-  hideLoader,
-  dialogRemove,
-  success,
-  messageError,
-  date2Thai,
-  dialogConfirm,
-} = mixin;
+const { setVerticalScrollPosition } = scroll
+const store = useDataStore()
+const route = useRoute()
+const link = ref<string>("")
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const { showLoader, hideLoader, dialogRemove, success, messageError, date2Thai, dialogConfirm } = mixin
 // 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 resize = ref<number>(0);
-const active = ref<number>(0);
-const drawerL = ref<boolean>(false);
-const fullname = ref<string>("");
-const role = ref<string[]>([]);
-const notiTrigger = ref<boolean>(false);
+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 resize = ref<number>(0)
+const active = ref<number>(0)
+const drawerL = ref<boolean>(false)
+const fullname = ref<string>("")
+const role = ref<string[]>([])
+const notiTrigger = ref<boolean>(false)
 
-const notiList = ref<notiType[]>([]);
+const notiList = ref<notiType[]>([])
 const options = ref<optionType[]>([
-  {
-    icon: "mdi-account-cog",
-    label: "ผู้ดูแลระบบ",
-    value: "op1",
-    color: "primary",
-  },
-  {
-    icon: "mdi-account-group",
-    label: "เจ้าหน้าที่",
-    value: "op2",
-    color: "blue",
-  },
-  {
-    icon: "mdi-account-circle",
-    label: "บุคคล",
-    value: "op3",
-    color: "indigo",
-  },
-]);
+	{
+		icon: "mdi-account-cog",
+		label: "ผู้ดูแลระบบ",
+		value: "op1",
+		color: "primary",
+	},
+	{
+		icon: "mdi-account-group",
+		label: "เจ้าหน้าที่",
+		value: "op2",
+		color: "blue",
+	},
+	{
+		icon: "mdi-account-circle",
+		label: "บุคคล",
+		value: "op3",
+		color: "indigo",
+	},
+])
 
 async function fetchmsgNoread() {
-  await http
-    .get(config.API.msgNoread())
-    .then((res) => {
-      totalNoti.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+	await http
+		.get(config.API.msgNoread())
+		.then((res) => {
+			totalNoti.value = res.data.result
+		})
+		.catch((err) => {
+			messageError($q, err)
+		})
 }
 
-const statusLoad = ref<boolean>(false);
+const statusLoad = ref<boolean>(false)
 const getDataNotification = async (index: number, type: string) => {
-  const thaiOptions: Intl.DateTimeFormatOptions = {
-    hour: "2-digit",
-    minute: "2-digit",
-  };
-  await http
-    .get(config.API.msgNotificate + `?page=${index}&pageSize=${10}`)
-    .then((res: any) => {
-      const response = res.data.result.data;
-      totalInbox.value = res.data.result.total;
+	const thaiOptions: Intl.DateTimeFormatOptions = {
+		hour: "2-digit",
+		minute: "2-digit",
+	}
+	await http
+		.get(config.API.msgNotificate + `?page=${index}&pageSize=${10}`)
+		.then((res: any) => {
+			const response = res.data.result.data
+			totalInbox.value = res.data.result.total
 
-      let list: notiType[] = [];
-      if (type === "DEL") {
-        notiList.value = [];
-      }
-      response.map((e: any) => {
-        list.push({
-          id: e.id,
-          sender:
-            e.createdFullName == "" || e.createdFullName == null
-              ? "เจ้าหน้าที่"[0]
-              : e.createdFullName[0],
-          body: e.body ?? "",
-          timereceive: `${date2Thai(e.receiveDate)} ${new Date(
-            e.receiveDate
-          ).toLocaleTimeString("th-TH", thaiOptions)} น.`,
-          isOpen: e.isOpen,
-        });
-      });
-      notiList.value.push(...list);
-      statusLoad.value = totalInbox.value === 0 ? true : false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {});
-};
+			let list: notiType[] = []
+			if (type === "DEL") {
+				notiList.value = []
+			}
+			response.map((e: any) => {
+				list.push({
+					id: e.id,
+					sender: e.createdFullName == "" || e.createdFullName == null ? "เจ้าหน้าที่"[0] : e.createdFullName[0],
+					body: e.body ?? "",
+					timereceive: `${date2Thai(e.receiveDate)} ${new Date(e.receiveDate).toLocaleTimeString("th-TH", thaiOptions)} น.`,
+					isOpen: e.isOpen,
+				})
+			})
+			notiList.value.push(...list)
+			statusLoad.value = totalInbox.value === 0 ? true : false
+		})
+		.catch((e) => {
+			messageError($q, e)
+		})
+		.finally(() => {})
+}
 
 /**
  * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
  */
 const toggleBtnRight = () => {
-  drawerR.value = !drawerR.value;
-};
+	drawerR.value = !drawerR.value
+}
 
 /**
  * toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px
  * ปกติเป็นการย่อโดยใช้ Ministate
  */
 const toggleBtnLeft = () => {
-  if (window.innerWidth < 1024) {
-    drawerL.value = !drawerL.value;
-  } else {
-    miniState.value = !miniState.value;
-  }
-};
+	if (window.innerWidth < 1024) {
+		drawerL.value = !drawerL.value
+	} else {
+		miniState.value = !miniState.value
+	}
+}
 
 /**
  * Event onScroll นำ ตำแหน่ง top ที่ scroll
  * ใช้ function updateScroll
  */
 const onScroll = (scroll: ScrollType) => {
-  const { position } = scroll;
+	const { position } = scroll
 
-  updateScroll(position);
-};
+	updateScroll(position)
+}
 
 /**
  * updateScroll เป็น function active แทปด้านขวา
  */
 const updateScroll = (position: number) => {
-  // เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
-  if (position === void 0) {
-    position = document.documentElement.scrollTop || document.body.scrollTop;
-  }
+	// เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
+	if (position === void 0) {
+		position = document.documentElement.scrollTop || document.body.scrollTop
+	}
 
-  let last;
+	let last
 
-  /**
-   * ถ้า last ไม่เท่ากับ undifind
-   * ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
-   * และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
-   */
-  if (last !== void 0) {
-    changeTab(last);
-    const tocEl = document.getElementById("tab--" + last);
-    if (tocEl) {
-      tocEl.scrollIntoView({ block: "nearest" });
-    }
-  }
-};
+	/**
+	 * ถ้า last ไม่เท่ากับ undifind
+	 * ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
+	 * และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
+	 */
+	if (last !== void 0) {
+		changeTab(last)
+		const tocEl = document.getElementById("tab--" + last)
+		if (tocEl) {
+			tocEl.scrollIntoView({ block: "nearest" })
+		}
+	}
+}
 
 /**
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
  */
 const activeBtn = () => {
-  return route.name == "registryDetail" && rightActive.value;
-};
+	return route.name == "registryDetail" && rightActive.value
+}
 
 /**
  * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
@@ -190,25 +173,25 @@ const activeBtn = () => {
  * ยังจับ boolean ผิด จึงต้อง set
  */
 onMounted(async () => {
-  // if (keycloak.tokenParsed) {
-  //   await fetchroleUser(keycloak.tokenParsed.role);
-  // }
-  await fetchmsgNoread();
-  // await getDataNotification(1, "NOMAL");
-  myEventHandler(null, false);
-  window.addEventListener("resize", (e: any) => {
-    myEventHandler(e, true);
-  });
-});
+	// if (keycloak.tokenParsed) {
+	//   await fetchroleUser(keycloak.tokenParsed.role);
+	// }
+	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);
-  });
-});
+	window.removeEventListener("resize", (e: any) => {
+		myEventHandler(e, true)
+	})
+})
 
 /**
  * @param e event ของ resize
@@ -221,25 +204,25 @@ onUnmounted(() => {
  * rightActive = false; ไม่แสดงปุ่ม drawer ด้าน ขวา
  */
 const myEventHandler = (e: any, setSCroll: boolean) => {
-  if (setSCroll) {
-    resize.value = e.target.innerWidth;
-  } else {
-    resize.value = window.innerWidth;
-  }
-  if (resize.value < 1024) {
-    if (!rightActive.value) {
-      rightActive.value = true;
-    }
-  } else {
-    if (rightActive.value) {
-      if (drawerR.value) {
-        rightActive.value = true;
-      } else {
-        rightActive.value = false;
-      }
-    }
-  }
-};
+	if (setSCroll) {
+		resize.value = e.target.innerWidth
+	} else {
+		resize.value = window.innerWidth
+	}
+	if (resize.value < 1024) {
+		if (!rightActive.value) {
+			rightActive.value = true
+		}
+	} else {
+		if (rightActive.value) {
+			if (drawerR.value) {
+				rightActive.value = true
+			} else {
+				rightActive.value = false
+			}
+		}
+	}
+}
 
 /**
  * ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
@@ -248,777 +231,572 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
  * @param path string
  */
 const activeMenu = (path: string) => {
-  const bool = route.name === path;
+	const bool = route.name === path
 
-  return bool;
-};
+	return bool
+}
 
 /**
  * logout keycloak
  * confirm ก่อนออกจากระบบ
  */
 const doLogout = () => {
-  dialogConfirm(
-    $q,
-    () =>
-      keycloak.logout({
-        redirectUri: `${window.location.protocol}//${window.location.host}/`,
-      }),
-    "ยืนยันการออกจากระบบ",
-    "ต้องการออกจากระบบใช่หรือไม่?"
-  );
-};
+	dialogConfirm(
+		$q,
+		() =>
+			keycloak.logout({
+				redirectUri: `${window.location.protocol}//${window.location.host}/`,
+			}),
+		"ยืนยันการออกจากระบบ",
+		"ต้องการออกจากระบบใช่หรือไม่?"
+	)
+}
 
 /**
  * ดิงชื่อผู้ใช้งานจาก keycloak
  */
 if (keycloak.tokenParsed != null) {
-  fullname.value = keycloak.tokenParsed.name;
-  role.value = keycloak.tokenParsed.role;
+	fullname.value = keycloak.tokenParsed.name
+	role.value = keycloak.tokenParsed.role
 }
 
 const clickDelete = async (id: string, index: number) => {
-  dialogRemove($q, async () => {
-    showLoader();
-    await http
-      .delete(config.API.msgId(id))
-      .then(() => {
-        notiList.value.splice(index, 1);
-        success($q, "ลบข้อมูลสำเร็จ");
-        totalInbox.value--;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        notiList.value.length === 7 && getDataNotification(1, "DEL");
-        hideLoader();
-      });
-  });
-};
+	dialogRemove($q, async () => {
+		showLoader()
+		await http
+			.delete(config.API.msgId(id))
+			.then(() => {
+				notiList.value.splice(index, 1)
+				success($q, "ลบข้อมูลสำเร็จ")
+				totalInbox.value--
+			})
+			.catch((e) => {
+				messageError($q, e)
+			})
+			.finally(async () => {
+				notiList.value.length === 7 && getDataNotification(1, "DEL")
+				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) {
-  if (
-    notiList.value.length < totalInbox.value ||
-    (notiList.value.length === 0 && totalInbox.value === 0)
-  ) {
-    page.value++;
-    setTimeout(() => {
-      done();
-      getDataNotification(page.value, "NOMAL");
-    }, 1500);
-  }
+	if (notiList.value.length < totalInbox.value || (notiList.value.length === 0 && totalInbox.value === 0)) {
+		page.value++
+		setTimeout(() => {
+			done()
+			getDataNotification(page.value, "NOMAL")
+		}, 1500)
+	}
+}
+const 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}`
+		window.open(popupPath, "_blank") // Opens in a new tab/window
+	} else {
+		console.log("No manual available for this page:", currentPath)
+	}
 }
 
 watch(
-  () => notiTrigger.value,
-  () => {
-    if (!notiTrigger.value) {
-      const updatedNotifications = notiList.value.map((item) => ({
-        ...item,
-        isOpen: true,
-      }));
-      notiList.value = updatedNotifications;
-      fetchmsgNoread();
-    }
-  }
-);
+	() => notiTrigger.value,
+	() => {
+		if (!notiTrigger.value) {
+			const updatedNotifications = notiList.value.map((item) => ({
+				...item,
+				isOpen: true,
+			}))
+			notiList.value = updatedNotifications
+			fetchmsgNoread()
+		}
+	}
+)
 </script>
 
 <!-- โครงเว็บ -->
 <template>
-  <!-- แบบเก่า design แรก -->
-  <!-- <q-layout view="lHh Lpr lff"> -->
-  <!-- ปรับให้กับหน้า รายละเอียดทะเบียนประวัติ  -->
-  <q-layout view="lHh LpR lff" @scroll="onScroll">
-    <!-- header -->
-    <q-header flat class="bg-grey-2 text-dark" height-hint="7">
-      <q-toolbar style="padding: 0 2%">
-        <q-btn
-          size="13px"
-          class="bg-grey-3"
-          flat
-          dense
-          round
-          @click="toggleBtnLeft"
-          aria-label="Menu"
-        >
-          <q-icon
-            :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'"
-            size="20px"
-            color="grey-7"
-          />
-        </q-btn>
+	<!-- แบบเก่า design แรก -->
+	<!-- <q-layout view="lHh Lpr lff"> -->
+	<!-- ปรับให้กับหน้า รายละเอียดทะเบียนประวัติ  -->
+	<q-layout view="lHh LpR lff" @scroll="onScroll">
+		<!-- header -->
+		<q-header flat class="bg-grey-2 text-dark" height-hint="7">
+			<q-toolbar style="padding: 0 2%">
+				<q-btn size="13px" class="bg-grey-3" flat dense round @click="toggleBtnLeft" aria-label="Menu">
+					<q-icon :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'" size="20px" color="grey-7" />
+				</q-btn>
 
-        <q-space />
+				<q-space />
 
-        <!-- Search -->
-        <!-- <q-input  dense rounded standout v-model="text" placeholder="ค้นหา">
+				<!-- Search -->
+				<!-- <q-input  dense rounded standout v-model="text" placeholder="ค้นหา">
 						<template v-slot:prepend>
 							<q-icon name="mdi-magnify" size="20px" color="grey-7" />
 						</template>
-					</q-input> -->
-        <!-- <q-btn class="bg-grey-3" flat dense round>
+</q-input> -->
+				<!-- <q-btn class="bg-grey-3" flat dense round>
           <q-icon name="mdi-magnify" size="20px" color="grey-7" />
         </q-btn>
         -->
-        <!-- Notification -->
-        <q-btn
-          round
-          dense
-          flat
-          size="13px"
-          class="q-mx-md bg-grey-3"
-          :color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
-        >
-          <q-icon name="mdi-bell" size="18px" color="grey-7" />
-          <q-badge
-            rounded
-            color="negative"
-            text-color="white"
-            floating
-            v-if="totalNoti !== 0"
-            >{{ totalNoti }}</q-badge
-          >
-          <q-menu v-model="notiTrigger" :offset="[0, 8]" style="width: 480px">
-            <div class="q-px-md q-py-sm row col-12 items-center">
-              <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
-              <q-space />
-              <div class="text-grey-5" style="font-size: 12px">
-                ทั้งหมด {{ totalInbox }} ข้อความ
-              </div>
-            </div>
+				<q-btn round dense flat size="13px" class="bg-grey-3" :color="totalNoti === 0 ? 'grey-6' : 'grey-8'" @click="handleButtonClick()" style="margin-right: 10px">
+					<q-icon name="mdi-book-open-variant" size="18px" color="grey-7" />
+					<q-tooltip>คู่มือ</q-tooltip>
+				</q-btn>
+				<!-- Notification -->
+				<q-btn round dense flat size="13px" class="q-mx-md bg-grey-3" :color="totalNoti === 0 ? 'grey-6' : 'grey-8'">
+					<q-icon name="mdi-bell" size="18px" color="grey-7" />
+					<q-badge rounded color="negative" text-color="white" floating v-if="totalNoti !== 0">{{ totalNoti }}</q-badge>
+					<q-menu v-model="notiTrigger" :offset="[0, 8]" style="width: 480px">
+						<div class="q-px-md q-py-sm row col-12 items-center">
+							<div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
+							<q-space />
+							<div class="text-grey-5" style="font-size: 12px">ทั้งหมด {{ totalInbox }} ข้อความ</div>
+						</div>
 
-            <q-infinite-scroll
-              @load="onLoad"
-              :offset="250"
-              v-if="statusLoad === false"
-            >
-              <div
-                v-for="(n, index) in notiList"
-                :key="index"
-                class="caption q-pa-xs"
-              >
-                <q-item
-                  v-ripple
-                  :class="
-                    !n.isOpen ? 'mytry q-py-xs my-menu-link' : 'mytry q-py-xs'
-                  "
-                  dense
-                >
-                  <q-item-section avatar top style="min-width: 40px">
-                    <q-avatar color="primary" size="22px" text-color="white">
-                      <span class="text-weight-medium text-uppercase">{{
-                        n.body[0]
-                      }}</span>
-                    </q-avatar>
-                  </q-item-section>
-                  <q-item-section>
-                    <q-item-label caption class="text-black">{{
-                      n.body
-                    }}</q-item-label>
-                    <q-item-label
-                      caption
-                      class="row items-center text-grey-7"
-                      >{{ n.timereceive }}</q-item-label
-                    >
-                  </q-item-section>
-                  <q-btn
-                    size="sm"
-                    unelevated
-                    dense
-                    icon="mdi-close"
-                    class="mybtn q-mx-xs"
-                    @click="clickDelete(n.id, index)"
-                  ></q-btn>
-                </q-item>
-              </div>
+						<q-infinite-scroll @load="onLoad" :offset="250" v-if="statusLoad === false">
+							<div v-for="(n, index) in notiList" :key="index" class="caption q-pa-xs">
+								<q-item v-ripple :class="!n.isOpen ? 'mytry q-py-xs my-menu-link' : 'mytry q-py-xs'" dense>
+									<q-item-section avatar top style="min-width: 40px">
+										<q-avatar color="primary" size="22px" text-color="white">
+											<span class="text-weight-medium text-uppercase">{{ n.body[0] }}</span>
+										</q-avatar>
+									</q-item-section>
+									<q-item-section>
+										<q-item-label caption class="text-black">{{ n.body }}</q-item-label>
+										<q-item-label caption class="row items-center text-grey-7">{{ n.timereceive }}</q-item-label>
+									</q-item-section>
+									<q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs" @click="clickDelete(n.id, index)"></q-btn>
+								</q-item>
+							</div>
 
-              <q-separator color="grey-2" />
+							<q-separator color="grey-2" />
 
-              <template
-                v-slot:loading
-                v-if="
-                  notiList.length < totalInbox ||
-                  (notiList.length === 0 && totalInbox === 0)
-                "
-              >
-                <div class="row justify-center q-my-md">
-                  <q-spinner-dots color="primary" size="40px" />
-                </div>
-              </template>
-            </q-infinite-scroll>
-            <div class="q-pa-md" v-else>
-              <q-banner rounded class="bg-amber-1 text-center">
-                <div class="text-yellow-10">
-                  <q-icon
-                    name="mdi-alert-box"
-                    class="q-mx-xs"
-                    size="sm"
-                    color="yellow-10"
-                  />
-                  ไมมีข้อมูล
-                </div>
-              </q-banner>
-            </div>
-          </q-menu>
-        </q-btn>
-        <div class="row items-center no-wrap">
-          <q-btn-dropdown size="md" dropdown-color="grey" flat>
-            <template v-slot:label>
-              <q-item v-close-popup class="q-pa-none">
-                <q-item-section :avatar="$q.screen.gt.xs">
-                  <q-avatar color="grey-3">
-                    <!-- <img src="https://cdn.quasar.dev/img/avatar.png" /> -->
-                    <q-icon name="mdi-account" size="22px" color="grey-7" />
-                  </q-avatar>
-                </q-item-section>
-                <q-item-section class="text-left gt-xs">
-                  <q-item-label class="text-caption text-weight-medium">{{
-                    fullname
-                  }}</q-item-label>
-                  <!-- <q-item-label caption>เจ้าหน้าที่ ก.ก.</q-item-label> -->
-                </q-item-section>
-              </q-item>
-            </template>
-            <div
-              class="row justify-center"
-              style="border-top: solid 3px #1bb19b !important; width: 273.797px"
-            >
-              <div class="column items-center col-12 q-py-md" color="grey-3">
-                <q-avatar size="72px" color="grey-4">
-                  <q-icon name="mdi-account" color="grey-7" />
-                  <!-- <img :src="require('@/assets/logo.png')" /> -->
-                </q-avatar>
-                <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
-                  {{ fullname }}
-                </div>
-                <div id="#logout">
-                  <q-btn
-                    color="primary"
-                    label="ออกจากระบบ"
-                    push
-                    size="sm"
-                    v-close-popup
-                    @click="doLogout"
-                  /><!--  -->
-                </div>
-              </div>
+							<template v-slot:loading v-if="notiList.length < totalInbox || (notiList.length === 0 && totalInbox === 0)">
+								<div class="row justify-center q-my-md">
+									<q-spinner-dots color="primary" size="40px" />
+								</div>
+							</template>
+						</q-infinite-scroll>
+						<div class="q-pa-md" v-else>
+							<q-banner rounded class="bg-amber-1 text-center">
+								<div class="text-yellow-10">
+									<q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
+									ไมมีข้อมูล
+								</div>
+							</q-banner>
+						</div>
+					</q-menu>
+				</q-btn>
+				<div class="row items-center no-wrap">
+					<q-btn-dropdown size="md" dropdown-color="grey" flat>
+						<template v-slot:label>
+							<q-item v-close-popup class="q-pa-none">
+								<q-item-section :avatar="$q.screen.gt.xs">
+									<q-avatar color="grey-3">
+										<!-- <img src="https://cdn.quasar.dev/img/avatar.png" /> -->
+										<q-icon name="mdi-account" size="22px" color="grey-7" />
+									</q-avatar>
+								</q-item-section>
+								<q-item-section class="text-left gt-xs">
+									<q-item-label class="text-caption text-weight-medium">{{ fullname }}</q-item-label>
+									<!-- <q-item-label caption>เจ้าหน้าที่ ก.ก.</q-item-label> -->
+								</q-item-section>
+							</q-item>
+						</template>
+						<div class="row justify-center" style="border-top: solid 3px #1bb19b !important; width: 273.797px">
+							<div class="column items-center col-12 q-py-md" color="grey-3">
+								<q-avatar size="72px" color="grey-4">
+									<q-icon name="mdi-account" color="grey-7" />
+									<!-- <img :src="require('@/assets/logo.png')" /> -->
+								</q-avatar>
+								<div class="text-subtitle2 q-mt-md q-mb-xs text-center">
+									{{ fullname }}
+								</div>
+								<div id="#logout"><q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" /><!--  --></div>
+							</div>
 
-              <div class="column col-12">
-                <q-separator />
-                <div class="column q-pb-md justify-center">
-                  <div class="text-overline text-grey q-px-md q-pt-sm">
-                    เลือกโหมด
-                  </div>
-                  <!-- <q-option-group v-model="group" :options="options" color="primary"/> -->
-                  <q-list dense v-for="op in options" :key="op.label">
-                    <q-item clickable>
-                      <q-item-section avatar>
-                        <q-avatar
-                          :color="op.color"
-                          text-color="white"
-                          :icon="op.icon"
-                          size="20px"
-                          font-size="12px"
-                        />
-                      </q-item-section>
-                      <q-item-section class="q-py-sm">{{
-                        op.label
-                      }}</q-item-section>
-                    </q-item>
-                  </q-list>
-                </div>
-              </div>
-            </div>
-          </q-btn-dropdown>
-        </div>
-        <q-btn
-          size="13px"
-          class="bg-blue-1"
-          v-if="activeBtn()"
-          flat
-          dense
-          round
-          @click="toggleBtnRight"
-          aria-label="Menu"
-        >
-          <q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
-        </q-btn>
-      </q-toolbar>
-    </q-header>
-    <!-- end header -->
+							<div class="column col-12">
+								<q-separator />
+								<div class="column q-pb-md justify-center">
+									<div class="text-overline text-grey q-px-md q-pt-sm">เลือกโหมด</div>
+									<!-- <q-option-group v-model="group" :options="options" color="primary"/> -->
+									<q-list dense v-for="op in options" :key="op.label">
+										<q-item clickable>
+											<q-item-section avatar>
+												<q-avatar :color="op.color" text-color="white" :icon="op.icon" size="20px" font-size="12px" />
+											</q-item-section>
+											<q-item-section class="q-py-sm">{{ op.label }}</q-item-section>
+										</q-item>
+									</q-list>
+								</div>
+							</div>
+						</div>
+					</q-btn-dropdown>
+				</div>
+				<q-btn size="13px" class="bg-blue-1" v-if="activeBtn()" flat dense round @click="toggleBtnRight" aria-label="Menu">
+					<q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
+				</q-btn>
+			</q-toolbar>
+		</q-header>
+		<!-- end header -->
 
-    <!-- drawer -->
-    <q-drawer
-      side="left"
-      class="text-white"
-      style="background: #273238"
-      v-model="drawerL"
-      show-if-above
-      :width="260"
-      :breakpoint="1023"
-      :mini="miniState"
-    >
-      <!--  ส่วนของเมนู mini -->
-      <template v-slot:mini>
-        <q-scroll-area class="fit mini-slot cursor-pointer">
-          <q-toolbar class="q-py-md">
-            <q-img
-              src="@/assets/logo.png"
-              spinner-color="white"
-              style="height: 32px; max-width: 32px"
-            />
-          </q-toolbar>
-          <q-separator color="grey-9" />
-          <!-- เมนูย่อย ตอนย่อ -->
-          <q-list padding>
-            <div v-for="(menuItem, index) in menuList" :key="index">
-              <!-- v-if="role.includes(menuItem.role)" -->
-              <div>
-                <q-item
-                  clickable
-                  v-ripple
-                  :active="link === menuItem.label"
-                  @click="link = menuItem.label"
-                  active-class="text-primary menuActiveMini text-weight-medium"
-                  v-if="
-                    menuItem.key == 2 ||
-                    menuItem.key == 0 ||
-                    menuItem.key == 7 ||
-                    menuItem.key == 8 ||
-                    menuItem.key == 9 ||
-                    menuItem.key == 10 ||
-                    menuItem.key == 11 ||
-                    menuItem.key == 12 ||
-                    menuItem.key == 13 ||
-                    menuItem.key == 14 ||
-                    menuItem.key == 15 ||
-                    menuItem.key == 16
-                  "
-                >
-                  <div class="row items-center no-wrap">
-                    <q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
-                    <q-icon
-                      name="mdi-dots-vertical"
-                      size="13px"
-                      color="grey-6"
-                    />
-                  </div>
-                  <q-tooltip
-                    anchor="center right"
-                    self="center left"
-                    :offset="[10, 10]"
-                  >
-                    {{ menuItem.label }}
-                  </q-tooltip>
-                  <q-menu
-                    anchor="top right"
-                    self="top left"
-                    :offset="[5, 0]"
-                    style="background: #273238; z-index: 9000"
-                  >
-                    <q-list class="text-white q-py-sm">
-                      <div
-                        v-for="(subMenu, i) in menuItem.children"
-                        :key="i"
-                        :to="{ name: `${subMenu.path}` }"
-                      >
-                        <!-- เมนูย่อย 2 ชั้น -->
-                        <div
-                          v-if="
-                            menuItem.key == 2 ||
-                            menuItem.key == 7 ||
-                            menuItem.key == 12 ||
-                            menuItem.key == 13
-                          "
-                        >
-                          <q-item
-                            dense
-                            clickable
-                            v-if="
-                              subMenu.key !== 2.0 &&
-                              subMenu.key !== 7.1 &&
-                              subMenu.key !== 12.0 &&
-                              subMenu.key !== 13.0
-                            "
-                          >
-                            <q-item-section
-                              >{{ subMenu.label }}
-                            </q-item-section>
-                            <q-item-section side>
-                              <q-icon name="keyboard_arrow_right" />
-                            </q-item-section>
+		<!-- drawer -->
+		<q-drawer side="left" class="text-white" style="background: #273238" v-model="drawerL" show-if-above :width="260" :breakpoint="1023" :mini="miniState">
+			<!--  ส่วนของเมนู mini -->
+			<template v-slot:mini>
+				<q-scroll-area class="fit mini-slot cursor-pointer">
+					<q-toolbar class="q-py-md">
+						<q-img src="@/assets/logo.png" spinner-color="white" style="height: 32px; max-width: 32px" />
+					</q-toolbar>
+					<q-separator color="grey-9" />
+					<!-- เมนูย่อย ตอนย่อ -->
+					<q-list padding>
+						<div v-for="(menuItem, index) in menuList" :key="index">
+							<!-- v-if="role.includes(menuItem.role)" -->
+							<div>
+								<q-item
+									clickable
+									v-ripple
+									:active="link === menuItem.label"
+									@click="link = menuItem.label"
+									active-class="text-primary menuActiveMini text-weight-medium"
+									v-if="
+										menuItem.key == 2 ||
+										menuItem.key == 0 ||
+										menuItem.key == 7 ||
+										menuItem.key == 8 ||
+										menuItem.key == 9 ||
+										menuItem.key == 10 ||
+										menuItem.key == 11 ||
+										menuItem.key == 12 ||
+										menuItem.key == 13 ||
+										menuItem.key == 14 ||
+										menuItem.key == 15 ||
+										menuItem.key == 16
+									"
+								>
+									<div class="row items-center no-wrap">
+										<q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
+										<q-icon name="mdi-dots-vertical" size="13px" color="grey-6" />
+									</div>
+									<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
+										{{ menuItem.label }}
+									</q-tooltip>
+									<q-menu anchor="top right" self="top left" :offset="[5, 0]" style="background: #273238; z-index: 9000">
+										<q-list class="text-white q-py-sm">
+											<div v-for="(subMenu, i) in menuItem.children" :key="i" :to="{ name: `${subMenu.path}` }">
+												<!-- เมนูย่อย 2 ชั้น -->
+												<div v-if="menuItem.key == 2 || menuItem.key == 7 || menuItem.key == 12 || menuItem.key == 13">
+													<q-item dense clickable v-if="subMenu.key !== 2.0 && subMenu.key !== 7.1 && subMenu.key !== 12.0 && subMenu.key !== 13.0">
+														<q-item-section>{{ subMenu.label }} </q-item-section>
+														<q-item-section side>
+															<q-icon name="keyboard_arrow_right" />
+														</q-item-section>
 
-                            <q-menu
-                              anchor="top end"
-                              self="top start"
-                              :offset="[5, 0]"
-                              style="background: #273238; z-index: 9000"
-                            >
-                              <q-list class="text-white q-py-sm">
-                                <q-item
-                                  v-for="subMenu2 in subMenu.children"
-                                  :key="subMenu2.label"
-                                  :to="{ name: `${subMenu2.path}` }"
-                                  dense
-                                  class="q-pl-md text-body2"
-                                  active-class="text-primary active-item text-weight-medium"
-                                  clickable
-                                >
-                                  <q-item-section>
-                                    <q-item-label>{{
-                                      subMenu2.label
-                                    }}</q-item-label>
-                                  </q-item-section>
-                                </q-item>
-                              </q-list>
-                            </q-menu>
-                          </q-item>
+														<q-menu anchor="top end" self="top start" :offset="[5, 0]" style="background: #273238; z-index: 9000">
+															<q-list class="text-white q-py-sm">
+																<q-item
+																	v-for="subMenu2 in subMenu.children"
+																	:key="subMenu2.label"
+																	:to="{ name: `${subMenu2.path}` }"
+																	dense
+																	class="q-pl-md text-body2"
+																	active-class="text-primary active-item text-weight-medium"
+																	clickable
+																>
+																	<q-item-section>
+																		<q-item-label>{{ subMenu2.label }}</q-item-label>
+																	</q-item-section>
+																</q-item>
+															</q-list>
+														</q-menu>
+													</q-item>
 
-                          <q-item
-                            v-else
-                            dense
-                            class="q-pl-md q-pr-xl text-body2"
-                            active-class="text-primary active-item text-weight-medium"
-                            clickable
-                            :to="{ name: `${subMenu.path}` }"
-                          >
-                            <q-item-section>
-                              <q-item-label>{{ subMenu.label }}</q-item-label>
-                            </q-item-section>
-                          </q-item>
-                        </div>
-                        <!-- เมนูย่อย 1 ชั้น -->
-                        <div v-else>
-                          <q-item
-                            dense
-                            class="q-pl-md q-pr-xl text-body2"
-                            active-class="text-primary active-item text-weight-medium"
-                            clickable
-                            :to="{ name: `${subMenu.path}` }"
-                          >
-                            <q-item-section>
-                              <q-item-label>{{ subMenu.label }}</q-item-label>
-                            </q-item-section>
-                          </q-item>
-                        </div>
-                      </div>
-                    </q-list>
-                  </q-menu>
-                </q-item>
-                <q-item
-                  clickable
-                  v-ripple
-                  :to="{ name: `${menuItem.path}` }"
-                  :active="link === menuItem.label"
-                  @click="link = menuItem.label"
-                  active-class="text-primary menuActiveMini"
-                  v-else
-                >
-                  <q-item-section avatar>
-                    <q-avatar size="md" font-size="20px">
-                      <q-icon :name="menuItem.icon" />
-                    </q-avatar>
-                  </q-item-section>
-                  <q-tooltip
-                    anchor="center right"
-                    self="center left"
-                    :offset="[10, 10]"
-                  >
-                    {{ menuItem.label }}
-                  </q-tooltip>
-                </q-item>
-              </div>
-            </div>
-          </q-list>
-        </q-scroll-area>
-      </template>
-      <!--  จบส่วนของเมนู mini -->
+													<q-item v-else dense class="q-pl-md q-pr-xl text-body2" active-class="text-primary active-item text-weight-medium" clickable :to="{ name: `${subMenu.path}` }">
+														<q-item-section>
+															<q-item-label>{{ subMenu.label }}</q-item-label>
+														</q-item-section>
+													</q-item>
+												</div>
+												<!-- เมนูย่อย 1 ชั้น -->
+												<div v-else>
+													<q-item dense class="q-pl-md q-pr-xl text-body2" active-class="text-primary active-item text-weight-medium" clickable :to="{ name: `${subMenu.path}` }">
+														<q-item-section>
+															<q-item-label>{{ subMenu.label }}</q-item-label>
+														</q-item-section>
+													</q-item>
+												</div>
+											</div>
+										</q-list>
+									</q-menu>
+								</q-item>
+								<q-item clickable v-ripple :to="{ name: `${menuItem.path}` }" :active="link === menuItem.label" @click="link = menuItem.label" active-class="text-primary menuActiveMini" v-else>
+									<q-item-section avatar>
+										<q-avatar size="md" font-size="20px">
+											<q-icon :name="menuItem.icon" />
+										</q-avatar>
+									</q-item-section>
+									<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
+										{{ menuItem.label }}
+									</q-tooltip>
+								</q-item>
+							</div>
+						</div>
+					</q-list>
+				</q-scroll-area>
+			</template>
+			<!--  จบส่วนของเมนู mini -->
 
-      <!-- ส่วนของเมนู -->
-      <q-scroll-area class="fit">
-        <q-toolbar class="q-py-md">
-          <q-toolbar-title shrink class="row items-center no-wrap">
-            <q-img
-              src="@/assets/logo.png"
-              spinner-color="white"
-              style="height: 40px; max-width: 40px"
-            />
-            <div class="row q-ml-sm">
-              <div
-                style="color: #ffffff; letter-spacing: 1px"
-                class="text-body2 text-weight-bolder"
-              >
-                ระบบ<span class="text-primary">บริหารทรัพยากรบุคคล</span>
-              </div>
-              <div class="text-caption text-white">ของกรุงเทพมหานคร</div>
-            </div>
-          </q-toolbar-title>
-        </q-toolbar>
-        <q-separator inset color="grey-9" />
-        <q-list padding>
-          <div v-for="(menuItem, index) in menuList" :key="index">
-            <!-- เมนูย่อย -->
-            <div v-if="checkPermission(menuItem.role)">
-              <q-expansion-item
-                group="somegroup"
-                class="menuSub"
-                expand-icon="mdi-chevron-down"
-                expanded-icon="mdi-chevron-up"
-                v-if="
-                  menuItem.key == 2 ||
-                  menuItem.key == 0 ||
-                  menuItem.key == 7 ||
-                  menuItem.key == 8 ||
-                  menuItem.key == 9 ||
-                  menuItem.key == 10 ||
-                  menuItem.key == 11 ||
-                  menuItem.key == 12 ||
-                  menuItem.key == 13 ||
-                  menuItem.key == 14 ||
-                  menuItem.key == 15 ||
-                  menuItem.key == 16
-                "
-              >
-                <template v-slot:header>
-                  <q-item-section avatar>
-                    <q-avatar
-                      :icon="menuItem.icon"
-                      size="md"
-                      font-size="20px"
-                    />
-                  </q-item-section>
-                  <q-item-section>{{ menuItem.label }}</q-item-section>
-                </template>
+			<!-- ส่วนของเมนู -->
+			<q-scroll-area class="fit">
+				<q-toolbar class="q-py-md">
+					<q-toolbar-title shrink class="row items-center no-wrap">
+						<q-img src="@/assets/logo.png" spinner-color="white" style="height: 40px; max-width: 40px" />
+						<div class="row q-ml-sm">
+							<div style="color: #ffffff; letter-spacing: 1px" class="text-body2 text-weight-bolder">ระบบ<span class="text-primary">บริหารทรัพยากรบุคคล</span></div>
+							<div class="text-caption text-white">ของกรุงเทพมหานคร</div>
+						</div>
+					</q-toolbar-title>
+				</q-toolbar>
+				<q-separator inset color="grey-9" />
+				<q-list padding>
+					<div v-for="(menuItem, index) in menuList" :key="index">
+						<!-- เมนูย่อย -->
+						<div v-if="checkPermission(menuItem.role)">
+							<q-expansion-item
+								group="somegroup"
+								class="menuSub"
+								expand-icon="mdi-chevron-down"
+								expanded-icon="mdi-chevron-up"
+								v-if="
+									menuItem.key == 2 ||
+									menuItem.key == 0 ||
+									menuItem.key == 7 ||
+									menuItem.key == 8 ||
+									menuItem.key == 9 ||
+									menuItem.key == 10 ||
+									menuItem.key == 11 ||
+									menuItem.key == 12 ||
+									menuItem.key == 13 ||
+									menuItem.key == 14 ||
+									menuItem.key == 15 ||
+									menuItem.key == 16
+								"
+							>
+								<template v-slot:header>
+									<q-item-section avatar>
+										<q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
+									</q-item-section>
+									<q-item-section>{{ menuItem.label }}</q-item-section>
+								</template>
 
-                <!-- เมนูย่อย 2 ชั้น (สรรหา) -->
-                <div
-                  v-if="
-                    menuItem.key == 2 ||
-                    menuItem.key == 7 ||
-                    menuItem.key == 12 ||
-                    menuItem.key == 13
-                  "
-                >
-                  <div v-for="(subMenu, i) in menuItem.children" :key="i">
-                    <q-expansion-item
-                      switch-toggle-side
-                      dense-toggle
-                      :label="subMenu.label"
-                      v-if="
-                        subMenu.key !== 2.0 &&
-                        subMenu.key !== 7.1 &&
-                        subMenu.key !== 12.0 &&
-                        subMenu.key !== 13.0
-                      "
-                      class="expan2"
-                      dense
-                    >
-                      <q-item
-                        dense
-                        class="menuSubHover"
-                        active-class="text-primary active-item text-weight-bold menuSubAct"
-                        clickable
-                        v-for="subMenu2 in subMenu.children"
-                        :key="subMenu2.key"
-                        :to="{ name: `${subMenu2.path}` }"
-                      >
-                        <q-item-section>
-                          <q-item-label class="font-400 subLabel"
-                            >{{ subMenu2.label }}
-                          </q-item-label>
-                        </q-item-section>
-                      </q-item>
-                    </q-expansion-item>
-                    <q-item
-                      v-else
-                      dense
-                      class="menuSubHover"
-                      active-class="text-primary active-item text-weight-bold menuSubAct"
-                      clickable
-                      :to="{ name: `${subMenu.path}` }"
-                    >
-                      <q-item-section>
-                        <q-item-label>{{ subMenu.label }} </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </div>
-                </div>
-                <!-- เมนูย่อย 1 ชั้น -->
-                <q-item
-                  v-else
-                  dense
-                  class="menuSubHover"
-                  active-class="text-primary active-item text-weight-bold menuSubAct"
-                  clickable
-                  v-for="(subMenu, j) in menuItem.children"
-                  :key="j"
-                  :to="{ name: `${subMenu.path}` }"
-                >
-                  <q-item-section>
-                    <q-item-label class="font-400">{{
-                      subMenu.label
-                    }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-expansion-item>
+								<!-- เมนูย่อย 2 ชั้น (สรรหา) -->
+								<div v-if="menuItem.key == 2 || menuItem.key == 7 || menuItem.key == 12 || menuItem.key == 13">
+									<div v-for="(subMenu, i) in menuItem.children" :key="i">
+										<q-expansion-item
+											switch-toggle-side
+											dense-toggle
+											:label="subMenu.label"
+											v-if="subMenu.key !== 2.0 && subMenu.key !== 7.1 && subMenu.key !== 12.0 && subMenu.key !== 13.0"
+											class="expan2"
+											dense
+										>
+											<q-item
+												dense
+												class="menuSubHover"
+												active-class="text-primary active-item text-weight-bold menuSubAct"
+												clickable
+												v-for="subMenu2 in subMenu.children"
+												:key="subMenu2.key"
+												:to="{ name: `${subMenu2.path}` }"
+											>
+												<q-item-section>
+													<q-item-label class="font-400 subLabel">{{ subMenu2.label }} </q-item-label>
+												</q-item-section>
+											</q-item>
+										</q-expansion-item>
+										<q-item v-else dense class="menuSubHover" active-class="text-primary active-item text-weight-bold menuSubAct" clickable :to="{ name: `${subMenu.path}` }">
+											<q-item-section>
+												<q-item-label>{{ subMenu.label }} </q-item-label>
+											</q-item-section>
+										</q-item>
+									</div>
+								</div>
+								<!-- เมนูย่อย 1 ชั้น -->
+								<q-item
+									v-else
+									dense
+									class="menuSubHover"
+									active-class="text-primary active-item text-weight-bold menuSubAct"
+									clickable
+									v-for="(subMenu, j) in menuItem.children"
+									:key="j"
+									:to="{ name: `${subMenu.path}` }"
+								>
+									<q-item-section>
+										<q-item-label class="font-400">{{ subMenu.label }}</q-item-label>
+									</q-item-section>
+								</q-item>
+							</q-expansion-item>
 
-              <!-- เมนูปกติ -->
-              <q-item
-                class="text-weight-medium menu"
-                :active="activeMenu(menuItem.path)"
-                active-class="text-primary active-item text-weight-bold menuActive"
-                :to="{ name: `${menuItem.path}` }"
-                clickable
-                v-ripple
-                dense
-                exact
-                v-else
-              >
-                <q-item-section avatar>
-                  <q-avatar size="md" font-size="20px">
-                    <q-icon
-                      :name="
-                        menuItem.key === active
-                          ? menuItem.activeIcon
-                          : menuItem.icon
-                      "
-                    />
-                  </q-avatar>
-                </q-item-section>
+							<!-- เมนูปกติ -->
+							<q-item
+								class="text-weight-medium menu"
+								:active="activeMenu(menuItem.path)"
+								active-class="text-primary active-item text-weight-bold menuActive"
+								:to="{ name: `${menuItem.path}` }"
+								clickable
+								v-ripple
+								dense
+								exact
+								v-else
+							>
+								<q-item-section avatar>
+									<q-avatar size="md" font-size="20px">
+										<q-icon :name="menuItem.key === active ? menuItem.activeIcon : menuItem.icon" />
+									</q-avatar>
+								</q-item-section>
 
-                <q-item-section>
-                  <q-item-label>{{ menuItem.label }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </div>
-          </div>
-        </q-list>
-      </q-scroll-area>
-    </q-drawer>
+								<q-item-section>
+									<q-item-label>{{ menuItem.label }}</q-item-label>
+								</q-item-section>
+							</q-item>
+						</div>
+					</div>
+				</q-list>
+			</q-scroll-area>
+		</q-drawer>
 
-    <q-page-container class="bg-grey-2">
-      <q-page style="padding: 0 2%">
-        <router-view :key="$route.fullPath" />
-      </q-page>
-    </q-page-container>
-    <full-loader :visibility="loader" />
-  </q-layout>
+		<q-page-container class="bg-grey-2">
+			<q-page style="padding: 0 2%">
+				<router-view :key="$route.fullPath" />
+			</q-page>
+		</q-page-container>
+		<full-loader :visibility="loader" />
+	</q-layout>
 </template>
 
 <style>
 .my-menu-link {
-  background: #ebf9f7 !important;
-  border-radius: 5px;
-  border: 1px solid #1bb19ab8;
-  color: #1bb19ab8 !important;
+	background: #ebf9f7 !important;
+	border-radius: 5px;
+	border: 1px solid #1bb19ab8;
+	color: #1bb19ab8 !important;
 }
+
 .menuSub .q-item__section--avatar,
 .menu .q-item__section--avatar {
-  min-width: 0px;
+	min-width: 0px;
 }
 
 .menu {
-  padding-bottom: 5px;
-  padding-top: 5px;
-  border-radius: 0 100px 100px 0;
-  margin-right: 2%;
+	padding-bottom: 5px;
+	padding-top: 5px;
+	border-radius: 0 100px 100px 0;
+	margin-right: 2%;
 }
 
 .menuActive {
-  background: #212a2f;
-  border-radius: 0 100px 100px 0;
-  margin-right: 2%;
+	background: #212a2f;
+	border-radius: 0 100px 100px 0;
+	margin-right: 2%;
 }
 
 .menuActiveMini {
-  background: #212a2f;
+	background: #212a2f;
 }
 
 .menuSub .q-item {
-  border-radius: 0 100px 100px 0;
-  margin-right: 2%;
-  font-weight: 500;
+	border-radius: 0 100px 100px 0;
+	margin-right: 2%;
+	font-weight: 500;
 }
 
 .expan2 .q-item {
-  padding-left: 10%;
+	padding-left: 10%;
 }
 
 .subLabel {
-  white-space: nowrap;
-  width: 160px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 160px;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .font-400 {
-  font-weight: 400;
+	font-weight: 400;
 }
 
 .expan2 .menuSubHover {
-  padding-left: 30%;
-  border-radius: 20px;
+	padding-left: 30%;
+	border-radius: 20px;
 }
 
 .menuSubHover {
-  padding-left: 25%;
-  border-radius: 20px;
+	padding-left: 25%;
+	border-radius: 20px;
 }
 
 .menuSub .q-expansion-item__content {
-  background: #212a2f;
-  padding: 5px 0px;
-  margin-bottom: 5px;
+	background: #212a2f;
+	padding: 5px 0px;
+	margin-bottom: 5px;
 }
 
 .tabNative {
-  color: grey;
-  padding-left: 8%;
-  border-radius: 100px 0px 0px 100px;
+	color: grey;
+	padding-left: 8%;
+	border-radius: 100px 0px 0px 100px;
 }
 
 .tabActive {
-  padding-left: 8%;
-  background: #e4f2ff;
-  border-radius: 100px 0px 0px 100px;
+	padding-left: 8%;
+	background: #e4f2ff;
+	border-radius: 100px 0px 0px 100px;
 }
 
 .q-card {
-  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
+	box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
 }
 
 .q-card--bordered {
-  border: 1px solid #ededed;
-  box-shadow: none !important;
+	border: 1px solid #ededed;
+	box-shadow: none !important;
 }
 
 .q-menu {
-  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
+	box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
 
 .toptitle {
-  font-size: 1.2rem;
-  font-weight: bold;
-  margin-bottom: 1%;
+	font-size: 1.2rem;
+	font-weight: bold;
+	margin-bottom: 1%;
 }
 
 .q-field--outlined .q-field__control {
-  border-radius: 5px;
+	border-radius: 5px;
 }
 
 .q-field--outlined .q-field__control:before {
-  border-color: #c8d3db;
+	border-color: #c8d3db;
 }
 
 .btnManu {
-  min-height: 48px;
-  border-radius: 0px 100px 100px 0px;
+	min-height: 48px;
+	border-radius: 0px 100px 100px 0px;
 }
 
 /* .q-field--outlined .q-icon {
@@ -1026,27 +804,27 @@ watch(
 }
  */
 .q-card__actions .q-btn--rectangle {
-  padding: 0 14px !important;
+	padding: 0 14px !important;
 }
 
 /* custom scrollbar */
 ::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
+	width: 12px;
+	height: 12px;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: transparent;
+	background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #d6dee1;
-  border-radius: 20px;
-  border: 3px solid transparent;
-  background-clip: content-box;
+	background-color: #d6dee1;
+	border-radius: 20px;
+	border: 3px solid transparent;
+	background-clip: content-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #a8bbbf;
+	background-color: #a8bbbf;
 }
 </style>