add login keycloak

2023-08-08 14:03:12 +07:00 · 2023-08-08 14:03:12 +07:00 · 6c3c9384d9
commit 6c3c9384d9
parent 4b73b98d35
12 changed files with 457 additions and 292 deletions
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -0,0 +1,34 @@
+/**config api */
+import { ref } from "vue"
+
+const env = ref<string>(process.env.NODE_ENV || "development")
+// if (process.env.VUE_APP_TEST) {
+//   env = "test";
+// }
+
+const config = ref<any>({
+	development: {
+		// API_URI: "https://localhost:7260/api",
+		API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
+		MEET_URI: "meet.frappet.com",
+	},
+	test: {
+		API_URI: "http://localhost:5010/api/v1",
+		MEET_URI: "meet.frappet.com",
+	},
+	production: {
+		API_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
+		API_URI_ORG_TREE: "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
+		MEET_URI: "meet.frappet.com",
+	},
+})
+
+const API_URI = ref<string>(config.value[env.value].API_URI)
+const MEET_URI = ref<string>(config.value[env.value].MEET_URI)
+
+export default {
+	env: env.value,
+	config: config.value,
+	API_URI: API_URI.value,
+	MEET_URI: MEET_URI.value,
+}
--- a/src/api/test/api.test.ts
+++ b/src/api/test/api.test.ts
@ -0,0 +1,11 @@
+/**
+ * API Structure + Org Chart
+ */
+import env from "../index"
+
+const tttt = `${env.API_URI}/test`
+
+export default {
+	gettttt: `${tttt}`,
+	puttttt: (id: string) => `${tttt}/${id}`,
+}
--- a/src/app.config.ts
+++ b/src/app.config.ts
@ -0,0 +1,12 @@
+/**ใช้รวมไฟล์ย่อยๆ ของ api แต่ละไฟล์ */
+
+/** API Metadata */
+import testtest from "./api/test/api.test"
+
+const API = {
+	...testtest,
+}
+
+export default {
+	API: API,
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -8,6 +8,7 @@ import { createPinia } from "pinia"
 import "@vuepic/vue-datepicker/dist/main.css"

 import "quasar/src/css/index.sass"
+import http from "./plugins/http"

 // import './assets/main.css'

@ -29,4 +30,7 @@ app.component(
 	"datepicker",
 	defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
 )
+
+app.config.globalProperties.$http = http
+
 app.mount("#app")
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@ -1,174 +1,149 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar";
-import { ref } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import type { QTableProps } from "quasar"
+import { ref } from "vue"
+import { useQuasar } from "quasar"
+import { useRouter } from "vue-router"

-const router = useRouter();
-const $q = useQuasar();
+const router = useRouter()
+const $q = useQuasar()

-import Table from "@/components/Table.vue";
+import Table from "@/components/Table.vue"

-const filter = ref<string>("");
+const filter = ref<string>("")
 const rows = ref<any>([
-    {date: '02/02/2566',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/ฝ่ายการคลัง', status: 'รอดำเนินการ'},
-    {date: '02/02/2565',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร', status: 'เสร็จสิ้น'},
-    {date: '10/01/2565',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร', status: 'เสร็จสิ้น'},
-]);
+	{ date: "02/02/2566", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/ฝ่ายการคลัง", status: "รอดำเนินการ" },
+	{ date: "02/02/2565", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", status: "เสร็จสิ้น" },
+	{ date: "10/01/2565", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", status: "เสร็จสิ้น" },
+])
 const initialPagination = ref({
-  rowsPerPage: 0,
-});
-const visibleColumns = ref<String[]>([
-  "no",
-  "date",
-  "position",
-  "noPos",
-  "level",
-  "salary",
-  "transfer",
-  "status",
-]);
+	rowsPerPage: 0,
+})
+const visibleColumns = ref<String[]>(["no", "date", "position", "noPos", "level", "salary", "transfer", "status"])

 const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:5px;",
-  },
-  {
-    name: "date",
-    align: "left",
-    label: "วันที่",
-    sortable: true,
-    field: "date",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "noPos",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "noPos",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "level",
-    align: "left",
-    label: "อันดับ/ระดับ",
-    sortable: true,
-    field: "level",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "salary",
-    align: "left",
-    label: "เงินเดือน",
-    sortable: true,
-    field: "salary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "transfer",
-    align: "left",
-    label: "โอนไปสังกัด",
-    sortable: true,
-    field: "transfer",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:10%;",
-  },
-]);
+	{
+		name: "no",
+		align: "left",
+		label: "ลำดับ",
+		sortable: true,
+		field: "no",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:5px;",
+	},
+	{
+		name: "date",
+		align: "left",
+		label: "วันที่",
+		sortable: true,
+		field: "date",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "position",
+		align: "left",
+		label: "ตำแหน่ง",
+		sortable: true,
+		field: "position",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "noPos",
+		align: "left",
+		label: "ตำแหน่งเลขที่",
+		sortable: true,
+		field: "noPos",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "level",
+		align: "left",
+		label: "อันดับ/ระดับ",
+		sortable: true,
+		field: "level",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "salary",
+		align: "left",
+		label: "เงินเดือน",
+		sortable: true,
+		field: "salary",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "transfer",
+		align: "left",
+		label: "โอนไปสังกัด",
+		sortable: true,
+		field: "transfer",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "status",
+		align: "left",
+		label: "สถานะ",
+		sortable: true,
+		field: "status",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:10%;",
+	},
+])
 const clickAdd = async () => {
-    router.push(`/transfer/add`);
-};
+	router.push(`/transfer/add`)
+}
 </script>
 <template>
