RED-3800: Moved pagination component to common-ui

apps/red-ui/src/app/modules/admin/admin.module.ts

@@ -57,6 +57,7 @@ import { DossierTemplateActionsComponent } from './shared/components/dossier-tem
 import { IqserUsersModule } from '@iqser/common-ui/lib/users';
 import { TenantPipe } from '@iqser/common-ui/lib/tenants';
 import { SelectComponent } from '@shared/components/select/select.component';
+import { PaginationComponent } from '@common-ui/pagination/pagination.component';
 
 const dialogs = [
     AddEditCloneDossierTemplateDialogComponent,
@@ -125,6 +126,7 @@ const components = [
         IqserDenyDirective,
         TenantPipe,
         SelectComponent,
+        PaginationComponent,
     ],
 })
 export class AdminModule {}

apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html

@@ -16,15 +16,15 @@
 
 <ng-template #headerTemplate>
     <div class="table-header-actions">
-        <redaction-pagination
+        <iqser-pagination
             (pageChanged)="pageChanged($event)"
             [settings]="{ currentPage: logs?.page || 0, totalPages: totalPages }"
             class="mr-0"
-        ></redaction-pagination>
+        ></iqser-pagination>
 
         <div class="separator">·</div>
 
-        <form [formGroup]="form" [attr.help-mode-key]="'audit_filter_audit_entries'">
+        <form [attr.help-mode-key]="'audit_filter_audit_entries'" [formGroup]="form">
             <div class="iqser-input-group w-150 mr-20">
                 <mat-form-field>
                     <mat-select (selectionChange)="filterChange()" formControlName="category" id="select-category">
@@ -116,8 +116,8 @@
             <div class="action-buttons">
                 <iqser-circle-button
                     (action)="openAuditDetails(log)"
-                    [attr.help-mode-key]="'audit_detailed_audit_info'"
                     *ngIf="log.hasDetails"
+                    [attr.help-mode-key]="'audit_detailed_audit_info'"
                     [tooltip]="'audit-screen.action.info' | translate"
                     icon="red:info"
                 ></iqser-circle-button>

apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.html

@@ -1,26 +0,0 @@
-<div
-    id="pagination-prev-page-btn"
-    (click)="selectPage(currentPage - 1)"
-    [class.disabled]="currentPage < 1"
-    class="page"
-    translate="pagination.previous"
-></div>
-<span>|</span>
-<div
-    (click)="selectPage(page)"
-    *ngFor="let page of displayedPages"
-    [class.active]="page === currentPage"
-    [class.dots]="page === '...'"
-    class="page"
-    [id]="isNumber(page) ? 'pagination-select-page-' + page + '-btn' : 'pagination-pages-between'"
->
-    {{ displayValue(page) }}
-</div>
-<span>|</span>
-<div
-    id="pagination-next-page-btn"
-    (click)="selectPage(currentPage + 1)"
-    [class.disabled]="currentPage === totalPages - 1"
-    class="page"
-    translate="pagination.next"
-></div>

apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss

@@ -1,27 +0,0 @@
-:host {
-    display: flex;
-
-    > *:not(:last-child) {
-        margin-right: 12px;
-    }
-
-    .disabled,
-    span {
-        opacity: 0.5;
-        pointer-events: none;
-    }
-
-    .page {
-        cursor: pointer;
-
-        &.disabled,
-        &.dots {
-            cursor: default;
-        }
-
-        &.active {
-            color: var(--iqser-primary);
-            font-weight: bold;
-        }
-    }
-}

apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.ts

@@ -1,62 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-    selector: 'redaction-pagination',
-    templateUrl: './pagination.component.html',
-    styleUrls: ['./pagination.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PaginationComponent {
-    displayedPages: (number | string)[];
-    @Output() pageChanged = new EventEmitter<number>();
-    displayed;
-
-    private _currentPage: number;
-
-    get currentPage() {
-        return this._currentPage;
-    }
-
-    private _totalPages: number;
-
-    get totalPages() {
-        return this._totalPages;
-    }
-
-    @Input()
-    set settings(value: { currentPage: number; totalPages: number }) {
-        this._currentPage = value.currentPage;
-        this._totalPages = value.totalPages;
-        this._updatePagesArray();
-    }
-
-    selectPage(page: number | string) {
-        if (page !== '...') {
-            this.pageChanged.emit(page as number);
-        }
-    }
-
-    displayValue(page: number | string) {
-        return page === '...' ? page : (page as number) + 1;
-    }
-
-    isNumber(page) {
-        return Number.isInteger(page);
-    }
-
-    private _updatePagesArray() {
-        this.displayedPages = [0];
-        if (Math.max(1, this.currentPage - 1) > 1) {
-            this.displayedPages.push('...');
-        }
-        for (let page = Math.max(1, this.currentPage - 1); page <= Math.min(this.currentPage + 1, this.totalPages - 1); ++page) {
-            this.displayedPages.push(page);
-        }
-        if (Math.min(this.currentPage + 1, this.totalPages - 1) !== this.totalPages - 1) {
-            if (this.currentPage + 1 < this.totalPages - 2) {
-                this.displayedPages.push('...');
-            }
-            this.displayedPages.push(this.totalPages - 1);
-        }
-    }
-}

apps/red-ui/src/app/modules/shared/shared.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import { PaginationComponent } from './components/pagination/pagination.component';
 import { FileDownloadBtnComponent } from './components/buttons/file-download-btn/file-download-btn.component';
 import { MatConfigModule } from '../mat-config/mat-config.module';
 import { IconsModule } from '../icons/icons.module';
@@ -54,7 +53,6 @@ import { MatDividerModule } from '@angular/material/divider';
 const buttons = [FileDownloadBtnComponent];
 
 const components = [
-    PaginationComponent,
     AnnotationIconComponent,
     DictionaryManagerComponent,
     AssignUserDropdownComponent,