Changes Update MenuGroupRights
This commit is contained in:
Thien Pham Van
@@ -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">
|
||||
<a @click="changeOption(v)">
|
||||
<span class="icon-text mr-6" v-for="v in options" @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: "limit", name: "Bị giới hạn", en: "Limited 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' },
|
||||
];
|
||||
|
||||
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 =====
|
||||
if (v.checked) {
|
||||
const hasSubmenu = v?.submenu?.length > 0;
|
||||
|
||||
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 (v?.submenu?.length) {
|
||||
await Promise.all(
|
||||
v.submenu.map(async (item) => {
|
||||
if (item.rightId) {
|
||||
await $deleteapi(props.api, item.rightId);
|
||||
if (hasSubmenu) {
|
||||
const needDelete = v.submenu.filter((item) => item.rightId);
|
||||
|
||||
await Promise.all(needDelete.map((item) => $deleteapi(props.api, item.rightId)));
|
||||
|
||||
// Update state local
|
||||
v.submenu.forEach((item) => {
|
||||
item.rightId = null;
|
||||
}
|
||||
item.checked = 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ó
|
||||
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;
|
||||
}
|
||||
|
||||
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.checked) {
|
||||
if (!v?.submenu?.length) return;
|
||||
|
||||
const isAllEdit = v.submenu.every((item) => item.is_edit === true);
|
||||
const newEditState = !isAllEdit;
|
||||
|
||||
// Parent luôn phải được check
|
||||
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
|
||||
// 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) {
|
||||
// ===== 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(
|
||||
v.submenu.map(async (item) => {
|
||||
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: true },
|
||||
{
|
||||
setting: item.id,
|
||||
group: props.row.id,
|
||||
is_edit: newEditState,
|
||||
},
|
||||
undefined,
|
||||
false
|
||||
false,
|
||||
);
|
||||
|
||||
if (obj) item.rightId = obj.id;
|
||||
|
||||
item.checked = true;
|
||||
item.is_edit = true;
|
||||
})
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Force Vue reactive update
|
||||
// ===== 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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user