เพิ่ม config link manual

src/app.config.ts

@@ -29,6 +29,34 @@ const API = {
 	...development,
 };
 
+const path = "http://localhost:3008";
+
+const generatePopupPath = (routeName: any) => {
+	if (routeName.includes("metadata")) {
+		return `${path}/manual/chapter-2-admin-metadata`;
+	}
+	if (routeName.includes("leave")) {
+		return `${path}/manual/chapter-3-user-leave`;
+	}
+	// if (routeName.includes("compete")) {
+	// 	return `${path}/manual/chapter-10-admin-recruit`;
+	// }
+	// if (routeName.includes("registryNew")) {
+	// 	return `${path}/manual/chapter-7-admin-registry`;
+	// }
+	// if (routeName.includes("registry")) {
+	// 	return `${path}/manual/chapter-7-admin-registry`;
+	// }
+	else {
+		return manualConfig[routeName as keyof typeof manualConfig];
+	}
+};
+
+const manualConfig = {
+	dashboard: `${path}/manual/chapter-1-user-organization-chart`,
+};
+
 export default {
 	API: API,
+	generatePopupPath,
 };

src/views/MainLayout.vue

@@ -153,6 +153,22 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
 	minute: "2-digit",
 };
 
+const handleButtonClick = () => {
+	const currentPath = route.name;
+	const queryParams = { role: "user" }; // Replace with your query parameters
+	const queryString = new URLSearchParams(queryParams).toString();
+
+	// Assuming config.generatePopupPath() returns a base URL
+	const popupBasePath = config.generatePopupPath(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);
+	}
+};
+
 function onInfo() {
 	router.push(`/retire`);
 }
@@ -214,6 +230,20 @@ function onInfo() {
 					</q-tabs>
 				</div>
 				<q-space />
+				<q-btn
+					round
+					dense
+					flat
+					size="13px"
+					class="bg-white-btn"
+					:color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
+					no-caps
+					@click="handleButtonClick()"
+					style="margin-right: 10px"
+				>
+					<q-icon name="mdi-book-open-variant" size="18px" color="white" />
+					<q-tooltip>คู่มือ</q-tooltip>
+				</q-btn>
 
 				<!-- Notification -->
 				<q-btn
@@ -221,9 +251,10 @@ function onInfo() {
 					dense
 					flat
 					size="13px"
-          :class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md' : 'q-mr-sm'"
+					class="bg-white-btn"
 					:color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
 					no-caps
+					style="margin-right: 10px"
 				>
 					<q-icon name="mdi-bell-outline" size="22px" color="white" />
 					<q-badge