Changes Update MenuGroupRights

components/menu/MenuGroupRights.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="has-text-black">
-    <div>{{ row.code }} / {{ isVietnamese ? row.name : row.en }} {{ $lang("access-right") }}:</div>
+    <div>{{ row.code }} / {{ isVietnamese ? row.name : row.en }} {{ $lang('access-right') }}:</div>
     <div class="mt-2">
-      <span class="icon-text mr-6" v-for="v in options">
+      <span class="icon-text mr-6" v-for="v in options" @click="changeOption(v)">
-        <a @click="changeOption(v)">
+        <a>
           <SvgIcon
             v-bind="{
               name: option === v.code ? 'radio-checked.svg' : 'radio-unchecked.svg',
@@ -12,7 +12,7 @@
             }"
           />
         </a>
-        <b class="fs-18">{{ v[$store.lang === "en" ? "en" : "name"] }}</b>
+        <b class="fs-18">{{ v[$store.lang === 'en' ? 'en' : 'name'] }}</b>
       </span>
     </div>
     <aside class="menu">
@@ -99,34 +99,34 @@ const props = defineProps({
   setting: String,
 });
 
-const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");
+const isVietnamese = computed(() => $store.lang.toLowerCase() === 'vi');
 
 const options = [
-  { code: "all", name: "Tất cả tính năng", en: "All functions" },
+  { code: 'all', name: 'Tất cả tính năng', en: 'All functions' },
-  { code: "limit", name: "Bị giới hạn", en: "Limited functions" },
+  { code: 'limit', name: 'Bị giới hạn', en: 'Limited functions' },
 ];
 
