Skip to content

Commit 55ce728

Browse files
ArmanNikArmanNik
committed
feat: created menu component, add download source + output
1 parent 69c829b commit 55ce728

File tree

7 files changed

+163
-88
lines changed

7 files changed

+163
-88
lines changed

‎src/lib/components/filters/index.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
export { default as Filters } from './filters.svelte';
22
export { default as TagList } from './tagList.svelte';
3-
export { default as FilterMenu } from './menu.svelte';
4-
export { default as FilterSubMenu } from './subMenu.svelte';
53
export { default as CustomFilters } from './customFilters.svelte';
64
export { default as QuickFilters } from './quickFilters.svelte';
75
export { default as ParsedTagList } from './parsedTagList.svelte';

‎src/lib/components/filters/quickFilters.svelte‎

Lines changed: 52 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<script lang="ts">
22
import { afterNavigate } from '$app/navigation';
3-
import MenuItem from '$lib/components/filters/subMenu.svelte';
43
import { queryParamToMap } from '$lib/components/filters/store';
54
import type { Column } from '$lib/helpers/types';
65
import { type Writable } from 'svelte/store';
7-
import Menu from '$lib/components/filters/menu.svelte';
86
import { CustomFilters } from '$lib/components/filters';
97
import { addFilterAndApply, buildFilterCol } from './quickFilters';
10-
import { setFiltersOnNavigate } from './setFilters';
8+
import { parsedTags, setFiltersOnNavigate } from './setFilters';
9+
import Menu from '../menu/menu.svelte';
10+
import { Button } from '$lib/elements/forms';
11+
import { Icon } from '@appwrite.io/pink-svelte';
12+
import { IconFilterLine } from '@appwrite.io/pink-icons-svelte';
13+
import QuickfiltersSubMenu from './quickfiltersSubMenu.svelte';
1114
1215
export let columns: Writable<Column[]>;
1316
export let analyticsSource: string;
@@ -27,39 +30,52 @@
2730
</script>
2831

