feat(addon-table): add optional first/last page buttons to the TableP…

…agination component
taiga-family · Mar 7, 2024 · 826074a · 826074a
1 parent 63ed8a3
commit 826074a
Show file tree

Hide file tree

Showing 26 changed files with 267 additions and 43 deletions.
diff --git a/projects/addon-table/components/table-pagination/table-pagination.component.ts b/projects/addon-table/components/table-pagination/table-pagination.component.ts
@@ -7,7 +7,7 @@ import {
     Output,
 } from '@angular/core';
 import {TUI_TABLE_PAGINATION_TEXTS} from '@taiga-ui/addon-table/tokens';
-import {TUI_COMMON_ICONS, TUI_SPIN_ICONS, TUI_SPIN_TEXTS} from '@taiga-ui/core';
+import {TUI_COMMON_ICONS, TUI_PAGINATION_ICONS} from '@taiga-ui/core';
 
 import type {TuiTablePaginationOptions} from './table-pagination.options';
 import {TUI_TABLE_PAGINATION_OPTIONS} from './table-pagination.options';
@@ -38,6 +38,9 @@ export class TuiTablePaginationComponent {
     @Input()
     public size = this.options.size;
 
+    @Input()
+    public showFirstLastPageButtons = false;
+
     /**
      * TODO: Remove in 4.0
      * @deprecated use paginationChange
@@ -57,10 +60,9 @@ export class TuiTablePaginationComponent {
 
     protected open = false;
 
-    protected readonly icons = inject(TUI_SPIN_ICONS);
-    protected readonly spinTexts$ = inject(TUI_SPIN_TEXTS);
-    protected readonly texts$ = inject(TUI_TABLE_PAGINATION_TEXTS);
     protected readonly commonIcons = inject(TUI_COMMON_ICONS);
+    protected readonly paginationIcons = inject(TUI_PAGINATION_ICONS);
+    protected readonly texts$ = inject(TUI_TABLE_PAGINATION_TEXTS);
 
     public onItem(size: number): void {
         const {start} = this;
@@ -73,8 +75,11 @@ export class TuiTablePaginationComponent {
         this.paginationChange.emit(this.pagination);
     }
 
+    /**
+     * @deprecated Use `pageCount` instead.
+     */
     protected get pages(): number {
-        return Math.ceil(this.total / this.size);
+        return this.pageCount;
     }
 
     protected get showPages(): boolean {
@@ -85,6 +90,10 @@ export class TuiTablePaginationComponent {
         return this.options.sizeOptionContent;
     }
 
+    protected get pageCount(): number {
+        return Math.ceil(this.total / this.size);
+    }
+
     protected get start(): number {
         return this.page * this.size;
     }
@@ -93,12 +102,34 @@ export class TuiTablePaginationComponent {
         return Math.min(this.start + this.size, this.total);
     }
 
+    /**
+     * @deprecated Use `previousPageDisabled` instead.
+     */
     protected get leftDisabled(): boolean {
-        return !this.start;
+        return this.previousPageDisabled;
     }
 
+    /**
+     * @deprecated Use `nextPageDisabled` instead.
+     */
     protected get rightDisabled(): boolean {
-        return this.end === this.total;
+        return this.nextPageDisabled;
+    }
+
+    protected get firstPageDisabled(): boolean {
+        return this.previousPage === null;
+    }
+
+    protected get previousPageDisabled(): boolean {
+        return this.previousPage === null;
+    }
+
+    protected get nextPageDisabled(): boolean {
+        return this.nextPage === null;
+    }
+
+    protected get lastPageDisabled(): boolean {
+        return this.nextPage === null;
     }
 
     protected get pagination(): TuiTablePagination {
@@ -108,15 +139,83 @@ export class TuiTablePaginationComponent {
         };
     }
 
+    /**
+     * @deprecated Use `selectPreviousPage()` instead.
+     */
     protected back(): void {
-        this.page--;
-        this.pageChange.emit(this.page);
-        this.paginationChange.emit(this.pagination);
+        this.selectPreviousPage();
     }
 
+    /**
+     * @deprecated Use `selectNextPage()` instead.
+     */
     protected forth(): void {
-        this.page++;
-        this.pageChange.emit(this.page);
+        this.selectNextPage();
+    }
+
+    protected selectFirstPage(): void {
+        this.selectPage(this.firstPage);
+    }
+
+    protected selectPreviousPage(): void {
+        const previousPage = this.previousPage;
+
+        if (previousPage === null) {
+            return;
+        }
+
+        this.selectPage(previousPage);
+    }
+
+    protected selectNextPage(): void {
+        const nextPage = this.nextPage;
+
+        if (nextPage === null) {
+            return;
+        }
+
+        this.selectPage(nextPage);
+    }
+
+    protected selectLastPage(): void {
+        this.selectPage(this.lastPage);
+    }
+
+    /**
+     * Returns the index of the first page.
+     */
+    private get firstPage(): number {
+        return 0;
+    }
+
+    /**
+     * Returns the index of the last page.
+     */
+    private get lastPage(): number {
+        return this.pageCount - 1;
+    }
+
+    /**
+     * Returns the index of the previous page, or `null` if the current page is the first one.
+     */
+    private get previousPage(): number | null {
+        return this.page !== this.firstPage ? this.page - 1 : null;
+    }
+
+    /**
+     * Returns the index of the next page, or `null` if the current page is the last one.
+     */
+    private get nextPage(): number | null {
+        return this.page !== this.lastPage ? this.page + 1 : null;
+    }
+
+    private selectPage(page: number): void {
+        if (this.page === page) {
+            return;
+        }
+
+        this.page = page;
+        this.pageChange.emit(page);
         this.paginationChange.emit(this.pagination);
     }
 }
diff --git a/projects/addon-table/components/table-pagination/table-pagination.style.less b/projects/addon-table/components/table-pagination/table-pagination.style.less
@@ -25,6 +25,10 @@
     border-left: 5px solid transparent;
 }
 
