Skip to content

Commit

Permalink
feat: quick filter refactor PoC
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArmanNik
ArmanNik committed Mar 10, 2025
1 parent ae38e15 commit 1e071df
Show file tree
Hide file tree
Showing 5 changed files with 246 additions and 220 deletions.
120 changes: 120 additions & 0 deletions src/lib/components/filters/subMenu.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<script lang="ts">
import { capitalize } from '$lib/helpers/string';
import { IconChevronRight } from '@appwrite.io/pink-icons-svelte';
import { ActionMenu, Card, Layout, Selector } from '@appwrite.io/pink-svelte';
import { createMenubar, melt } from '@melt-ui/svelte';
import { createEventDispatcher } from 'svelte';
import type { ValidOperators } from './store';
type FilterData = {
title: string;
id: string;
array: boolean;
show: boolean;
tag: string;
operator: ValidOperators;
options: { value: string; label: string; checked: boolean }[];
};
export let filter: FilterData;
export let variant: 'checkbox' | 'radio' = 'checkbox';
const {
builders: { createMenu }
} = createMenubar();
const {
elements: { item: item, separator: separator },
builders: { createSubmenu: createSubmenu, createMenuRadioGroup, createCheckboxItem }
} = createMenu();
const {
elements: { checkboxItem: checkboxItem }
} = createCheckboxItem();
const {
elements: { radioGroup: radioGroup }
} = createMenuRadioGroup({});
const {
elements: { subMenu: subMenu, subTrigger: subTrigger }
} = createSubmenu();
const dispatch = createEventDispatcher();
</script>

<div use:melt={$subTrigger}>
<ActionMenu.Root>
<ActionMenu.Item.Button trailingIcon={IconChevronRight}
>{filter.title}</ActionMenu.Item.Button>
</ActionMenu.Root>
</div>

