fix:hideBtnAction

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">