-    <div class="col-12 row justify-center">
-        <div class="col-xs-12 col-sm-12 col-md-11">
-            <div class="toptitle text-white col-12 row items-center">
-                <q-btn
-                icon="mdi-arrow-left"
-                unelevated
-                round
-                dense
-                flat
-                color="primary"
-                class="q-mr-sm"
-                @click="router.go(-1)"
-                />
-                เรื่องขอโอน
-            </div>
-            <div class="col-12">
-                <q-card bordered class="q-pa-md">
-                    <Table
-                        style="max-height: 80vh"
-                        :rows="rows"
-                        :columns="columns"
-                        :filter="filter"
-                        :visible-columns="visibleColumns"
-                        v-model:inputfilter="filter"
-                        v-model:inputvisible="visibleColumns"
-                        :pagination="initialPagination"
-                        :inputShow="false"
-                        :add="clickAdd"
-                        :titleText="''"
-                        >
-                        <template #columns="props">
-                            <q-tr :props="props" class="cursor-pointer" @click="router.push(`/transfer/1`)">
-                                <q-td
-                                v-for="col in props.cols"
-                                :key="col.name"
-                                :props="props"
-                                >
-                                <div v-if="col.name == 'no'">
-                                    {{ props.rowIndex + 1 }}
-                                </div>
-                                <div v-else-if="col.name == 'status'">
-                                    <q-icon size="20px" v-if="props.row.status == 'รอดำเนินการ'" name="mdi-timer-sand" color="deep-orange">
-                                        <q-tooltip>รอดำเนินการ</q-tooltip>
-                                    </q-icon>
-                                    <q-icon size="20px" v-else name="mdi-check" color="teal">
-                                        <q-tooltip>เสร็จสิ้น</q-tooltip>
-                                    </q-icon>
-                                    
-                                </div>
-                                <div v-else>
-                                    {{ col.value }}
-                                </div>
-                                </q-td>
-                            </q-tr>
-                        </template>
-			              </Table>
-                </q-card>
-            </div>
-        </div>
-    </div>
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+				เรื่องขอโอน
+			</div>
+			<div class="col-12">
+				<q-card bordered class="q-pa-md">
+					<Table
+						style="max-height: 80vh"
+						:rows="rows"
+						:columns="columns"
+						:filter="filter"
+						:visible-columns="visibleColumns"
+						v-model:inputfilter="filter"
+						v-model:inputvisible="visibleColumns"
+						:pagination="initialPagination"
+						:inputShow="false"
+						:add="clickAdd"
+						:titleText="''"
+					>
+						<template #columns="props">
+							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/transfer/1`)">
+								<q-td v-for="col in props.cols" :key="col.name" :props="props">
+									<div v-if="col.name == 'no'">
+										{{ props.rowIndex + 1 }}
+									</div>
+									<div v-else-if="col.name == 'status'">
+										<q-icon size="20px" v-if="props.row.status == 'รอดำเนินการ'" name="mdi-timer-sand" color="deep-orange">
+											<q-tooltip>รอดำเนินการ</q-tooltip>
+										</q-icon>
+										<q-icon size="20px" v-else name="mdi-check" color="teal">
+											<q-tooltip>เสร็จสิ้น</q-tooltip>
+										</q-icon>
+									</div>
+									<div v-else>
+										{{ col.value }}
+									</div>
+								</q-td>
+							</q-tr>
+						</template>
+					</Table>
+				</q-card>
+			</div>
+		</div>
+	</div>
 </template>
-<style>
-
-</style>
+<style></style>
--- a/src/plugins/axios.ts
+++ b/src/plugins/axios.ts
@ -0,0 +1,25 @@
+import axios from "axios"
+import config from "process"
+// import { dotnetPath } from "../path/axiosPath";
+// import { getToken } from "@baloise/vue-keycloak";
+import keycloak from "../plugins/keycloak"
+
+const axiosInstance = axios.create({
+    withCredentials: false,
+})
+
+// axiosInstance.defaults.baseURL = dotnetPath;
+axiosInstance.interceptors.request.use(
+    async (config) => {
+        const token = await keycloak.token
+        config.headers = {
+            Authorization: `Bearer ${token}`,
+        }
+        return config
+    },
+    (error) => {
+        Promise.reject(error)
+    }
+)
+
+export default axiosInstance
--- a/src/plugins/filters.ts
+++ b/src/plugins/filters.ts
@ -0,0 +1,22 @@
+/**
+ * GLOABL Filters
+ *   - ไฟล์นี้จะไว้เก็บฟังก์ชันง่าย ๆ พวก Helper Functions ทั้งหลาย
+ */
+
+
+const filters = {
+
+	/**
+	 * ฟังก์ชัน compactNumber ใช้แปลงตัวเลขยาว ๆ ให้กลายเป็นเลขสั้น ๆ แบบที่พวก Social Media ชอบใช้กัน เช่น 1,000 แปลงเป็น 1K หรือ 1,000,000 แปลงเป็น 1M
+	 * วิธีใช้ : {{ $filters.compactNumber(value) }}
+	 *
+	 * @param val รับค่าพารามิเตอร์เป็นตัวแปรชนิดตัวเลข
+	 * @returns คืนค่าเป็นตัวเลขที่แปลงค่าแล้ว
+	 */
+	compactNumber (val: number) {
+		const formatter = Intl.NumberFormat('en', { notation: 'compact'})
+		return formatter.format(val)
+	}
+}
+
+export default filters;
--- a/src/plugins/http.ts
+++ b/src/plugins/http.ts
@ -0,0 +1,45 @@
+import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
+import keycloak from "./keycloak";
+
+const http = Axios.create({
+  timeout: 1000000000, // เพิ่มค่า timeout
+  headers: {
+    "X-Requested-With": "XMLHttpRequest",
+  },
+});
+
+http.interceptors.request.use(
+  async function (config: AxiosRequestConfig<any>) {
+    await keycloak.updateToken(1);
+    config.headers = config.headers ?? {};
+    const token = keycloak.token;
+    // const token = localStorage.getItem("access_token")
+    // const token =
+    //   "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA";
+    if (token) config.headers.Authorization = `Bearer ${token}`;
+    return config;
+  },
+  function (error: any) {
+    return Promise.reject(error);
+  }
+);
+
+http.interceptors.response.use(
+  function (response: AxiosResponse<any, any>) {
+    return response;
+  },
+  function (error: any) {
+    if (typeof error !== undefined) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (error.hasOwnProperty("response")) {
+        if (error.response.status === 401 || error.response.status === 403) {
+          // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
+          // Store.commit("REMOVE_ACCESS_TOKEN")
+        }
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default http;
--- a/src/plugins/keycloak.ts
+++ b/src/plugins/keycloak.ts
@ -0,0 +1,23 @@
+/**
+ * front connect to keycloak
+ */
+import Keycloak from "keycloak-js";
+// import config from "../app.config";
+// import http from "../shared/http";
+// import router from "../router";
+
+const initOptions = {
+  //   url: "https://keycloak.frappet.synology.me/auth/",
+  realm: "bma-ehr",
+  clientId: "bma-ehr-vue3",
+  url: "https://identity.frappet.com/",
+  //   realm: "bma-ehr-exam",
+  //   clientId: "bma-ehr-exam-vue3",
+}; //option keycloak ที่จะ connect
+
+const keycloak = Keycloak(initOptions);
+
+keycloak.onAuthSuccess = () => {}; //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้
+
+await keycloak.init({ checkLoginIframe: false }); //ทำการ connect keycloak
+export default keycloak;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -6,6 +6,9 @@ const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue")
 import ModuleTransfer from "@/modules/02_transfer/router.ts"
 import ModuleLeave from "@/modules/03_leave/router.ts"

+// TODO: ใช้หรือไม่?
+import keycloak from "@/plugins/keycloak"
+
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
 	routes: [
@ -18,6 +21,10 @@ const router = createRouter({
 					path: "/",
 					name: "dashboard",
 					component: Dashboard,
+					meta: {
+						Auth: true,
+						Key: [7],
+					},
 				},
 				...ModuleTransfer,
 				...ModuleLeave,
@ -26,4 +33,20 @@ const router = createRouter({
 	],
 })

+router.beforeEach((to, from, next) => {
+	if (to.meta.Auth) {
+		if (!keycloak.authenticated) {
+			keycloak.login({
+				redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
+				locale: "th",
+			})
+		} else {
+			next()
+		}
+	} else {
+		next()
+	}
+	//   next();
+})
+
 export default router
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@ -1,49 +1,69 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useQuasar } from "quasar";
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { onMounted, ref, watch } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useQuasar } from "quasar"
+import keycloak from "@/plugins/keycloak"

-const route = useRoute();
-const router = useRouter();
+const route = useRoute()
+const router = useRouter()

-const $q = useQuasar();
-const link = ref<string>("");
+const $q = useQuasar()
+const link = ref<string>("")

-const fullname = ref<string>("นางสาวธัญลักษณ์ รอดกูล");
-const	notiList = [
-    {
-    id: 1,
-    sender: "นัดหมาย",
-    body: "เพิ่มการนัดหมาย",
-    timereceive: "13/06/2566",
-    },
-    {
-    id: 1,
-    sender: "นัดหมาย",
-    body: "เพิ่มการนัดหมาย",
-    timereceive: "14/06/2566",
-    },
-];
-const notiTrigger = ref(false);
+const fullname = ref<string>("นางสาวธัญลักษณ์ รอดกูล")
+const notiList = [
+	{
+		id: 1,
+		sender: "นัดหมาย",
+		body: "เพิ่มการนัดหมาย",
+		timereceive: "13/06/2566",
+	},
+	{
+		id: 1,
+		sender: "นัดหมาย",
+		body: "เพิ่มการนัดหมาย",
+		timereceive: "14/06/2566",
+	},
+]
+const notiTrigger = ref(false)
 const currentRouteName = router.currentRoute.value.name
-const tab = ref(currentRouteName);
+const tab = ref(currentRouteName)

+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+	console.log(config.API.gettttt)
+})
+
+/**
+ * logout keycloak
+ * confirm ก่อนออกจากระบบ
+ */
+const doLogout = () => {
+	$q.dialog({
+		title: "ยืนยันการออกจากระบบ",
+		message: `ต้องการออกจากระบบใช้หรือไม่?`,
+		cancel: "ยกเลิก",
+		ok: "ยืนยัน",
+		persistent: true,
+	}).onOk(() => {
+		keycloak.logout()
+	})
+}
 </script>
 <!-- โครงเว็บ -->
 <template>
 	<q-layout view="hHh LpR fFr">
 		<!-- header -->
 		<q-header flat class="text-dark col-12 bg-top header-br" height-hint="7">
-			<q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
+			<q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'">
 				<div class="row items-center no-wrap" v-if="$q.screen.gt.xs">
 					<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px" />
 					<div class="row q-ml-md items-center q-pt-xs">
-						<div
-							style="color: #ffffff; letter-spacing: 1px; line-height:10px;"
-							class="text-body2 text-weight-bolder col-12"
-						>
-							ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
-						</div>
+						<div style="color: #ffffff; letter-spacing: 1px; line-height: 10px" class="text-body2 text-weight-bolder col-12">ระบบ<span class="text-primary">ทรัพยากรบุคคล</span></div>
 						<div class="text-caption text-white">กรุงเทพมหานคร</div>
 					</div>
 				</div>
@ -51,182 +71,143 @@ const tab = ref(currentRouteName);
 					<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
 				</div>
 				<div v-if="$q.screen.gt.xs">
-					<q-tabs
-						v-model="tab"
-						align="justify"
-						indicator-color="transparent"
-        				active-color="white bg-white-btn border-100"
-						dense
-						inline-label
-						class="text-grey-5 tabsHome"
-					>
-						<q-tab class="border-100"  name="dashboard" label="หน้าแรก" icon="mdi-view-dashboard-outline" @click="router.push(`/`)" />
+					<q-tabs v-model="tab" align="justify" indicator-color="transparent" active-color="white bg-white-btn border-100" dense inline-label class="text-grey-5 tabsHome">
+						<q-tab class="border-100" name="dashboard" label="หน้าแรก" icon="mdi-view-dashboard-outline" @click="router.push(`/`)" />
 						<q-tab class="border-100" name="time" label="ลงเวลางาน" icon="mdi-map-marker-check-outline" />
 						<q-tab class="border-100" name="leave" label="การลา" icon="mdi-calendar-blank-outline" />
 					</q-tabs>
 				</div>
 				<q-space />
 				<!-- Notification -->
-				<q-btn
-					round
-					dense
-					flat
-					size="13px"
-					:class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md': 'q-mr-sm'"
-					:color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
-					:disable="notiList.length === 0"
-					>
+				<q-btn round dense flat size="13px" :class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md' : 'q-mr-sm'" :color="notiList.length === 0 ? 'grey-6' : 'grey-8'" :disable="notiList.length === 0">
 					<q-icon name="mdi-bell-outline" size="22px" color="white" />
-					<q-badge
-						rounded
-						v-show="notiList.length > 0"
-						color="negative"
-						text-color="white"
-						floating
-						>{{ notiList.length }}</q-badge
-					>
+					<q-badge rounded v-show="notiList.length > 0" color="negative" text-color="white" floating>{{ notiList.length }}</q-badge>
 					<q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
 						<div class="q-px-md q-py-sm row col-12 items-center">
 							<div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
 							<q-space />
 							<q-btn label="ล้างข้อมูล" color="pink" dense class="text-caption" flat />
-
 						</div>

 						<q-list style="min-width: 300px" v-for="(n, index) in notiList" :key="index">
 							<q-item v-ripple class="mytry q-py-sm" dense>
 								<q-item-section avatar top style="min-width: 40px">
 									<q-avatar rounded color="primary" size="25px" text-color="white">
-										<span class="text-weight-medium text-uppercase">{{n.sender[0]}}</span>
+										<span class="text-weight-medium text-uppercase">{{ n.sender[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"  style="font-size: 12px;">{{ n.timereceive }}</q-item-label>
+									<q-item-label caption class="text-black">{{ n.body }}</q-item-label>
+									<q-item-label caption class="row items-center text-grey-7" style="font-size: 12px">{{ n.timereceive }}</q-item-label>
 								</q-item-section>
 								<div>
-									<q-btn
-										size="sm"
-										unelevated
-										dense
-										icon="mdi-close"
-										class="mybtn q-mx-xs"
-										v-close-popup
-									></q-btn>
+									<q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs" v-close-popup></q-btn>
 								</div>
 							</q-item>
-							<q-separator class="q-my-xs" color="grey-2"  v-if="index + 1 < notiList.length" :key="index" />
+							<q-separator class="q-my-xs" color="grey-2" v-if="index + 1 < notiList.length" :key="index" />
 						</q-list>
 					</q-menu>
 				</q-btn>

 				<!-- User -->
-				<q-btn-dropdown 
-					v-if="$q.screen.gt.xs" 
-					rounded 
-					dense 
-					flat 
-					:class="$q.screen.gt.xs ? 'bg-white-btn': ''" 
-					color="white"
-					class="q-pr-sm border-10"
-					dropdown-icon="mdi-chevron-down">
+				<q-btn-dropdown v-if="$q.screen.gt.xs" rounded dense flat :class="$q.screen.gt.xs ? 'bg-white-btn' : ''" color="white" class="q-pr-sm border-10" dropdown-icon="mdi-chevron-down">
 					<template v-slot:label>
 						<q-item dense v-close-popup class="q-pa-none q-pl-xs">
-							<q-item-section avatar class="q-pa-none " style="min-width:30px;">
-								<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px;" />
+							<q-item-section avatar class="q-pa-none" style="min-width: 30px">
+								<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px" />
 							</q-item-section>
-							<q-item-section class="text-left text-white q-pa-none q-pl-sm" >
-								<q-item-label class="text-caption text-weight-medium">{{fullname}}</q-item-label>
+							<q-item-section class="text-left text-white q-pa-none q-pl-sm">
+								<q-item-label class="text-caption text-weight-medium">{{ fullname }}</q-item-label>
 							</q-item-section>
 						</q-item>
 					</template>
 					<q-list>
-						<q-item clickable v-close-popup >
-							<q-item-section avatar style="min-width:30px;">
+						<q-item clickable v-close-popup>
+							<q-item-section avatar style="min-width: 30px">
 								<q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
 							</q-item-section>
 							<q-item-section><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section>
 						</q-item>

-						<q-item clickable v-close-popup >
-							<q-item-section avatar style="min-width:30px;">
+						<q-item clickable v-close-popup>
+							<q-item-section avatar style="min-width: 30px">
 								<q-icon color="primary" size="18px" name="mdi-logout-variant" />
 							</q-item-section>
-							<q-item-section><q-item-label>ออกจากระบบ</q-item-label></q-item-section>
+							<q-item-section><q-item-label @click="doLogout">ออกจากระบบ</q-item-label></q-item-section>
 						</q-item>
 					</q-list>
 				</q-btn-dropdown>
-				<div v-else class="q-ml-sm" style="width: 30px;">
-					<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px;" />
+				<div v-else class="q-ml-sm" style="width: 30px">
+					<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px" />
 				</div>
 			</q-toolbar>
 		</q-header>
-		<div class="bg-top" :style="$q.screen.gt.xs ? 'height: 200px;': 'height: 200px;'" />
+		<div class="bg-top" :style="$q.screen.gt.xs ? 'height: 200px;' : 'height: 200px;'" />
 		<!-- end header -->

 		<q-footer class="bg-top" v-if="!$q.screen.gt.xs">
-			<q-toolbar style="padding: 2% 2%;">
+			<q-toolbar style="padding: 2% 2%">
 				<div class="row col-12 justify-around">
 					<q-btn flat round class="bg-white-btn" color="white" icon="mdi-view-dashboard-outline" />
 					<q-btn flat round color="white" icon="mdi-map-marker-check-outline" />
-					<q-btn flat round color="white" icon="mdi-calendar-blank-outline"/>
+					<q-btn flat round color="white" icon="mdi-calendar-blank-outline" />
 					<q-btn flat round color="white" icon="mdi-account-outline" />
 				</div>
 			</q-toolbar>
 		</q-footer>

 		<q-page-container class="bg-grey-2 q-pb-md">
-			<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -200px;': 'padding: 5% 4%; margin-top: -200px;'">
+			<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -200px;' : 'padding: 5% 4%; margin-top: -200px;'">
 				<router-view :key="$route.fullPath" />
 			</q-page>
-			</q-page-container>
+		</q-page-container>
 	</q-layout>
 </template>

 <style>
-.bg-drawer{
-  background: #242a3d;
+.bg-drawer {
+	background: #242a3d;
 }
 .menu {
-  padding-bottom: 5px;
-  padding-top: 5px;
+	padding-bottom: 5px;
+	padding-top: 5px;
 }
-.tabsHome .q-tab__icon{
+.tabsHome .q-tab__icon {
 	font-size: 18px;
 }
-.border-100{
+.border-100 {
 	border-radius: 100px;
 }
-.bg-top{
+.bg-top {
 	background: #273238;
 }
-.header-br{
+.header-br {
 	border-bottom: 1px solid #fdfdfd31;
 }
 .menuActive {
-  background: #1e2234;
-  border-radius: 0 100px 100px 0;
-  margin-right: 4%;
+	background: #1e2234;
+	border-radius: 0 100px 100px 0;
+	margin-right: 4%;
 }
 .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;
 	border: 1px solid #eeeded;
 }
 .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.2%;
+	font-size: 1.2rem;
+	font-weight: bold;
+	margin-bottom: 1.2%;
 }
-.q-field--outlined .q-field__control{
+.q-field--outlined .q-field__control {
 	border-radius: 5px;
 }
 .q-field--outlined .q-field__control:before {
-  border-color: #C8D3DB;
+	border-color: #c8d3db;
 }
-.q-field--outlined .q-icon{
+.q-field--outlined .q-icon {
 	color: #7474747f;
 }
 </style>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,20 +1,30 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url"

-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import vueJsx from "@vitejs/plugin-vue-jsx"
+import { quasar, transformAssetUrls } from "@quasar/vite-plugin"

 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue({
-        template: { transformAssetUrls }
-    }), quasar({
-        sassVariables: 'src/style/quasar-variables.sass'
-      }), vueJsx()],
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url))
-        }
-    }
+	plugins: [
+		vue({
+			template: { transformAssetUrls },
+		}),
+		quasar({
+			sassVariables: "src/style/quasar-variables.sass",
+		}),
+		vueJsx(),
+	],
+	resolve: {
+		alias: {
+			"@": fileURLToPath(new URL("./src", import.meta.url)),
+		},
+	},
+	build: {
+		target: "esnext",
+	},
+	server: {
+		port: 3007,
+	},
 })