Changes MenuViewCheck

components/menu/MenuViewCheck.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="mx-2">
+  <a @click="change()">
+    <SvgIcon v-bind="{name: check? 'checked.svg' : 'uncheck.svg', type: check? 'blue' : 'gray', size: 22}"></SvgIcon>
+  </a>
+    <a class="ml-5" @click="userRights" v-if="api && check">
+      <SvgIcon v-bind="{name: 'list.svg', type: check? 'blue' : 'gray', size: 20}"></SvgIcon>
+    </a>
+  </div>
+</template>
+<script setup>
+const { $insertapi, $deleteapi, $store } = useNuxtApp()
+const emit = defineEmits(["clickevent"])
+var props = defineProps({
+  appid: Number,
+  row: Object,
+  api: String,
+  setting: String
+})
+
+var check = ref(false)
+var current
+if(props.row) {
+  props.row.apps.map(v=>{
+    if(v.userapps__apps==props.appid) {
+      check.value = true
+      current = v
+    }
+  })
+}
+async function change() {
+  if(check.value) {
+    await $deleteapi('userapps', current.userapps__id)
+  } else {
+    let obj = {user: props.row.id, apps: props.appid}
+    await $insertapi('userapps', obj)
+  }
+  check.value = !check.value
+}
+function userRights() {
+  emit('clickevent', {name: 'dataevent', data: {modal: {title: $store.lang==='en'? 'User rights' :  'Phân quyền', 
+  height: '500px', width: '500px', component: 'menu/MenuViewRights', vbind: {row: props.row, api: props.api, setting: props.setting}}}})
+}
+</script>

components/menu/MenuViewRights.vue

@@ -0,0 +1,167 @@
+<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>
+          <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'">
+              <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 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">
+              <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">
+                    <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">
+                    <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,
+});
+
+console.log("row =====>", props.row);
+
+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 view = computed(() => {
+  return options.find((o) => o.code === option.value);
+});
+
+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;
+}
+</style>

plugins/04-components.js

@@ -28,10 +28,11 @@ import MenuStaff from '~/components/menu/MenuStaff.vue'
 import Configuration from '~/components/maintab/Configuration.vue'
 import MenuGroupCheck from '~/components/menu/MenuGroupCheck.vue'
 import DataDeletion from '~/components/maintab/DataDeletion.vue'
+import MenuViewCheck from '~/components/menu/MenuViewCheck.vue'
 
 const components = {Notebox, MenuAction, Datepicker, PickDay, ImageGallery, FileGallery, FileUpload, ChipImage, Avatarbox, 
 DataTable, Imagebox, Editor, InputPhone, InputEmail, InputNumber, DataView, FormatNumber, SvgIcon, MenuAdd, Configuration,
-MenuCheck, MenuCollab, MenuPhone, FormatDate, MenuUser, MenuCV, MenuStaff, MenuGroupCheck, DataDeletion}
+MenuCheck, MenuCollab, MenuPhone, FormatDate, MenuUser, MenuCV, MenuStaff, MenuGroupCheck, DataDeletion, MenuViewCheck}
 
 export default defineNuxtPlugin((nuxtApp) => {
   Object.entries(components).forEach(([name, component]) => {