remove keycloak use cookie auth

2024-08-28 15:29:09 +07:00 · 2024-08-28 15:29:09 +07:00 · 5a5e37c12d
commit 5a5e37c12d
parent 035db71697
27 changed files with 501 additions and 440 deletions
--- a/src/modules/00_support/store/Main.ts
+++ b/src/modules/00_support/store/Main.ts
@ -12,13 +12,13 @@ import type {
  SupportMessageStatus,
  SupportIssueCategoryResponse,
 } from "@/modules/00_support/interface/index/Main";
-import keycloak from "@/plugins/keycloak";
 import { useQuasar } from "quasar";
+import { getToken, tokenParsed } from "@/plugins/auth";

-export const useSupportStore = defineStore("supportServiceStore", () => {
+export const useSupportStore = defineStore("supportServiceStore", async () => {
  const { showLoader, hideLoader, messageError } = useCounterMixin();
  const $q = useQuasar();
-  const userId = ref<string | undefined>(keycloak.subject);
+  const userId = ref<string | undefined>("");
  const issue = ref<SupportIssueResponse>();
  const message = ref<SupportMessageResponse>();
  const messageStatus = ref<SupportMessageStatus>();
@ -44,8 +44,9 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
    }, 150);
  }

+  const token = await getToken();
  const socket = io(config.API.supportSocket, {
-    auth: { token: keycloak.token },
+    auth: { token: token },
    autoConnect: false,
    path: "/api/v1/support/socket/",
  });
@ -54,7 +55,10 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
    userStatus.value = data;
  });

