feat(gui-v2): option to select all rows

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -57,6 +57,7 @@ const {
   selectedRows,
   deleteRow,
   deleteSelectedRows,
+  selectedAllRecords,
 } = useViewData(meta, view as any, xWhere)
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
 onMounted(loadGridViewColumns)
@@ -189,8 +190,19 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
       <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
         <table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
-            <tr>
-              <th>#</th>
+            <tr class="group">
+              <th>
+                <div class="flex align-center">
+                  <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
+                  <div
+                    :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                    class="group-hover:flex w-full align-center"
+                  >
+                    <a-checkbox v-model:checked="selectedAllRecords" />
+                    <span class="flex-1" />
+                  </div>
+                </div>
+              </th>
               <th
                 v-for="col in fields"
                 :key="col.title"

packages/nc-gui-v2/composables/useViewData.ts

@@ -26,11 +26,19 @@ export function useViewData(
 ) {
   const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
-  const selectedRows = reactive([])
 
   const { project } = useProject()
   const { $api } = useNuxtApp()
 
+  const selectedAllRecords = computed({
+    get() {
+      return formattedData.value.every((row) => row.rowMeta.selected)
+    },
+    set(selected) {
+      formattedData.value.forEach((row) => (row.rowMeta.selected = selected))
+    },
+  })
+
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
     if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
     const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
@@ -223,9 +231,9 @@ export function useViewData(
     updateRowProperty,
     changePage,
     addEmptyRow,
-    selectedRows,
     deleteRow,
     deleteSelectedRows,
     updateOrSaveRow,
+    selectedAllRecords,
   }
 }