Changes Update MenuViewCheck

components/menu/MenuViewRights.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="mt-2">
       <span class="icon-text mr-6" v-for="v in options">
-        <span>
+        <span :class="{ disabled: !(option === v.code) }">
           <SvgIcon
             v-bind="{
               name: option === v.code ? 'radio-checked.svg' : 'radio-unchecked.svg',
@@ -26,7 +26,7 @@
               <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)">
+              <span class="ml-6 is-clickable" :class="{ disabled: v.submenu.length === 0 && option === 'limit' }">
                 <SvgIcon
                   v-bind="{
                     name: v.checked ? 'checked.svg' : 'uncheck.svg',
@@ -37,7 +37,7 @@
               </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ả">
+              <span class="ml-6 is-clickable" title="Xem">
                 <SvgIcon
                   v-bind="{
                     name: 'view.svg',
@@ -46,7 +46,7 @@
                   }"
                 ></SvgIcon>
               </span>
-              <span class="ml-6 is-clickable" @click="changeEditAll(v)" title="Chọn tất cả">
+              <span class="ml-6 is-clickable" title="Sửa">
                 <SvgIcon
                   v-bind="{
                     name: 'edit1.svg',
@@ -66,7 +66,7 @@
                   </span>
                 </div>
                 <div class="control" v-if="option === 'limit'">
-                  <span class="ml-6 is-clickable" title="Xem thông tin">
+                  <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',
@@ -75,7 +75,11 @@
                       }"
                     />
                   </span>
-                  <span class="ml-6 is-clickable" title="Chỉnh sửa thông tin">
+                  <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',
@@ -159,9 +163,14 @@ async function getRights(first) {
 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>