-  socket.on("online", (r) => {
+  socket.on("online", async (r) => {
+    const user = await tokenParsed();
+    userId.value = user.subject;
+
    userStatus.value.push({
      socketId: r.socketId,
      userId: r.userId,
--- a/src/modules/03_recruiting/components/Information.vue
+++ b/src/modules/03_recruiting/components/Information.vue
@ -397,6 +397,7 @@
    </div> -->
  </q-form>
 </template>
+
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@ -412,8 +413,8 @@ import {
  changeData,
 } from "@/modules/03_recruiting/interface/index/Main";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
+import { tokenParsed } from "@/plugins/auth";
 import { useRoute } from "vue-router";
-import keycloak from "@/plugins/keycloak";
 import { useQuasar } from "quasar";

 const props = defineProps({
@ -499,12 +500,10 @@ const fetchData = async () => {
      defaultInformation.value.knowledge = data.knowledge;
    })
    .catch(() => {
-      defaultInformation.value.email =
-        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.email;
-      defaultInformation.value.firstname =
-        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.given_name;
-      defaultInformation.value.lastname =
-        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.family_name;
+      const user = await tokenParsed();
+      defaultInformation.value.email = user ? user.email : "";
+      defaultInformation.value.firstname = user ? user.given_name : "";
+      defaultInformation.value.lastname = user ? user.family_name : "";
    })
    .finally(() => {
      hideLoader();
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@ -833,7 +833,7 @@ import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";

 const $q = useQuasar();
 const store = useDataStore();
@ -996,13 +996,10 @@ function onClickUnlock() {
  );
 }
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleKeyregistry.value = await keycloak.tokenParsed.role.includes(
-      "keyregistry"
-    );
-    roleRegistryverify.value = await keycloak.tokenParsed.role.includes(
-      "registryverify"
-    );
+  const user = await tokenParsed();
+  if (user) {
+    roleKeyregistry.value = await user.role.includes("keyregistry");
+    roleRegistryverify.value = await user.role.includes("registryverify");
  }

  await changeTab("information");
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/Detail.vue
@ -5,8 +5,7 @@ import { checkPermission } from "@/utils/permissions";
 import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
-
+import { tokenParsed } from "@/plugins/auth";
 /**
 * impotyType
 */
@ -143,8 +142,9 @@ const getClass = (val: boolean) => {
 };

 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
  }
  fetchData();
 });
--- a/src/modules/05_placement/components/PersonalList/Detail.vue
+++ b/src/modules/05_placement/components/PersonalList/Detail.vue
@ -3,8 +3,8 @@ import { onMounted, ref } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
 import { useRouter, useRoute } from "vue-router";
 import cardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
+import { tokenParsed } from "@/plugins/auth";

-import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";

@ -81,8 +81,9 @@ onMounted(async () => {
    await fetchPlacementData();
  }

-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
  }

  await getStat();
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@ -18,9 +18,9 @@ import DialogOrgTree from "@/modules/05_placement/components/PersonalList/OrgTre
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 import router from "@/router";
 import avatar from "@/assets/avatar_user.jpg";
+import { tokenParsed } from "@/plugins/auth";

 let roleAdmin = ref<boolean>(false);

@ -714,8 +714,9 @@ function onSubmitDate() {
 }

 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
    if (roleAdmin.value === false) {
      displayAdd.value = false;
      visibleColumns.value = [
--- a/src/modules/05_placement/components/Relocation/RelocationbyId.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
@ -6,7 +6,6 @@ import { useCounterMixin } from "@/stores/mixin";

 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import type { QTableProps, QForm } from "quasar";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@ -8,7 +8,6 @@ import { checkPermission } from "@/utils/permissions";
 // import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";

 import type { QTableProps, QForm } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
@ -19,6 +18,7 @@ import type {
 } from "@/modules/05_placement/interface/response/Transfer";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 import CardProfile from "@/components/CardProfile.vue";
+import { tokenParsed } from "@/plugins/auth";

 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@ -304,8 +304,9 @@ function updatemodalPersonal(modal: boolean) {
 }

 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
  }
  await getData();
 });
--- a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
+++ b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
@ -7,11 +7,11 @@ import { useCounterMixin } from "@/stores/mixin";
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 /**Import type */
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/discharged";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
+import { tokenParsed } from "@/plugins/auth";

 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@ -64,8 +64,9 @@ const responseData = ref<ResponseDataDetail>({

 /** Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
  }
  await getData();
 });
--- a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
+++ b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";

 /**Import type */
 import type { QForm } from "quasar";
@ -146,8 +146,9 @@ const getClass = (val: boolean) => {

 /** Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
  }
  await getData();
 });
@ -182,7 +183,11 @@ onMounted(async () => {
          แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
        </div>
        <q-space />
-        <div v-if="status !== 'DONE' && status !== 'REPORT' && !checkRoutePermisson">
+        <div
+          v-if="
+            status !== 'DONE' && status !== 'REPORT' && !checkRoutePermisson
+          "
+        >
          <div class="q-gutter-sm" v-if="!edit">
            <q-btn
              outline
--- a/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
+++ b/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
@ -5,7 +5,6 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-// import keycloak from "@/plugins/keycloak";

 import type { QForm } from "quasar";

--- a/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
+++ b/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";

 /**import type*/
 import type {
@ -23,7 +23,9 @@ import CardProfile from "@/components/CardProfile.vue";
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
-const checkRoutePermisson = ref<boolean>(route.name == "exit-Interview-detailsOnly");
+const checkRoutePermisson = ref<boolean>(
+  route.name == "exit-Interview-detailsOnly"
+);
 const mixin = useCounterMixin();
 const dataId = route.params.id.toString();
 const {
@ -80,8 +82,9 @@ const adjustOther = ref("");

 /** HOOK */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
  }
  await getData();
  await fecthquestion();
@ -1087,9 +1090,14 @@ const putData = () => {
                </div>
              </div>

-              <div class="col-12" v-if="!checkRoutePermisson"><q-separator /></div>
+              <div class="col-12" v-if="!checkRoutePermisson">
+                <q-separator />
+              </div>

-              <q-card-actions class="col-12 text-primary q-pa-md" v-if="!checkRoutePermisson">
+              <q-card-actions
+                class="col-12 text-primary q-pa-md"
+                v-if="!checkRoutePermisson"
+              >
                <q-space />
                <q-btn
                  unelevated
--- a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
@ -6,7 +6,8 @@ import { useCounterMixin } from "@/stores/mixin";
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
+
 /**Import Type */
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
@ -62,8 +63,9 @@ const responseData = ref<ResponseDataDetail>({

 /**Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
  }
  await getData();
 });
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@ -9,8 +9,8 @@ import { useRetirementDataStore } from "@/modules/06_retirement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import axios from "axios";
+import { tokenParsed } from "@/plugins/auth";

-import keycloak from "@/plugins/keycloak";
 import type {
  TypeFile,
  rowFile,
@ -144,10 +144,11 @@ const checkboxOp = ref<CheckBoxType[]>([
 onMounted(async () => {
  fetchData(id.value);
  fetchFile();
-  if (keycloak.tokenParsed !== undefined) {
-    const commander = await keycloak.tokenParsed.role.includes("commander");
-    const oligarch = await keycloak.tokenParsed.role.includes("oligarch");
-    const officer = await keycloak.tokenParsed.role.includes("officer");
+  const user = await tokenParsed();
+  if (user) {
+    const commander = await user.role.includes("commander");
+    const oligarch = await kuser.role.includes("oligarch");
+    const officer = await user.role.includes("officer");
    if (commander) {
      roleUser.value = "commander";
    } else if (oligarch) {
--- a/src/modules/09_leave/components/2_Leave/Calendar.vue
+++ b/src/modules/09_leave/components/2_Leave/Calendar.vue
@ -11,7 +11,6 @@ import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 import moment from "moment";
 import { checkPermission } from "@/utils/permissions";
 /** importType*/
@ -19,6 +18,7 @@ import type {
  DataDateMonthObject,
  ResCalendar,
 } from "@/modules/09_leave/interface/response/leave";
+import { tokenParsed } from "@/plugins/auth";

 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@ -32,9 +32,7 @@ const router = useRouter();

 const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;

-const keycloakId = ref<string>(
-  keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
-);
+const keycloakId = ref<string>("");
 /**
 * Option ของปฏิทิน
 */
@ -209,6 +207,8 @@ function redirectToDetail(id: string) {
 * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
 */
 onMounted(async () => {
+  const user = await tokenParsed();
+  keycloakId.value = user?.sub;
  await fetchDataCalendar("onMounted");
 });

@ -292,11 +292,19 @@ const monthYearThai = (val: DataDateMonthObject) => {
              <template v-slot:eventContent="arg">
                <div
                  class="row col-12 items-center no-wrap"
-                  :style="checkPermission($route)?.attrIsGet ? `background: + ${arg.event.color}`:`background: + ${arg.event.color};pointer-events: none;cursor: auto;`"
+                  :style="
+                    checkPermission($route)?.attrIsGet
+                      ? `background: + ${arg.event.color}`
+                      : `background: + ${arg.event.color};pointer-events: none;cursor: auto;`
+                  "
                >
                  <div
                    class="textHover col-10"
-                    @click="checkPermission($route)?.attrIsGet ? redirectToDetail(arg.event.id):''"
+                    @click="
+                      checkPermission($route)?.attrIsGet
+                        ? redirectToDetail(arg.event.id)
+                        : ''
+                    "
                  >
                    {{ arg.event.title }}
                  </div>
--- a/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
 import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";

 /**Import type */
@ -16,7 +16,6 @@ import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import CardProfile from "@/components/CardProfile.vue";

-
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 /** use */
@ -24,7 +23,9 @@ const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
-const checkRoutePermission = ref<boolean>(route.name == 'disciplineDetailSuspend')
+const checkRoutePermission = ref<boolean>(
+  route.name == "disciplineDetailSuspend"
+);
 const mixin = useCounterMixin();
 const dataId = route.params.id.toString();
 const {
@ -251,8 +252,9 @@ function changeFormDataDate() {

 /** Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
  }
  await getData();
 });
@ -332,10 +334,20 @@ onMounted(async () => {
    <q-form greedy @submit.prevent @validation-success="saveData">
      <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
        <div class="q-pl-sm text-weight-bold text-dark">
-          {{ checkRoutePermission ? 'รายละเอียดข้อมูลบัญชีแนบท้าย':'แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย'}}
+          {{
+            checkRoutePermission
+              ? "รายละเอียดข้อมูลบัญชีแนบท้าย"
+              : "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+          }}
        </div>
        <q-space />
-        <div v-if="data.status !== 'DONE' && data.status !== 'REPORT'&& !checkRoutePermission">
+        <div
+          v-if="
+            data.status !== 'DONE' &&
+            data.status !== 'REPORT' &&
+            !checkRoutePermission
+          "
+        >
          <div class="q-gutter-sm" v-if="!edit">
            <q-btn
              outline
--- a/src/modules/14_KPI/views/mainDetail.vue
+++ b/src/modules/14_KPI/views/mainDetail.vue
@ -2,7 +2,6 @@
 import avatar from "@/assets/avatar_user.jpg";
 import { ref, reactive, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import keycloak from "@/plugins/keycloak";

 import { useRoute, useRouter } from "vue-router";

@ -11,13 +10,13 @@ import config from "@/app.config";
 import { useQuasar, type QTableProps } from "quasar";

 interface ListMain {
-  id: string
+  id: string;
  round_no: number;
-  date_start: string
-  date_finish: string
-  mentors: string
-  commander: string
-  chairman: string
+  date_start: string;
+  date_finish: string;
+  mentors: string;
+  commander: string;
+  chairman: string;
 }

 const profileId = ref<string>("");
@ -38,7 +37,7 @@ const mode = ref<any>($q.screen.gt.xs);
 const profileImg = ref<string>("");
 const router = useRouter();
 const route = useRoute();
-const idEva = ref<string>(route.params.id as string)
+const idEva = ref<string>(route.params.id as string);
 const formData = reactive<any>({
  prefix: "",
  firstName: "",
@ -123,7 +122,7 @@ function onMobile(type: string) {
 function getMain() {
  showLoader();
  http
-    .get(config.API.profilePosition+`/${idEva.value}`)
+    .get(config.API.profilePosition + `/${idEva.value}`)
    .then(async (res) => {
      const data = res.data.result;
      formData.prefix = data.prefix;
@ -182,7 +181,7 @@ onMounted(async () => {
 });
 </script>
 <template>
-    <div class="toptitle col-12 row items-center">
+  <div class="toptitle col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
@ -195,104 +194,102 @@ onMounted(async () => {
    />
    รายละเอียดงานที่ได้รับมอบหมาย
  </div>
-      <div class="row q-col-gutter-md">
-        <div v-if="$q.screen.gt.xs" class="col-12">
-          <q-card>
-            <div class="bg-grey-1 row q-pa-sm items-center">
-              <span class="text-teal text-weight-bold text-body2">{{
-                formData.firstName
-                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
-                  : "-"
-              }}</span>
+  <div class="row q-col-gutter-md">
+    <div v-if="$q.screen.gt.xs" class="col-12">
+      <q-card>
+        <div class="bg-grey-1 row q-pa-sm items-center">
+          <span class="text-teal text-weight-bold text-body2">{{
+            formData.firstName
+              ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+              : "-"
+          }}</span>
+        </div>
+        <q-resize-observer @resize="onResize" />
+        <q-card-section class="q-pa-md">
+          <div class="row">
+            <div class="col-2 text-center self-center">
+              <q-avatar :size="sizeImg" rounded>
+                <img
+                  :src="profileImg"
+                  style="border-radius: 10px; object-fit: cover"
+                />
+              </q-avatar>
            </div>
-            <q-resize-observer @resize="onResize" />
-            <q-card-section class="q-pa-md">
+            <div class="col-10 column justify-center no-wrap">
+              <div class="row text-grey-6">
+                <div class="col-4">ตำแหน่งในสายงาน</div>
+                <div class="col-4">ระดับ</div>
+                <div class="col-4">สังกัด</div>
+              </div>
              <div class="row">
-                <div class="col-2 text-center self-center">
-                  <q-avatar :size="sizeImg" rounded>
-                    <img
-                      :src="profileImg"
-                      style="border-radius: 10px; object-fit: cover"
-                    />
-                  </q-avatar>
+                <div class="col-4">
+                  {{ formData.position ? formData.position : "-" }}
                </div>
-                <div class="col-10 column justify-center no-wrap">
-                  <div class="row text-grey-6">
-                    <div class="col-4">ตำแหน่งในสายงาน</div>
-                    <div class="col-4">ระดับ</div>
-                    <div class="col-4">สังกัด</div>
-                  </div>
-                  <div class="row">
-                    <div class="col-4">
-                      {{ formData.position ? formData.position : "-" }}
-                    </div>
-                    <div class="col-4">
-                      {{ formData.posLevelName ? formData.posLevelName : "-" }}
-                    </div>
-                    <div class="col-4">
-                      {{ formData.org ? formData.org : "-" }}
-                    </div>
-                  </div>
+                <div class="col-4">
+                  {{ formData.posLevelName ? formData.posLevelName : "-" }}
+                </div>
+                <div class="col-4">
+                  {{ formData.org ? formData.org : "-" }}
                </div>
              </div>
-            </q-card-section>
-          </q-card>
-        </div>
-        <div v-else class="col-12">
-          <q-card bordered>
-            <div class="bg-grey-1 row q-pa-sm items-center">
-              <span class="text-teal text-weight-bold text-body2">{{
-                formData.firstName
-                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
-                  : "-"
-              }}</span>
            </div>
-            <q-resize-observer @resize="onResize" />
-            <q-card-section>
-              <div class="text-center q-mt-md">
-                <q-avatar :size="sizeImg" rounded>
-                  <img
-                    :src="profileImg"
-                    style="border-radius: 10px; object-fit: cover"
-                  />
-                </q-avatar>
-              </div>
-            </q-card-section>
-
-            <q-list class="q-mt-md">
-              <q-item>
-                <q-item-section>
-                  <q-item-label class="text-grey-6"
-                    >ตำแหน่งในสายงาน</q-item-label
-                  >
-                  <q-item-label>{{
-                    formData.position ? formData.position : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item>
-                <q-item-section>
-                  <q-item-label class="text-grey-6">ระดับ</q-item-label>
-                  <q-item-label>{{
-                    formData.posLevelName ? formData.posLevelName : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item>
-                <q-item-section>
-                  <q-item-label class="text-grey-6">สังกัด</q-item-label>
-                  <q-item-label>{{
-                    formData.org ? formData.org : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+    <div v-else class="col-12">
+      <q-card bordered>
+        <div class="bg-grey-1 row q-pa-sm items-center">
+          <span class="text-teal text-weight-bold text-body2">{{
+            formData.firstName
+              ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+              : "-"
+          }}</span>
        </div>
-        <div class="col-12 row">
-          <q-card bordered class="col-12 q-pa-md">
-            <div class="row">
-              <!-- <q-btn
+        <q-resize-observer @resize="onResize" />
+        <q-card-section>
+          <div class="text-center q-mt-md">
+            <q-avatar :size="sizeImg" rounded>
+              <img
+                :src="profileImg"
+                style="border-radius: 10px; object-fit: cover"
+              />
+            </q-avatar>
+          </div>
+        </q-card-section>
+
+        <q-list class="q-mt-md">
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-grey-6">ตำแหน่งในสายงาน</q-item-label>
+              <q-item-label>{{
+                formData.position ? formData.position : "-"
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-grey-6">ระดับ</q-item-label>
+              <q-item-label>{{
+                formData.posLevelName ? formData.posLevelName : "-"
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-grey-6">สังกัด</q-item-label>
+              <q-item-label>{{
+                formData.org ? formData.org : "-"
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <q-card bordered class="col-12 q-pa-md">
+        <div class="row">
+          <!-- <q-btn
                @click="router.push(`/probation/add/${profileId}`)"
                size="12px"
                flat
@ -302,141 +299,133 @@ onMounted(async () => {
              >
                <q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
              </q-btn> -->
-              <q-space />
-              <q-input
-                class="inputgreen"
-                outlined
-                dense
-                v-model="filter"
-                label="ค้นหา"
-                :style="mode ? `max-width: 200px` : `max-width: 150px`"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                  <q-icon
-                    v-else
-                    name="search"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-if="$q.screen.gt.xs"
-                class="q-ml-sm"
-                dense
-                multiple
-                outlined
-                emit-value
-                map-options
-                options-cover
-                options-dense
-                option-value="name"
-                style="min-width: 150px"
-                v-model="visibleColumns"
-                :options="columns"
-                :display-value="$q.lang.table.columns"
+          <q-space />
+          <q-input
+            class="inputgreen"
+            outlined
+            dense
+            v-model="filter"
+            label="ค้นหา"
+            :style="mode ? `max-width: 200px` : `max-width: 150px`"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
              />
-            </div>
-            <div class="q-mt-sm">
-              <d-table
-                flat
-                dense
-                bordered
-                ref="table"
-                virtual-scroll
-                :rows="rows"
-                :columns="columns"
-                :grid="!$q.screen.gt.xs"
-                :filter="filter"
-                :rows-per-page-options="[10, 25, 50, 100]"
-                :visible-columns="visibleColumns"
-                :virtual-scroll-sticky-size-start="48"
-              >
-                <template v-slot:header="props">
-                  <q-tr :props="props">
-                    <q-th
-                      v-for="col in props.cols"
-                      :key="col.name"
-                      :props="props"
-                    >
-                      <span class="text-weight-medium">{{ col.label }}</span>
-                    </q-th>
-                  </q-tr>
-                </template>
+              <q-icon
+                v-else
+                name="search"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-if="$q.screen.gt.xs"
+            class="q-ml-sm"
+            dense
+            multiple
+            outlined
+            emit-value
+            map-options
+            options-cover
+            options-dense
+            option-value="name"
+            style="min-width: 150px"
+            v-model="visibleColumns"
+            :options="columns"
+            :display-value="$q.lang.table.columns"
+          />
+        </div>
+        <div class="q-mt-sm">
+          <d-table
+            flat
+            dense
+            bordered
+            ref="table"
+            virtual-scroll
+            :rows="rows"
+            :columns="columns"
+            :grid="!$q.screen.gt.xs"
+            :filter="filter"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            :virtual-scroll-sticky-size-start="48"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>

-                <template v-if="$q.screen.gt.xs" v-slot:body="props">
-                  <q-tr :props="props" class="cursor-pointer">
-                    <q-td
-                      v-for="(col, index) in props.cols"
-                      :key="col.name"
+            <template v-if="$q.screen.gt.xs" v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="(col, index) in props.cols"
+                  :key="col.name"
+                  @click="onDetail(props.row.id)"
+                >
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else-if="col.name == 'status'">
+                    {{ props.row.status ? props.row.status : "-" }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-else v-slot:item="props">
+              <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                <q-card bordered flat>
+                  <q-list dense class="q-mt-lg relative-position">
+                    <q-btn
+                      icon="info"
+                      color="info"
+                      flat
+                      dense
+                      round
+                      size="14px"
+                      class="absolute_button"
                      @click="onDetail(props.row.id)"
                    >
-                      <div v-if="col.name == 'no'">
-                        {{ props.rowIndex + 1 }}
-                      </div>
-                      <div v-else-if="col.name == 'status'">
-                        {{ props.row.status ? props.row.status : "-" }}
-                      </div>
-                      <div v-else>
-                        {{ col.value ? col.value : "-" }}
-                      </div>
-                    </q-td>
-                  </q-tr>
-                </template>
-                <template v-else v-slot:item="props">
-                  <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-                    <q-card bordered flat>
-                      <q-list dense class="q-mt-lg relative-position">
-                        <q-btn
-                          icon="info"
-                          color="info"
-                          flat
-                          dense
-                          round
-                          size="14px"
-                          class="absolute_button"
-                          @click="onDetail(props.row.id)"
-                        >
-                          <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
-                        </q-btn>
-                        <q-item v-for="col in props.cols" :key="col.name">
-                          <q-item-section class="fix_top">
-                            <q-item-label
-                              class="text-grey-6 text-weight-medium"
-                              >{{ col.label }}</q-item-label
-                            >
-                          </q-item-section>
-                          <q-item-section class="fix_top">
-                            <q-item-label
-                              class="text-dark text-weight-medium"
-                              >{{ col.value ? col.value : "-" }}</q-item-label
-                            >
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-card>
-                  </div>
-                </template>
-                <template v-slot:no-data>
-                  <div
-                    class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-                  >
-                    <span> ไม่พบข้อมูล </span>
-                  </div>
-                </template>
-              </d-table>
-            </div>
-          </q-card>
+                      <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                    </q-btn>
+                    <q-item v-for="col in props.cols" :key="col.name">
+                      <q-item-section class="fix_top">
+                        <q-item-label class="text-grey-6 text-weight-medium">{{
+                          col.label
+                        }}</q-item-label>
+                      </q-item-section>
+                      <q-item-section class="fix_top">
+                        <q-item-label class="text-dark text-weight-medium">{{
+                          col.value ? col.value : "-"
+                        }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
+            <template v-slot:no-data>
+              <div
+                class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+              >
+                <span> ไม่พบข้อมูล </span>
+              </div>
+            </template>
+          </d-table>
        </div>
-      </div>
-
-
+      </q-card>
+    </div>
+  </div>
 </template>
 <style scoped>
 .absolute_button {