system/components/menu/MenuViewRights.vue

<template>
  <div class="has-text-black menu-view-rights">
    <div>
      {{ props.row.fullname }} / {{ isVietnamese ? props.row.type__name : props.row.type__en }}
      {{ $lang("access-right") }}:
    </div>
    <div class="mt-2">
      <span class="icon-text mr-6" v-for="v in options">
        <span :class="{ disabled: !(option === v.code) }">
          <SvgIcon
            v-bind="{
              name: option === v.code ? 'radio-checked.svg' : 'radio-unchecked.svg',
              type: option === v.code ? 'blue' : 'gray',
              size: 25,
            }"
          />
        </span>
        <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'" :class="{ disabled: !(v.checked) }">
              <span class="ml-6 is-clickable" >
                <SvgIcon
                  v-bind="{
                    name: v.checked ? 'checked.svg' : 'uncheck.svg',
                    type: v.checked ? 'blue' : 'gray',
                    size: 25,
                  }"
                ></SvgIcon>
              </span>
            </div>
            <div v-if="v.submenu.length > 0 && option === 'limit'">
              <span class="ml-6 is-clickable" title="Xem">
                <SvgIcon
                  v-bind="{
                    name: 'view.svg',
                    type: 'gray',
                    size: 25,
                  }"
                ></SvgIcon>
              </span>
              <span class="ml-6 is-clickable" title="Sửa">
                <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">
              <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" title="Xem thông tin" :class="{ disabled: !x.checked }">
                    <SvgIcon
                      v-bind="{
                        name: x.checked ? 'checked.svg' : 'uncheck.svg',
                        type: x.checked ? 'blue' : 'gray',
                        size: 25,
                      }"
                    />
                  </span>
                  <span
                    class="ml-6 is-clickable"
                    title="Chỉnh sửa thông tin"
                    :class="{ disabled: !(x.checked && x.is_edit === true) }"
                  >
                    <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>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </aside>
  </div>
</template>
<script setup>
const { $getdata, $filter, $find, $store } = useNuxtApp();

const props = defineProps({
  row: Object,
  api: String,
  setting: String,
});

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" },
];
const option = ref("limit");

const topmenu = ref([]);
let loanRights = [];

const rows = await $getdata(props.setting, {
  category__in: ["topmenu", "submenu"],
});

async function getRights(first) {
  loanRights = await $getdata(props.api, { group: props.row.type });
  if (loanRights.length === 0 && first) {
    option.value = "all";
  }
  const rights = $filter(rows, { category: "topmenu" });

  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.is_edit = !!foundParent?.is_edit;
      parent.submenu = subs;
    });
  topmenu.value = [...rights];
}
await getRights(true);
</script>

<style>
.menu-view-rights .is-clickable {
  cursor: default !important;
}

.menu-view-rights .disabled {
  cursor: not-allowed !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
}
</style>