-.t-back {
-    margin: 0 0.25rem 0 1.5rem;
+.t-lines-info {
+    margin-right: 1.25rem;
+}
+
+.t-navigation-button {
+    margin: 0 0 0 0.25rem;
 }
diff --git a/projects/addon-table/components/table-pagination/table-pagination.template.html b/projects/addon-table/components/table-pagination/table-pagination.template.html
@@ -2,10 +2,13 @@
     <span class="t-pages">
         <ng-container *ngIf="showPages">
             {{ texts.pages }}
-            <strong class="t-strong">{{ pages }}</strong>
+            <strong class="t-strong">{{ pageCount }}</strong>
         </ng-container>
     </span>
-    <span automation-id="tui-table-pagination__lines-per-page-wrapper">
+    <span
+        automation-id="tui-table-pagination__lines-per-page-wrapper"
+        class="t-lines-info"
+    >
         {{ texts.linesPerPage }}
         <tui-hosted-dropdown
             [content]="content"
@@ -50,27 +53,50 @@
         {{ texts.of }}
         <strong class="t-strong">{{ total }}</strong>
     </span>
-    <ng-container *ngIf="spinTexts$ | async as spinTexts">
-        <button
-            appearance="icon"
-            size="xs"
-            tuiIconButton
-            type="button"
-            class="t-back"
-            [disabled]="leftDisabled"
-            [icon]="icons.decrement"
-            [title]="spinTexts[0]"
-            (click)="back()"
-        ></button>
-        <button
-            appearance="icon"
-            size="xs"
-            tuiIconButton
-            type="button"
-            [disabled]="rightDisabled"
-            [icon]="icons.increment"
-            [title]="spinTexts[1]"
-            (click)="forth()"
-        ></button>
-    </ng-container>
+    <button
+        *ngIf="showFirstLastPageButtons"
+        appearance="icon"
+        size="xs"
+        tuiIconButton
+        type="button"
+        class="t-navigation-button"
+        [disabled]="firstPageDisabled"
+        [icon]="paginationIcons.firstPage"
+        [title]="texts.firstPage"
+        (click)="selectFirstPage()"
+    ></button>
+    <button
+        appearance="icon"
+        size="xs"
+        tuiIconButton
+        type="button"
+        class="t-navigation-button"
+        [disabled]="previousPageDisabled"
+        [icon]="paginationIcons.previousPage"
+        [title]="texts.previousPage"
+        (click)="selectPreviousPage()"
+    ></button>
+    <button
+        appearance="icon"
+        size="xs"
+        tuiIconButton
+        type="button"
+        class="t-navigation-button"
+        [disabled]="nextPageDisabled"
+        [icon]="paginationIcons.nextPage"
+        [title]="texts.nextPage"
+        (click)="selectNextPage()"
+    ></button>
+    <button
+        *ngIf="showFirstLastPageButtons"
+        appearance="icon"
+        size="xs"
+        tuiIconButton
+        type="button"
+        class="t-navigation-button"
+        [disabled]="lastPageDisabled"
+        [icon]="paginationIcons.lastPage"
+        [title]="texts.lastPage"
+        (click)="selectLastPage()"
+    ></button>
 </ng-container>
diff --git a/projects/core/tokens/index.ts b/projects/core/tokens/index.ts
@@ -18,6 +18,7 @@ export * from './mode';
 export * from './number-format';
 export * from './option-content';
 export * from './ordered-short-week-days';
+export * from './pagination-icons';
 export * from './reduced-motion';
 export * from './sanitizer';
 export * from './scroll-ref';

diff --git a/projects/core/tokens/pagination-icons.ts b/projects/core/tokens/pagination-icons.ts
@@ -0,0 +1,16 @@
+import {tuiCreateToken} from '@taiga-ui/cdk';
+import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+
+export interface TuiPaginationIcons {
+    readonly firstPage: PolymorpheusContent;
+    readonly previousPage: PolymorpheusContent;
+    readonly nextPage: PolymorpheusContent;
+    readonly lastPage: PolymorpheusContent;
+}
+
+export const TUI_PAGINATION_ICONS = tuiCreateToken<TuiPaginationIcons>({
+    firstPage: 'tuiIconChevronsLeft',
+    previousPage: 'tuiIconChevronLeft',
+    nextPage: 'tuiIconChevronRight',
+    lastPage: 'tuiIconChevronsRight',
+});
diff --git a/projects/demo/src/modules/tables/table-pagination/table-pagination.component.ts b/projects/demo/src/modules/tables/table-pagination/table-pagination.component.ts
@@ -19,6 +19,7 @@ export class ExampleTuiTablePaginationComponent {
     protected page = 5;
     protected items = this.itemsVariants[0];
     protected size = this.items[0];
+    protected showFirstLastPageButtons = false;
 
     protected readonly example1: TuiDocExample = {
         HTML: import('./examples/1/index.html?raw'),

diff --git a/projects/demo/src/modules/tables/table-pagination/table-pagination.template.html b/projects/demo/src/modules/tables/table-pagination/table-pagination.template.html
@@ -50,6 +50,7 @@
         <tui-doc-demo>
             <tui-table-pagination
                 [items]="items"
+                [showFirstLastPageButtons]="showFirstLastPageButtons"
                 [total]="total"
                 [(page)]="page"
                 [(size)]="size"
@@ -59,6 +60,14 @@
             ></tui-table-pagination>
         </tui-doc-demo>
         <tui-doc-documentation>
+            <ng-template
+                documentationPropertyMode="input"
+                documentationPropertyName="showFirstLastPageButtons"
+                documentationPropertyType="boolean"
+                [(documentationPropertyValue)]="showFirstLastPageButtons"
+            >
+                Whether to show the first page/last page buttons.
+            </ng-template>
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="total"

diff --git a/projects/i18n/interfaces/language.ts b/projects/i18n/interfaces/language.ts
@@ -112,6 +112,10 @@ export interface TuiLanguageTable {
         linesPerPage: string;
         of: string;
         pages: string;
+        firstPage: string;
+        previousPage: string;
+        nextPage: string;
+        lastPage: string;
     };
     /**
      * 'Show/hide' button title

diff --git a/projects/i18n/languages/belarusian/addon-table.ts b/projects/i18n/languages/belarusian/addon-table.ts
@@ -6,5 +6,9 @@ export const TUI_BELARUSIAN_LANGUAGE_ADDON_TABLE: TuiLanguageTable = {
         pages: 'Старонак',
         linesPerPage: 'Радкоў на старонку',
         of: 'з',
+        firstPage: 'Першая старонка',
+        previousPage: 'Папярэдняя старонка',
+        nextPage: 'Наступная старонка',
+        lastPage: 'Апошняя старонка',
     },
 };
diff --git a/projects/i18n/languages/chinese/addon-table.ts b/projects/i18n/languages/chinese/addon-table.ts
@@ -6,5 +6,9 @@ export const TUI_CHINESE_LANGUAGE_ADDON_TABLE: TuiLanguageTable = {
         pages: '页面',
         linesPerPage: '每页行数',
         of: '于',
+        firstPage: 'First page',
+        previousPage: 'Previous page',
+        nextPage: 'Next page',
+        lastPage: 'Last page',
     },
 };
diff --git a/projects/i18n/languages/dutch/addon-table.ts b/projects/i18n/languages/dutch/addon-table.ts
@@ -6,5 +6,9 @@ export const TUI_DUTCH_LANGUAGE_ADDON_TABLE: TuiLanguageTable = {
         pages: "Pagina's",
         linesPerPage: 'Lijnen per pagina',
         of: 'van',
+        firstPage: 'First page',
+        previousPage: 'Previous page',
+        nextPage: 'Next page',
+        lastPage: 'Last page',
     },
 };
diff --git a/projects/i18n/languages/english/addon-table.ts b/projects/i18n/languages/english/addon-table.ts
@@ -6,5 +6,9 @@ export const TUI_ENGLISH_LANGUAGE_ADDON_TABLE: TuiLanguageTable = {
         pages: 'Pages',
         linesPerPage: 'Lines per page',
         of: 'of',
+        firstPage: 'First page',
+        previousPage: 'Previous page',
+        nextPage: 'Next page',
+        lastPage: 'Last page',
     },
 };