fix: Added select all in UIAcl

packages/nc-gui/components/dashboard/settings/UIAcl.vue

@@ -16,6 +16,8 @@ import {
   useNuxtApp,
 } from '#imports'
 
+type Role = 'editor' | 'commenter' | 'viewer'
+
 const props = defineProps<{
   sourceId: string
 }>()
@@ -39,6 +41,12 @@ const tables = ref<any[]>([])
 
 const searchInput = ref('')
 
+const selectAll = ref({
+  editor: false,
+  commenter: false,
+  viewer: false,
+})
+
 const filteredTables = computed(() =>
   tables.value.filter(
     (el) =>
@@ -80,15 +88,21 @@ async function saveUIAcl() {
   $e('a:proj-meta:ui-acl')
 }
 
-const onRoleCheck = (record: any, role: string) => {
+const onRoleCheck = (record: any, role: Role) => {
   record.disabled[role] = !record.disabled[role]
   record.edited = true
+
+  selectAll.value[role as Role] = filteredTables.value.every((t) => !t.disabled[role])
 }
 
 onMounted(async () => {
   if (tables.value.length === 0) {
     await loadTableList()
   }
+
+  for (const role of roles.value) {
+    selectAll.value[role as Role] = filteredTables.value.every((t) => !t.disabled[role])
+  }
 })
 
 const tableHeaderRenderer = (label: string) => () => h('div', { class: 'text-gray-500' }, label)
@@ -118,6 +132,16 @@ const columns = [
     width: 120,
   },
 ]
+
+const toggleSelectAll = (role: Role) => {
+  selectAll.value[role] = !selectAll.value[role]
+  const enabled = selectAll.value[role]
+
+  filteredTables.value.forEach((t) => {
+    t.disabled[role] = !enabled
+    t.edited = true
+  })
+}
 </script>
 
 <template>
@@ -163,6 +187,17 @@ const columns = [
             })
           "
         >
+          <template #headerCell="{ column }">
+            <template v-if="['editor', 'commenter', 'viewer'].includes(column.name)">
+              <div class="flex flex-row gap-x-1">
+                <NcCheckbox :checked="selectAll[column.name as Role]" @change="() => toggleSelectAll(column.name)" />
+                <div class="flex capitalize">
+                  {{ column.name }}
+                </div>
+              </div>
+            </template>
+            <template v-else>{{ column.name }}</template>
+          </template>
           <template #emptyText>
             <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
           </template>
@@ -202,10 +237,10 @@ const columns = [
                     >
                   </template>
 
-                  <a-checkbox
+                  <NcCheckbox
                     :checked="!record.disabled[role]"
-                    :class="`nc-acl-${record.title}-${role}-chkbox`"
-                    @change="onRoleCheck(record, role)"
+                    :class="`nc-acl-${record.title}-${role}-chkbox !ml-0.25`"
+                    @change="onRoleCheck(record, role as Role)"
                   />
                 </a-tooltip>
               </div>