From 8b4ea6da386e4de44107ba5a72a1cfb0b519a7d5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 4 Nov 2025 11:46:54 +0700
Subject: [PATCH] fix:hideBtnAction

---
 src/interface/response/Main.ts                | 60 +++++++++++++++
 .../components/Permissions/DialogAdd.vue      | 25 +++++--
 .../RoleOrganization/DialogAddPerson.vue      | 18 ++++-
 .../RolePositionSalary/DialogAddPerson.vue    | 17 +++++
 .../02_users/interface/request/Main.ts        |  1 +
 .../02_users/views/02_rolesAndPermissions.vue | 31 +++++++-
 .../02_users/views/03_permissionsView.vue     | 29 +++++++-
 .../02_users/views/04_roleOrganization.vue    | 13 ++++
 .../02_users/views/05_responsIbilities.vue    | 19 ++++-
 .../02_users/views/06_rolePositionSalary.vue  | 13 ++++
 .../page02_rolesAndPermissionsDetail.vue      | 73 +++++++++++++++----
 src/views/MainLayout.vue                      |  4 +
 12 files changed, 277 insertions(+), 26 deletions(-)
 create mode 100644 src/interface/response/Main.ts

diff --git a/src/interface/response/Main.ts b/src/interface/response/Main.ts
new file mode 100644
index 00000000..e165fe41
--- /dev/null
+++ b/src/interface/response/Main.ts
@@ -0,0 +1,60 @@
+interface KeycloakPosition {
+  amountSpecial: number;
+  avatar: string;
+  avatarName: string;
+  birthDate: string;
+  child1: string;
+  child1DnaId: string;
+  child1Id: string;
+  child1ShortName: string;
+  child2: string;
+  child2DnaId: string;
+  child2Id: string;
+  child2ShortName: string;
+  child3: string;
+  child3DnaId: string;
+  child3Id: string;
+  child3ShortName: string;
+  child4: string;
+  child4DnaId: string;
+  child4Id: string;
+  child4ShortName: string;
+  citizenId: string;
+  dateRetireLaw: string;
+  dateStart: string;
+  firstName: string;
+  isDirector: boolean;
+  isProbation: boolean;
+  keycloak: string;
+  lastName: string;
+  leaveDate: string;
+  node: number;
+  nodeDnaId: string;
+  nodeId: string;
+  nodeShortName: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  posExecutivePriority: string;
+  posLevelId: string;
+  posLevelName: string;
+  posLevelRank: number;
+  posMaster: number;
+  posMasterNo: number;
+  posNo: string;
+  posTypeId: string;
+  posTypeName: string;
+  posTypeRank: number;
+  position: string;
+  positionArea: string;
+  positionExecutiveField: string;
+  prefix: string;
+  profileId: string;
+  profileType: string;
+  rank: string;
+  root: string;
+  rootDnaId: string;
+  rootId: string;
+  rootShortName: string;
+  salary: number;
+}
+export type { KeycloakPosition };
diff --git a/src/modules/02_users/components/Permissions/DialogAdd.vue b/src/modules/02_users/components/Permissions/DialogAdd.vue
index 7d81ee17..d415b06f 100644
--- a/src/modules/02_users/components/Permissions/DialogAdd.vue
+++ b/src/modules/02_users/components/Permissions/DialogAdd.vue
@@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { tokenParsed } from "@/plugins/auth";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -67,6 +68,7 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>(["roleName", "roleDescription"]);
 
 const selected = ref<Roles[]>([]);
