changes

components/menu/MenuRights.vue

@@ -0,0 +1,118 @@
+<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
+    if(v.code==='all') {
+      if(loanRights.length>0) await $deleteapi(props.api, loanRights)
+    } else {
+      await getRights()
+    }
+  }
+  await getRights(true)
+</script>