Changes MenuGroupRights

components/menu/MenuGroupRights.vue

@@ -33,6 +33,26 @@
                 ></SvgIcon>
               </span>
             </div>
+            <div v-if="v.submenu.length > 0 && option === 'limit'">
+              <span class="ml-6 is-clickable" @click="changeViewAll(v)" title="Chọn tất cả">
+                <SvgIcon
+                  v-bind="{
+                    name: 'view.svg',
+                    type: 'gray',
+                    size: 25,
+                  }"
+                ></SvgIcon>
+              </span>
+              <span class="ml-6 is-clickable" @click="changeEditAll(v)" title="Chọn tất cả">
+                <SvgIcon
+                  v-bind="{
+                    name: 'edit1.svg',
+                    type: 'gray',
+                    size: 25,
+                  }"
+                ></SvgIcon>
+              </span>
+            </div>
           </div>
           <ul>
             <li class="border-bottom" v-for="x in v.submenu">
@@ -43,13 +63,22 @@
                   </span>
                 </div>
                 <div class="control" v-if="option === 'limit'">
-                  <span class="ml-6 is-clickable" @click="changeTick(x, v)">
+                  <span class="ml-6 is-clickable" @click="changeTick(x, v)" title="Xem thông tin">
                     <SvgIcon
                       v-bind="{
                         name: x.checked ? 'checked.svg' : 'uncheck.svg',
                         type: x.checked ? 'blue' : 'gray',
                         size: 25,
                       }"
+                    />
+                  </span>
+                  <span class="ml-6 is-clickable" @click="changeEdit(x, v)" title="Chỉnh sửa thông tin">
+                    <SvgIcon
+                      v-bind="{
+                        name: x.checked && x.is_edit === true ? 'checked.svg' : 'uncheck.svg',
+                        type: x.checked && x.is_edit === true ? 'blue' : 'gray',
+                        size: 25,
+                      }"
                     ></SvgIcon>
                   </span>
                 </div>
@@ -62,7 +91,7 @@
   </div>
 </template>
 <script setup>
