refactor: pr changes

src/lib/elements/table/cellCheck.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { toggle } from '$lib/helpers/array';
+    import { isHTMLInputElement } from '$lib/helpers/types';
+    import { TableCell } from '.';
+    import { InputCheckbox } from '../forms';
+
+    export let id: string;
+    export let selectedIds: string[] = [];
+</script>
+
+<TableCell>
+    <InputCheckbox
+        id="select-{id}"
+        value={selectedIds.includes(id)}
+        on:click={(e) => {
+            // Prevent the link from being followed
+            e.preventDefault();
+            const el = e.currentTarget;
+            if (!isHTMLInputElement(el)) return;
+
+            selectedIds = toggle(selectedIds, id);
+
+            // Hack to make sure the checkbox is checked, independent of the
+            // preventDefault() call above
+            window.setTimeout(() => {
+                el.checked = selectedIds.includes(id);
+            });
+        }} />
+</TableCell>

src/lib/elements/table/index.ts

@@ -13,3 +13,4 @@ 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';
+export { default as TableCellCheck } from './cellCheck.svelte';

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

@@ -2,11 +2,15 @@
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { tooltip } from '$lib/actions/tooltip';
-    import { Id } from '$lib/components';
+    import { Alert, FloatingActionBar, Id, Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, InputChoice } from '$lib/elements/forms';
     import {
         TableBody,
         TableCell,
+        TableCellCheck,
         TableCellHead,
         TableCellHeadCheck,
         TableCellText,
@@ -15,25 +19,15 @@
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
+    import { addNotification } from '$lib/stores/notifications';
     import { preferences } from '$lib/stores/preferences';
+    import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import type { PageData } from './$types';
     import { isRelationship, isRelationshipToMany } from './document-[document]/attributes/store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import { attributes, collection, columns } from './store';
-    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
-    import { isHTMLInputElement } from '$lib/helpers/types';
-    import { toggle } from '$lib/helpers/array';
-    import { sdk } from '$lib/stores/sdk';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { addNotification } from '$lib/stores/notifications';
-    import { Dependencies } from '$lib/constants';
-    import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
-    import Button from '$lib/elements/forms/button.svelte';
-    import Modal from '$lib/components/modal.svelte';
-    import Alert from '$lib/components/alert.svelte';
-    import InputChoice from '$lib/elements/forms/inputChoice.svelte';
 
     export let data: PageData;
 
@@ -159,25 +153,7 @@
         {#each data.documents.documents as document}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`}>
-                <TableCell>
-                    <InputCheckbox
-                        id="select-{document.$id}"
-                        value={selectedDb.includes(document.$id)}
-                        on:click={(e) => {
-                            // Prevent the link from being followed
-                            e.preventDefault();
-                            const el = e.currentTarget;
-                            if (!isHTMLInputElement(el)) return;
-
-                            selectedDb = toggle(selectedDb, document.$id);
-
-                            // Hack to make sure the checkbox is checked, independent of the
-                            // preventDefault() call above
-                            window.setTimeout(() => {
-                                el.checked = selectedDb.includes(document.$id);
-                            });
-                        }} />
-                </TableCell>
+                <TableCellCheck bind:selectedIds={selectedDb} id={document.$id} />
 
                 <TableCell width={150}>
                     <Id value={document.$id}>

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

@@ -7,10 +7,10 @@
     import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
-    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
     import {
         TableBody,
         TableCell,
+        TableCellCheck,
         TableCellHead,
         TableCellHeadCheck,
         TableCellText,
@@ -18,9 +18,7 @@
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
-    import { toggle } from '$lib/helpers/array';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { isHTMLInputElement } from '$lib/helpers/types';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { PageData } from './$types';
@@ -76,25 +74,7 @@
         {#each data.collections.collections as collection}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${collection.$id}`}>
-                <TableCell>
-                    <InputCheckbox
-                        id="select-{collection.$id}"
-                        value={selected.includes(collection.$id)}
-                        on:click={(e) => {
-                            // Prevent the link from being followed
-                            e.preventDefault();
-                            const el = e.currentTarget;
-                            if (!isHTMLInputElement(el)) return;
-
-                            selected = toggle(selected, collection.$id);
-
-                            // Hack to make sure the checkbox is checked, independent of the
-                            // preventDefault() call above
-                            window.setTimeout(() => {
-                                el.checked = selected.includes(collection.$id);
-                            });
-                        }} />
-                </TableCell>
+                <TableCellCheck bind:selectedIds={selected} id={collection.$id} />
                 {#each $columns as column}
                     {#if column.show}
                         {#if column.id === '$id'}

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

@@ -6,8 +6,7 @@
     import { Id, Modal } from '$lib/components';
     import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
     import { Dependencies } from '$lib/constants';
-    import Button from '$lib/elements/forms/button.svelte';
-    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
+    import { Button } from '$lib/elements/forms';
     import {
         TableBody,
         TableCell,
@@ -16,11 +15,10 @@
         TableCellText,
         TableHeader,
         TableRowLink,
-        TableScroll
+        TableScroll,
+        TableCellCheck
     } from '$lib/elements/table';
-    import { toggle } from '$lib/helpers/array';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { isHTMLInputElement } from '$lib/helpers/types';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { PageData } from './$types';
@@ -73,25 +71,7 @@
         {#each data.databases.databases as database}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${database.$id}`}>
-                <TableCell>
-                    <InputCheckbox
-                        id="select-{database.$id}"
-                        value={selected.includes(database.$id)}
-                        on:click={(e) => {
-                            // Prevent the link from being followed
-                            e.preventDefault();
-                            const el = e.currentTarget;
-                            if (!isHTMLInputElement(el)) return;
-
-                            selected = toggle(selected, database.$id);
-
-                            // Hack to make sure the checkbox is checked, independent of the
-                            // preventDefault() call above
-                            window.setTimeout(() => {
-                                el.checked = selected.includes(database.$id);
-                            });
-                        }} />
-                </TableCell>
+                <TableCellCheck bind:selectedIds={selected} id={database.$id} />
                 {#each $columns as column}
                     {#if column.show}
                         {#if column.id === '$id'}