changes

app/components/viewer/Rights.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { isEqual } from "es-toolkit";
+
+const store = useStore();
+const { $copy, $snackbar } = useNuxtApp();
+
+const localMenu = ref($copy(store.menu));
+
+function save() {
+  store.menu = $copy(localMenu.value);
+  localMenu.value = $copy(store.menu);
+  $snackbar("Đã cập nhật phân quyền");
+}
+</script>
+
+<template>
+  <div style="max-width: 800px; margin-inline: auto">
+    <table class="table is-fullwidth is-hoverable is-bordered fs-14 mb-4">
+      <thead>
+        <tr style="background-color: #e4fff0">
+          <th>
+            <SvgIcon v-bind="{ name: 'visibility.svg', size: 20 }" />
+          </th>
+          <th>Menu</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="m in localMenu"
+          :key="m.id"
+          @click="m.view = !m.view"
+          class="is-clickable"
+        >
+          <td>
+            <label class="checkbox">
+              <input
+                type="checkbox"
+                :disabled="localMenu.filter((menu) => menu.view).length === 1 && m.view"
+                v-model="m.view"
+              />
+            </label>
+          </td>
+          <td>
+            <div class="is-flex is-justify-content-space-between is-align-items-center">
+              <p>{{ m.vi }}</p>
+              <p class="fs-13 has-text-grey">{{ m.code }}</p>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="block">
+      <button
+        :disabled="isEqual(store.menu, localMenu)"
+        @click="save"
+        class="button is-primary"
+      >
+        <span class="icon">
+          <SvgIcon v-bind="{ name: 'save.svg', type: 'white', size: 19 }" />
+        </span>
+        <span>Lưu thay đổi</span>
+      </button>
+    </div>
+  </div>
+</template>