tableCellHeadCheck cmp

src/lib/elements/table/cellHeadCheck.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { isHTMLInputElement } from '$lib/helpers/types';
+
+    import { TableCellHead } from '.';
+    import { InputCheckbox } from '../forms';
+
+    export let selected: string[] = [];
+    export let pageItemsIds: string[] = [];
+
+    function handleClick(e: MouseEvent) {
+        if (!isHTMLInputElement(e.target)) return;
+        if (e.target.checked) {
+            const set = new Set(selected);
+            pageItemsIds.forEach((id) => set.add(id));
+            selected = Array.from(set);
+        } else {
+            selected = selected.filter((id) => {
+                return !pageItemsIds.includes(id);
+            });
+        }
+    }
+
+    $: someSelected = pageItemsIds.some((id) => selected.includes(id));
+    $: allSelected = pageItemsIds.every((id) => selected.includes(id));
+</script>
+
+<TableCellHead width={10}>
+    <InputCheckbox
+        id="select-all"
+        indeterminate={someSelected && !allSelected}
+        value={allSelected}
+        on:click={handleClick} />
+</TableCellHead>

src/lib/elements/table/index.ts

@@ -9,6 +9,7 @@ export { default as TableRowLink } from './rowLink.svelte';
 export { default as TableRowButton } from './rowButton.svelte';
 export { default as TableCell } from './cell.svelte';
 export { default as TableCellHead } from './cellHead.svelte';
+export { default as TableCellHeadCheck } from './cellHeadCheck.svelte';
 export { default as TableCellLink } from './cellLink.svelte';
 export { default as TableCellAvatar } from './cellAvatar.svelte';
 export { default as TableCellText } from './cellText.svelte';

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte

@@ -8,6 +8,7 @@
         TableBody,
         TableCell,
         TableCellHead,
+        TableCellHeadCheck,
         TableCellText,
         TableHeader,
         TableRow,
@@ -140,31 +141,13 @@
     ) as Models.AttributeRelationship[];
 
     let checked = false;
-
-    $: someSelectedDb = data.documents.documents.some((doc) => selectedDb.includes(doc.$id));
-    $: allSelectedDb = data.documents.documents.every((doc) => selectedDb.includes(doc.$id));
 </script>
 
 <TableScroll isSticky>
     <TableHeader>
-        <TableCellHead width={10}>
-            <InputCheckbox
-                id="select-all"
-                indeterminate={someSelectedDb && !allSelectedDb}
-                value={allSelectedDb}
-                on:click={(e) => {
-                    if (!isHTMLInputElement(e.target)) return;
-                    if (e.target.checked) {
-                        const set = new Set(selectedDb);
-                        data.documents.documents.forEach((doc) => set.add(doc.$id));
-                        selectedDb = Array.from(set);
-                    } else {
-                        selectedDb = selectedDb.filter((id) => {
-                            return !data.documents.documents.map((doc) => doc.$id).includes(id);
-                        });
-                    }
-                }} />
-        </TableCellHead>
+        <TableCellHeadCheck
+            bind:selected={selectedDb}
+            pageItemsIds={data.documents.documents.map((d) => d.$id)} />
         <TableCellHead width={150} eyebrow={false}>Document ID</TableCellHead>
         {#each $columns.filter((n) => n.show) as column}
             {#if column.show}

src/routes/console/project-[project]/databases/database-[database]/table.svelte

@@ -12,6 +12,7 @@
         TableBody,
         TableCell,
         TableCellHead,
+        TableCellHeadCheck,
         TableCellText,
         TableHeader,
         TableRowLink,
@@ -62,18 +63,9 @@
 
 <TableScroll>
     <TableHeader>
-        <TableCellHead width={10}>
-            <InputCheckbox
-                id="select-all"
-                indeterminate={selected.length > 0 && selected.length < data.collections.total}
-                value={selected.length === data.collections.total}
-                on:click={(e) => {
-                    if (!isHTMLInputElement(e.target)) return;
-                    selected = e.target.checked
-                        ? data.collections.collections.map((database) => database.$id)
-                        : [];
-                }} />
-        </TableCellHead>
+        <TableCellHeadCheck
+            bind:selected
+            pageItemsIds={data.collections.collections.map((c) => c.$id)} />
         {#each $columns as column}
             {#if column.show}
                 <TableCellHead width={column.width}>{column.title}</TableCellHead>

src/routes/console/project-[project]/databases/table.svelte

@@ -12,6 +12,7 @@
         TableBody,
         TableCell,
         TableCellHead,
+        TableCellHeadCheck,
         TableCellText,
         TableHeader,
         TableRowLink,
@@ -59,18 +60,9 @@
 
 <TableScroll>
     <TableHeader>
-        <TableCellHead width={10}>
-            <InputCheckbox
-                id="select-all"
-                indeterminate={selected.length > 0 && selected.length < data.databases.total}
-                value={selected.length === data.databases.total}
-                on:click={(e) => {
-                    if (!isHTMLInputElement(e.target)) return;
-                    selected = e.target.checked
-                        ? data.databases.databases.map((database) => database.$id)
-                        : [];
-                }} />
-        </TableCellHead>
+        <TableCellHeadCheck
+            bind:selected
+            pageItemsIds={data.databases.databases.map((c) => c.$id)} />
         {#each $columns as column}
             {#if column.show}
                 <TableCellHead width={column.width}>{column.title}</TableCellHead>