From e8cba9af73c5e8902f34189a5639f5dd4c04d0cf Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Tue, 12 May 2026 11:34:45 +0530 Subject: [PATCH] Fix variable settings pagination --- .../function-[function]/settings/+page.svelte | 11 ++++ .../function-[function]/settings/+page.ts | 21 +++++-- .../sites/site-[site]/settings/+page.svelte | 11 ++++ .../sites/site-[site]/settings/+page.ts | 20 +++++-- .../updateVariables.svelte | 60 +++++++++++++------ 5 files changed, 94 insertions(+), 29 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte index 6175d94b92..facf7169d0 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte @@ -62,6 +62,12 @@ .functions.deleteVariable({ functionId: data.function.$id, variableId }); await Promise.all([invalidate(Dependencies.VARIABLES), invalidate(Dependencies.FUNCTION)]); }; + + const sdkListVariables = async (queries: string[]) => + sdk.forProject(page.params.region, page.params.project).functions.listVariables({ + functionId: data.function.$id, + queries + }); @@ -105,9 +111,14 @@ {sdkCreateVariable} {sdkUpdateVariable} {sdkDeleteVariable} + {sdkListVariables} isGlobal={false} globalVariableList={data.globalVariables} variableList={data.variables} + backendPagination + reloadPageOnPagination={false} + variablesOffset={data.variablesOffset} + variablesLimit={data.limit} project={data.project} analyticsSource="function_settings" /> diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.ts index 1134246869..eafbd342a3 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.ts +++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.ts @@ -1,10 +1,16 @@ import { sdk } from '$lib/stores/sdk'; -import { Dependencies } from '$lib/constants'; +import { Dependencies, PAGE_LIMIT } from '$lib/constants'; +import { Query } from '@appwrite.io/console'; + +const VARIABLES_LIMIT = 100; export const load = async ({ params, depends, parent }) => { depends(Dependencies.VARIABLES); depends(Dependencies.FUNCTION); + const limit = PAGE_LIMIT; + const variablesOffset = 0; + const { runtimesList, specificationsList, function: fn } = await parent(); const enabledSpecs = specificationsList?.specifications?.filter((s) => s.enabled) ?? []; @@ -16,10 +22,13 @@ export const load = async ({ params, depends, parent }) => { } const [globalVariables, variables] = await Promise.all([ - sdk.forProject(params.region, params.project).projectApi.listVariables(), - sdk - .forProject(params.region, params.project) - .functions.listVariables({ functionId: params.function }) + sdk.forProject(params.region, params.project).projectApi.listVariables({ + queries: [Query.limit(VARIABLES_LIMIT)] + }), + sdk.forProject(params.region, params.project).functions.listVariables({ + functionId: params.function, + queries: [Query.limit(limit), Query.offset(variablesOffset)] + }) ]); // Conflicting variables first @@ -43,6 +52,8 @@ export const load = async ({ params, depends, parent }) => { return { variables, globalVariables, + limit, + variablesOffset, runtimesList, specificationsList, function: fn diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.svelte index faddf5f366..6362982abf 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.svelte @@ -51,6 +51,12 @@ await Promise.all([invalidate(Dependencies.VARIABLES), invalidate(Dependencies.SITE)]); }; + const sdkListVariables = async (queries: string[]) => + sdk.forProject(page.params.region, page.params.project).sites.listVariables({ + siteId: page.params.site, + queries + }); + onMount(async () => { if ( page.url.searchParams.has('newInstallation') && @@ -75,9 +81,14 @@ {sdkCreateVariable} {sdkUpdateVariable} {sdkDeleteVariable} + {sdkListVariables} isGlobal={false} globalVariableList={data.globalVariables} variableList={data.variables} + backendPagination + reloadPageOnPagination={false} + variablesOffset={data.variablesOffset} + variablesLimit={data.limit} project={data.project} product="site" analyticsSource="site_settings" /> diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.ts index a4d6060f8a..a99d8bf741 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.ts +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/+page.ts @@ -1,18 +1,26 @@ import { sdk } from '$lib/stores/sdk'; -import { Dependencies } from '$lib/constants'; +import { Dependencies, PAGE_LIMIT } from '$lib/constants'; import { isCloud } from '$lib/system'; +import { Query } from '@appwrite.io/console'; + +const VARIABLES_LIMIT = 100; export const load = async ({ params, depends, parent }) => { depends(Dependencies.VARIABLES); depends(Dependencies.SITE); + const limit = PAGE_LIMIT; + const variablesOffset = 0; const { site } = await parent(); const [globalVariables, variables, frameworks, installations, specificationsList] = await Promise.all([ - sdk.forProject(params.region, params.project).projectApi.listVariables(), - sdk - .forProject(params.region, params.project) - .sites.listVariables({ siteId: params.site }), + sdk.forProject(params.region, params.project).projectApi.listVariables({ + queries: [Query.limit(VARIABLES_LIMIT)] + }), + sdk.forProject(params.region, params.project).sites.listVariables({ + siteId: params.site, + queries: [Query.limit(limit), Query.offset(variablesOffset)] + }), sdk.forProject(params.region, params.project).sites.listFrameworks(), sdk.forProject(params.region, params.project).vcs.listInstallations(), isCloud @@ -51,6 +59,8 @@ export const load = async ({ params, depends, parent }) => { frameworks, variables, globalVariables, + limit, + variablesOffset, installations, specificationsList }; diff --git a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte index 6e3d386204..0d5fa5295f 100644 --- a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte +++ b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte @@ -60,8 +60,13 @@ secret?: boolean ) => Promise; export let sdkDeleteVariable: (variableId: string) => Promise; + export let sdkListVariables: (queries: string[]) => Promise = (queries) => + sdk.forProject(page.params.region, page.params.project).projectApi.listVariables({ + queries + }); export let product: 'function' | 'site' = 'function'; export let backendPagination = false; + export let reloadPageOnPagination = true; export let variablesOffset = 0; export let variablesLimit = 10; export let disabled = false; @@ -76,20 +81,21 @@ let showDeleteModal = false; let deleteError: string; let fullVariableList: Models.VariableList | undefined = allVariableList; + let pagedVariableList: Models.VariableList = variableList; let previousVariableList = variableList; let offset = 0; const limit = 10; async function loadAllVariables() { - const projectSdk = sdk.forProject(page.params.region, page.params.project); - const variables = [...variableList.variables]; - let nextOffset = variables.length; + const variables = backendPagination ? [] : [...variableList.variables]; + let nextOffset = backendPagination ? 0 : variables.length; let total = variableList.total; while (nextOffset < total) { - const response = await projectSdk.projectApi.listVariables({ - queries: [Query.limit(variablesLimit), Query.offset(nextOffset)] - }); + const response = await sdkListVariables([ + Query.limit(variablesLimit), + Query.offset(nextOffset) + ]); total = response.total; @@ -106,7 +112,11 @@ } async function ensureAllVariablesLoaded() { - if (fullVariableList && fullVariableList.total === variableList.total) return; + const total = backendPagination ? variableList.total : variableList.variables.length; + + if (fullVariableList && fullVariableList.variables.length >= total) { + return; + } fullVariableList = await loadAllVariables(); } @@ -321,31 +331,35 @@ } } - $: conflictVariables = globalVariableList - ? globalVariableList.variables.filter((globalVariable) => { - return variableList.variables.find((variable) => { - return variable.key === globalVariable.key; - }); - }) - : []; - $: if (allVariableList && fullVariableList !== allVariableList) { fullVariableList = allVariableList; } $: if (variableList !== previousVariableList) { + pagedVariableList = variableList; + if (backendPagination && !reloadPageOnPagination) { + variablesOffset = 0; + } fullVariableList = undefined; previousVariableList = variableList; } - $: if (fullVariableList && fullVariableList.total !== variableList.total) { + $: if (fullVariableList && fullVariableList.total < variableList.total) { fullVariableList = undefined; } $: editorVariableList = fullVariableList ?? allVariableList ?? variableList; $: displayedVariables = backendPagination - ? variableList.variables + ? pagedVariableList.variables : variableList.variables.slice(offset, offset + limit); + $: variableCount = backendPagination ? pagedVariableList.total : variableList.total; + $: conflictVariables = globalVariableList + ? globalVariableList.variables.filter((globalVariable) => { + return displayedVariables.find((variable) => { + return variable.key === globalVariable.key; + }); + }) + : []; $: hasConflictOnPage = globalVariableList ? displayedVariables.filter((variable) => { @@ -368,6 +382,14 @@ ]; async function handleVariablesPageChange() { + if (!reloadPageOnPagination) { + pagedVariableList = await sdkListVariables([ + Query.limit(variablesLimit), + Query.offset(variablesOffset) + ]); + return; + } + const nextUrl = new URL(page.url); nextUrl.searchParams.set('variablesOffset', String(variablesOffset)); @@ -422,7 +444,7 @@ Import .env - {#if variableList.total} + {#if variableCount}