From 1e071dfc34e51b62439b68440d7b4ee201dfd401 Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 10 Mar 2025 11:44:34 +0100 Subject: [PATCH] feat: quick filter refactor PoC --- src/lib/components/filters/subMenu.svelte | 120 ++++++++++++ .../(components)/deploymentCard.svelte | 19 +- .../executions/+page.svelte | 175 +++++------------- .../executions/quickFilters.svelte | 146 +++++++-------- .../template-[template]/+page.svelte | 6 +- 5 files changed, 246 insertions(+), 220 deletions(-) create mode 100644 src/lib/components/filters/subMenu.svelte diff --git a/src/lib/components/filters/subMenu.svelte b/src/lib/components/filters/subMenu.svelte new file mode 100644 index 000000000..88362fe4b --- /dev/null +++ b/src/lib/components/filters/subMenu.svelte @@ -0,0 +1,120 @@ + + +
+ + {filter.title} + +
+ +
+ +
+ {#each filter.options as option (option.value + option.checked)} + {#if variant === 'radio'} +
+ + { + option.checked = !option.checked; + dispatch('add', { + value: filter?.array + ? null + : option.checked + ? option.value + : null + }); + }}> + {capitalize(option.label)} + + +
+ {:else} +
+ + { + option.checked = !option.checked; + dispatch('add', { + value: filter?.array + ? null + : option.checked + ? option.value + : null + }); + }}> + + + {capitalize(option.label)} + + + +
+ {/if} + {/each} + {#if filter.options.some((option) => option.checked)} +
+
+ + { + dispatch('clear'); + }}> + Clear all + + +
+ {/if} +
+ +
+ + diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/(components)/deploymentCard.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(components)/deploymentCard.svelte index 24b364a7e..4c37f9fa7 100644 --- a/src/routes/(console)/project-[project]/functions/function-[function]/(components)/deploymentCard.svelte +++ b/src/routes/(console)/project-[project]/functions/function-[function]/(components)/deploymentCard.svelte @@ -16,11 +16,11 @@ $: totalSize = humanFileSize((deployment?.buildSize ?? 0) + (deployment?.sourceSize ?? 0)); - - + + - - + + {#if activeDeployment} Active deployment - - - {deployment.$id} - +
+ + {deployment.$id} + +
{:else} + style="margin-left: calc(-1* var(--space-9));margin-right: calc(-1* var(--space-9));width:auto;"> diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/executions/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/executions/+page.svelte index 22d3839e5..980a3cf4b 100644 --- a/src/routes/(console)/project-[project]/functions/function-[function]/executions/+page.svelte +++ b/src/routes/(console)/project-[project]/functions/function-[function]/executions/+page.svelte @@ -1,18 +1,13 @@ - - -

The {tier} plan has limits

-
    -
  • - {abbreviateNumber(limit)} function executions -
    • -
  • - {hoursToDays(logs)} of logs -
    • -
- {#if $organization?.billingPlan === BillingPlan.FREE} -

- - to increase your resource limits. -

- {:else} -

- After this amount, . -

- {/if} - - -
-
- - -
- - {#if $tags?.length} -
-
- - {/if} + + + + + -
-
-
-
- - -
- - -
-
-
- - - - - - - More filters - - - - -
-
+ + {#if !$func.logging}
@@ -310,19 +230,14 @@
{:else} - -
-

- You have no execution logs. Create and activate a deployment to see it here. -

-

Need a hand? Learn more in our documentation.

-
-
- - -
- + + goto( + `${base}/project-${$project.$id}/functions/function-${$func.$id}/executions/execute-function` + )}> + {/if} diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/executions/quickFilters.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/executions/quickFilters.svelte index 71b432739..65bb31ee2 100644 --- a/src/routes/(console)/project-[project]/functions/function-[function]/executions/quickFilters.svelte +++ b/src/routes/(console)/project-[project]/functions/function-[function]/executions/quickFilters.svelte @@ -2,6 +2,7 @@ import { afterNavigate } from '$app/navigation'; import { Submit, trackEvent } from '$lib/actions/analytics'; import { DropList, DropListItem } from '$lib/components'; + import MenuItem from '$lib/components/filters/subMenu.svelte'; import { addFilter, queries, @@ -13,7 +14,11 @@ } from '$lib/components/filters/store'; import { Pill, SelectSearchCheckbox } from '$lib/elements'; import type { Column } from '$lib/helpers/types'; + import { Card, Icon } from '@appwrite.io/pink-svelte'; + import { melt, createMenubar } from '@melt-ui/svelte'; import { type Writable } from 'svelte/store'; + import { Button } from '$lib/elements/forms'; + import { IconFilterLine } from '@appwrite.io/pink-icons-svelte'; export let columns: Writable; @@ -181,103 +186,86 @@ addFilter($columns, colId, ValidOperators.GreaterThanOrEqual, isoValue.toISOString()); addFilter($columns, colId, ValidOperators.LessThanOrEqual, now.toISOString()); } + + const { + elements: { menubar }, + builders: { createMenu } + } = createMenubar(); + + const { + elements: { trigger: trigger, menu: menu } + } = createMenu(); -{#each [statusFilter, triggerFilter, methodFilter] as filter} - - (filter.show = !filter.show)} - event="apply_quick_filter" - eventData={{ source: 'function_execution', column: filter.title }}> - {#key filter.tag} - - {filter?.tag ?? filter.title} - - {/key} - - - - - {#each filter.options as option (option.value + option.checked)} - { - option.checked = !option.checked; +
+
+ {#if $tags.length} + + {:else} + + {/if} +
+ +
+ + {#each [statusFilter, triggerFilter, methodFilter] as filter} + { + console.log('test'); addFilterAndApply( filter.id, filter.title, filter.operator, - filter?.array ? null : option.checked ? option.value : null, + e.detail.value, filter?.array ? (filter.options .filter((opt) => opt.checked) .map((opt) => opt.value) ?? []) : [] ); - }}> - {option.label} - - {/each} - {#if filter.options.some((option) => option.checked)} - { - filter.show = false; + }} + on:clear={() => { filter.tag = null; addFilterAndApply(filter.id, filter.title, filter.operator, null, []); - }}> - Clear selection - - {/if} - - -{/each} -{#each [statusCodeFilter, createdAtFilter] as filter} - - (filter.show = !filter.show)} - event="apply_quick_filter" - eventData={{ source: 'function_execution', column: filter.title }}> - {#key filter.tag} - - {filter?.tag ?? filter.title} - - {/key} - - - - - {#each filter.options as option (option.value + option.checked)} - { - filter.show = false; - + }} /> + {/each} + {#each [statusCodeFilter, createdAtFilter] as filter} + { + console.log('test'); addFilterAndApply( filter.id, filter.title, filter.operator, - filter?.array ? null : option.value, - [] + e.detail.value, + filter?.array + ? (filter.options + .filter((opt) => opt.checked) + .map((opt) => opt.value) ?? []) + : [] ); - }}> - {option.label} - - {/each} - {#if filter?.tag} - { - filter.show = false; + }} + on:clear={() => { filter.tag = null; addFilterAndApply(filter.id, filter.title, filter.operator, null, []); - }}> - Clear selection - - {/if} - - -{/each} + }} /> + {/each} + +
+
+ + diff --git a/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte index 215d902ce..4ab0696d9 100644 --- a/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte +++ b/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte @@ -17,11 +17,13 @@ Card as PinkCard, Image, Badge, - Divider + Divider, + Icon } from '@appwrite.io/pink-svelte'; import { base } from '$app/paths'; import { page } from '$app/stores'; import { capitalize } from '$lib/helpers/string'; + import { IconExternalLink } from '@appwrite.io/pink-icons-svelte'; $: buttonDisabled = isCloud && isServiceLimited('functions', $organization?.billingPlan, $functionsList?.total); @@ -84,7 +86,7 @@ href={`https://github.com/${$template.providerOwner}/${$template.providerRepositoryId}`} external> View source - + {#if $canWriteFunctions}