+const roleUser = ref<string[]>([]);
 
 function closeDialog() {
   modal.value = false;
@@ -74,10 +76,19 @@ function closeDialog() {
   keyword.value = "";
 }
 
-function fetchListRoles() {
+async function fetchListRoles() {
   showLoader();
-  http
-    .get(config.API.managementAuth + `/list`)
+  const isCheckRole = roleUser.value.includes("SUPER_ADMIN") ? true : false;
+
+  const param: { params?: { isAdminVisibled: string } } = {};
+  if (!isCheckRole) {
+    param.params = {
+      isAdminVisibled: "true",
+    };
+  }
+
+  await http
+    .get(config.API.managementAuth + `/list`, param)
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -138,8 +149,12 @@ function serchDataTable() {
 
 watch(
   () => modal.value,
-  () => {
-    modal.value && fetchListRoles();
+  async () => {
+    if (modal.value) {
+      const token = await tokenParsed();
+      roleUser.value = token?.role || [];
+      await fetchListRoles();
+    }
   }
 );
 </script>
diff --git a/src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue b/src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue
index 1b2f0da3..9fa24abc 100644
--- a/src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue
+++ b/src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import { storeToRefs } from "pinia";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStoreUser } from "@/modules/02_users/stores/main";
+import { usekeycloakPosition } from "@/stores/keycloakPosition";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -17,6 +19,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
 const store = useDataStoreUser();
+const { dataPosition } = storeToRefs(usekeycloakPosition());
 const { showLoader, hideLoader, messageError, success, dialogConfirm } =
   useCounterMixin();
 
@@ -168,6 +171,18 @@ function onClose() {
   selected.value = [];
 }
 
+/**
+ * ซ่อน checkbox ของผู้ใช้งานที่กำลังล็อกอินอยู่
+ * @param id รหัสผู้ใช้งาน
+ */
+function hideCheckbox(id: string) {
+  if (dataPosition.value?.profileId === id) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ pageSize ใน queryBody
  *
@@ -208,7 +223,7 @@ watch(
                 dense
                 v-model="qurey.searchKeyword"
                 label="คำค้น"
-                
+                @keydown.enter.prevent="onSearchListPerson(true)"
               >
                 <!-- <template v-slot:append>
                   <q-icon name="search" />
@@ -259,6 +274,7 @@ watch(
               <q-tr :props="props">
                 <td auto-width>
                   <q-checkbox
+                    v-if="hideCheckbox(props.row.id)"
                     keep-color
                     color="primary"
                     dense
diff --git a/src/modules/02_users/components/RolePositionSalary/DialogAddPerson.vue b/src/modules/02_users/components/RolePositionSalary/DialogAddPerson.vue
index f57464ab..84e8908d 100644
--- a/src/modules/02_users/components/RolePositionSalary/DialogAddPerson.vue
+++ b/src/modules/02_users/components/RolePositionSalary/DialogAddPerson.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import { storeToRefs } from "pinia";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStoreUser } from "@/modules/02_users/stores/main";
+import { usekeycloakPosition } from "@/stores/keycloakPosition";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -17,6 +19,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
 const store = useDataStoreUser();
+const { dataPosition } = storeToRefs(usekeycloakPosition());
 const {
   showLoader,
   hideLoader,
@@ -184,6 +187,18 @@ function onClose() {
   isCheck.value = false;
 }
 
+/**
+ * ซ่อน checkbox ของผู้ใช้งานที่กำลังล็อกอินอยู่
+ * @param id รหัสผู้ใช้งาน
+ */
+function hideCheckbox(id: string) {
+  if (dataPosition.value?.profileId === id) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ pageSize ใน queryBody
  *
@@ -237,6 +252,7 @@ watch(
                 dense
                 v-model="qurey.searchKeyword"
                 label="คำค้น"
+                @keydown.enter.prevent="onSearchListPerson(true)"
               >
                 <!-- <template v-slot:append>
                   <q-icon name="search" />
@@ -287,6 +303,7 @@ watch(
               <q-tr :props="props">
                 <td auto-width>
                   <q-checkbox
+                    v-if="hideCheckbox(props.row.id)"
                     keep-color
                     color="primary"
                     dense
diff --git a/src/modules/02_users/interface/request/Main.ts b/src/modules/02_users/interface/request/Main.ts
index 8215b7cf..041c019e 100644
--- a/src/modules/02_users/interface/request/Main.ts
+++ b/src/modules/02_users/interface/request/Main.ts
@@ -11,6 +11,7 @@ interface FormUser {
 interface FormRole {
   roleName: string;
   roleDescription: string;
+  isAdminVisibled: boolean;
 }
 
 interface Roles {
diff --git a/src/modules/02_users/views/02_rolesAndPermissions.vue b/src/modules/02_users/views/02_rolesAndPermissions.vue
index 28f27589..3cad0245 100644
--- a/src/modules/02_users/views/02_rolesAndPermissions.vue
+++ b/src/modules/02_users/views/02_rolesAndPermissions.vue
@@ -59,8 +59,22 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "isAdminVisibled",
+    align: "left",
+    label: "ผู้ดูแลระบบมองเห็น",
+    sortable: true,
+    field: "isAdminVisibled",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
-const visibleColumns = ref<string[]>(["no", "roleName", "roleDescription"]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "roleName",
+  "roleDescription",
+  "isAdminVisibled",
+]); // คอลัมน์ที่แสดง
 
 const modalDialogAdd = ref<boolean>(false); // เพิ่มบทบาท
 
@@ -156,8 +170,8 @@ function serchDataTable() {
  * hook ทำงานเมื่อมีการเรียกใช้งาน Components
  * ดึงข้อมูลบทบาท
  */
-onMounted(() => {
-  fetchListRole();
+onMounted(async () => {
+  await fetchListRole();
 });
 </script>
 
@@ -229,11 +243,20 @@ onMounted(() => {
               <div v-if="col.name === 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
+              <div v-else-if="col.name === 'isAdminVisibled'">
+                <q-icon
+                  v-if="props.row.isAdminVisibled"
+                  size="sm"
+                  name="check"
+                  color="primary"
+                />
+                <span v-else>-</span>
+              </div>
               <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
-            <q-td>
+            <q-td auto-width>
               <q-btn
                 flat
                 dense
diff --git a/src/modules/02_users/views/03_permissionsView.vue b/src/modules/02_users/views/03_permissionsView.vue
index 81014b29..81594e0d 100644
--- a/src/modules/02_users/views/03_permissionsView.vue
+++ b/src/modules/02_users/views/03_permissionsView.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+import { storeToRefs } from "pinia";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { usePermissionsStore } from "@/modules/02_users/stores/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { tokenParsed } from "@/plugins/auth";
+import { usekeycloakPosition } from "@/stores/keycloakPosition";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -25,6 +27,7 @@ import PopupPersonal from "@/modules/02_users/components/RoleOrganization/Dialog
 /** use*/
 const $q = useQuasar();
 const store = usePermissionsStore();
+const { dataPosition } = storeToRefs(usekeycloakPosition());
 const { showLoader, hideLoader, messageError, success, dialogRemove } =
   useCounterMixin();
 
@@ -61,6 +64,11 @@ const nodes = ref<Array<NodeTree>>([
     totalRootPositionNextVacant: 0,
     children: [] as NodeTree[],
     isOfficer: false,
+    orgRootDnaId: "",
+    orgChild1DnaId: "",
+    orgChild2DnaId: "",
+    orgChild3DnaId: "",
+    orgChild4DnaId: "",
   },
 ]); // ข้อมูลโครงสร้าง
 const lazy = ref(nodes);
@@ -319,6 +327,11 @@ async function fetchDataTree(id: string) {
         totalRootPositionNextVacant: 0,
         children: [] as NodeTree[],
         isOfficer: false,
+        orgRootDnaId: "",
+        orgChild1DnaId: "",
+        orgChild2DnaId: "",
+        orgChild3DnaId: "",
+        orgChild4DnaId: "",
       },
     ];
   }
@@ -482,6 +495,19 @@ function isUpload() {
   fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
 }
 
+/**
+ *  ตรวจสอบการแสดงปุ่ม action
+ * @param current_holderId id ผู้ครองตำแหน่งปัจจุบัน
+ * @returns true หากผู้ใช้งานมีสิทธิ์ในการดำเนินการ
+ */
+function checkhideBtnAction(current_holderId: string) {
+  if (dataPosition.value?.profileId === current_holderId) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
 onMounted(() => {
   fetchOrganizationActive();
 });
@@ -764,8 +790,9 @@ onMounted(() => {
                         {{ col.value ? col.value : "-" }}
                       </div>
                     </q-td>
-                    <q-td>
+                    <q-td auto-width>
                       <q-btn
+                        v-if="checkhideBtnAction(props.row.current_holderId)"
                         flat
                         dense
                         icon="mdi-dots-vertical"
diff --git a/src/modules/02_users/views/04_roleOrganization.vue b/src/modules/02_users/views/04_roleOrganization.vue
index e704ef02..fe5b5b43 100644
--- a/src/modules/02_users/views/04_roleOrganization.vue
+++ b/src/modules/02_users/views/04_roleOrganization.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+import { storeToRefs } from "pinia";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStoreUser } from "@/modules/02_users/stores/main";
 import { tokenParsed } from "@/plugins/auth";
+import { usekeycloakPosition } from "@/stores/keycloakPosition";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -21,6 +23,7 @@ import PopupPersonal from "@/modules/02_users/components/RoleOrganization/Dialog
 
 const $q = useQuasar();
 const store = useDataStoreUser();
+const { dataPosition } = storeToRefs(usekeycloakPosition());
 const { showLoader, hideLoader, messageError, success, dialogRemove } =
   useCounterMixin();
 
@@ -212,6 +215,14 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
+function checkhideBtnAction(id: string) {
+  if (dataPosition.value?.profileId === id) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ pageSize ใน queryBody
  * เมื่อ pageSize มีการเปลี่ยนแปลงให้โหลดข้อมูลหน้าแรก
@@ -334,6 +345,7 @@ onMounted(async () => {
                   lazy-rules
                   label="คำค้น"
                   hide-bottom-space
+                  @keydown.enter.prevent="fetchListPerson(true)"
                 >
                 </q-input>
               </div>
@@ -393,6 +405,7 @@ onMounted(async () => {
                   <q-tr :props="props">
                     <q-td auto-width>
                       <q-btn
+                        v-if="checkhideBtnAction(props.row.profileId)"
                         flat
                         dense
                         color="red"
diff --git a/src/modules/02_users/views/05_responsIbilities.vue b/src/modules/02_users/views/05_responsIbilities.vue
index e1b75d0d..110d803e 100644
--- a/src/modules/02_users/views/05_responsIbilities.vue
+++ b/src/modules/02_users/views/05_responsIbilities.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+import { storeToRefs } from "pinia";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { tokenParsed } from "@/plugins/auth";
+import { usekeycloakPosition } from "@/stores/keycloakPosition";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -23,6 +25,7 @@ import PopupPersonal from "@/modules/02_users/components/RoleOrganization/Dialog
 
 /** use*/
 const $q = useQuasar();
+const { dataPosition } = storeToRefs(usekeycloakPosition());
 const { showLoader, hideLoader, messageError, success, dialogRemove } =
   useCounterMixin();
 
@@ -59,6 +62,11 @@ const nodes = ref<Array<NodeTree>>([
     totalRootPositionNextVacant: 0,
     children: [] as NodeTree[],
     isOfficer: false,
+    orgRootDnaId: "",
+    orgChild1DnaId: "",
+    orgChild2DnaId: "",
+    orgChild3DnaId: "",
+    orgChild4DnaId: "",
   },
 ]); // ข้อมูลโครงสร้าง
 const lazy = ref(nodes);
@@ -402,6 +410,14 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
+function hideBtnAction(id: string) {
+  if (dataPosition.value?.profileId === id) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
 /** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
 watch([() => reqMaster.pageSize], () => {
   fetchDataTable(reqMaster.id, reqMaster.revisionId, reqMaster.type);
@@ -680,8 +696,9 @@ onMounted(() => {
                         {{ col.value ? col.value : "-" }}
                       </div>
                     </q-td>
-                    <q-td>
+                    <q-td accesskey="">
                       <q-btn
+                        v-if="hideBtnAction(props.row.current_holderId)"
                         flat
                         dense
                         icon="mdi-dots-vertical"
diff --git a/src/modules/02_users/views/06_rolePositionSalary.vue b/src/modules/02_users/views/06_rolePositionSalary.vue
index 44e9321d..ba59b1bc 100644
--- a/src/modules/02_users/views/06_rolePositionSalary.vue
+++ b/src/modules/02_users/views/06_rolePositionSalary.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+import { storeToRefs } from "pinia";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStoreUser } from "@/modules/02_users/stores/main";
 import { tokenParsed } from "@/plugins/auth";
+import { usekeycloakPosition } from "@/stores/keycloakPosition";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -21,6 +23,7 @@ import PopupPersonal from "@/modules/02_users/components/RoleOrganization/Dialog
 
 const $q = useQuasar();
 const store = useDataStoreUser();
+const { dataPosition } = storeToRefs(usekeycloakPosition());
 const { showLoader, hideLoader, messageError, success, dialogRemove } =
   useCounterMixin();
 
@@ -256,6 +259,14 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
+function hideBtnAction(id: string) {
+  if (dataPosition.value?.profileId === id) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ pageSize ใน queryBody
  * เมื่อ pageSize มีการเปลี่ยนแปลงให้โหลดข้อมูลหน้าแรก
@@ -378,6 +389,7 @@ onMounted(async () => {
                   lazy-rules
                   label="คำค้น"
                   hide-bottom-space
+                  @keydown.enter.prevent="fetchListPerson(true)"
                 >
                 </q-input>
               </div>
@@ -437,6 +449,7 @@ onMounted(async () => {
                   <q-tr :props="props">
                     <q-td auto-width>
                       <q-btn
+                        v-if="hideBtnAction(props.row.profileId)"
                         flat
                         dense
                         color="red"
diff --git a/src/modules/02_users/views/page02_rolesAndPermissionsDetail.vue b/src/modules/02_users/views/page02_rolesAndPermissionsDetail.vue
index 609d037a..46e611dc 100644
--- a/src/modules/02_users/views/page02_rolesAndPermissionsDetail.vue
+++ b/src/modules/02_users/views/page02_rolesAndPermissionsDetail.vue
@@ -6,6 +6,7 @@ import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { tokenParsed } from "@/plugins/auth";
 
 import type {
   DataOption,
@@ -51,6 +52,7 @@ const attrPrivilegeOp = ref<DataOption[]>([
 const formData = reactive<FormRole>({
   roleName: "", // ชื่อบทบาม
   roleDescription: "", // คำอธิบาย
+  isAdminVisibled: false, // แสดงผลในหน้าผู้ดูแลระบบ
 });
 
 const sysListMain = ref<SysList[]>([]);
@@ -89,6 +91,7 @@ async function fetchDataRole() {
       const sysList = data.roleAttributes;
       formData.roleName = data.roleName;
       formData.roleDescription = data.roleDescription;
+      formData.isAdminVisibled = data.isAdminVisibled;
 
       const root: SystemList[] = [];
       const chil: SystemList[] = [];
@@ -218,12 +221,42 @@ function onSubmit() {
   });
 }
 
+function onHandleChangeIsAdminVisibled(val: boolean) {
+  if (val === true) {
+    systemLists.value.forEach((system: SystemList) => {
+      if (system.selected && system.attrOwnership === "OWNER") {
+        system.attrOwnership = "STAFF";
+        system.attrIsCreate = system.attrIsCreate;
+        system.attrIsList = system.attrIsList;
+        system.attrIsGet = system.attrIsGet;
+        system.attrIsUpdate = system.attrIsUpdate;
+        system.attrIsDelete = system.attrIsDelete;
+        system.attrPrivilege = system.attrPrivilege;
+      }
+
+      if (system.children && system.children.length > 0) {
+        system.children.forEach((child: SystemList) => {
+          if (child.selected && child.attrOwnership === "OWNER") {
+            child.attrOwnership = "STAFF";
+            child.attrIsCreate = child.attrIsCreate;
+            child.attrIsList = child.attrIsList;
+            child.attrIsGet = child.attrIsGet;
+            child.attrIsUpdate = child.attrIsUpdate;
+            child.attrIsDelete = child.attrIsDelete;
+            child.attrPrivilege = child.attrPrivilege;
+          }
+        });
+      }
+    });
+  }
+}
+
 /**
  * hook ทำงานเมื่อมีการเรียกใช้ components
  *
  * โหลดข้อมูลรายการระบบทั้งหมด
  */
-onMounted(() => {
+onMounted(async () => {
   fetchSys();
 });
 </script>
@@ -249,17 +282,29 @@ onMounted(() => {
         <q-card>
           <q-card-section>
             <div class="row q-col-gutter-md">
-              <div class="col-4">
-                <q-input
-                  v-model="formData.roleName"
-                  outlined
-                  dense
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
-                  lazy-rules
-                  hide-bottom-space
-                  class="inputgreen"
-                  label="ชื่อบทบาท"
-                />
+              <div class="row col-4">
+                <div class="col-12">
+                  <q-input
+                    v-model="formData.roleName"
+                    outlined
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
+                    lazy-rules
+                    hide-bottom-space
+                    class="inputgreen"
+                    label="ชื่อบทบาท"
+                  />
+                </div>
+
+                <div class="col-12">
+                  <q-toggle
+                    color="primary"
+                    class="q-pr-md"
+                    v-model="formData.isAdminVisibled"
+                    label="ผู้ดูแลระบบมองเห็น"
+                    @update:model-value="onHandleChangeIsAdminVisibled"
+                  />
+                </div>
               </div>
               <div class="col-8">
                 <q-input
@@ -498,7 +543,7 @@ onMounted(() => {
                       (props.row.attrPrivilege = 'ROOT')
                   "
                   v-if="props.row.children.length === 0"
-                  :disable="!props.row.selected"
+                  :disable="!props.row.selected || formData.isAdminVisibled"
                 />
               </q-td>
               <q-td style="text-align: center">
@@ -623,7 +668,7 @@ onMounted(() => {
                       (item.attrIsDelete = true),
                       (item.attrPrivilege = 'ROOT')
                   "
-                  :disable="!item.selected"
+                  :disable="!item.selected || formData.isAdminVisibled"
                 />
               </q-td>
               <q-td style="text-align: center">
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index a263e1ad..3327b237 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, onUnmounted, watch, onBeforeMount } from "vue";
 import { storeToRefs } from "pinia";
 import { useQuasar } from "quasar";
+import { usekeycloakPosition } from "@/stores/keycloakPosition";
 
 import { useRoute } from "vue-router";
 import config from "@/app.config";
@@ -32,6 +33,7 @@ const configParam = {
 
 const $q = useQuasar();
 const store = useDataStore();
+const keycloakPositionStore = usekeycloakPosition();
 const route = useRoute();
 const { loader } = storeToRefs(store);
 const { changeTab } = store;
@@ -337,6 +339,8 @@ async function fetchKeycloakPosition() {
     .get(config.API.keycloakPosition())
     .then(async (res) => {
       const data = await res.data.result;
+      keycloakPositionStore.setDataPosition(data);
+
       //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
       if (data && data.avatarName) {
         await getImg(data.profileId, data.avatarName);