-
Notifications
You must be signed in to change notification settings - Fork 174
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Pagination icon only and query params (#508)
* feat(pagination): add iconOnly for previous/next * feat(pagination): add queryParams inputs to next/previous, add query params example * docs(pagination): update query param example code * feat(pagination): transform page query with numberAttribute and 1 as default * defaults to 1 when page query is a string (e.g. ?page=spartan) * docs(pagination): update query params example
- Loading branch information
1 parent
be4a87d
commit b2c4b37
Showing
5 changed files
with
334 additions
and
10 deletions.
There are no files selected for viewing
101 changes: 101 additions & 0 deletions
101
apps/app/src/app/pages/(components)/components/(pagination)/pagination--icon-only.example.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { | ||
| HlmPaginationContentDirective, | ||
| HlmPaginationDirective, | ||
| HlmPaginationEllipsisComponent, | ||
| HlmPaginationItemDirective, | ||
| HlmPaginationLinkDirective, | ||
| HlmPaginationNextComponent, | ||
| HlmPaginationPreviousComponent, | ||
| } from '@spartan-ng/ui-pagination-helm'; | ||
|
|
||
| @Component({ | ||
| selector: 'spartan-pagination-icon-only', | ||
| standalone: true, | ||
| imports: [ | ||
| HlmPaginationDirective, | ||
| HlmPaginationContentDirective, | ||
| HlmPaginationItemDirective, | ||
| HlmPaginationPreviousComponent, | ||
| HlmPaginationNextComponent, | ||
| HlmPaginationLinkDirective, | ||
| HlmPaginationEllipsisComponent, | ||
| ], | ||
| template: ` | ||
| <nav hlmPagination> | ||
| <ul hlmPaginationContent> | ||
| <li hlmPaginationItem> | ||
| <hlm-pagination-previous iconOnly="true" link="/components/menubar" /> | ||
| </li> | ||
| <li hlmPaginationItem> | ||
| <a hlmPaginationLink link="#">1</a> | ||
| </li> | ||
| <li hlmPaginationItem> | ||
| <a hlmPaginationLink link="#" isActive>2</a> | ||
| </li> | ||
| <li hlmPaginationItem> | ||
| <a hlmPaginationLink link="#">3</a> | ||
| </li> | ||
| <li hlmPaginationItem> | ||
| <hlm-pagination-ellipsis /> | ||
| </li> | ||
| <li hlmPaginationItem> | ||
| <hlm-pagination-next iconOnly="true" link="/components/popover" /> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| `, | ||
| }) | ||
| export class PaginationIconOnlyComponent {} | ||
|
|
||
| export const iconOnlyCode = ` | ||
| import { Component } from '@angular/core'; | ||
| import { | ||
| HlmPaginationContentDirective, | ||
| HlmPaginationDirective, | ||
| HlmPaginationEllipsisComponent, | ||
| HlmPaginationItemDirective, | ||
| HlmPaginationLinkDirective, | ||
| HlmPaginationNextComponent, | ||
| HlmPaginationPreviousComponent, | ||
| } from '@spartan-ng/ui-pagination-helm'; | ||
| @Component({ | ||
| selector: 'spartan-pagination-icon-only', | ||
| standalone: true, | ||
| imports: [ | ||
| HlmPaginationDirective, | ||
| HlmPaginationContentDirective, | ||
| HlmPaginationItemDirective, | ||
| HlmPaginationPreviousComponent, | ||
| HlmPaginationNextComponent, | ||
| HlmPaginationLinkDirective, | ||
| HlmPaginationEllipsisComponent, | ||
| ], | ||
| template: \` | ||
| <nav hlmPagination> | ||
| <ul hlmPaginationContent> | ||
| <li hlmPaginationItem> | ||
| <hlm-pagination-previous iconOnly="true" link="/components/menubar" /> | ||
| </li> | ||
| <li hlmPaginationItem> | ||
| <a hlmPaginationLink link="#">1</a> | ||
| </li> | ||
| <li hlmPaginationItem> | ||
| <a hlmPaginationLink link="#" isActive>2</a> | ||
| </li> | ||
| <li hlmPaginationItem> | ||
| <a hlmPaginationLink link="#">3</a> | ||
| </li> | ||
| <li hlmPaginationItem> | ||
| <hlm-pagination-ellipsis /> | ||
| </li> | ||
| <li hlmPaginationItem> | ||
| <hlm-pagination-next iconOnly="true" link="/components/popover" /> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| \`, | ||
| }) | ||
| export class PaginationIconOnlyComponent {} | ||
| `; |
171 changes: 171 additions & 0 deletions
171
...pp/src/app/pages/(components)/components/(pagination)/pagination--query-params.example.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,171 @@ | ||
| import { Component, computed, inject, numberAttribute } from '@angular/core'; | ||
| import { toSignal } from '@angular/core/rxjs-interop'; | ||
| import { ActivatedRoute } from '@angular/router'; | ||
| import { | ||
| HlmPaginationContentDirective, | ||
| HlmPaginationDirective, | ||
| HlmPaginationItemDirective, | ||
| HlmPaginationLinkDirective, | ||
| HlmPaginationNextComponent, | ||
| HlmPaginationPreviousComponent, | ||
| } from '@spartan-ng/ui-pagination-helm'; | ||
| import { map } from 'rxjs'; | ||
|
|
||
| @Component({ | ||
| selector: 'spartan-pagination-query-params', | ||
| standalone: true, | ||
| imports: [ | ||
| HlmPaginationDirective, | ||
| HlmPaginationContentDirective, | ||
| HlmPaginationItemDirective, | ||
| HlmPaginationPreviousComponent, | ||
| HlmPaginationNextComponent, | ||
| HlmPaginationLinkDirective, | ||
| ], | ||
| template: ` | ||
| <nav hlmPagination> | ||
| <ul hlmPaginationContent> | ||
| @if (currentPage() > 1) { | ||
| <li hlmPaginationItem> | ||
| <hlm-pagination-previous link="." [queryParams]="{ page: currentPage() - 1 }" queryParamsHandling="merge" /> | ||
| </li> | ||
| } | ||
| @for (page of pages; track 'page_' + page) { | ||
| <li hlmPaginationItem> | ||
| <a | ||
| hlmPaginationLink | ||
| [link]="currentPage() !== page ? '.' : undefined" | ||
| [queryParams]="{ page }" | ||
| queryParamsHandling="merge" | ||
| [isActive]="currentPage() === page" | ||
| > | ||
| {{ page }} | ||
| </a> | ||
| </li> | ||
| } | ||
| @if (currentPage() < pages[pages.length - 1]) { | ||
| <li hlmPaginationItem> | ||
| <hlm-pagination-next link="." [queryParams]="{ page: currentPage() + 1 }" queryParamsHandling="merge" /> | ||
| </li> | ||
| } | ||
| </ul> | ||
| </nav> | ||
| `, | ||
| }) | ||
| export class PaginationQueryParamsComponent { | ||
| private readonly _route = inject(ActivatedRoute); | ||
|
|
||
| /** | ||
| * Alternative would be to enable `withComponentInputBinding` in `provideRouter`. | ||
| * Than you can bind `input` signal to the query param. | ||
| * | ||
| * ```ts | ||
| * pageQuery = input<number, NumberInput>(1, { | ||
| * alias: 'page', | ||
| * transform: (value) => numberAttribute(value, 1), | ||
| * }); | ||
| * ``` | ||
| * | ||
| * This can replace `_pageQuery` and `currentPage` computed property. | ||
| */ | ||
| private readonly _pageQuery = toSignal( | ||
| this._route.queryParamMap.pipe( | ||
| map((params) => { | ||
| const pageQuery = params.get('page'); | ||
| return pageQuery ? numberAttribute(pageQuery, 1) : undefined; | ||
| }), | ||
| ), | ||
| ); | ||
|
|
||
| public currentPage = computed(() => this._pageQuery() ?? 1); | ||
|
|
||
| public pages = [1, 2, 3, 4]; | ||
| } | ||
|
|
||
| export const queryParamsCode = ` | ||
| import { Component, computed, inject, numberAttribute } from '@angular/core'; | ||
| import { toSignal } from '@angular/core/rxjs-interop'; | ||
| import { ActivatedRoute } from '@angular/router'; | ||
| import { | ||
| HlmPaginationContentDirective, | ||
| HlmPaginationDirective, | ||
| HlmPaginationItemDirective, | ||
| HlmPaginationLinkDirective, | ||
| HlmPaginationNextComponent, | ||
| HlmPaginationPreviousComponent, | ||
| } from '@spartan-ng/ui-pagination-helm'; | ||
| import { map } from 'rxjs'; | ||
| @Component({ | ||
| selector: 'spartan-pagination-query-params', | ||
| standalone: true, | ||
| imports: [ | ||
| HlmPaginationDirective, | ||
| HlmPaginationContentDirective, | ||
| HlmPaginationItemDirective, | ||
| HlmPaginationPreviousComponent, | ||
| HlmPaginationNextComponent, | ||
| HlmPaginationLinkDirective, | ||
| ], | ||
| template: \` | ||
| <nav hlmPagination> | ||
| <ul hlmPaginationContent> | ||
| @if (currentPage() > 1) { | ||
| <li hlmPaginationItem> | ||
| <hlm-pagination-previous link="." [queryParams]="{ page: currentPage() - 1 }" queryParamsHandling="merge" /> | ||
| </li> | ||
| } | ||
| @for (page of pages; track 'page_' + page) { | ||
| <li hlmPaginationItem> | ||
| <a | ||
| hlmPaginationLink | ||
| [link]="currentPage() !== page ? '.' : undefined" | ||
| [queryParams]="{ page }" | ||
| queryParamsHandling="merge" | ||
| [isActive]="currentPage() === page" | ||
| > | ||
| {{ page }} | ||
| </a> | ||
| </li> | ||
| } | ||
| @if (currentPage() < pages[pages.length - 1]) { | ||
| <li hlmPaginationItem> | ||
| <hlm-pagination-next link="." [queryParams]="{ page: currentPage() + 1 }" queryParamsHandling="merge" /> | ||
| </li> | ||
| } | ||
| </ul> | ||
| </nav> | ||
| \`, | ||
| }) | ||
| export class PaginationQueryParamsComponent { | ||
| private readonly _route = inject(ActivatedRoute); | ||
| /** | ||
| * Alternative would be to enable \`withComponentInputBinding\` in \`provideRouter\`. | ||
| * Than you can bind \`input\` signal to the query param. | ||
| * | ||
| * \`\`\`ts | ||
| * pageQuery = input<number, NumberInput>(1, { | ||
| * alias: 'page', | ||
| * transform: (value) => numberAttribute(value, 1), | ||
| * }); | ||
| * \`\`\` | ||
| * | ||
| * This can replace \`_pageQuery\` and \`currentPage\` computed property. | ||
| */ | ||
| private readonly _pageQuery = toSignal( | ||
| this._route.queryParamMap.pipe( | ||
| map((params) => { | ||
| const pageQuery = params.get('page'); | ||
| return pageQuery ? numberAttribute(pageQuery, 1) : undefined; | ||
| }), | ||
| ), | ||
| ); | ||
| public currentPage = computed(() => this._pageQuery() ?? 1); | ||
| public pages = [1, 2, 3, 4]; | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.