Show current page report in paginator (#270)

* feat: show page report in paginator

* feat: mark svcs as readonly in constructors

---------

Co-authored-by: Christian Badura <[email protected]>

src/app/onecx-theme-remote.module.ts

@@ -63,7 +63,7 @@ const routes: Routes = [
   schemas: []
 })
 export class OneCXThemeModule implements DoBootstrap {
-  constructor(private injector: Injector) {
+  constructor(private readonly injector: Injector) {
     console.info('OneCX Theme Module constructor')
   }
 

src/app/shared/image-container/image-container.component.ts

@@ -30,7 +30,7 @@ export class ImageContainerComponent implements OnChanges {
 
   prepareUrlPath = prepareUrlPath
 
-  constructor(private appState: AppStateService) {
+  constructor(private readonly appState: AppStateService) {
     appState.currentMfe$
       .pipe(
         map((mfe) => {

src/app/shared/label.resolver.ts

@@ -6,7 +6,7 @@ import { Observable, map } from 'rxjs'
 //dont use `providedIn root` - wont work when we are in shell
 @Injectable()
 export class LabelResolver implements Resolve<string> {
-  constructor(private translate: TranslateService) {}
+  constructor(private readonly translate: TranslateService) {}
   resolve(route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): string | Observable<string> | Promise<string> {
     return route.data['breadcrumb']
       ? this.translate.get(route.data['breadcrumb']).pipe(map((t) => t.toString()))

src/app/theme/theme-designer/theme-designer.component.ts

@@ -5,7 +5,7 @@ import { Observable, combineLatest, debounceTime, first, map, switchMap } from '
 import { TranslateService } from '@ngx-translate/core'
 import { ConfirmationService, SelectItem } from 'primeng/api'
 
-import { Action, AppStateService, PortalMessageService, ThemeService } from '@onecx/portal-integration-angular'
+import { Action, PortalMessageService, ThemeService } from '@onecx/portal-integration-angular'
 import { bffImageUrl, dropDownSortItemsByLabel, dropDownGetLabelByValue } from 'src/app/shared/utils'
 import {
   GetThemeResponse,
@@ -65,16 +65,15 @@ export class ThemeDesignerComponent implements OnInit {
   }[]
 
   constructor(
-    private fb: FormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private appStateService: AppStateService,
-    private themeApi: ThemesAPIService,
-    private themeService: ThemeService,
-    private imageApi: ImagesInternalAPIService,
-    private translate: TranslateService,
-    private confirmation: ConfirmationService,
-    private msgService: PortalMessageService
+    private readonly fb: FormBuilder,
+    private readonly route: ActivatedRoute,
+    private readonly router: Router,
+    private readonly themeApi: ThemesAPIService,
+    private readonly themeService: ThemeService,
+    private readonly imageApi: ImagesInternalAPIService,
+    private readonly translate: TranslateService,
+    private readonly confirmation: ConfirmationService,
+    private readonly msgService: PortalMessageService
   ) {
     this.mode = route.snapshot.paramMap.has('name') ? 'EDIT' : 'NEW'
     this.themeName = route.snapshot.paramMap.get('name')

src/app/theme/theme-detail/theme-detail.component.ts

@@ -34,13 +34,13 @@ export class ThemeDetailComponent implements OnInit {
   public headerImageUrl?: string
 
   constructor(
-    private user: UserService,
-    private router: Router,
-    private route: ActivatedRoute,
-    private themeApi: ThemesAPIService,
-    private msgService: PortalMessageService,
-    private translate: TranslateService,
-    private imageApi: ImagesInternalAPIService
+    private readonly user: UserService,
+    private readonly router: Router,
+    private readonly route: ActivatedRoute,
+    private readonly themeApi: ThemesAPIService,
+    private readonly msgService: PortalMessageService,
+    private readonly translate: TranslateService,
+    private readonly imageApi: ImagesInternalAPIService
   ) {
     this.themeName = this.route.snapshot.paramMap.get('name') || ''
     this.dateFormat = this.user.lang$.getValue() === 'de' ? 'dd.MM.yyyy HH:mm:ss' : 'medium'

src/app/theme/theme-import/theme-import.component.ts

@@ -29,11 +29,11 @@ export class ThemeImportComponent implements OnInit {
   public properties: any = null
 
   constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private themeApi: ThemesAPIService,
-    public translate: TranslateService,
-    private msgService: PortalMessageService
+    private readonly route: ActivatedRoute,
+    private readonly router: Router,
+    private readonly themeApi: ThemesAPIService,
+    public readonly translate: TranslateService,
+    private readonly msgService: PortalMessageService
   ) {}
 
   ngOnInit(): void {

src/app/theme/theme-search/theme-search.component.html

@@ -20,6 +20,8 @@
         filterBy="displayName,name"
         [sortField]="sortField"
         [sortOrder]="sortOrder"
+        [showCurrentPageReport]="true"
+        currentPageReportTemplate="{first} - {last} {{ 'GENERAL.OF' | translate }} {totalRecords}"
       >
         <ng-template pTemplate="header">
           <ocx-data-view-controls

src/app/theme/theme-search/theme-search.component.ts

@@ -27,11 +27,11 @@ export class ThemeSearchComponent implements OnInit {
   @ViewChild(DataView) dv: DataView | undefined
 
   constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private themeApi: ThemesAPIService,
-    private translate: TranslateService,
-    private imageApi: ImagesInternalAPIService
+    private readonly route: ActivatedRoute,
+    private readonly router: Router,
+    private readonly themeApi: ThemesAPIService,
+    private readonly translate: TranslateService,
+    private readonly imageApi: ImagesInternalAPIService
   ) {}
 
   ngOnInit(): void {

src/assets/i18n/de.json

@@ -94,6 +94,7 @@
   },
   "GENERAL": {
     "COPY_OF": "Kopie von ",
+    "OF": "von",
     "TOOLTIP": {
       "VIEW_MODE_GRID": "Kachelansicht",
       "VIEW_MODE_LIST": "Listenansicht",

src/assets/i18n/en.json

@@ -94,6 +94,7 @@
   },
   "GENERAL": {
     "COPY_OF": "Copy of ",
+    "OF": "of",
     "TOOLTIP": {
       "VIEW_MODE_GRID": "Tile view",
       "VIEW_MODE_LIST": "List view",