From c8b60487d74003fd273ef03164ed4e2543267fd7 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 7 Aug 2023 18:42:34 +0100
Subject: [PATCH] tableCellHeadCheck cmp

---
 src/lib/elements/table/cellHeadCheck.svelte   | 33 +++++++++++++++++++
 src/lib/elements/table/index.ts               |  1 +
 .../collection-[collection]/table.svelte      | 25 +++-----------
 .../database-[database]/table.svelte          | 16 +++------
 .../project-[project]/databases/table.svelte  | 16 +++------
 5 files changed, 46 insertions(+), 45 deletions(-)
 create mode 100644 src/lib/elements/table/cellHeadCheck.svelte

diff --git a/src/lib/elements/table/cellHeadCheck.svelte b/src/lib/elements/table/cellHeadCheck.svelte
new file mode 100644
index 000000000..9ef8a22d7
--- /dev/null
+++ b/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>
diff --git a/src/lib/elements/table/index.ts b/src/lib/elements/table/index.ts
index c702ca645..90c7b65e2 100644
--- a/src/lib/elements/table/index.ts
+++ b/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';
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 0af982e7d..38dcee9af 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/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}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
index f453cd26e..e045bdbcb 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/table.svelte
+++ b/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>
diff --git a/src/routes/console/project-[project]/databases/table.svelte b/src/routes/console/project-[project]/databases/table.svelte
index 76bde33b1..7b636eb68 100644
--- a/src/routes/console/project-[project]/databases/table.svelte
+++ b/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>