Skip to content
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

Fix pagination #1587

Merged
merged 4 commits into from
Jan 2, 2025
+37 −124
Merged

Fix pagination #1587

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
403dcb5
fix: total pages count on pagination.
ItzNotABug Dec 30, 2024
51c57eb
address comment.
ItzNotABug Jan 2, 2025
e6b9cf1
remove: unused var.
ItzNotABug Jan 2, 2025
3959200
ran: formatter.
ItzNotABug Jan 2, 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
46 changes: 23 additions & 23 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,9 @@ pnpm run lint

Diagnostic tool that checks for the following:

- Unused CSS
- Svelte A11y hints
- TypeScript compiler errors
- Unused CSS
- Svelte A11y hints
- TypeScript compiler errors

```bash
pnpm run check
Expand All @@ -130,11 +130,11 @@ doc-548-submit-a-pull-request-section-to-contribution-guide

When `TYPE` can be:

- **feat** - is a new feature
- **doc** - documentation only changes
- **cicd** - changes related to CI/CD system
- **fix** - a bug fix
- **refactor** - code change that neither fixes a bug nor adds a feature
- **feat** - is a new feature
- **doc** - documentation only changes
- **cicd** - changes related to CI/CD system
- **fix** - a bug fix
- **refactor** - code change that neither fixes a bug nor adds a feature

**All PRs must include a commit message with a description of the changes made!**

Expand Down Expand Up @@ -175,22 +175,22 @@ $ git push origin [name_of_your_new_branch]

Before committing always make sure to run all available tools to improve the codebase:

- Formatter
- `pnpm run format`
- Tests
- `pnpm test`
- Diagnostics
- `pnpm run check`
- Formatter
- `pnpm run format`
- Tests
- `pnpm test`
- Diagnostics
- `pnpm run check`

### Performance

Page load times are a key consideration for users of all browsers and device types.

There are some general things we can do in front-end development:

- Minimize HTTP requests
- Minimize blocking – content should be readable before client-side processing
- Lazy load "supplementary" content, especially images
- Minimize HTTP requests
- Minimize blocking – content should be readable before client-side processing
- Lazy load "supplementary" content, especially images

### Don't Repeat Yourself (DRY)

Expand All @@ -202,12 +202,12 @@ If you stick to this principle, you will ensure that you will only ever need to

Separate _structure_ from _presentation_ from _behavior_ to aid maintainability and understanding.

- Keep CSS (presentation), JS (behavior) and HTML (structure) in the same respective Svelte component
- Avoid writing inline CSS or Javascript in HTML
- Avoid writing CSS or HTML in Javascript
- Don't choose HTML elements to imply style
- Where appropriate, use CSS or Svelte rather than Javascript for animations and transitions
- Try to use templates when defining markup in Javascript
- Keep CSS (presentation), JS (behavior) and HTML (structure) in the same respective Svelte component
- Avoid writing inline CSS or Javascript in HTML
- Avoid writing CSS or HTML in Javascript
- Don't choose HTML elements to imply style
- Where appropriate, use CSS or Svelte rather than Javascript for animations and transitions
- Try to use templates when defining markup in Javascript

### Write code to be read

Expand Down
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@

Appwrite Console has been built with the following frameworks:

- [Svelte](https://svelte.dev/)
- [Svelte Kit](https://kit.svelte.dev/)
- [Svelte](https://svelte.dev/)
- [Svelte Kit](https://kit.svelte.dev/)

## Developer Experience

Expand Down
93 changes: 1 addition & 92 deletions src/lib/components/pagination.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,8 @@
export let sum: number;
export let limit: number;
export let offset: number;
export let hidePages = false;

$: totalPages = Math.ceil(sum / limit);
$: currentPage = Math.floor(offset / limit + 1);
$: pages = pagination(currentPage, totalPages);

function pagination(page: number, total: number) {
const pagesShown = 5;
const start = Math.max(
1,
Math.min(page - Math.floor((pagesShown - 3) / 2), total - pagesShown + 2)
);
const end = Math.min(
total,
Math.max(page + Math.floor((pagesShown - 2) / 2), pagesShown - 1)
);
return [
...(start > 2 ? [1, '...'] : start > 1 ? [1] : []),
...Array.from({ length: end + 1 - start }, (_, i) => i + start),
...(end < total - 1 ? ['...', total] : end < total ? [total] : [])
];
}

function getLink(page: number): string {
const url = new URL($pageStore.url);
Expand All @@ -40,75 +20,4 @@
}
</script>

<Pagination page={currentPage} total={totalPages} {limit} createLink={getLink} />
<!-- {#if totalPages > 1}
{#key $pageStore.url}
<nav class="pagination">
{#if currentPage <= 1}
<Button disabled text ariaLabel="prev page">
<span class="icon-cheveron-left" aria-hidden="true" />
<span class="text">Prev</span>
</Button>
{:else}
<Button text ariaLabel="prev page" href={getLink(currentPage - 1)}>
<span class="icon-cheveron-left" aria-hidden="true" />
<span class="text">Prev</span>
</Button>
{/if}
{#if !hidePages}
<ol class="pagination-list is-only-desktop">
{#each pages as page}
{#if typeof page === 'number'}
<li class="pagination-item">
{#if currentPage === page}
<Button text ariaLabel="page" disabled>
<span class="text">{page}</span>
</Button>
{:else}
<Button text ariaLabel="page" href={getLink(page)}>
<span class="text">{page}</span>
</Button>
{/if}
</li>
{:else}
<li class="li is-text">
<span class="icon">...</span>
</li>
{/if}
{/each}
</ol>
{/if}
{#if currentPage >= totalPages}
<Button text ariaLabel="next page" disabled>
<span class="text">Next</span>
<span class="icon-cheveron-right" aria-hidden="true" />
</Button>
{:else}
<Button text ariaLabel="next page" href={getLink(currentPage + 1)}>
<span class="text">Next</span>
<span class="icon-cheveron-right" aria-hidden="true" />
</Button>
{/if}
</nav>
{/key}
{:else}
<nav class="pagination">
<Button text ariaLabel="prev page" disabled>
<span class="icon-cheveron-left" aria-hidden="true" />
<span class="text">Prev</span>
</Button>
{#if !hidePages}
<ol class="pagination-list is-only-desktop">
<li class="pagination-item">
<Button disabled ariaLabel="page">
<span class="text">1</span>
</Button>
</li>
</ol>
{/if}
<Button text disabled ariaLabel="next page">
<span class="text">Next</span>
<span class="icon-cheveron-right" aria-hidden="true" />
</Button>
</nav>
{/if} -->
<Pagination page={currentPage} total={sum} {limit} createLink={getLink} />
18 changes: 11 additions & 7 deletions src/routes/(console)/project-[project]/sites/site-[site]/logs/+page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,16 @@ export const load = async ({ params, depends, url, route, parent }) => {
limit,
query,
search,
logs: await sdk.forProject.sites.listLogs(params.site, [
Query.limit(limit),
Query.offset(offset),
Query.orderDesc(''),
...parsedQueries.values()
], search),
site,
logs: await sdk.forProject.sites.listLogs(
params.site,
[
Query.limit(limit),
Query.offset(offset),
Query.orderDesc(''),
...parsedQueries.values()
],
search
),
site
};
};
Loading