Feat: Bulk Deletion

src/lib/components/floatingActionBar.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { portal } from '$lib/actions/portal';
+    import { fly } from 'svelte/transition';
+
+    export let show = false;
+</script>
+
+{#if show}
+    <div class="floating-action-bar" transition:fly|local={{ y: '6rem' }} use:portal>
+        <slot />
+    </div>
+{/if}
+
+<style lang="scss">
+    .floating-action-bar {
+        position: fixed;
+        bottom: 2rem;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 100;
+
+        border-radius: 0.5rem;
+        padding: 0.75rem 1rem;
+    }
+
+    :global(.theme-dark) .floating-action-bar {
+        border: 1px solid hsl(var(--color-neutral-200));
+        background: hsl(var(--color-neutral-300));
+        box-shadow: 0px 6px 16px 8px #14141f;
+    }
+
+    :global(.theme-light) .floating-action-bar {
+        border: 1px solid hsl(var(--color-neutral-30));
+        background: hsl(var(--color-neutral-0));
+        box-shadow: 0px 6px 16px 0px rgba(55, 59, 77, 0.14);
+    }
+</style>

src/lib/components/index.ts

@@ -54,5 +54,5 @@ export { default as ClickableListItem } from './clickableListItem.svelte';
 export { default as Id } from './id.svelte';
 export { default as EyebrowHeading } from './eyebrowHeading.svelte';
 export { default as SvgIcon } from './svgIcon.svelte';
-
 export { default as MigrationBox } from './migrationBox.svelte';
+export { default as FloatingActionBar } from './floatingActionBar.svelte';

src/lib/constants.ts

@@ -34,7 +34,8 @@ export enum Dependencies {
     DOMAINS = 'dependency:domains',
     WEBHOOK = 'dependency:webhook',
     WEBHOOKS = 'dependency:webhooks',
-    MIGRATIONS = 'dependency:migrations'
+    MIGRATIONS = 'dependency:migrations',
+    COLLECTIONS = 'dependency:collections'
 }
 
 export const scopes: {

src/lib/elements/forms/inputCheckbox.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import { FormItem, Helper, Label } from '.';
 
-    export let label: string;
+    export let label: string | undefined = undefined;
     export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let id: string;
     export let value = false;
+    export let indeterminate = false;
     export let required = false;
     export let disabled = false;
 
@@ -27,19 +28,23 @@
 </script>
 
 <FormItem>
-    <Label {required} {optionalText} hide={!showLabel} for={id}>
-        {label}
-    </Label>
+    {#if label}
+        <Label {required} {optionalText} hide={!showLabel} for={id}>
+            {label}
+        </Label>
+    {/if}
 
     <div class="input-text-wrapper">
         <input
             {id}
             {disabled}
             {required}
+            {indeterminate}
             type="checkbox"
             bind:this={element}
             bind:checked={value}
-            on:invalid={handleInvalid} />
+            on:invalid={handleInvalid}
+            on:click />
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>

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

src/lib/elements/table/tableScroll.svelte

@@ -2,6 +2,7 @@
     import type { Action } from 'svelte/action';
 
     export let isSticky = false;
+    export let noMargin = false;
     let isOverflowing = false;
 
     const hasOverflow: Action<HTMLDivElement> = (node) => {
@@ -37,8 +38,8 @@
     };
 </script>
 
-<div class="table-with-scroll u-margin-block-start-32" data-private>
-    <div class="table-wrapper" use:hasOverflow>
+<div class="table-with-scroll {noMargin ? '' : 'u-margin-block-start-32'}" data-private>
+    <div class="table-wrapper" use:hasOverflow={(v) => (isOverflowing = v)}>
         <table class="table" class:is-sticky-scroll={isSticky && isOverflowing}>
             <slot />
         </table>

src/lib/helpers/array.ts

@@ -88,3 +88,11 @@ export function excludeArray<T, E extends T>(
 export function includesAll<T>(arr1: T[], arr2: T[]): boolean {
     return arr2.every((elem) => arr1.includes(elem));
 }
+
+export function toggle<T>(arr: T[], elem: T): T[] {
+    if (arr.includes(elem)) {
+        return arr.filter((e) => e !== elem);
+    }
+    arr.push(elem);
+    return arr;
+}

src/lib/helpers/types.ts

@@ -1,6 +1,16 @@
 import type { Writable } from 'svelte/store';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DeepKeys<T extends Record<string, any>> = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [K in keyof T]: T[K] extends Record<string, any> ? `${K}.${DeepKeys<T[K]>}` : K;
 }[keyof T];
 export type WritableValue<T> = T extends Writable<infer U> ? U : never;
+
+export function isHTMLElement(el: unknown): el is HTMLElement {
+    return el instanceof HTMLElement;
+}
+
+export function isHTMLInputElement(el: unknown): el is HTMLInputElement {
+    return el instanceof HTMLInputElement;
+}

src/routes/console/project-[project]/databases/+page.ts

@@ -1,10 +1,11 @@
-import { CARD_LIMIT } from '$lib/constants';
+import { CARD_LIMIT, Dependencies } from '$lib/constants';
 import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ url, route }) => {
+export const load: PageLoad = async ({ url, route, depends }) => {
+    depends(Dependencies.DATABASES);
     const page = getPage(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const view = getView(url, route, View.Grid);

src/routes/console/project-[project]/databases/database-[database]/+page.ts

@@ -2,9 +2,10 @@ import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
 import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
 import type { PageLoad } from './$types';
-import { CARD_LIMIT } from '$lib/constants';
+import { CARD_LIMIT, Dependencies } from '$lib/constants';
 
-export const load: PageLoad = async ({ params, url, route }) => {
+export const load: PageLoad = async ({ params, url, route, depends }) => {
+    depends(Dependencies.COLLECTIONS);
     const page = getPage(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const view = getView(url, route, View.Grid);