From 95f9767e49c4c195cf2a0f97d4fbe3b35bb8f947 Mon Sep 17 00:00:00 2001 From: Antonino Bonanno Date: Mon, 13 Mar 2023 18:24:06 +0100 Subject: [PATCH] feat: pagination with changer, jump to, text links, total number text and simple mode --- .../design-angular-kit/assets/i18n/en.json | 4 + .../design-angular-kit/assets/i18n/it.json | 4 + .../core/pagination/pagination.component.html | 93 ++++++++---- .../core/pagination/pagination.component.scss | 3 - .../core/pagination/pagination.component.ts | 143 ++++++++++++++++-- src/app/app-routing.module.ts | 1 + .../pagination-changer-example.component.html | 11 ++ ...gination-changer-example.component.spec.ts | 23 +++ .../pagination-changer-example.component.ts | 24 +++ .../pagination-example.component.html | 13 ++ .../pagination-example.component.spec.ts | 23 +++ .../pagination-example.component.ts | 24 +++ .../pagination-examples.component.spec.ts | 23 +++ .../pagination-examples.component.tpl | 78 ++++++++++ .../pagination-examples.component.ts | 9 ++ .../pagination-index.component.html | 12 ++ .../pagination-index.component.spec.ts | 23 +++ .../pagination-index.component.ts | 14 ++ .../pagination-jump-example.component.html | 9 ++ .../pagination-jump-example.component.spec.ts | 23 +++ .../pagination-jump-example.component.ts | 13 ++ .../pagination/pagination-routing.module.ts | 14 ++ .../pagination-simple-example.component.html | 9 ++ ...agination-simple-example.component.spec.ts | 23 +++ .../pagination-simple-example.component.ts | 13 ++ ...gination-text-links-example.component.html | 9 ++ ...ation-text-links-example.component.spec.ts | 23 +++ ...pagination-text-links-example.component.ts | 13 ++ ...nation-total-number-example.component.html | 9 ++ ...ion-total-number-example.component.spec.ts | 23 +++ ...gination-total-number-example.component.ts | 13 ++ src/app/pagination/pagination.module.ts | 35 +++++ src/assets/table-of-content.json | 4 + 33 files changed, 715 insertions(+), 43 deletions(-) delete mode 100644 projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.scss create mode 100644 src/app/pagination/pagination-changer-example/pagination-changer-example.component.html create mode 100644 src/app/pagination/pagination-changer-example/pagination-changer-example.component.spec.ts create mode 100644 src/app/pagination/pagination-changer-example/pagination-changer-example.component.ts create mode 100644 src/app/pagination/pagination-example/pagination-example.component.html create mode 100644 src/app/pagination/pagination-example/pagination-example.component.spec.ts create mode 100644 src/app/pagination/pagination-example/pagination-example.component.ts create mode 100644 src/app/pagination/pagination-examples/pagination-examples.component.spec.ts create mode 100644 src/app/pagination/pagination-examples/pagination-examples.component.tpl create mode 100644 src/app/pagination/pagination-examples/pagination-examples.component.ts create mode 100644 src/app/pagination/pagination-index/pagination-index.component.html create mode 100644 src/app/pagination/pagination-index/pagination-index.component.spec.ts create mode 100644 src/app/pagination/pagination-index/pagination-index.component.ts create mode 100644 src/app/pagination/pagination-jump-example/pagination-jump-example.component.html create mode 100644 src/app/pagination/pagination-jump-example/pagination-jump-example.component.spec.ts create mode 100644 src/app/pagination/pagination-jump-example/pagination-jump-example.component.ts create mode 100644 src/app/pagination/pagination-routing.module.ts create mode 100644 src/app/pagination/pagination-simple-example/pagination-simple-example.component.html create mode 100644 src/app/pagination/pagination-simple-example/pagination-simple-example.component.spec.ts create mode 100644 src/app/pagination/pagination-simple-example/pagination-simple-example.component.ts create mode 100644 src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.html create mode 100644 src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.spec.ts create mode 100644 src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.ts create mode 100644 src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.html create mode 100644 src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.spec.ts create mode 100644 src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.ts create mode 100644 src/app/pagination/pagination.module.ts diff --git a/projects/design-angular-kit/assets/i18n/en.json b/projects/design-angular-kit/assets/i18n/en.json index 8824701e..f5e93572 100644 --- a/projects/design-angular-kit/assets/i18n/en.json +++ b/projects/design-angular-kit/assets/i18n/en.json @@ -40,8 +40,12 @@ "close-notification": "Close Notification: {{title}}", "close-alert": "Close alert", "page": "Page", + "previous": "Previous", "previous-page": "Previous page", + "next": "Next", "next-page": "Next page", + "go-to": "Go to", + "page-of-total": "Page {{page}} of {{total}}", "progress": "Progress", "loading": "Loading", "active": "Active", diff --git a/projects/design-angular-kit/assets/i18n/it.json b/projects/design-angular-kit/assets/i18n/it.json index fc3d41ee..972fe82e 100644 --- a/projects/design-angular-kit/assets/i18n/it.json +++ b/projects/design-angular-kit/assets/i18n/it.json @@ -40,8 +40,12 @@ "close-notification": "Chiudi notifica: {{title}}", "close-alert": "Chiudi avviso", "page": "Pagina", + "previous": "Precedente", "previous-page": "Pagina precedente", + "next": "Successiva", "next-page": "Pagina successiva", + "go-to": "Vai a", + "page-of-total": "Pagina {{page}} di {{total}}", "progress": "Progresso", "loading": "Caricamento", "active": "Attivo", diff --git a/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.html b/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.html index 480b682b..cfdcf217 100644 --- a/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.html +++ b/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.html @@ -1,42 +1,83 @@ diff --git a/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.scss b/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.scss deleted file mode 100644 index ab067bfb..00000000 --- a/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.page-item:not(.disabled) > a.page-link { - cursor: pointer; -} diff --git a/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.ts b/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.ts index ea6532b3..4ff0a106 100644 --- a/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.ts +++ b/projects/design-angular-kit/src/lib/components/core/pagination/pagination.component.ts @@ -1,11 +1,22 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges +} from '@angular/core'; +import { BooleanInput, isTrueBooleanInput } from '../../../utils/boolean-input'; +import { FormControl } from '@angular/forms'; +import { debounceTime, distinctUntilChanged, filter } from 'rxjs'; @Component({ selector: 'it-pagination[currentPage][pageNumbers]', templateUrl: './pagination.component.html', - styleUrls: ['./pagination.component.scss'] + changeDetection: ChangeDetectionStrategy.OnPush }) -export class PaginationComponent { +export class PaginationComponent implements OnChanges { /** * Index of page (start 0) @@ -17,27 +28,119 @@ export class PaginationComponent { */ @Input() pageNumbers!: number; + /** + * Number of pages closest to the current one to display + * @default 5 + */ + @Input() visiblePages: number = 5; + /** * Pagination alignment (justify-content) */ @Input() alignment?: 'center' | 'end'; /** - * Fired when page is changed + * Enable/Disable simple mode + * Pagination in the "Simple mode" version is optimized for mobile devices. + * @default undefined - disabled + */ + @Input() simpleMode?: BooleanInput; + + /** + * Enable/Disable text links + * Chevron icons used as navigation links are replaced by text links such as “previous” and “next”. + * @default undefined - disabled + */ + @Input() textLinks?: BooleanInput; + + /** + * Current value of Changer + * If is set show the Changer + * @default undefined - hide the Changer + */ + @Input() currentChanger?: number; + + /** + * Available Changer values + * @default [10, 25, 50, 100] */ - @Output() newPageEvent = new EventEmitter(); + @Input() changerValues: Array = [10, 25, 50, 100]; /** - * Create array to generate pagination of 5 element + * Hide/Show "Jump to page" input + * @default undefined - hidden */ - get pages(): Array { - const length = this.pageNumbers > 5 ? 5 : this.pageNumbers; - let start = (this.currentPage > 1 && this.pageNumbers > 5) ? this.currentPage - 1 : 1; + @Input() showJumpToPage?: BooleanInput; - if (this.pageNumbers > 5) { + /** + * Fired when page is changed. Emit the new index of page + */ + @Output() pageEvent = new EventEmitter(); + + /** + * Fired when changer is changed. Emit the new changer value + */ + @Output() changerEvent = new EventEmitter(); + + /** + * The pages + * @protected + */ + protected pages: Array = []; + + /** + * Jump to page input + * @protected + */ + protected jumpToPage: FormControl = new FormControl(null); + + get isSimpleMode(): boolean { + return isTrueBooleanInput(this.simpleMode); + } + + get isTextLinks(): boolean { + return isTrueBooleanInput(this.textLinks); + } + + get isShowJumpToPage(): boolean { + return isTrueBooleanInput(this.showJumpToPage); + } + + constructor() { + this.jumpToPage.valueChanges.pipe( + debounceTime(300), // Delay filter data after time span has passed without another source emission + distinctUntilChanged(), + filter(value => !!value && this.jumpToPage.valid) + ).subscribe(value => { + this.pageEvent.emit(value! - 1); + }); + } + + ngOnChanges(changes: SimpleChanges): void { + this.pages = this.calculatePages(); + if (changes['currentPage']) { + this.jumpToPage.setValue(null, { emitEvent: false }); + } + } + + /** + * Create array to generate pagination of `visiblePages` element + */ + private calculatePages(): Array { + if (this.isSimpleMode) { + return [this.currentPage]; + } + + const length = this.pageNumbers > this.visiblePages ? this.visiblePages : this.pageNumbers; + + const halfVisiblePages = Math.floor(this.visiblePages / 2); + let start = (this.currentPage > halfVisiblePages && this.pageNumbers > this.visiblePages) ? + this.currentPage - halfVisiblePages + 1 : 1; + + if (this.pageNumbers > this.visiblePages) { if ((this.currentPage + 1) >= this.pageNumbers) { - start -= 2; - } else if (this.currentPage >= (this.pageNumbers - 2)) { + start -= halfVisiblePages; + } else if (this.currentPage >= (this.pageNumbers - halfVisiblePages)) { start -= (this.pageNumbers - (this.currentPage + 1)); } } @@ -47,10 +150,22 @@ export class PaginationComponent { /** * On click page change + * @param event click event * @param newPage the new page of table */ - pageChange(newPage: number): void { - this.newPageEvent.emit(newPage - 1); // emit new page + protected pageChange(event: Event, newPage: number): void { + event.preventDefault(); + this.pageEvent.emit(newPage - 1); // emit new page index + } + + /** + * On click changer + * @param event click event + * @param value the new changer value + */ + protected changerChange(event: Event, value: number): void { + event.preventDefault(); + this.changerEvent.emit(value); // emit new changer value } } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 7b78e19d..07909487 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -33,6 +33,7 @@ const routes: Routes = [ { path: 'select', loadChildren: () => import('src/app/select/select.module').then(m => m.SelectModule) }, { path: 'notifications', loadChildren: () => import('src/app/notifications/notifications.module').then(m => m.NotificationsModule) }, { path: 'rating', loadChildren: () => import('src/app/rating/rating.module').then(m => m.RatingModule) }, + { path: 'pagination', loadChildren: () => import('src/app/pagination/pagination.module').then(m => m.PaginationModule) }, { path: 'table', loadChildren: () => import('src/app/table/table.module').then(m => m.TableModule) }, { path: 'textarea', loadChildren: () => import('src/app/textarea/textarea.module').then(m => m.TextareaModule) }, { path: 'alert', loadChildren: () => import('src/app/alert/alert.module').then(m => m.AlertModule) }, diff --git a/src/app/pagination/pagination-changer-example/pagination-changer-example.component.html b/src/app/pagination/pagination-changer-example/pagination-changer-example.component.html new file mode 100644 index 00000000..2b1c3500 --- /dev/null +++ b/src/app/pagination/pagination-changer-example/pagination-changer-example.component.html @@ -0,0 +1,11 @@ +

Changer

+

La funzionalità di changer permette di scegliere da un dropdown la quantità di record da visualizzare in una pagina.

+ +
+ + +
diff --git a/src/app/pagination/pagination-changer-example/pagination-changer-example.component.spec.ts b/src/app/pagination/pagination-changer-example/pagination-changer-example.component.spec.ts new file mode 100644 index 00000000..14bec7e6 --- /dev/null +++ b/src/app/pagination/pagination-changer-example/pagination-changer-example.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaginationChangerExampleComponent } from './pagination-changer-example.component'; + +describe('PaginationChangerExampleComponent', () => { + let component: PaginationChangerExampleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PaginationChangerExampleComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PaginationChangerExampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pagination/pagination-changer-example/pagination-changer-example.component.ts b/src/app/pagination/pagination-changer-example/pagination-changer-example.component.ts new file mode 100644 index 00000000..383f643e --- /dev/null +++ b/src/app/pagination/pagination-changer-example/pagination-changer-example.component.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'it-pagination-changer-example', + templateUrl: './pagination-changer-example.component.html' +}) +export class PaginationChangerExampleComponent { + currentPage: number = 25; + + changerValue: number = 10; + + /** + * By default, the values are [10, 25, 50, 100] + */ + changerValues: Array = [10, 25, 50, 100, 250]; + + pageChange(page: number): void { + this.currentPage = page; + } + + changerEvent(value: number): void { + this.changerValue = value; + } +} diff --git a/src/app/pagination/pagination-example/pagination-example.component.html b/src/app/pagination/pagination-example/pagination-example.component.html new file mode 100644 index 00000000..d1f759eb --- /dev/null +++ b/src/app/pagination/pagination-example/pagination-example.component.html @@ -0,0 +1,13 @@ +
+

Navigazione allineata a sinistra

+ + +

Navigazione centrata

+ + +

Navigazione allineata a destra

+ +
diff --git a/src/app/pagination/pagination-example/pagination-example.component.spec.ts b/src/app/pagination/pagination-example/pagination-example.component.spec.ts new file mode 100644 index 00000000..9513bb92 --- /dev/null +++ b/src/app/pagination/pagination-example/pagination-example.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaginationExampleComponent } from './pagination-example.component'; + +describe('PaginationExampleComponent', () => { + let component: PaginationExampleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PaginationExampleComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PaginationExampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pagination/pagination-example/pagination-example.component.ts b/src/app/pagination/pagination-example/pagination-example.component.ts new file mode 100644 index 00000000..d28afb4d --- /dev/null +++ b/src/app/pagination/pagination-example/pagination-example.component.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'it-pagination-example', + templateUrl: './pagination-example.component.html' +}) +export class PaginationExampleComponent { + + leftCurrentPage = 0; + centerCurrentPage = 25; + rightCurrentPage = 0; + + leftPageChange(page: number): void { + this.leftCurrentPage = page; + } + + centerPageChange(page: number): void { + this.centerCurrentPage = page; + } + + rightPageChange(page: number): void { + this.rightCurrentPage = page; + } +} diff --git a/src/app/pagination/pagination-examples/pagination-examples.component.spec.ts b/src/app/pagination/pagination-examples/pagination-examples.component.spec.ts new file mode 100644 index 00000000..8b24799a --- /dev/null +++ b/src/app/pagination/pagination-examples/pagination-examples.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaginationExamplesComponent } from './pagination-examples.component'; + +describe('PaginationExamplesComponent', () => { + let component: PaginationExamplesComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PaginationExamplesComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PaginationExamplesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pagination/pagination-examples/pagination-examples.component.tpl b/src/app/pagination/pagination-examples/pagination-examples.component.tpl new file mode 100644 index 00000000..375eec43 --- /dev/null +++ b/src/app/pagination/pagination-examples/pagination-examples.component.tpl @@ -0,0 +1,78 @@ +{% from "../../macro.template.njk" import sanitize as sanitize %} + +{% set html %} + {% include "../pagination-example/pagination-example.component.html" %} +{% endset %} + +{% set typescript %} + {% include "../pagination-example/pagination-example.component.ts" %} +{% endset %} + + + + + + +{% set htmlChanger %} + {% include "../pagination-changer-example/pagination-changer-example.component.html" %} +{% endset %} + +{% set typescriptChanger %} + {% include "../pagination-changer-example/pagination-changer-example.component.ts" %} +{% endset %} + + + + + + +{% set htmlJump %} + {% include "../pagination-jump-example/pagination-jump-example.component.html" %} +{% endset %} + +{% set typescriptJump %} + {% include "../pagination-jump-example/pagination-jump-example.component.ts" %} +{% endset %} + + + + + + +{% set htmlSimple %} + {% include "../pagination-simple-example/pagination-simple-example.component.html" %} +{% endset %} + +{% set typescriptSimple %} + {% include "../pagination-simple-example/pagination-simple-example.component.ts" %} +{% endset %} + + + + + + +{% set htmlTextLinks %} + {% include "../pagination-text-links-example/pagination-text-links-example.component.html" %} +{% endset %} + +{% set typescriptTextLinks %} + {% include "../pagination-text-links-example/pagination-text-links-example.component.ts" %} +{% endset %} + + + + + + +{% set htmlTotalNumber %} + {% include "../pagination-total-number-example/pagination-total-number-example.component.html" %} +{% endset %} + +{% set typescriptTotalNumber %} + {% include "../pagination-total-number-example/pagination-total-number-example.component.ts" %} +{% endset %} + + + + diff --git a/src/app/pagination/pagination-examples/pagination-examples.component.ts b/src/app/pagination/pagination-examples/pagination-examples.component.ts new file mode 100644 index 00000000..c0205852 --- /dev/null +++ b/src/app/pagination/pagination-examples/pagination-examples.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'it-pagination-examples', + templateUrl: './pagination-examples.component.html' +}) +export class PaginationExamplesComponent { + +} diff --git a/src/app/pagination/pagination-index/pagination-index.component.html b/src/app/pagination/pagination-index/pagination-index.component.html new file mode 100644 index 00000000..7b6fdc3f --- /dev/null +++ b/src/app/pagination/pagination-index/pagination-index.component.html @@ -0,0 +1,12 @@ +

Paginazione

+

Utile per indicare una serie di contenuti correlati tra più pagine.

+ + + + + + +

Pagination Component

+ + + diff --git a/src/app/pagination/pagination-index/pagination-index.component.spec.ts b/src/app/pagination/pagination-index/pagination-index.component.spec.ts new file mode 100644 index 00000000..9325fad0 --- /dev/null +++ b/src/app/pagination/pagination-index/pagination-index.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaginationIndexComponent } from './pagination-index.component'; + +describe('PaginationIndexComponent', () => { + let component: PaginationIndexComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PaginationIndexComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PaginationIndexComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pagination/pagination-index/pagination-index.component.ts b/src/app/pagination/pagination-index/pagination-index.component.ts new file mode 100644 index 00000000..13360581 --- /dev/null +++ b/src/app/pagination/pagination-index/pagination-index.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; +import Documentation from '../../../assets/documentation.json'; + +@Component({ + selector: 'it-pagination-index', + templateUrl: './pagination-index.component.html' +}) +export class PaginationIndexComponent { + component: any; + + constructor() { + this.component = (Documentation).components.find(component => component.name === 'PaginationComponent'); + } +} diff --git a/src/app/pagination/pagination-jump-example/pagination-jump-example.component.html b/src/app/pagination/pagination-jump-example/pagination-jump-example.component.html new file mode 100644 index 00000000..94ffd4b8 --- /dev/null +++ b/src/app/pagination/pagination-jump-example/pagination-jump-example.component.html @@ -0,0 +1,9 @@ +

Jump to page

+

Con l’elemento aggiuntivo “Jump to page” l’utente può specificare un numero di pagina concreto.

+ +
+ + + +
diff --git a/src/app/pagination/pagination-jump-example/pagination-jump-example.component.spec.ts b/src/app/pagination/pagination-jump-example/pagination-jump-example.component.spec.ts new file mode 100644 index 00000000..faf879c2 --- /dev/null +++ b/src/app/pagination/pagination-jump-example/pagination-jump-example.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaginationJumpExampleComponent } from './pagination-jump-example.component'; + +describe('PaginationJumpExampleComponent', () => { + let component: PaginationJumpExampleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PaginationJumpExampleComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PaginationJumpExampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pagination/pagination-jump-example/pagination-jump-example.component.ts b/src/app/pagination/pagination-jump-example/pagination-jump-example.component.ts new file mode 100644 index 00000000..554e66d0 --- /dev/null +++ b/src/app/pagination/pagination-jump-example/pagination-jump-example.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'it-pagination-jump-example', + templateUrl: './pagination-jump-example.component.html' +}) +export class PaginationJumpExampleComponent { + currentPage: number = 25; + + pageChange(page: number): void { + this.currentPage = page; + } +} diff --git a/src/app/pagination/pagination-routing.module.ts b/src/app/pagination/pagination-routing.module.ts new file mode 100644 index 00000000..f0e37dcb --- /dev/null +++ b/src/app/pagination/pagination-routing.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { PaginationIndexComponent } from './pagination-index/pagination-index.component'; + +const routes: Routes = [ + { path: '', component: PaginationIndexComponent } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class PaginationRoutingModule { +} diff --git a/src/app/pagination/pagination-simple-example/pagination-simple-example.component.html b/src/app/pagination/pagination-simple-example/pagination-simple-example.component.html new file mode 100644 index 00000000..382ac57e --- /dev/null +++ b/src/app/pagination/pagination-simple-example/pagination-simple-example.component.html @@ -0,0 +1,9 @@ +

Simple mode

+

La paginazione in versione “Simple mode” è ottimizzata per i dispositivi mobile. Può essere utilizzata anche su tablet e desktop quando il numero di pagine è ridotto.

+ +
+ + + +
diff --git a/src/app/pagination/pagination-simple-example/pagination-simple-example.component.spec.ts b/src/app/pagination/pagination-simple-example/pagination-simple-example.component.spec.ts new file mode 100644 index 00000000..2f33dd2e --- /dev/null +++ b/src/app/pagination/pagination-simple-example/pagination-simple-example.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaginationSimpleExampleComponent } from './pagination-simple-example.component'; + +describe('PaginationSimpleExampleComponent', () => { + let component: PaginationSimpleExampleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PaginationSimpleExampleComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PaginationSimpleExampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pagination/pagination-simple-example/pagination-simple-example.component.ts b/src/app/pagination/pagination-simple-example/pagination-simple-example.component.ts new file mode 100644 index 00000000..cf6d4020 --- /dev/null +++ b/src/app/pagination/pagination-simple-example/pagination-simple-example.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'it-pagination-simple-example', + templateUrl: './pagination-simple-example.component.html' +}) +export class PaginationSimpleExampleComponent { + currentPage: number = 0; + + pageChange(page: number): void { + this.currentPage = page; + } +} diff --git a/src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.html b/src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.html new file mode 100644 index 00000000..8eddd780 --- /dev/null +++ b/src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.html @@ -0,0 +1,9 @@ +

Link testuali

+

Le icone chevron utilizzate come link di navigazione vengono sostituite da link testuali come “precedente” e “successiva”.

+ +
+ + + +
diff --git a/src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.spec.ts b/src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.spec.ts new file mode 100644 index 00000000..8dd0bb5c --- /dev/null +++ b/src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaginationTextLinksExampleComponent } from './pagination-text-links-example.component'; + +describe('PaginationTextLinksExampleComponent', () => { + let component: PaginationTextLinksExampleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PaginationTextLinksExampleComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PaginationTextLinksExampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.ts b/src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.ts new file mode 100644 index 00000000..71acbccf --- /dev/null +++ b/src/app/pagination/pagination-text-links-example/pagination-text-links-example.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'it-pagination-text-links-example', + templateUrl: './pagination-text-links-example.component.html' +}) +export class PaginationTextLinksExampleComponent { + currentPage: number = 25; + + pageChange(page: number): void { + this.currentPage = page; + } +} diff --git a/src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.html b/src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.html new file mode 100644 index 00000000..39ec04ba --- /dev/null +++ b/src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.html @@ -0,0 +1,9 @@ +

Total number

+ +
+ + + Totale 300 elementi + + +
diff --git a/src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.spec.ts b/src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.spec.ts new file mode 100644 index 00000000..14404b71 --- /dev/null +++ b/src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaginationTotalNumberExampleComponent } from './pagination-total-number-example.component'; + +describe('PaginationTotalNumberExampleComponent', () => { + let component: PaginationTotalNumberExampleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PaginationTotalNumberExampleComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PaginationTotalNumberExampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.ts b/src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.ts new file mode 100644 index 00000000..796f3910 --- /dev/null +++ b/src/app/pagination/pagination-total-number-example/pagination-total-number-example.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'it-pagination-total-number-example', + templateUrl: './pagination-total-number-example.component.html' +}) +export class PaginationTotalNumberExampleComponent { + currentPage: number = 25; + + pageChange(page: number): void { + this.currentPage = page; + } +} diff --git a/src/app/pagination/pagination.module.ts b/src/app/pagination/pagination.module.ts new file mode 100644 index 00000000..53f2b472 --- /dev/null +++ b/src/app/pagination/pagination.module.ts @@ -0,0 +1,35 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SharedModule } from '../shared/shared.module'; +import { PaginationIndexComponent } from './pagination-index/pagination-index.component'; +import { PaginationRoutingModule } from './pagination-routing.module'; +import { PaginationExamplesComponent } from './pagination-examples/pagination-examples.component'; +import { PaginationExampleComponent } from './pagination-example/pagination-example.component'; +import { PaginationChangerExampleComponent } from './pagination-changer-example/pagination-changer-example.component'; +import { PaginationJumpExampleComponent } from './pagination-jump-example/pagination-jump-example.component'; +import { PaginationSimpleExampleComponent } from './pagination-simple-example/pagination-simple-example.component'; +import { + PaginationTextLinksExampleComponent +} from './pagination-text-links-example/pagination-text-links-example.component'; +import { PaginationTotalNumberExampleComponent } from './pagination-total-number-example/pagination-total-number-example.component'; + + +@NgModule({ + declarations: [ + PaginationIndexComponent, + PaginationExamplesComponent, + PaginationExampleComponent, + PaginationChangerExampleComponent, + PaginationJumpExampleComponent, + PaginationSimpleExampleComponent, + PaginationTextLinksExampleComponent, + PaginationTotalNumberExampleComponent + ], + imports: [ + CommonModule, + SharedModule, + PaginationRoutingModule + ] +}) +export class PaginationModule { +} diff --git a/src/assets/table-of-content.json b/src/assets/table-of-content.json index e9e51c9a..ad48fd91 100644 --- a/src/assets/table-of-content.json +++ b/src/assets/table-of-content.json @@ -102,6 +102,10 @@ "label": "Rating", "link": "/componenti/rating" }, + { + "label": "Pagination", + "link": "/componenti/pagination" + }, { "label": "Table", "link": "/componenti/table"