diff --git a/src/lib/components/gridItem1.svelte b/src/lib/components/gridItem1.svelte index bcd096071..5fe8012a8 100644 --- a/src/lib/components/gridItem1.svelte +++ b/src/lib/components/gridItem1.svelte @@ -1,15 +1,15 @@ - - - +
@@ -22,7 +22,7 @@ - + diff --git a/src/lib/components/limit.svelte b/src/lib/components/limit.svelte index aa1d943a2..9c7c1d4ad 100644 --- a/src/lib/components/limit.svelte +++ b/src/lib/components/limit.svelte @@ -36,6 +36,6 @@

- {name} per page. Total results: {sum >= 5000 ? `${sum}+` : sum} + {name} per page. Total: {sum >= 5000 ? `${sum}+` : sum}

diff --git a/src/lib/layout/containerButton.svelte b/src/lib/layout/containerButton.svelte index e1cb46555..6d081807d 100644 --- a/src/lib/layout/containerButton.svelte +++ b/src/lib/layout/containerButton.svelte @@ -14,7 +14,7 @@ } plan`; export let disabled: boolean; export let buttonText: string; - export let buttonMethod: () => void | Promise; + export let buttonMethod: () => void | Promise = () => {}; export let buttonHref: string = null; export let buttonEvent: string = buttonText?.toLocaleLowerCase(); export let buttonEventData: Record = {}; diff --git a/src/routes/(console)/project-[project]/functions/+page.svelte b/src/routes/(console)/project-[project]/functions/+page.svelte index 80023d02c..169d5ce55 100644 --- a/src/routes/(console)/project-[project]/functions/+page.svelte +++ b/src/routes/(console)/project-[project]/functions/+page.svelte @@ -11,7 +11,7 @@ SvgIcon } from '$lib/components'; import { toLocaleDateTime } from '$lib/helpers/date'; - import { Container, ContainerHeader } from '$lib/layout'; + import { Container } from '$lib/layout'; import { isServiceLimited } from '$lib/stores/billing'; import { organization } from '$lib/stores/organization'; import { wizard } from '$lib/stores/wizard'; @@ -21,9 +21,11 @@ import { functionsList } from './store'; import { canWriteFunctions } from '$lib/stores/roles'; import type { Models } from '@appwrite.io/console'; - import { Tooltip } from '@appwrite.io/pink-svelte'; - import { IconPlus } from '@appwrite.io/pink-icons-svelte'; + import { Icon, Layout, Tooltip, Typography } from '@appwrite.io/pink-svelte'; + import { IconClock, IconPlus } from '@appwrite.io/pink-icons-svelte'; import { goto } from '$app/navigation'; + import { Button } from '$lib/elements/forms'; + import Avatar from '$lib/components/avatar.svelte'; export let data; @@ -73,13 +75,12 @@ - + + + {#if data.functions.total} -
-
- -
- {func.name} -
+ + + + + {func.name} + - {#if func.schedule} -
  • - -
    • + {/if}     {func.$id} diff --git a/src/routes/(console)/project-[project]/functions/templates/+page.svelte b/src/routes/(console)/project-[project]/functions/templates/+page.svelte index e51bc9748..1af2d5cbe 100644 --- a/src/routes/(console)/project-[project]/functions/templates/+page.svelte +++ b/src/routes/(console)/project-[project]/functions/templates/+page.svelte @@ -2,32 +2,42 @@ import { goto } from '$app/navigation'; import { base } from '$app/paths'; import { page } from '$app/stores'; - import { - Collapsible, - CollapsibleItem, - EmptySearch, - Pagination, - SvgIcon - } from '$lib/components'; + import { EmptySearch, SvgIcon } from '$lib/components'; import { Button, InputSearch } from '$lib/elements/forms'; import { Container, ContainerButton } from '$lib/layout'; - import { app } from '$lib/stores/app'; import { isServiceLimited } from '$lib/stores/billing'; import { organization } from '$lib/stores/organization'; import { canWriteFunctions } from '$lib/stores/roles'; import type { Models } from '@appwrite.io/console'; import { functionsList } from '../store'; import { debounce } from '$lib/helpers/debounce'; - import { Tooltip, Typography } from '@appwrite.io/pink-svelte'; + import { + Accordion, + AvatarGroup, + Layout, + Selector, + Tooltip, + Typography, + Card as PinkCard + } from '@appwrite.io/pink-svelte'; import { capitalize } from '$lib/helpers/string'; + import Card from '$lib/components/card.svelte'; + import Link from '$lib/elements/link.svelte'; + import Avatar from '$lib/components/avatar.svelte'; + import PaginationWithLimit from '$lib/components/paginationWithLimit.svelte'; export let data; - function applyFilter(filter: string, value: string, event: Event) { - const add = (event.target as EventTarget & HTMLInputElement).checked; + function applyFilter(filter: string, value: string, event: CustomEvent) { const target = new URL($page.url); - if (add) { - target.searchParams.append(filter, value); + if (event?.detail) { + if ( + !target.searchParams + .getAll(filter) + .some((n) => n.toLowerCase() === value.toLowerCase()) + ) { + target.searchParams.append(filter, value); + } } else { const previous = target.searchParams .getAll(filter) @@ -121,155 +131,143 @@ -
    - Templates -
    - Experimental -
    -
    -
    -
    + + -
    - - - Use case -
      - {#each [...data.useCases] as useCase} -
    • - -
      • - {/each} -
    -     - - Runtime -
      - {#each [...data.runtimes] as runtime} - {@const icon = getIconFromRuntime(runtime)} -
    • - -
      • - {/each} -
    -     -     -
    + + + + {#each [...data.useCases] as useCase} + + { + console.log(useCase, e); + applyFilter('useCase', useCase, e); + }} /> + + {/each} + + + + + {#each [...data.runtimes] as runtime} + + + applyFilter('runtime', runtime, e)} /> + + {/each} + + + -
    -

    Contribute

    -

    - Have an idea for a function template? View our contribution guidelines. -

    -
    -
    -
    + + + + Contribute + + + Got a function template idea? View the contribution guidelines. + + + + + + {#if data.templates.length > 0} -
      + {#each data.templates as template} {@const baseRuntimes = getBaseRuntimes(template.runtimes)} {@const displayed = baseRuntimes.slice(0, 2)} {@const hidden = baseRuntimes.slice(1, -1)} -
    • -
      -
      -

      + + + + {template.name} -

      -
        + + + + {template.tagline} + + + + + {#each displayed as runtime} {@const icon = getIconFromRuntime(runtime.name)} {#if icon} -
      • -
        - -
        -
        • + + + {/if} {/each} {#if hidden.length} -
      • - -
        + + + +{hidden.length} -
        - {hidden - .map((n) => n.name) - .join(', ')} -         -
        • + + + {hidden.map((n) => n.name).join(', ')} + {/if} -
      -
      - -

      - {template.tagline} -

      - -
      - - {#if $canWriteFunctions} - connectTemplate(template)} - showIcon={false} - buttonText="Create function" - buttonEventData={{ source: 'functions_template' }} - buttonEvent="create_function" /> - {/if} -
      -
      -
      • + + + + {#if $canWriteFunctions} + + {/if} + + + + {/each} -
    + {:else}
    @@ -283,12 +281,13 @@
    {/if} -
    -

    Total templates: {data.sum}

    - -
    -
    -
    + +     +