Merge pull request #7217 from ArtemDzhereleiko/AD/imp/custom-paginator-intl

[3.4.2][WIP] UI: Added custom paginator intl

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<void>();
+
+  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}`;
+  }
+}

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';
@@ -166,6 +166,7 @@ import { MultipleImageInputComponent } from '@shared/components/multiple-image-i
 import { BranchAutocompleteComponent } from '@shared/components/vc/branch-autocomplete.component';
 import { PhoneInputComponent } from '@shared/components/phone-input.component';
 import { CustomDateAdapter } from '@shared/adapter/custom-datatime-adapter';
+import { CustomPaginatorIntl } from '@shared/services/custom-paginator-intl';
 
 export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
   return markedOptionsService;
@@ -192,6 +193,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     { provide: DatetimeAdapter, useClass: CustomDateAdapter },
     { provide: HELP_MARKDOWN_COMPONENT_TOKEN, useValue: HelpMarkdownComponent },
     { provide: SHARED_MODULE_TOKEN, useValue: SharedModule },
+    { provide: MatPaginatorIntl, useClass: CustomPaginatorIntl },
     TbPopoverService
   ],
   declarations: [

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": {

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": "Мова"
     }