-const option = ref("limit");
+const option = ref('limit');
 const topmenu = ref([]);
 let loanRights = [];
 
 const rows = await $getdata(props.setting, {
-  category__in: ["topmenu", "submenu"],
+  category__in: ['topmenu', 'submenu'],
 });
 
 async function getRights(first) {
   loanRights = await $getdata(props.api, { group: props.row.id });
   if (loanRights.length === 0 && first) {
-    option.value = "all";
+    option.value = 'all';
   }
 
-  const rights = $filter(rows, { category: "topmenu" });
+  const rights = $filter(rows, { category: 'topmenu' });
 
   rights
     .sort((a, b) => (a.index ?? 0) - (b.index ?? 0))
     .forEach((parent) => {
       const subs = $filter(rows, {
-        category: "submenu",
+        category: 'submenu',
         classify: parent.code,
       });
 
@@ -187,7 +187,7 @@ async function changeTick(x, v) {
         props.api,
         { setting: v.id, group: props.row.id, is_edit: false },
         undefined,
-        false
+        false,
       );
 
       if (parentObj) v.rightId = parentObj.id;
@@ -201,7 +201,7 @@ async function changeOption(v) {
   option.value = v.code;
   loanRights = await $getdata(props.api, { group: props.row.id });
 
-  if (v.code === "all") {
+  if (v.code === 'all') {
     if (loanRights?.length > 0) {
       await Promise.all(loanRights.map((item) => $deleteapi(props.api, item.id)));
     }
@@ -252,7 +252,7 @@ async function changeEdit(x, v) {
         props.api,
         { setting: v.id, group: props.row.id, is_edit: false },
         undefined,
-        false
+        false,
       );
 
       if (parentObj) v.rightId = parentObj.id;
@@ -264,140 +264,151 @@ async function changeEdit(x, v) {
 
 async function changeViewAll(v) {
   try {
-    // ===== UNCHECK =====
+    const hasSubmenu = v?.submenu?.length > 0;
-    if (v.checked) {
+
+    const isAllChecked = hasSubmenu ? v.submenu.every((s) => s.checked === true) : v.checked;
+
+    // ================= UNCHECK ALL =================
+    if (isAllChecked) {
       v.checked = false;
       v.is_edit = false;
-      console.log("v.rightId", v.rightId);
 
-      // Xóa quyền parent
+      // Chỉ delete parent nếu có quyền
       if (v.rightId) {
         await $deleteapi(props.api, v.rightId);
         v.rightId = null;
       }
 
-      // Xóa quyền submenu
+      if (hasSubmenu) {
-      if (v?.submenu?.length) {
+        const needDelete = v.submenu.filter((item) => item.rightId);
-        await Promise.all(
+
-          v.submenu.map(async (item) => {
+        await Promise.all(needDelete.map((item) => $deleteapi(props.api, item.rightId)));
-            if (item.rightId) {
+
-              await $deleteapi(props.api, item.rightId);
+        // Update state local
-              item.rightId = null;
+        v.submenu.forEach((item) => {
-            }
+          item.rightId = null;
-            item.checked = false;
+          item.checked = false;
-            item.is_edit = false;
+          item.is_edit = false;
-          })
+        });
-        );
       }
     }
 
-    // ===== CHECK =====
+    // ================= CHECK ALL =================
     else {
       v.checked = true;
       v.is_edit = false;
 
-      // Tạo quyền cho parent
+      // Chỉ insert parent nếu chưa có
-      const parentObj = await $insertapi(
+      if (!v.rightId) {
-        props.api,
+        const parentObj = await $insertapi(
-        { setting: v.id, group: props.row.id, is_edit: false },
+          props.api,
-        undefined,
+          { setting: v.id, group: props.row.id, is_edit: false },
-        false
+          undefined,
-      );
+          false,
+        );
 
-      if (parentObj) v.rightId = parentObj.id;
+        if (parentObj) v.rightId = parentObj.id;
+      }
+
+      if (hasSubmenu) {
+        const needInsert = v.submenu.filter((item) => !item.rightId);
 
-      // Tạo quyền cho submenu
-      if (v?.submenu?.length) {
         await Promise.all(
-          v.submenu.map(async (item) => {
+          needInsert.map(async (item) => {
             const obj = await $insertapi(
               props.api,
               { setting: item.id, group: props.row.id, is_edit: false },
               undefined,
-              false
+              false,
             );
 
             if (obj) item.rightId = obj.id;
-
+          }),
-            item.checked = true;
-            item.is_checked = true;
-          })
         );
+
+        // Update state local
+        v.submenu.forEach((item) => {
+          item.checked = true;
+          item.is_edit = false;
+        });
       }
     }
 
-    // Force Vue reactive update
+    // Force reactive
     topmenu.value = [...topmenu.value];
   } catch (err) {
-    console.error("changeViewAll error:", err);
+    console.error('changeViewAll error:', err);
   }
 }
 
 async function changeEditAll(v) {
   try {
-    // ===== UNCHECK =====
+    if (!v?.submenu?.length) return;
-    if (v.checked) {
-      v.checked = true;
-      v.is_edit = false;
 
-      // Xóa quyền submenu
+    const isAllEdit = v.submenu.every((item) => item.is_edit === true);
-      if (v?.submenu?.length) {
+    const newEditState = !isAllEdit;
-        await Promise.all(
-          v.submenu.map(async (item) => {
-            if (item.rightId) {
-              await $updateapi(props.api, {
-                id: item.rightId,
-                setting: item.id,
-                group: props.row.id,
-                is_edit: !item.is_edit,
-              });
-            }
-            item.checked = true;
-            item.is_edit = !item.is_edit;
-          })
-        );
-      }
-    }
 
-    // ===== CHECK =====
+    // Parent luôn phải được check
-    else {
+    v.checked = true;
-      v.checked = true;
+    v.is_edit = false;
-      v.is_edit = false;
 
-      // Tạo quyền cho parent
+    // Chỉ insert parent nếu chưa có quyền
+    if (!v.rightId) {
       const parentObj = await $insertapi(
         props.api,
         { setting: v.id, group: props.row.id, is_edit: false },
         undefined,
-        false
+        false,
       );
 
       if (parentObj) v.rightId = parentObj.id;
-
-      // Tạo quyền cho submenu
-      if (v?.submenu?.length) {
-        await Promise.all(
-          v.submenu.map(async (item) => {
-            const obj = await $insertapi(
-              props.api,
-              { setting: item.id, group: props.row.id, is_edit: true },
-              undefined,
-              false
-            );
-
-            if (obj) item.rightId = obj.id;
-
-            item.checked = true;
-            item.is_edit = true;
-          })
-        );
-      }
     }
 
-    // Force Vue reactive update
+    // ===== CHỈ LẤY NHỮNG ITEM CẦN THAO TÁC =====
+    const needUpdate = v.submenu.filter((item) => item.rightId && item.is_edit !== newEditState);
+
+    const needInsert = v.submenu.filter((item) => !item.rightId);
+
+    // Update những item cần đổi is_edit
+    await Promise.all(
+      needUpdate.map((item) =>
+        $updateapi(props.api, {
+          id: item.rightId,
+          setting: item.id,
+          group: props.row.id,
+          is_edit: newEditState,
+        }),
+      ),
+    );
+
+    // Insert những item chưa có quyền
+    await Promise.all(
+      needInsert.map(async (item) => {
+        const obj = await $insertapi(
+          props.api,
+          {
+            setting: item.id,
+            group: props.row.id,
+            is_edit: newEditState,
+          },
+          undefined,
+          false,
+        );
+
+        if (obj) item.rightId = obj.id;
+      }),
+    );
+
+    // ===== UPDATE STATE LOCAL =====
+    v.submenu.forEach((item) => {
+      item.checked = true;
+      item.is_edit = newEditState;
+    });
+
+    // Force reactive
     topmenu.value = [...topmenu.value];
   } catch (err) {
-    console.error("changeViewAll error:", err);
+    console.error('changeEditAll error:', err);
   }
 }