Skip to content

Commit e8cba9a

Browse files
HarshMN2345HarshMN2345
committed
Fix variable settings pagination
1 parent 28c3992 commit e8cba9a

5 files changed

Lines changed: 94 additions & 29 deletions

File tree

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@
6262
.functions.deleteVariable({ functionId: data.function.$id, variableId });
6363
await Promise.all([invalidate(Dependencies.VARIABLES), invalidate(Dependencies.FUNCTION)]);
6464
};
65+
66+
const sdkListVariables = async (queries: string[]) =>
67+
sdk.forProject(page.params.region, page.params.project).functions.listVariables({
68+
functionId: data.function.$id,
69+
queries
70+
});
6571
</script>
6672

6773
<Container>
@@ -105,9 +111,14 @@
105111
{sdkCreateVariable}
106112
{sdkUpdateVariable}
107113
{sdkDeleteVariable}
114+
{sdkListVariables}
108115
isGlobal={false}
109116
globalVariableList={data.globalVariables}
110117
variableList={data.variables}
118+
backendPagination
119+
reloadPageOnPagination={false}
120+
variablesOffset={data.variablesOffset}
121+
variablesLimit={data.limit}
111122
project={data.project}
112123
analyticsSource="function_settings" />
113124
<UpdateBuildCommand func={data.function} />

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

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import { sdk } from '$lib/stores/sdk';
2-
import { Dependencies } from '$lib/constants';
2+
import { Dependencies, PAGE_LIMIT } from '$lib/constants';
3+
import { Query } from '@appwrite.io/console';
4+
5+
const VARIABLES_LIMIT = 100;
36

