Skip to content

Pagination for list repositories #2654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ItzNotABug merged 4 commits into from
Dec 5, 2025
+172 −135
Merged

Pagination for list repositories #2654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ff4ff0c
Pagination for list repositories
hmacr Nov 28, 2025
20e9ef9
Merge branch 'main' into ser-504
hmacr Dec 3, 2025
97afec4
update SDK
hmacr Dec 5, 2025
1ab59eb
feedback
hmacr Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
},
"dependencies": {
"@ai-sdk/svelte": "^1.1.24",
"@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@406d8be",
"@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@9b32107",
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@865e2fc",
"@appwrite.io/pink-legacy": "^1.0.3",
Expand Down
10 changes: 5 additions & 5 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

235 changes: 126 additions & 109 deletions src/lib/components/git/repositories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { EmptySearch, Paginator } from '$lib/components';
import { EmptySearch, PaginationInline } from '$lib/components';
import { Button, InputSearch, InputSelect } from '$lib/elements/forms';
import { timeFromNow } from '$lib/helpers/date';
import { sdk } from '$lib/stores/sdk';
Expand All @@ -17,7 +17,7 @@
import { IconLockClosed, IconPlus } from '@appwrite.io/pink-icons-svelte';
import ConnectGit from './connectGit.svelte';
import SvgIcon from '../svgIcon.svelte';
import { VCSDetectionType, type Models } from '@appwrite.io/console';
import { Query, VCSDetectionType, type Models } from '@appwrite.io/console';
import { getFrameworkIcon } from '$lib/stores/sites';
import { connectGitHub } from '$lib/stores/git';
import { page } from '$app/state';
Expand Down Expand Up @@ -48,6 +48,8 @@
let selectedInstallation = $state(null);
let isLoadingRepositories = $state(null);
let installationsMap = $state(null);
let offset = $state(0);
const limit = 5;

onMount(() => {
loadInstallations();
Expand All @@ -65,8 +67,18 @@
300
);

const loadRepositoryPage = async () => {
isLoadingRepositories = true;
try {
await loadRepositories(selectedInstallation, search);
} finally {
isLoadingRepositories = false;
}
};

$effect(() => {
if (selectedInstallation && search !== undefined) {
offset = 0; // reset offset to 0 when search changes
debouncedLoadRepositories(selectedInstallation, search);
}
});
Expand Down Expand Up @@ -103,27 +115,23 @@
}

async function loadRepositories(installationId: string, search: string) {
if (product === 'functions') {
$repositories.repositories = (
(await sdk
.forProject(page.params.region, page.params.project)
.vcs.listRepositories({
installationId,
type: VCSDetectionType.Runtime,
search: search || undefined
})) as unknown as Models.ProviderRepositoryRuntimeList
).runtimeProviderRepositories; //TODO: remove forced cast after backend fixes
} else {
$repositories.repositories = (
(await sdk
.forProject(page.params.region, page.params.project)
.vcs.listRepositories({
installationId,
type: VCSDetectionType.Framework,
search: search || undefined
})) as unknown as Models.ProviderRepositoryFrameworkList
).frameworkProviderRepositories;
}
const result = await sdk
.forProject(page.params.region, page.params.project)
.vcs.listRepositories({
installationId,
type:
product === 'functions' ? VCSDetectionType.Runtime : VCSDetectionType.Framework,
search: search || undefined,
queries: [Query.limit(limit), Query.offset(offset)]
});

$repositories.repositories =
product === 'functions'
? (result as unknown as Models.ProviderRepositoryRuntimeList)
.runtimeProviderRepositories
: (result as unknown as Models.ProviderRepositoryFrameworkList)
.frameworkProviderRepositories; //TODO: remove forced cast after backend fixes
$repositories.total = result.total;
$repositories.search = search;
$repositories.installationId = installationId;
return $repositories.repositories;
Expand Down Expand Up @@ -188,94 +196,85 @@
{#if selectedInstallation}
<!-- manual installation change -->
{#if isLoadingRepositories}
<SkeletonRepoList />
{:else if $repositories?.repositories?.length}
<Paginator
items={$repositories.repositories}
hideFooter={$repositories.repositories?.length <= 6}
limit={6}>
{#snippet children(
paginatedItems: Models.ProviderRepositoryRuntime[] &
Models.ProviderRepositoryFramework[]
)}
<Table.Root columns={1} let:root>
{#each paginatedItems as repo}
<Table.Row.Base {root}>
<Table.Cell {root}>
<Layout.Stack direction="row" alignItems="center" gap="s">
{#if action === 'select'}
<input
class="is-small u-margin-inline-end-8"
type="radio"
name="repositories"
bind:group={selectedRepository}
onchange={() => repository.set(repo)}
value={repo.id} />
<SkeletonRepoList count={limit} />
{:else if $repositories.total > 0}
<Table.Root columns={1} let:root>
{#each $repositories.repositories as repo}
<Table.Row.Base {root}>
<Table.Cell {root}>
<Layout.Stack direction="row" alignItems="center" gap="s">
{#if action === 'select'}
<input
class="is-small u-margin-inline-end-8"
type="radio"
name="repositories"
bind:group={selectedRepository}
onchange={() => repository.set(repo)}
value={repo.id} />
{/if}
{#if product === 'sites'}
{#if 'framework' in repo && repo?.framework && repo.framework !== 'other'}
<Avatar size="xs" alt={repo.name}>
<SvgIcon
name={getFrameworkIcon(repo.framework)}
iconSize="small" />
</Avatar>
{:else}
<Avatar size="xs" alt={repo.name} empty />
{/if}
{:else}
{@const iconName =
'runtime' in repo && repo?.runtime
? repo.runtime.split('-')[0]
: undefined}
<Avatar size="xs" alt={repo.name} empty={!iconName}>
{#if iconName}
<SvgIcon name={iconName} iconSize="small" />
{/if}
{#if product === 'sites'}
{#if repo?.framework && repo.framework !== 'other'}
<Avatar size="xs" alt={repo.name}>
<SvgIcon
name={getFrameworkIcon(repo.framework)}
iconSize="small" />
</Avatar>
{:else}
<Avatar size="xs" alt={repo.name} empty />
{/if}
{:else}
{@const iconName = repo?.runtime
? repo.runtime.split('-')[0]
: undefined}
<Avatar size="xs" alt={repo.name} empty={!iconName}>
{#if iconName}
<SvgIcon name={iconName} iconSize="small" />
{/if}
</Avatar>
{/if}
<Layout.Stack
direction="row"
alignItems="center"
gap="s"
style="flex: 1; min-width: 0;">
<Typography.Text
</Avatar>
{/if}
<Layout.Stack
direction="row"
alignItems="center"
gap="s"
style="flex: 1; min-width: 0;">
<Typography.Text
truncate
color="--fgcolor-neutral-secondary"
style="flex: 1; min-width: 0;">
{repo.name}
</Typography.Text>
{#if repo.private}
<Icon
size="s"
icon={IconLockClosed}
color="--fgcolor-neutral-tertiary" />
{/if}
{#if !$isSmallViewport}
<time datetime={repo.pushedAt}>
<Typography.Caption
variant="400"
truncate
color="--fgcolor-neutral-secondary"
style="flex: 1; min-width: 0;">
{repo.name}
</Typography.Text>
{#if repo.private}
<Icon
size="s"
icon={IconLockClosed}
color="--fgcolor-neutral-tertiary" />
{/if}
{#if !$isSmallViewport}
<time datetime={repo.pushedAt}>
<Typography.Caption
variant="400"
truncate
color="--fgcolor-neutral-tertiary">
{timeFromNow(repo.pushedAt)}
</Typography.Caption>
</time>
{/if}
</Layout.Stack>
{#if action === 'button'}
<PinkButton.Button
size="xs"
variant="secondary"
style="flex-shrink: 0;"
on:click={() => connect(repo)}>
Connect
</PinkButton.Button>
{/if}
</Layout.Stack>
</Table.Cell>
</Table.Row.Base>
{/each}
</Table.Root>
{/snippet}
</Paginator>
color="--fgcolor-neutral-tertiary">
{timeFromNow(repo.pushedAt)}
</Typography.Caption>
</time>
{/if}
</Layout.Stack>
{#if action === 'button'}
<PinkButton.Button
size="xs"
variant="secondary"
style="flex-shrink: 0;"
on:click={() => connect(repo)}>
Connect
</PinkButton.Button>
{/if}
</Layout.Stack>
</Table.Cell>
</Table.Row.Base>
{/each}
</Table.Root>
{:else if search}
<EmptySearch hidePages hidePagination bind:search target="repositories">
<svelte:fragment slot="actions">
Expand All @@ -293,6 +292,24 @@
</Layout.Stack>
</Card>
{/if}

{#if isLoadingRepositories || $repositories.total > 0}
<Layout.Stack
direction="row"
justifyContent="space-between"
alignItems="center"
wrap="wrap">
<Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
Total results: {$repositories.total}
</Typography.Text>
<PaginationInline
{limit}
bind:offset
total={$repositories.total}
hidePages={true}
on:change={loadRepositoryPage} />
</Layout.Stack>
{/if}
{/if}
</Layout.Stack>
{:else}
Expand Down
4 changes: 3 additions & 1 deletion src/lib/components/git/skeletonRepoList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<script lang="ts">
import { Layout, Table, Skeleton } from '@appwrite.io/pink-svelte';

const { count = 4 }: { count?: number } = $props();
</script>

<Table.Root columns={1} let:root>
{#each Array(4) as _}
{#each Array(count) as _}
<Table.Row.Base {root}>
<Table.Cell {root}>
<Layout.Stack direction="row" alignItems="center">
Expand Down
4 changes: 2 additions & 2 deletions ...routes/(console)/project-[region]-[project]/functions/create-function/deploy/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
import { Fieldset, Layout, Icon, Input, Tag } from '@appwrite.io/pink-svelte';
import { IconGithub, IconPencil } from '@appwrite.io/pink-icons-svelte';
import { onMount } from 'svelte';
import { ID, Runtime, Type } from '@appwrite.io/console';
import { ID, Runtime, TemplateReferenceType } from '@appwrite.io/console';
import { CustomId } from '$lib/components';
import { getIconFromRuntime } from '$lib/stores/runtimes';
import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
Expand Down Expand Up @@ -134,7 +134,7 @@
repository: data.repository.name,
owner: data.repository.owner,
rootDirectory: rootDir || '.',
type: Type.Tag,
type: TemplateReferenceType.Tag,
reference: latestTag ?? '1.0.0',
activate: true
});
Expand Down
4 changes: 2 additions & 2 deletions ...project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
import { installation, repository } from '$lib/stores/vcs';
import { Layout } from '@appwrite.io/pink-svelte';
import { writable } from 'svelte/store';
import { ID, Runtime, VCSDeploymentType, VCSDetectionType } from '@appwrite.io/console';
import { ID, Runtime, VCSReferenceType, VCSDetectionType } from '@appwrite.io/console';
import type { Models } from '@appwrite.io/console';
import { onMount } from 'svelte';
import Details from '../(components)/details.svelte';
Expand Down Expand Up @@ -132,7 +132,7 @@
.forProject(page.params.region, page.params.project)
.functions.createVcsDeployment({
functionId: func.$id,
type: VCSDeploymentType.Branch,
type: VCSReferenceType.Branch,
reference: branch,
activate: true
});
Expand Down
Loading