-const { $getdata, $filter, $find, $insertapi, $deleteapi, $store } = useNuxtApp();
+const { $getdata, $filter, $find, $insertapi, $deleteapi, $store, $updateapi } = useNuxtApp();
 
 const props = defineProps({
   row: Object,
@@ -93,37 +122,42 @@ async function getRights(first) {
 
   const rights = $filter(rows, { category: "topmenu" });
 
-  rights.forEach((parent) => {
-    const subs = $filter(rows, {
-      category: "submenu",
-      classify: parent.code,
+  rights
+    .sort((a, b) => (a.index ?? 0) - (b.index ?? 0))
+    .forEach((parent) => {
+      const subs = $filter(rows, {
+        category: "submenu",
+        classify: parent.code,
+      });
+
+      subs
+        .sort((a, b) => (a.index ?? 0) - (b.index ?? 0))
+        .forEach((sub) => {
+          const found = $find(loanRights, { setting: sub.id });
+          sub.checked = !!found;
+          sub.is_edit = found?.is_edit || null;
+          sub.rightId = found?.id || null;
+        });
+
+      const foundParent = $find(loanRights, { setting: parent.id });
+      parent.rightId = foundParent?.id || null;
+
+      parent.checked = subs.length ? subs.some((s) => s.checked) : !!foundParent;
+
+      parent.submenu = subs;
     });
-
-    subs.forEach((sub) => {
-      const found = $find(loanRights, { setting: sub.id });
-      sub.checked = !!found;
-      sub.rightId = found?.id || null;
-    });
-
-    const foundParent = $find(loanRights, { setting: parent.id });
-    parent.rightId = foundParent?.id || null;
-
-    parent.checked = subs.length ? subs.some((s) => s.checked) : !!foundParent;
-
-    parent.submenu = subs;
-  });
-
   topmenu.value = [...rights];
 }
 
 async function changeTick(x, v) {
-  // ===== UNCHECK =====
   if (x.checked) {
     x.checked = false;
     const deleteId = x.rightId;
-    x.rightId = null;
+    if (deleteId) {
+      await $deleteapi(props.api, deleteId);
+      x.rightId = null;
+    }
 
-    // Nếu là submenu → kiểm tra parent
     if (v) {
       const stillChecked = v.submenu.some((s) => s.checked);
       if (!stillChecked) {
@@ -136,24 +170,25 @@ async function changeTick(x, v) {
         }
       }
     }
-
-    if (deleteId) {
-      await $deleteapi(props.api, deleteId);
-    }
   }
 
   // ===== CHECK =====
   else {
     x.checked = true;
-
-    const obj = await $insertapi(props.api, { setting: x.id, group: props.row.id }, undefined, false);
+    x.is_edit = false;
+    const obj = await $insertapi(props.api, { setting: x.id, group: props.row.id, is_edit: false }, undefined, false);
 
     if (obj) x.rightId = obj.id;
 
     if (v && !v.checked) {
       v.checked = true;
-
-      const parentObj = await $insertapi(props.api, { setting: v.id, group: props.row.id }, undefined, false);
+      v.is_edit = false;
+      const parentObj = await $insertapi(
+        props.api,
+        { setting: v.id, group: props.row.id, is_edit: false },
+        undefined,
+        false
+      );
 
       if (parentObj) v.rightId = parentObj.id;
     }
@@ -186,5 +221,185 @@ async function changeOption(v) {
   }
 }
 
+async function changeEdit(x, v) {
+  if (x.checked) {
+    const deleteId = x.rightId;
+
+    if (deleteId) {
+      await $updateapi(props.api, {
+        id: x.rightId,
+        setting: x.id,
+        group: props.row.id,
+        is_edit: !x.is_edit,
+      });
+    }
+    x.is_edit = !x.is_edit;
+    x.rightId = null;
+  }
+
+  // ===== CHECK =====
+  else {
+    x.checked = true;
+    x.is_edit = true;
+    const obj = await $insertapi(props.api, { setting: x.id, group: props.row.id, is_edit: true }, undefined, false);
+
+    if (obj) x.rightId = obj.id;
+
+    if (v && !v.checked) {
+      v.checked = true;
+
+      const parentObj = await $insertapi(
+        props.api,
+        { setting: v.id, group: props.row.id, is_edit: false },
+        undefined,
+        false
+      );
+
+      if (parentObj) v.rightId = parentObj.id;
+    }
+  }
+
+  topmenu.value = [...topmenu.value];
+}
+
+async function changeViewAll(v) {
+  try {
+    // ===== UNCHECK =====
+    if (v.checked) {
+      v.checked = false;
+      v.is_edit = false;
+      console.log("v.rightId", v.rightId);
+
+      // Xóa quyền parent
+      if (v.rightId) {
+        await $deleteapi(props.api, v.rightId);
+        v.rightId = null;
+      }
+
+      // Xóa quyền submenu
+      if (v?.submenu?.length) {
+        await Promise.all(
+          v.submenu.map(async (item) => {
+            if (item.rightId) {
+              await $deleteapi(props.api, item.rightId);
+              item.rightId = null;
+            }
+            item.checked = false;
+            item.is_edit = false;
+          })
+        );
+      }
+    }
+
+    // ===== CHECK =====
+    else {
+      v.checked = true;
+      v.is_edit = false;
+
+      // Tạo quyền cho parent
+      const parentObj = await $insertapi(
+        props.api,
+        { setting: v.id, group: props.row.id, is_edit: false },
+        undefined,
+        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: false },
+              undefined,
+              false
+            );
+
+            if (obj) item.rightId = obj.id;
+
+            item.checked = true;
+            item.is_checked = true;
+          })
+        );
+      }
+    }
+
+    // Force Vue reactive update
+    topmenu.value = [...topmenu.value];
+  } catch (err) {
+    console.error("changeViewAll error:", err);
+  }
+}
+
+async function changeEditAll(v) {
+  try {
+    // ===== UNCHECK =====
+    if (v.checked) {
+      v.checked = true;
+      v.is_edit = false;
+
+      // Xóa quyền submenu
+      if (v?.submenu?.length) {
+        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 =====
+    else {
+      v.checked = true;
+      v.is_edit = false;
+
+      // Tạo quyền cho parent
+      const parentObj = await $insertapi(
+        props.api,
+        { setting: v.id, group: props.row.id, is_edit: false },
+        undefined,
+        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
+    topmenu.value = [...topmenu.value];
+  } catch (err) {
+    console.error("changeViewAll error:", err);
+  }
+}
+
 await getRights(true);
 </script>

components/menu/MenuRights.vue

@@ -1,118 +1,156 @@
 <template>
   <div class="has-text-black">
-    <div>{{ row.username }} / {{ row.fullname }} {{$lang('access-right')}}:</div>
+    <div>{{ row.username }} / {{ row.fullname }} {{ $lang("access-right") }}:</div>
     <div class="mt-2">
       <span class="icon-text mr-6" v-for="v in options">
         <a @click="changeOption(v)">
-          <SvgIcon v-bind="{name: option===v.code? 'radio-checked.svg' : 'radio-unchecked.svg', type: option===v.code? 'blue' : 'gray', size: 25}" />
+          <SvgIcon
+            v-bind="{
+              name: option === v.code ? 'radio-checked.svg' : 'radio-unchecked.svg',
+              type: option === v.code ? 'blue' : 'gray',
+              size: 25,
+            }"
+          />
         </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">
-  <ul class="menu-list" v-for="v in topmenu">
-    <li>
-      <div class="field is-grouped has-background-light has-text-black py-2 px-3">
-        <div class="control is-expanded"><b>{{ v[$store.lang] }}</b></div>
-        <div class="control" v-if="v.submenu.length===0 && option==='limit'">
-          <span class="ml-6 is-clickable" @click="changeTick(v)">
-          <SvgIcon v-bind="{name: v.checked? 'checked.svg' : 'uncheck.svg', type: v.checked? 'blue' : 'gray', size: 25}"></SvgIcon>
-          </span>
-        </div>
-      </div>
-      <ul>
-        <li class="border-bottom" v-for="x in v.submenu">
-          <div class="field is-grouped py-1">
+      <ul class="menu-list" v-for="v in topmenu">
+        <li>
+          <div class="field is-grouped has-background-light has-text-black py-2 px-3">
             <div class="control is-expanded">
-            <span class="icon-text">
-              <span>{{ x[$store.lang] }}</span>
-            </span>
-          </div>
-            <div class="control" v-if="option==='limit'">
-               <span class="ml-6 is-clickable" @click="changeTick(x, v)">
-              <SvgIcon v-bind="{name: x.checked? 'checked.svg' : 'uncheck.svg', type: x.checked? 'blue' : 'gray', size: 25}"></SvgIcon>
+              <b>{{ v[$store.lang] }}</b>
+            </div>
+            <div class="control" v-if="v.submenu.length === 0 && option === 'limit'">
+              <span class="ml-6 is-clickable" @click="changeTick(v)">
+                <SvgIcon
+                  v-bind="{
+                    name: v.checked ? 'checked.svg' : 'uncheck.svg',
+                    type: v.checked ? 'blue' : 'gray',
+                    size: 25,
+                  }"
+                ></SvgIcon>
               </span>
             </div>
           </div>
+          <ul>
+            <li class="border-bottom" v-for="x in v.submenu">
+              <div class="field is-grouped py-1">
+                <div class="control is-expanded">
+                  <span class="icon-text">
+                    <span>{{ x[$store.lang] }}</span>
+                  </span>
+                </div>
+                <div class="control" v-if="option === 'limit'">
+                  <span class="ml-6 is-clickable" @click="changeTick(x, v)">
+                    <SvgIcon
+                      v-bind="{
+                        name: x.checked ? 'checked.svg' : 'uncheck.svg',
+                        type: x.checked ? 'blue' : 'gray',
+                        size: 25,
+                      }"
+                    ></SvgIcon>
+                  </span>
+                </div>
+              </div>
+            </li>
+          </ul>
         </li>
       </ul>
-    </li>
-    </ul>
-</aside>
+    </aside>
   </div>
 </template>
 <script setup>
-  const { $copy, $getdata, $filter, $find, $insertapi, $deleteapi } = useNuxtApp()
-  const props = defineProps({
-    row: Object,
-    api: String,
-    setting: String
-  })
-  const options = [{code: 'all', name: 'Tất cả tính năng', en: 'All functions'}, {code: 'limit', name: 'Bị giới hạn', en: 'Limited functions'}]
-  var option = ref('limit')
-  const rows = await $getdata(props.setting, {category__in: ['topmenu', 'submenu']})
-  var topmenu = ref([])
-  var loanRights = []
-  async function getRights(first) {
-    loanRights = await $getdata(props.api, {user: props.row.id})
-    if(loanRights.length==0 && first) option.value = 'all'
-    var rights = $filter(rows, {category: 'topmenu'})
-    rights.map(v=>{
-      let arr = $filter(rows, {category: 'submenu', classify: v.code})
-      arr.map(x=>{
-        let found = $find(loanRights, {setting: x.id})
-        if(found) {
-          x.rightId = found.id
-          x.checked = true
-        }
-      })
-      let found = $find(loanRights, {setting: v.id})
-      if(found) v.rightId = found.id
-      if(arr.length===0) {
-        v.checked = found? true : false
-      } else v.checked = true
-      v.submenu = arr
-    })
-    topmenu.value = rights
-  }
-  async function changeTick(x, v) {
-    if(x.checked) {
-      if(x.rightId) {
-        await $deleteapi(props.api, x.rightId)
-        x.rightId = null
+const { $copy, $getdata, $filter, $find, $insertapi, $deleteapi } = useNuxtApp();
+const props = defineProps({
+  row: Object,
+  api: String,
+  setting: String,
+});
+const options = [
+  { code: "all", name: "Tất cả tính năng", en: "All functions" },
+  { code: "limit", name: "Bị giới hạn", en: "Limited functions" },
+];
+var option = ref("limit");
+const rows = await $getdata(props.setting, { category__in: ["topmenu", "submenu"] });
+var topmenu = ref([]);
+var loanRights = [];
+async function getRights(first) {
+  loanRights = await $getdata(props.api, { user: props.row.id });
+  if (loanRights.length == 0 && first) option.value = "all";
+  var rights = $filter(rows, { category: "topmenu" });
+  rights.map((v) => {
+    let arr = $filter(rows, { category: "submenu", classify: v.code });
+    arr.map((x) => {
+      let found = $find(loanRights, { setting: x.id });
+      if (found) {
+        x.rightId = found.id;
+        x.checked = true;
       }
-      x.checked = false
-      if(v? v.rightId>0 : false) {
-        let idx = v.submenu.findIndex(h=>h.checked)
-        if(idx<0) {
-          await $deleteapi(props.api, v.rightId)
-          v.checked = false
-        }
-      }
-    } else {
-      let obj = await $insertapi(props.api, {setting: x.id, user: props.row.id}, undefined, false)
-      if(obj) {
-        x.checked = true
-        x.rightId = obj.id
-      }
-      x.checked = true
-      if(v? !v.rightId : false) {
-        let obj = await $insertapi(props.api, {setting: v.id, user: props.row.id}, undefined, false)
-        if(obj) {
-          v.rightId = obj.rightId
-          v.checked = true
-        }
+    });
+    let found = $find(loanRights, { setting: v.id });
+    if (found) v.rightId = found.id;
+    if (arr.length === 0) {
+      v.checked = found ? true : false;
+    } else v.checked = true;
+    v.submenu = arr;
+  });
+  topmenu.value = rights;
+}
+async function changeTick(x, v) {
+  if (x.checked) {
+    if (x.rightId) {
+      await $deleteapi(props.api, x.rightId);
+      x.rightId = null;
+    }
+    x.checked = false;
+    if (v ? v.rightId > 0 : false) {
+      let idx = v.submenu.findIndex((h) => h.checked);
+      if (idx < 0) {
+        await $deleteapi(props.api, v.rightId);
+        v.checked = false;
       }
     }
-    topmenu.value = $copy(topmenu.value)
-  }
-  async function changeOption(v) {
-    option.value = v.code
-    if(v.code==='all') {
-      if(loanRights.length>0) await $deleteapi(props.api, loanRights)
-    } else {
-      await getRights()
+  } else {
+    let obj = await $insertapi(props.api, { setting: x.id, user: props.row.id }, undefined, false);
+    if (obj) {
+      x.checked = true;
+      x.rightId = obj.id;
+    }
+    x.checked = true;
+    if (v ? !v.rightId : false) {
+      let obj = await $insertapi(props.api, { setting: v.id, user: props.row.id }, undefined, false);
+      if (obj) {
+        v.rightId = obj.rightId;
+        v.checked = true;
+      }
     }
   }
-  await getRights(true)
+  topmenu.value = $copy(topmenu.value);
+}
+async function changeOption(v) {
+  option.value = v.code;
+  loanRights = await $getdata(props.api, { user: props.row.id });
+
+  if (v.code === "all") {
+    if (loanRights?.length > 0) {
+      await Promise.all(loanRights.map((item) => $deleteapi(props.api, item.id)));
+    }
+
+    topmenu.value.forEach((p) => {
+      p.checked = false;
+      p.rightId = null;
+      p.submenu?.forEach((s) => {
+        s.checked = false;
+        s.rightId = null;
+      });
+    });
+
+    topmenu.value = [...topmenu.value];
+  } else {
+    await getRights();
+  }
+}
+await getRights(true);
 </script>