Skip to content

Commit 008f4e3

Browse files
ArmanNikArmanNik
committed
fix: function templates pagination
1 parent f907e0b commit 008f4e3

File tree

2 files changed

+78
-85
lines changed

2 files changed

+78
-85
lines changed

‎src/routes/(console)/project-[project]/functions/templates/+page.svelte

+77-76
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { goto } from '$app/navigation';
33
import { base } from '$app/paths';
44
import { page } from '$app/stores';
5-
import { EmptyFilter, EmptySearch, SearchQuery, SvgIcon } from '$lib/components';
5+
import { EmptyFilter, EmptySearch, Paginator, SearchQuery, SvgIcon } from '$lib/components';
66
import { Button } from '$lib/elements/forms';
77
import { Container, ContainerButton } from '$lib/layout';
88
import { isServiceLimited } from '$lib/stores/billing';
@@ -23,7 +23,6 @@
2323
import Card from '$lib/components/card.svelte';
2424
import Link from '$lib/elements/link.svelte';
2525
import Avatar from '$lib/components/avatar.svelte';
26-
import PaginationWithLimit from '$lib/components/paginationWithLimit.svelte';
2726
import { getIconFromRuntime } from '$lib/stores/runtimes';
2827
2928
export let data;
@@ -140,86 +139,88 @@
140139
</Card>
141140
</Layout.Stack>
142141
<Layout.Stack gap="l">
143-
{#if data.templates.length > 0}
144-
<Layout.Grid columns={2} columnsXL={3} columnsXS={1}>
145-
{#each data.templates as template}
146-
{@const baseRuntimes = getBaseRuntimes(template.runtimes)}
147-
{@const displayed = baseRuntimes.slice(0, 2)}
148-
{@const hidden = baseRuntimes.slice(1, -1)}
149-
<PinkCard.Base radius="m" padding="xs">
150-
<Layout.Stack height="100%" justifyContent="space-between" gap="xl">
151-
<Layout.Stack gap="xxxs">
152-
<Typography.Text
153-
variant="m-500"
154-
color="--fgcolor-neutral-primary">
155-
{template.name}
156-
</Typography.Text>
142+
{#if data.templates?.length > 0}
143+
<Paginator
144+
items={data.templates}
145+
let:paginatedItems
146+
limit={12}
147+
hidePages={false}
148+
hasLimit>
149+
<Layout.Grid columns={2} columnsXL={3} columnsXS={1}>
150+
{#each paginatedItems as template}
151+
{@const baseRuntimes = getBaseRuntimes(template.runtimes)}
152+
{@const displayed = baseRuntimes.slice(0, 2)}
153+
{@const hidden = baseRuntimes.slice(1, -1)}
154+
<PinkCard.Base radius="m" padding="xs">
155+
<Layout.Stack height="100%" justifyContent="space-between" gap="xl">
156+
<Layout.Stack gap="xxxs">
157+
<Typography.Text
158+
variant="m-500"
159+
color="--fgcolor-neutral-primary">
160+
{template.name}
161+
</Typography.Text>
157162

158-
<Typography.Text variant="m-400">
159-
{template.tagline}
160-
</Typography.Text>
161-
</Layout.Stack>
163+
<Typography.Text variant="m-400">
164+
{template.tagline}
165+
</Typography.Text>
166+
</Layout.Stack>
162167

163-
<Layout.Stack
164-
direction="row"
165-
justifyContent="space-between"
166-
alignItems="center">
167-
<AvatarGroup>
168-
{#each displayed as runtime}
169-
{@const icon = getIconFromRuntime(runtime.name)}
170-
{#if icon}
171-
<Avatar alt={runtime.name} size="xs">
172-
<SvgIcon name={icon} iconSize="small" />
173-
</Avatar>
174-
{/if}
175-
{/each}
176-
{#if hidden.length}
177-
<Tooltip>
178-
<Avatar alt="hidden runtime number" size="xs">
179-
<span style:font-size="10px">
180-
+{hidden.length}
181-
</span>
182-
</Avatar>
183-
<span slot="tooltip">
184-
{hidden.map((n) => n.name).join(', ')}
185-
</span>
186-
</Tooltip>
187-
{/if}
188-
</AvatarGroup>
189168
<Layout.Stack
190169
direction="row"
191-
gap="s"
192-
alignItems="center"
193-
inline>
194-
<Button
195-
href={`${base}/project-${$page.params.project}/functions/templates/template-${template.id}`}
196-
text>
197-
<span class="text">Details</span>
198-
</Button>
199-
{#if $canWriteFunctions}
200-
<ContainerButton
201-
title="functions"
202-
disabled={buttonDisabled}
203-
buttonType="secondary"
204-
buttonHref={`${base}/project-${$page.params.project}/functions/create-function/template-${template.id}`}
205-
showIcon={false}
206-
buttonText="Create"
207-
buttonEventData={{
208-
source: 'functions_template'
209-
}}
210-
buttonEvent="create_function" />
211-
{/if}
170+
justifyContent="space-between"
171+
alignItems="center">
172+
<AvatarGroup>
173+
{#each displayed as runtime}
174+
{@const icon = getIconFromRuntime(runtime.name)}
175+
{#if icon}
176+
<Avatar alt={runtime.name} size="xs">
177+
<SvgIcon name={icon} iconSize="small" />
178+
</Avatar>
179+
{/if}
180+
{/each}
181+
{#if hidden.length}
182+
<Tooltip>
183+
<Avatar alt="hidden runtime number" size="xs">
184+
<span style:font-size="10px">
185+
+{hidden.length}
186+
</span>
187+
</Avatar>
188+
<span slot="tooltip">
189+
{hidden.map((n) => n.name).join(', ')}
190+
</span>
191+
</Tooltip>
192+
{/if}
193+
</AvatarGroup>
194+
<Layout.Stack
195+
direction="row"
196+
gap="s"
197+
alignItems="center"
198+
inline>
199+
<Button
200+
href={`${base}/project-${$page.params.project}/functions/templates/template-${template.id}`}
201+
text>
202+
<span class="text">Details</span>
203+
</Button>
204+
{#if $canWriteFunctions}
205+
<ContainerButton
206+
title="functions"
207+
disabled={buttonDisabled}
208+
buttonType="secondary"
209+
buttonHref={`${base}/project-${$page.params.project}/functions/create-function/template-${template.id}`}
210+
showIcon={false}
211+
buttonText="Create"
212+
buttonEventData={{
213+
source: 'functions_template'
214+
}}
215+
buttonEvent="create_function" />
216+
{/if}
217+
</Layout.Stack>
212218
</Layout.Stack>
213219
</Layout.Stack>
214-
</Layout.Stack>
215-
</PinkCard.Base>
216-
{/each}
217-
</Layout.Grid>
218-
<PaginationWithLimit
219-
name="Templates"
220-
limit={data.limit}
221-
offset={data.offset}
222-
total={data.sum} />
220+
</PinkCard.Base>
221+
{/each}
222+
</Layout.Grid>
223+
</Paginator>
223224
{:else if data?.search}
224225
<EmptySearch hidePagination search={data.search}>
225226
<Button secondary on:click={clearSearch}>Clear search</Button>

‎src/routes/(console)/project-[project]/functions/templates/+page.ts

+1-9
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,7 @@ import type { PageLoad } from './$types';
66
export const load: PageLoad = async ({ url, route, depends, parent }) => {
77
depends(Dependencies.FUNCTIONS);
88

9-
const limit = getLimit(url, route, PAGE_LIMIT);
10-
const page = getPage(url);
119
const search = getSearch(url);
12-
const view = getView(url, route, View.Grid);
13-
const offset = pageToOffset(page, limit);
1410
const filter = {
1511
useCases: url.searchParams.getAll('useCase'),
1612
runtimes: url.searchParams.getAll('runtime')
@@ -51,15 +47,11 @@ export const load: PageLoad = async ({ url, route, depends, parent }) => {
5147
});
5248

5349
return {
54-
offset,
55-
limit,
56-
view,
5750
filter,
5851
runtimes,
5952
useCases,
6053
search,
61-
sum: templates.length,
62-
templates: templates.splice(((page === 0 ? 1 : page) - 1) * limit, limit),
54+
templates,
6355
functions: await sdk.forProject.functions.list()
6456
};
6557
};

0 commit comments

Comments
 (0)