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);