system/components/menu/MenuRights.vue

<template>
  <div class="has-text-black">
    <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,
            }"
          />
        </a>
        <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">
                <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>
    </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;
    }
    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;
      }
    }
  }
  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>