From b7db32665e138d1088adfc7415966d682809c4c3 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Tue, 6 Sep 2022 17:38:18 +0300 Subject: [PATCH] UI: Added custom paginator intl --- .../shared/services/custom-paginator-intl.ts | 40 +++++++++++++++++++ ui-ngx/src/app/shared/shared.module.ts | 4 +- .../assets/locale/locale.constant-en_US.json | 8 ++++ .../assets/locale/locale.constant-uk_UA.json | 8 ++++ 4 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 ui-ngx/src/app/shared/services/custom-paginator-intl.ts diff --git a/ui-ngx/src/app/shared/services/custom-paginator-intl.ts b/ui-ngx/src/app/shared/services/custom-paginator-intl.ts new file mode 100644 index 0000000000..ef2ab076d5 --- /dev/null +++ b/ui-ngx/src/app/shared/services/custom-paginator-intl.ts @@ -0,0 +1,40 @@ +/// +/// Copyright © 2016-2022 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Injectable } from '@angular/core'; +import { MatPaginatorIntl } from '@angular/material/paginator'; +import { Subject } from 'rxjs'; +import { TranslateService } from '@ngx-translate/core'; + +@Injectable() +export class CustomPaginatorIntl implements MatPaginatorIntl { + constructor(private translate: TranslateService) {} + changes = new Subject(); + + firstPageLabel = this.translate.instant('paginator.first-page-label'); + itemsPerPageLabel = this.translate.instant('paginator.items-per-page'); + lastPageLabel = this.translate.instant('paginator.last-page-label'); + + nextPageLabel = this.translate.instant('paginator.next-page-label'); + previousPageLabel = this.translate.instant('paginator.previous-page-label'); + separator = this.translate.instant('paginator.items-per-page-separator'); + + getRangeLabel(page: number, pageSize: number, length: number): string { + const startNumber = page * pageSize + 1; + const endNumber = pageSize * (page + 1); + return `${startNumber} – ${endNumber > length ? length : endNumber} ${this.separator} ${length}`; + } +} diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index aaa29f02c0..ed26548b15 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -37,7 +37,7 @@ import { MatGridListModule } from '@angular/material/grid-list'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatMenuModule } from '@angular/material/menu'; -import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator'; import { MatProgressBarModule } from '@angular/material/progress-bar'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatRadioModule } from '@angular/material/radio'; @@ -165,6 +165,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop'; import { MultipleImageInputComponent } from '@shared/components/multiple-image-input.component'; import { BranchAutocompleteComponent } from '@shared/components/vc/branch-autocomplete.component'; import { PhoneInputComponent } from '@shared/components/phone-input.component'; +import { CustomPaginatorIntl } from '@shared/services/custom-paginator-intl'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { return markedOptionsService; @@ -190,6 +191,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) }, { provide: HELP_MARKDOWN_COMPONENT_TOKEN, useValue: HelpMarkdownComponent }, { provide: SHARED_MODULE_TOKEN, useValue: SharedModule }, + { provide: MatPaginatorIntl, useClass: CustomPaginatorIntl }, TbPopoverService ], declarations: [ diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 7216f7b707..ba369e795f 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -4656,6 +4656,14 @@ "row-double-click": "On row double click" } }, + "paginator" : { + "items-per-page": "Items per page:", + "first-page-label": "First page", + "last-page-label": "Last page", + "next-page-label": "Next page", + "previous-page-label": "Previous page", + "items-per-page-separator": "of" + }, "language": { "language": "Language", "locales": { diff --git a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json index a361d1cab4..1522a03731 100644 --- a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json +++ b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json @@ -2479,6 +2479,14 @@ "row-double-click": "Дії при подвійному натисканні на рядок" } }, + "paginator" : { + "items-per-page": "Елементів на сторінці:", + "first-page-label": "Перша сторінка", + "last-page-label": "Остання сторінка", + "next-page-label": "Наступна сторінка", + "previous-page-label": "Попередня сторінка", + "items-per-page-separator": "з" + }, "language": { "language": "Мова" }