<div class="menu subMenu" use:melt={$subMenu}>
<Card.Base padding="xxxs">
<div use:melt={$radioGroup}>
{#each filter.options as option (option.value + option.checked)}
{#if variant === 'radio'}
<div use:melt={$item}>
<ActionMenu.Root>
<ActionMenu.Item.Button
on:click={() => {
option.checked = !option.checked;
dispatch('add', {
value: filter?.array
? null
: option.checked
? option.value
: null
});
}}>
{capitalize(option.label)}
</ActionMenu.Item.Button>
</ActionMenu.Root>
</div>
{:else}
<div use:melt={$checkboxItem}>
<ActionMenu.Root>
<ActionMenu.Item.Button
on:click={() => {
option.checked = !option.checked;
dispatch('add', {
value: filter?.array
? null
: option.checked
? option.value
: null
});
}}>
<Layout.Stack direction="row" gap="s">
<Selector.Checkbox bind:checked={option.checked} />
{capitalize(option.label)}
</Layout.Stack>
</ActionMenu.Item.Button>
</ActionMenu.Root>
</div>
{/if}
{/each}
{#if filter.options.some((option) => option.checked)}
<div class="separator" use:melt={$separator} />
<div use:melt={$item}>
<ActionMenu.Root>
<ActionMenu.Item.Button
on:click={() => {
dispatch('clear');
}}>
Clear all
</ActionMenu.Item.Button>
</ActionMenu.Root>
</div>
{/if}
</div>
</Card.Base>
</div>

<style>
.menu {
min-width: 244px;
z-index: 20;
}
</style>
19 changes: 10 additions & 9 deletions ...nsole)/project-[project]/functions/function-[function]/(components)/deploymentCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,23 @@
$: totalSize = humanFileSize((deployment?.buildSize ?? 0) + (deployment?.sourceSize ?? 0));
</script>

<Card isTile padding="s" radius="m" {variant}>
<Layout.Stack gap="l">
<Card isTile padding="m" radius="m" {variant}>
<Layout.Stack gap="xxl">
<Layout.GridFraction start={4} end={6}>
<Layout.Stack direction="row">
<Layout.Stack gap="xs">
<Layout.Stack>
<Layout.Stack direction="row" alignItems="center" gap="s">
{#if activeDeployment}
<Typography.Title
size="s"
variant="l-500"
color="--fgcolor-neutral-primary">
Active deployment
</Typography.Title>

<Id value={deployment.$id}>
{deployment.$id}
</Id>
<div>
<Id value={deployment.$id}>
{deployment.$id}
</Id>
</div>
{:else}
<Typography.Title
size="s"
Expand Down Expand Up @@ -127,7 +128,7 @@

{#if $$slots.footer}
<span
style="margin-left: calc(-1* var(--space-7));margin-right: calc(-1* var(--space-7));width:auto;">
style="margin-left: calc(-1* var(--space-9));margin-right: calc(-1* var(--space-9));width:auto;">
<Divider />
</span>
<Layout.Stack direction="row-reverse">
Expand Down
175 changes: 45 additions & 130 deletions src/routes/(console)/project-[project]/functions/function-[function]/executions/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,25 @@
<script lang="ts">
import { invalidate } from '$app/navigation';
import { Alert, EmptySearch, PaginationWithLimit, ViewSelector } from '$lib/components';
import { BillingPlan, Dependencies } from '$lib/constants';
import { goto, invalidate } from '$app/navigation';
import { Alert, Empty, EmptySearch, PaginationWithLimit, ViewSelector } from '$lib/components';
import { Dependencies } from '$lib/constants';
import { Button } from '$lib/elements/forms';
import { hoursToDays } from '$lib/helpers/date';
import { Container, ContainerHeader } from '$lib/layout';
import { Container } from '$lib/layout';
import { sdk } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { func } from '../store';
import { organization } from '$lib/stores/organization';
import { getServiceLimit, showUsageRatesModal } from '$lib/stores/billing';
import { project } from '$routes/(console)/project-[project]/store';
import Create from '../(components)/createActionMenu.svelte';
import { abbreviateNumber } from '$lib/helpers/numbers';
import { base } from '$app/paths';
import { Filters, queries } from '$lib/components/filters';
import { writable } from 'svelte/store';
import type { Column } from '$lib/helpers/types';
import { View } from '$lib/helpers/load';
import Table from './table.svelte';
import QuickFilters from './quickFilters.svelte';
import { Pill } from '$lib/elements';
import { tags } from '$lib/components/filters/store';
import { Layout } from '@appwrite.io/pink-svelte';
export let data;
const logs = getServiceLimit('logs');
const columns = writable<Column[]>([
{ id: '$id', title: 'Execution ID', type: 'string', show: true, width: 150 },
{
Expand Down Expand Up @@ -160,116 +153,43 @@
</script>

<Container>
<ContainerHeader title="Executions">
<svelte:fragment slot="tooltip" let:tier let:limit let:upgradeMethod>
<p class="u-bold">The {tier} plan has limits</p>
<ul>
<li>
{abbreviateNumber(limit)} function executions
</li>
<li>
{hoursToDays(logs)} of logs
</li>
</ul>
{#if $organization?.billingPlan === BillingPlan.FREE}
<p class="text">
<button class="link" type="button" on:click|preventDefault={upgradeMethod}
>Upgrade</button>
to increase your resource limits.
</p>
{:else}
<p class="text">
After this amount, <button
class="link"
type="button"
on:click|preventDefault={() => ($showUsageRatesModal = true)}
>usage fees will apply</button
>.
</p>
{/if}
</svelte:fragment>
</ContainerHeader>
<div class="u-flex u-main-space-between is-not-mobile u-margin-block-start-16">
<div class="u-flex u-gap-8 u-cross-center u-flex-wrap">
<QuickFilters {columns} />
<Filters
query={data.query}
{columns}
let:disabled
let:toggle
clearOnClick
analyticsSource="executions_filters">
<div class="u-flex u-gap-4">
<Button
text
on:click={toggle}
{disabled}
ariaLabel="open filter"
noMargin={!$tags?.length}>
<span class="icon-filter-line" />
<span class="text">More filters</span>
</Button>
{#if $tags?.length}
<div
style="flex-basis: 1px; background-color: hsl(var(--border)); width: 1px;">
</div>
<Button text on:click={clearAll}>Clear All</Button>
{/if}
<Layout.Stack direction="row" alignItems="center" justifyContent="space-between">
<QuickFilters {columns} />
<!-- <Filters
query={data.query}
{columns}
let:disabled
let:toggle
clearOnClick
analyticsSource="executions_filters">
<div class="u-flex u-gap-4">
<Button
text
on:click={toggle}
{disabled}
ariaLabel="open filter"
noMargin={!$tags?.length}>
<span class="icon-filter-line" />
<span class="text">More filters</span>
</Button>
{#if $tags?.length}
<div
style="flex-basis: 1px; background-color: hsl(var(--border)); width: 1px;">
</div>
</Filters>
</div>
<div class="u-flex u-gap-16">
<ViewSelector view={View.Table} {columns} hideView allowNoColumns hideText />
<Button text on:click={clearAll}>Clear All</Button>
{/if}
</div>
</Filters> -->
<Layout.Stack gap="s" inline direction="row" alignItems="center">
<ViewSelector view={View.Table} {columns} hideView allowNoColumns />
<Button
event="execute_function"
href={`${base}/project-${$project.$id}/functions/function-${$func.$id}/executions/execute-function`}
disabled={!$func.$id || !$func?.deployment}>
<span class="text">Execute</span>
</Button>
</div>
</div>
<div class="is-only-mobile">
<div class="u-flex u-main-space-between u-margin-block-start-16">
<Button
text
on:click={() => (showMobileFilters = !showMobileFilters)}
ariaLabel="toggle filters">
<span class="icon-filter-line" />
<span class="text">Filters</span>
Execute
</Button>

<div class=" u-flex u-gap-16">
<ViewSelector view={View.Table} {columns} hideView allowNoColumns />
<Button
event="execute_function"
href={`${base}/project-${$project.$id}/functions/function-${$func.$id}/executions/execute-function`}
disabled={!$func.$id || !$func?.deployment}>
<span class="text">Execute</span>
</Button>
</div>
</div>
<div
class:u-hide={!showMobileFilters}
class:u-flex={showMobileFilters}
class=" u-gap-8 u-flex-wrap u-margin-block-start-16">
<QuickFilters {columns} />

<Filters query={data.query} {columns} clearOnClick analyticsSource="executions_filters">
<svelte:fragment slot="mobile" let:disabled let:toggle>
<Pill
button
on:click={toggle}
{disabled}
class="u-flex u-gap-4 u-cross-center"
style="--p-tag-content-height: auto">
<!-- <span class="icon-filter-line" /> -->
<span class="text">More filters</span>
<span class="icon-cheveron-down" />
</Pill>
</svelte:fragment>
</Filters>
</div>
</div>
</Layout.Stack>
</Layout.Stack>

{#if !$func.logging}
<div class="common-section">
Expand Down Expand Up @@ -310,19 +230,14 @@
</div>
</EmptySearch>
{:else}
<EmptySearch>
<div class="u-text-center">
<p class="text u-line-height-1-5">
You have no execution logs. Create and activate a deployment to see it here.
</p>
<p class="text u-line-height-1-5">Need a hand? Learn more in our documentation.</p>
</div>
<div class="u-flex u-gap-16">
<Button text external href="https://appwrite.io/docs/products/functions/execution">
Documentation
</Button>
<Create secondary />
</div>
</EmptySearch>
<Empty
single
target="execution"
href="https://appwrite.io/docs/products/functions/execution"
on:click={() =>
goto(
`${base}/project-${$project.$id}/functions/function-${$func.$id}/executions/execute-function`
)}>
</Empty>
{/if}
</Container>
Loading

0 comments on commit 1e071df

Please sign in to comment.