47
export const load = async ({ params, depends, parent }) => {
58
depends(Dependencies.VARIABLES);
69
depends(Dependencies.FUNCTION);
710

11+
const limit = PAGE_LIMIT;
12+
const variablesOffset = 0;
13+
814
const { runtimesList, specificationsList, function: fn } = await parent();
915

1016
const enabledSpecs = specificationsList?.specifications?.filter((s) => s.enabled) ?? [];
@@ -16,10 +22,13 @@ export const load = async ({ params, depends, parent }) => {
1622
}
1723

1824
const [globalVariables, variables] = await Promise.all([
19-
sdk.forProject(params.region, params.project).projectApi.listVariables(),
20-
sdk
21-
.forProject(params.region, params.project)
22-
.functions.listVariables({ functionId: params.function })
25+
sdk.forProject(params.region, params.project).projectApi.listVariables({
26+
queries: [Query.limit(VARIABLES_LIMIT)]
27+
}),
28+
sdk.forProject(params.region, params.project).functions.listVariables({
29+
functionId: params.function,
30+
queries: [Query.limit(limit), Query.offset(variablesOffset)]
31+
})
2332
]);
2433

2534
// Conflicting variables first
@@ -43,6 +52,8 @@ export const load = async ({ params, depends, parent }) => {
4352
return {
4453
variables,
4554
globalVariables,
55+
limit,
56+
variablesOffset,
4657
runtimesList,
4758
specificationsList,
4859
function: fn

‎src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.svelte‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@
5151
await Promise.all([invalidate(Dependencies.VARIABLES), invalidate(Dependencies.SITE)]);
5252
};
5353
54+
const sdkListVariables = async (queries: string[]) =>
55+
sdk.forProject(page.params.region, page.params.project).sites.listVariables({
56+
siteId: page.params.site,
57+
queries
58+
});
59+
5460
onMount(async () => {
5561
if (
5662
page.url.searchParams.has('newInstallation') &&
@@ -75,9 +81,14 @@
7581
{sdkCreateVariable}
7682
{sdkUpdateVariable}
7783
{sdkDeleteVariable}
84+
{sdkListVariables}
7885
isGlobal={false}
7986
globalVariableList={data.globalVariables}
8087
variableList={data.variables}
88+
backendPagination
89+
reloadPageOnPagination={false}
90+
variablesOffset={data.variablesOffset}
91+
variablesLimit={data.limit}
8192
project={data.project}
8293
product="site"
8394
analyticsSource="site_settings" />

‎src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.ts‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
11
import { sdk } from '$lib/stores/sdk';
2-
import { Dependencies } from '$lib/constants';
2+
import { Dependencies, PAGE_LIMIT } from '$lib/constants';
33
import { isCloud } from '$lib/system';
4+
import { Query } from '@appwrite.io/console';
5+
6+
const VARIABLES_LIMIT = 100;
47

58
export const load = async ({ params, depends, parent }) => {
69
depends(Dependencies.VARIABLES);
710
depends(Dependencies.SITE);
11+
const limit = PAGE_LIMIT;
12+
const variablesOffset = 0;
813
const { site } = await parent();
914

1015
const [globalVariables, variables, frameworks, installations, specificationsList] =
1116
await Promise.all([
12-
sdk.forProject(params.region, params.project).projectApi.listVariables(),
13-
sdk
14-
.forProject(params.region, params.project)
15-
.sites.listVariables({ siteId: params.site }),
17+
sdk.forProject(params.region, params.project).projectApi.listVariables({
18+
queries: [Query.limit(VARIABLES_LIMIT)]
19+
}),
20+
sdk.forProject(params.region, params.project).sites.listVariables({
21+
siteId: params.site,
22+
queries: [Query.limit(limit), Query.offset(variablesOffset)]
23+
}),
1624
sdk.forProject(params.region, params.project).sites.listFrameworks(),
1725
sdk.forProject(params.region, params.project).vcs.listInstallations(),
1826
isCloud
@@ -51,6 +59,8 @@ export const load = async ({ params, depends, parent }) => {
5159
frameworks,
5260
variables,
5361
globalVariables,
62+
limit,
63+
variablesOffset,
5464
installations,
5565
specificationsList
5666
};

‎src/routes/(console)/project-[region]-[project]/updateVariables.svelte‎

Lines changed: 41 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,13 @@
6060
secret?: boolean
6161
) => Promise<unknown>;
6262
export let sdkDeleteVariable: (variableId: string) => Promise<unknown>;
63+
export let sdkListVariables: (queries: string[]) => Promise<Models.VariableList> = (queries) =>
64+
sdk.forProject(page.params.region, page.params.project).projectApi.listVariables({
65+
queries
66+
});
6367
export let product: 'function' | 'site' = 'function';
6468
export let backendPagination = false;
69+
export let reloadPageOnPagination = true;
6570
export let variablesOffset = 0;
6671
export let variablesLimit = 10;
6772
export let disabled = false;
@@ -76,20 +81,21 @@
7681
let showDeleteModal = false;
7782
let deleteError: string;
7883
let fullVariableList: Models.VariableList | undefined = allVariableList;
84+
let pagedVariableList: Models.VariableList = variableList;
7985
let previousVariableList = variableList;
8086
let offset = 0;
8187
const limit = 10;
8288
8389
async function loadAllVariables() {
84-
const projectSdk = sdk.forProject(page.params.region, page.params.project);
85-
const variables = [...variableList.variables];
86-
let nextOffset = variables.length;
90+
const variables = backendPagination ? [] : [...variableList.variables];
91+
let nextOffset = backendPagination ? 0 : variables.length;
8792
let total = variableList.total;
8893
8994
while (nextOffset < total) {
90-
const response = await projectSdk.projectApi.listVariables({
91-
queries: [Query.limit(variablesLimit), Query.offset(nextOffset)]
92-
});
95+
const response = await sdkListVariables([
96+
Query.limit(variablesLimit),
97+
Query.offset(nextOffset)
98+
]);
9399
94100
total = response.total;
95101
@@ -106,7 +112,11 @@
106112
}
107113
108114
async function ensureAllVariablesLoaded() {
109-
if (fullVariableList && fullVariableList.total === variableList.total) return;
115+
const total = backendPagination ? variableList.total : variableList.variables.length;
116+
117+
if (fullVariableList && fullVariableList.variables.length >= total) {
118+
return;
119+
}
110120
111121
fullVariableList = await loadAllVariables();
112122
}
@@ -321,31 +331,35 @@
321331
}
322332
}
323333
324-
$: conflictVariables = globalVariableList
325-
? globalVariableList.variables.filter((globalVariable) => {
326-
return variableList.variables.find((variable) => {
327-
return variable.key === globalVariable.key;
328-
});
329-
})
330-
: [];
331-
332334
$: if (allVariableList && fullVariableList !== allVariableList) {
333335
fullVariableList = allVariableList;
334336
}
335337
336338
$: if (variableList !== previousVariableList) {
339+
pagedVariableList = variableList;
340+
if (backendPagination && !reloadPageOnPagination) {
341+
variablesOffset = 0;
342+
}
337343
fullVariableList = undefined;
338344
previousVariableList = variableList;
339345
}
340346
341-
$: if (fullVariableList && fullVariableList.total !== variableList.total) {
347+
$: if (fullVariableList && fullVariableList.total < variableList.total) {
342348
fullVariableList = undefined;
343349
}
344350
345351
$: editorVariableList = fullVariableList ?? allVariableList ?? variableList;
346352
$: displayedVariables = backendPagination
347-
? variableList.variables
353+
? pagedVariableList.variables
348354
: variableList.variables.slice(offset, offset + limit);
355+
$: variableCount = backendPagination ? pagedVariableList.total : variableList.total;
356+
$: conflictVariables = globalVariableList
357+
? globalVariableList.variables.filter((globalVariable) => {
358+
return displayedVariables.find((variable) => {
359+
return variable.key === globalVariable.key;
360+
});
361+
})
362+
: [];
349363
350364
$: hasConflictOnPage = globalVariableList
351365
? displayedVariables.filter((variable) => {
@@ -368,6 +382,14 @@
368382
];
369383
370384
async function handleVariablesPageChange() {
385+
if (!reloadPageOnPagination) {
386+
pagedVariableList = await sdkListVariables([
387+
Query.limit(variablesLimit),
388+
Query.offset(variablesOffset)
389+
]);
390+
return;
391+
}
392+
371393
const nextUrl = new URL(page.url);
372394
373395
nextUrl.searchParams.set('variablesOffset', String(variablesOffset));
@@ -422,7 +444,7 @@
422444
<Icon slot="start" icon={IconUpload} /> Import .env
423445
</Button>
424446
</Layout.Stack>
425-
{#if variableList.total}
447+
{#if variableCount}
426448
<Button
427449
secondary
428450
{disabled}
@@ -436,7 +458,7 @@
436458
{/if}
437459
</Layout.Stack>
438460
</Layout.Stack>
439-
{@const sum = variableList.total}
461+
{@const sum = variableCount}
440462
{#if sum}
441463
<Layout.Stack gap="l">
442464
{#if conflictVariables.length > 0}

0 commit comments

Comments
 (0)