2932
<Menu>
30-
{#each filterCols as filter}
31-
{#if filter.options}
32-
<MenuItem
33-
{filter}
34-
variant={filter?.array ? 'checkbox' : 'radio'}
35-
on:add={(e) => {
36-
addFilterAndApply(
37-
filter.id,
38-
filter.title,
39-
filter.operator,
40-
e.detail.value,
41-
filter?.array
42-
? (filter.options
43-
.filter((opt) => opt.checked)
44-
.map((opt) => opt.value) ?? [])
45-
: [],
46-
$columns,
47-
analyticsSource
48-
);
49-
}}
50-
on:clear={() => {
51-
addFilterAndApply(
52-
filter.id,
53-
filter.title,
54-
filter.operator,
55-
null,
56-
[],
57-
$columns,
58-
analyticsSource
59-
);
60-
}} />
61-
{/if}
62-
{/each}
33+
{#if $parsedTags?.length}
34+
<Button secondary badge={`${$parsedTags?.length}`}>
35+
<Icon icon={IconFilterLine} slot="start" size="s" />
36+
Filters
37+
</Button>
38+
{:else}
39+
<Button secondary>
40+
<Icon icon={IconFilterLine} slot="start" size="s" />
41+
Filters
42+
</Button>
43+
{/if}
44+
<svelte:fragment slot="menu">
45+
{#each filterCols as filter}
46+
{#if filter.options}
47+
<QuickfiltersSubMenu
48+
{filter}
49+
variant={filter?.array ? 'checkbox' : 'radio'}
50+
on:add={(e) => {
51+
addFilterAndApply(
52+
filter.id,
53+
filter.title,
54+
filter.operator,
55+
e.detail.value,
56+
filter?.array
57+
? (filter.options
58+
.filter((opt) => opt.checked)
59+
.map((opt) => opt.value) ?? [])
60+
: [],
61+
$columns,
62+
analyticsSource
63+
);
64+
}}
65+
on:clear={() => {
66+
addFilterAndApply(
67+
filter.id,
68+
filter.title,
69+
filter.operator,
70+
null,
71+
[],
72+
$columns,
73+
analyticsSource
74+
);
75+
}} />
76+
{/if}
77+
{/each}
78+
</svelte:fragment>
6379

6480
<svelte:fragment slot="end">
6581
<CustomFilters {columns} />

src/lib/components/filters/subMenu.svelte renamed to src/lib/components/filters/quickfiltersSubMenu.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
</script>
3535

3636
<div use:melt={$subTrigger}>
37-
<ActionMenu.Root>
37+
<ActionMenu.Root noPadding>
3838
<ActionMenu.Item.Button trailingIcon={IconChevronRight}
3939
>{filter.title}</ActionMenu.Item.Button>
4040
</ActionMenu.Root>

‎src/lib/components/menu/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as Menu } from './menu.svelte';
2+
export { default as SubMenu } from './subMenu.svelte';

src/lib/components/filters/menu.svelte renamed to src/lib/components/menu/menu.svelte

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,46 @@
11
<script lang="ts">
2-
import { Button } from '$lib/elements/forms';
3-
import { Card, Icon } from '@appwrite.io/pink-svelte';
4-
import { IconFilterLine } from '@appwrite.io/pink-icons-svelte';
2+
import { Card } from '@appwrite.io/pink-svelte';
53
import { createMenubar, melt } from '@melt-ui/svelte';
6-
import { parsedTags } from './setFilters';
74
85
const {
96
elements: { menubar },
107
builders: { createMenu }
118
} = createMenubar();
129
1310
const {
14-
elements: { trigger: trigger, menu: menu, separator: separator }
11+
elements: { trigger: trigger, menu: menu, separator: separator },
12+
states: { open }
1513
} = createMenu();
14+
15+
function toggle() {
16+
open.update((state) => !state);
17+
}
1618
</script>
1719

1820
<div use:melt={$menubar}>
1921
<div use:melt={$trigger}>
20-
{#if $parsedTags?.length}
21-
<Button secondary badge={`${$parsedTags?.length}`}>
22-
<Icon icon={IconFilterLine} slot="start" size="s" />
23-
Filters
24-
</Button>
25-
{:else}
26-
<Button secondary>
27-
<Icon icon={IconFilterLine} slot="start" size="s" />
28-
Filters
29-
</Button>
30-
{/if}
22+
<slot {toggle} />
3123
</div>
3224

3325
<div class="menu" use:melt={$menu}>
3426
<Card.Base padding="xxxs">
35-
<slot />
36-
<div class="separator" use:melt={$separator} />
37-
<slot name="end" />
27+
{#if $$slots.start}
28+
<slot name="start" />
29+
<div class="separator" use:melt={$separator} />
30+
{/if}
31+
<slot name="menu" {toggle} />
32+
{#if $$slots.end}
33+
<div class="separator" use:melt={$separator} />
34+
<slot name="end" />
35+
{/if}
3836
</Card.Base>
3937
</div>
4038
</div>
4139

4240
<style>
4341
.menu {
4442
min-width: 244px;
43+
width: max-content;
4544
z-index: 20;
4645
}
4746

‎src/lib/components/menu/subMenu.svelte‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script lang="ts">
2+
import { Card } from '@appwrite.io/pink-svelte';
3+
import { createMenubar, melt } from '@melt-ui/svelte';
4+
5+
const {
6+
builders: { createMenu }
7+
} = createMenubar();
8+
9+
const {
10+
elements: { separator: separator },
11+
builders: { createSubmenu: createSubmenu }
12+
} = createMenu();
13+
14+
const {
15+
elements: { subMenu: subMenu, subTrigger: subTrigger }
16+
} = createSubmenu();
17+
</script>
18+
19+
<div use:melt={$subTrigger}>
20+
<slot />
21+
</div>
22+
23+
<div class="subMenu" use:melt={$subMenu}>
24+
<Card.Base padding="xxxs">
25+
{#if $$slots.start}
26+
<slot name="start" />
27+
<div class="separator" use:melt={$separator} />
28+
{/if}
29+
<slot name="menu" />
30+
{#if $$slots.end}
31+
<div class="separator" use:melt={$separator} />
32+
<slot name="end" />
33+
{/if}
34+
</Card.Base>
35+
</div>
36+
37+
<style>
38+
.subMenu {
39+
min-width: 244px;
40+
margin-inline: -4px;
41+
margin-block: -4px;
42+
}
43+
</style>

‎src/routes/(console)/project-[project]/sites/(components)/deploymentActionMenu.svelte‎

Lines changed: 47 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script lang="ts">
22
import { page } from '$app/stores';
3+
import { Menu } from '$lib/components/menu';
4+
import SubMenu from '$lib/components/menu/subMenu.svelte';
35
import { Button } from '$lib/elements/forms';
46
import { sdk } from '$lib/stores/sdk';
57
import { DeploymentDownloadType, type Models } from '@appwrite.io/console';
@@ -11,7 +13,7 @@
1113
IconTrash,
1214
IconXCircle
1315
} from '@appwrite.io/pink-icons-svelte';
14-
import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
16+
import { ActionMenu, Icon } from '@appwrite.io/pink-svelte';
1517
1618
export let selectedDeployment: Models.Deployment;
1719
export let deployment: Models.Deployment;
@@ -22,28 +24,31 @@
2224
export let activeDeployment: string;
2325
export let inCard = false;
2426
25-
function getDownload(deploymentId: string) {
27+
function getOutputDownload(deploymentId: string) {
2628
return (
27-
sdk.forProject.sites.getDeploymentDownload($page.params.site, deploymentId).toString() +
28-
'&mode=admin',
29-
DeploymentDownloadType.Source
29+
sdk.forProject.sites.getDeploymentDownload(
30+
$page.params.site,
31+
deploymentId.toString(),
32+
DeploymentDownloadType.Output
33+
) + '&mode=admin'
34+
);
35+
}
36+
function getSourceDownload(deploymentId: string) {
37+
return (
38+
sdk.forProject.sites.getDeploymentDownload(
39+
$page.params.site,
40+
deploymentId.toString(),
41+
DeploymentDownloadType.Source
42+
) + '&mode=admin'
3043
);
3144
}
3245
</script>
3346

34-
<Popover padding="none" placement="bottom-end" let:toggle>
35-
<Button
36-
text={!inCard}
37-
secondary={inCard}
38-
icon
39-
size="s"
40-
on:click={(e) => {
41-
e.preventDefault();
42-
toggle(e);
43-
}}>
47+
<Menu>
48+
<Button text={!inCard} secondary={inCard} icon size="s">
4449
<Icon size="s" icon={IconDotsHorizontal} />
4550
</Button>
46-
<svelte:fragment slot="tooltip" let:toggle>
51+
<svelte:fragment slot="menu" let:toggle>
4752
<ActionMenu.Root>
4853
{#if !inCard}
4954
<ActionMenu.Item.Button
@@ -52,7 +57,7 @@
5257
e.preventDefault();
5358
selectedDeployment = deployment;
5459
showRedeploy = true;
55-
toggle(e);
60+
toggle();
5661
}}>
5762
Redeploy
5863
</ActionMenu.Item.Button>
@@ -64,21 +69,35 @@
6469
e.preventDefault();
6570
selectedDeployment = deployment;
6671
showActivate = true;
67-
toggle(e);
72+
toggle();
6873
}}>
6974
Activate
7075
</ActionMenu.Item.Button>
7176
{/if}
7277
{#if deployment?.status === 'ready' || deployment?.status === 'failed'}
73-
<ActionMenu.Item.Anchor
74-
href={getDownload(deployment.$id)}
75-
external
76-
leadingIcon={IconDownload}
77-
on:click={(e) => {
78-
toggle(e);
79-
}}>
80-
Download
81-
</ActionMenu.Item.Anchor>
78+
<SubMenu>
79+
<ActionMenu.Root noPadding>
80+
<ActionMenu.Item.Button leadingIcon={IconDownload}>
81+
Download
82+
</ActionMenu.Item.Button>
83+
</ActionMenu.Root>
84+
<svelte:fragment slot="menu">
85+
<ActionMenu.Root noPadding>
86+
<ActionMenu.Item.Anchor
87+
on:click={toggle}
88+
href={getSourceDownload(deployment.$id)}
89+
external>
90+
Download source
91+
</ActionMenu.Item.Anchor>
92+
<ActionMenu.Item.Anchor
93+
on:click={toggle}
94+
href={getOutputDownload(deployment.$id)}
95+
external>
96+
Download output
97+
</ActionMenu.Item.Anchor>
98+
</ActionMenu.Root>
99+
</svelte:fragment>
100+
</SubMenu>
82101
{/if}
83102

84103
{#if deployment?.status === 'processing' || deployment?.status === 'building' || deployment.status === 'waiting'}
@@ -89,7 +108,6 @@
89108
e.preventDefault();
90109
selectedDeployment = deployment;
91110
showCancel = true;
92-
toggle(e);
93111
}}>
94112
Cancel
95113
</ActionMenu.Item.Button>
@@ -102,11 +120,10 @@
102120
e.preventDefault();
103121
selectedDeployment = deployment;
104122
showDelete = true;
105-
toggle(e);
106123
}}>
107124
Delete
108125
</ActionMenu.Item.Button>
109126
{/if}
110127
</ActionMenu.Root>
111128
</svelte:fragment>
112-
</Popover>
129+
</Menu>

0 commit comments

Comments
 (0)