diff --git a/.gitignore b/.gitignore index b48046270..27cc4e27e 100644 --- a/.gitignore +++ b/.gitignore @@ -145,6 +145,4 @@ dist .stylelintcache # SvelteKit build / generate output -.svelte-kit - - +.svelte-kit \ No newline at end of file diff --git a/package.json b/package.json index b65c4f9a8..c723a13bc 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,6 @@ "eslint-plugin-svelte": "^2.33.0", "jsdom": "^22.1.0", "kleur": "^4.1.5", - "pre-commit": "^1.2.2", "prettier": "^3.0.3", "prettier-plugin-svelte": "^3.0.3", "sass": "^1.66.1", @@ -71,8 +70,5 @@ "vite": "^4.4.9", "vitest": "^0.29.7" }, - "type": "module", - "pre-commit": [ - "lint" - ] + "type": "module" } diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte index 3b5ce24e7..6e4d3d2de 100644 --- a/src/lib/commandCenter/panels/template.svelte +++ b/src/lib/commandCenter/panels/template.svelte @@ -382,9 +382,9 @@ } :global(.theme-dark) .card { - --cmd-center-bg: hsl(var(--color-neutral-100-new)); + --cmd-center-bg: hsl(var(--color-neutral-100)); --cmd-center-border: hsl(var(--color-neutral-150)); - --cmd-center-shadow: 0px 16px 32px 0px hsl(var(--color-neutral-110-new)); + --cmd-center-shadow: 0px 16px 32px 0px hsl(var(--color-neutral-110)); --kbd-bg: hsl(var(--color-neutral-150)); @@ -394,8 +394,8 @@ --result-bg: hsl(var(--color-neutral-200)); --footer-bg: linear-gradient( 180deg, - hsl(var(--color-neutral-100-new)) 0%, - hsl(var(--color-neutral-85-new)) 100% + hsl(var(--color-neutral-100)) 0%, + hsl(var(--color-neutral-85)) 100% ); --icon-color: hsl(var(--color-neutral-70)); diff --git a/src/lib/components/empty.svelte b/src/lib/components/empty.svelte index fdf02c75a..905009109 100644 --- a/src/lib/components/empty.svelte +++ b/src/lib/components/empty.svelte @@ -7,6 +7,7 @@ import { trackEvent } from '$lib/actions/analytics'; export let single = false; + export let noMedia = false; export let target: string = null; export let href: string = null; @@ -23,21 +24,23 @@
- + {#if !noMedia} + + {/if}
- Create your first {target} to get started. + Create a {target} to get started.

Need a hand? Learn more in our documentation. @@ -49,7 +52,7 @@ {href} text event="empty_documentation" - ariaLabel={`create {target}`}>Documentation + ariaLabel="create {target}">Documentation diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte b/src/lib/components/filters/content.svelte similarity index 83% rename from src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte rename to src/lib/components/filters/content.svelte index 19b464b67..6da14dcc6 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte +++ b/src/lib/components/filters/content.svelte @@ -4,8 +4,11 @@ import InputText from '$lib/elements/forms/inputText.svelte'; import { Query } from '@appwrite.io/console'; import { createEventDispatcher } from 'svelte'; - import { columns } from '../store'; - import { tags, type Column, type Operator, queries } from './store'; + import { tags, type Operator, queries } from './store'; + import type { Column } from '$lib/helpers/types'; + import type { Writable } from 'svelte/store'; + + export let columns: Writable; const dispatch = createEventDispatcher<{ clear: void; @@ -31,22 +34,22 @@ 'greater than': { toQuery: (attr, input) => Query.greaterThan(attr, Number(input)), toTag: (attribute, input) => `**${attribute}** greater than **${input}**`, - types: ['integer', 'double'] + types: ['integer', 'double', 'datetime'] }, 'greater than or equal to': { toQuery: (attr, input) => Query.greaterThanEqual(attr, Number(input)), toTag: (attribute, input) => `**${attribute}** greater than or equal to **${input}**`, - types: ['integer', 'double'] + types: ['integer', 'double', 'datetime'] }, 'less than': { toQuery: Query.lessThan, toTag: (attribute, input) => `**${attribute}** less than **${input}**`, - types: ['integer', 'double'] + types: ['integer', 'double', 'datetime'] }, 'less than or equal to': { toQuery: Query.lessThanEqual, toTag: (attribute, input) => `**${attribute}** less than or equal to **${input}**`, - types: ['integer', 'double'] + types: ['integer', 'double', 'datetime'] }, equal: { toQuery: Query.equal, @@ -97,19 +100,17 @@ // This Map is keyed by tags, and has a query as the value function addFilter() { - if (column && operator) { - queries.addFilter({ column, operator, value }); - value = null; - } + if (!column || !operator) return; + + queries.addFilter({ column, operator, value: value ?? '' }); + value = null; } function tagFormat(node: HTMLElement) { node.innerHTML = node.innerHTML.replace(/\*\*(.*?)\*\*/g, '$1'); } - $: isDisabled = (function getDisabled() { - return !operator || (!operator?.hideInput && !value); - })(); + $: isDisabled = !operator;

@@ -134,6 +135,16 @@
{#if column.type === 'integer' || column.type === 'double'} + {:else if column.type === 'boolean'} + {:else} {/if} diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte b/src/lib/components/filters/filters.svelte similarity index 84% rename from src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte rename to src/lib/components/filters/filters.svelte index 7aa33e497..cd2f8bfd9 100644 --- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte +++ b/src/lib/components/filters/filters.svelte @@ -2,8 +2,16 @@ import { beforeNavigate } from '$app/navigation'; import { Drop, Modal } from '$lib/components'; import { Button } from '$lib/elements/forms'; + import type { Column } from '$lib/helpers/types'; + import type { Writable } from 'svelte/store'; import Content from './content.svelte'; - import { queries, queriesAreDirty, tags } from './store'; + import { queries, queriesAreDirty, queryParamToMap, tags } from './store'; + + export let query = '[]'; + export let columns: Writable; + + const parsedQueries = queryParamToMap(query); + queries.set(parsedQueries); // We need to separate them so we don't trigger Drop's handlers let showFiltersDesktop = false; @@ -33,6 +41,7 @@

Apply filter rules to refine the table view

(applied = e.detail.applied)} on:clear={() => (applied = 0)} />
@@ -61,7 +70,10 @@ description="Apply filter rules to refine the table view" bind:show={showFiltersMobile} size="big"> - (applied = e.detail.applied)} on:clear={() => (applied = 0)} /> + (applied = e.detail.applied)} + on:clear={() => (applied = 0)} /> = Store extends Writable ? T : never; -export type Column = Omit[number], 'type'> & { - type: ColumnType; -}; +import type { Column, ColumnType } from '$lib/helpers/types'; export type Operator = { toTag: (attribute: string, input?: string | number) => string; diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte index 636e713ca..6d123ef69 100644 --- a/src/lib/components/modal.svelte +++ b/src/lib/components/modal.svelte @@ -127,7 +127,7 @@ {/if}
-

+

{description} diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte index 3d2d36693..35abd34db 100644 --- a/src/lib/components/permissions/custom.svelte +++ b/src/lib/components/permissions/custom.svelte @@ -1,5 +1,5 @@ - -

- Custom permissions allow you to grant access to specific users or teams using their ID and - role. -

+ - - - A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸ - + + + + A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸ + + diff --git a/src/lib/components/permissions/label.svelte b/src/lib/components/permissions/label.svelte index 531c25284..b927b544f 100644 --- a/src/lib/components/permissions/label.svelte +++ b/src/lib/components/permissions/label.svelte @@ -1,5 +1,5 @@ - -

Labels allow you to grant access to users with the specfied label.

+ - - Only alphanumeric characters are allowed. + + + Only alphanumeric characters are allowed. + diff --git a/src/lib/components/permissions/roles.svelte b/src/lib/components/permissions/roles.svelte index 1ed3d626e..8412f8eeb 100644 --- a/src/lib/components/permissions/roles.svelte +++ b/src/lib/components/permissions/roles.svelte @@ -143,7 +143,7 @@
- Add a role to get started + Add a role
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte index c5987d501..0ece86889 100644 --- a/src/lib/components/viewSelector.svelte +++ b/src/lib/components/viewSelector.svelte @@ -1,12 +1,3 @@ - - @@ -43,7 +58,7 @@ {label} -
+
+ on:invalid={handleInvalid} + style:--amount-of-buttons={isNullable ? 2.75 : 1} + style:--button-size={isNullable ? '2rem' : '1rem'} /> + {#if isNullable} +
    +
  • + +
  • +
+ {/if}
{#if error} {error} diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte index fd8bd0a5c..cfb27a139 100644 --- a/src/lib/elements/forms/inputEmail.svelte +++ b/src/lib/elements/forms/inputEmail.svelte @@ -29,7 +29,7 @@ const handleInvalid = (event: Event) => { event.preventDefault(); if (element.validity.typeMismatch) { - error = 'Your email should be formatted as: name@example.com'; + error = 'Emails should be formatted as: name@example.com'; return; } if (element.validity.valueMissing) { diff --git a/src/lib/elements/table/cellCheck.svelte b/src/lib/elements/table/cellCheck.svelte index b71711819..9d3923d50 100644 --- a/src/lib/elements/table/cellCheck.svelte +++ b/src/lib/elements/table/cellCheck.svelte @@ -2,7 +2,6 @@ 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[] = []; @@ -30,9 +29,10 @@ tabindex="-1" on:click={handleClick} on:keypress={handleClick} /> - diff --git a/src/lib/elements/table/cellHeadCheck.svelte b/src/lib/elements/table/cellHeadCheck.svelte index d5cc4bef6..6b634e982 100644 --- a/src/lib/elements/table/cellHeadCheck.svelte +++ b/src/lib/elements/table/cellHeadCheck.svelte @@ -1,8 +1,6 @@ - diff --git a/src/lib/helpers/load.ts b/src/lib/helpers/load.ts index 6478fcd9f..2b3103507 100644 --- a/src/lib/helpers/load.ts +++ b/src/lib/helpers/load.ts @@ -32,6 +32,10 @@ export function getSearch(url: URL): string | undefined { return url.searchParams.get('search') ?? undefined; } +export function getQuery(url: URL): string | undefined { + return url.searchParams.get('query') ?? undefined; +} + type TabElement = { href: string; title: string; hasChildren?: boolean }; export function isTabSelected( diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts index e0e822c27..b6d02e7a1 100644 --- a/src/lib/helpers/types.ts +++ b/src/lib/helpers/types.ts @@ -12,3 +12,13 @@ export function isHTMLInputElement(el: unknown): el is HTMLInputElement { // eslint-disable-next-line @typescript-eslint/ban-types export type Prettify = T & {}; + +const columnTypes = ['string', 'integer', 'double', 'boolean', 'datetime', 'relationship'] as const; +export type ColumnType = (typeof columnTypes)[number]; +export type Column = { + id: string; + title: string; + type: ColumnType; + show: boolean; + width?: number; +}; diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte index 76997fea4..c1b979a80 100644 --- a/src/lib/layout/footer.svelte +++ b/src/lib/layout/footer.svelte @@ -24,6 +24,11 @@ {/if}
+