@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/paginator/paginator.component.css

@@ -1,25 +1,65 @@
-.custom-paginator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-button {
-  min-width: 32px;
-}
-
-.current-page {
-  font-weight: bold;
-  background-color: #2196f3;
-  color: white;
-  border-radius: 4px;
-}
-
-.ellipsis {
-  padding: 0 8px;
-  font-size: 14px;
-  color: gray;
-  background: none;
-  border: none;
-  cursor: pointer;
-}
+.custom-paginator {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 8px;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  background: #fff;
+  font-size: 14px;
+  color: #555 !important;
+  gap: 16px;
+  margin-top: 4px;
+
+  .range-label {
+    color: #6b7280;
+    font-size: 13px;
+  }
+
+  .right-section {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .rows-per-page {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      mat-select {
+        width: 60px;
+        font-size: 13px;
+        color: #555;
+      }
+    }
+
+    .nav-buttons {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      span {
+        min-width: 40px;
+        text-align: center;
+        font-size: 13px;
+      }
+    }
+  }
+
+  button {
+    border: 1px solid #dbdbdb;
+    border-radius: 5px !important;
+    width: 28px;
+    height: 28px;
+    padding: 0 !important;
+    font-size: 18px;
+
+    &.active-chevron mat-icon {
+      color: var(--primary-color) ;
+    }
+
+    &.disabled-chevron mat-icon {
+      color: #555;
+    }
+  }
+}

package/src/lib/components/paginator/paginator.component.html

@@ -1,34 +1,30 @@
-<div class="custom-paginator" [dir]="currentDirection">
-  <!-- Previous Button -->
-  <button mat-icon-button (click)="previousPage()" [disabled]="currentPage === 1" *ngIf="currentDirection == 'ltr'">
-    <mat-icon>chevron_left</mat-icon>
-  </button>
-  <button mat-icon-button (click)="previousPage()" [disabled]="currentPage === 1" *ngIf="currentDirection == 'rtl'">
-    <mat-icon>chevron_right</mat-icon>
-  </button>
-
-  <!-- Page Numbers and Ellipses -->
-  <ng-container *ngFor="let page of viewablePages">
-    <ng-container *ngIf="page === '...'">
-      <span class="ellipsis" (click)="goToPage(page)">{{ page }}</span>
-    </ng-container>
-    <ng-container *ngIf="page !== '...'">
-      <button
-        mat-button
-        [disabled]="page === currentPage"
-        (click)="goToPage(page)"
-        [class.current-page]="page === currentPage"
-      >
-        {{ page }}
-      </button>
-    </ng-container>
-  </ng-container>
-
-  <!-- Next Button -->
-  <button mat-icon-button (click)="nextPage()" [disabled]="currentPage === totalPages" *ngIf="currentDirection == 'ltr'">
-    <mat-icon>chevron_right</mat-icon>
-  </button>
-  <button mat-icon-button (click)="nextPage()" [disabled]="currentPage === totalPages" *ngIf="currentDirection == 'rtl'">
-    <mat-icon>chevron_left</mat-icon>
-  </button>
-</div>
+<div class="custom-paginator" [dir]="currentDirection">
+  <span class="range-label">
+    {{ (currentPage - 1) * pageSize + 1 }} -
+    {{ Math.min(currentPage * pageSize, totalItems) }}
+    {{'PAGINATION.of' | translate}} {{ totalItems }}
+  </span>
+
+  <div class="right-section">
+    <div class="rows-per-page">
+      {{'PAGINATION.rowsPerPage' | translate}}:
+      <mat-select [(value)]="pageSize" (selectionChange)="onPageSizeChange($event.value)">
+        <mat-option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</mat-option>
+      </mat-select>
+    </div>
+
+    <div class="nav-buttons">
+      <button mat-icon-button (click)="previousPage()" [disabled]="currentPage === 1" id="paginator-prev-btn">
+        <mat-icon>{{ currentDirection === 'rtl' ? 'chevron_right' : 'chevron_left' }}</mat-icon>
+      </button>
+      <span><span style="color: var(--primary-color)">{{ currentPage }}</span> / {{ totalPages }}</span>
+      <button mat-icon-button
+              (click)="nextPage()"
+              [disabled]="currentPage === totalPages"
+              [ngClass]="{'active-chevron': currentPage !== totalPages, 'disabled-chevron': currentPage === totalPages}"
+              id="paginator-next-btn">
+        <mat-icon>{{ currentDirection === 'rtl' ? 'chevron_left' : 'chevron_right' }}</mat-icon>
+      </button>
+    </div>
+  </div>
+</div>

package/src/lib/components/paginator/paginator.component.ts

@@ -1,94 +1,87 @@
-import {Component, Input, Output, EventEmitter, OnChanges, OnInit} from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { NgIf, NgForOf } from '@angular/common';
-import {Directionality} from "@angular/cdk/bidi";
-
-@Component({
-  selector: 'app-paginator',
-  templateUrl: './paginator.component.html',
-  styleUrls: ['./paginator.component.css'],
-  standalone: true,
-  imports: [MatIconModule, MatButtonModule, NgIf, NgForOf],
-})
-export class PaginatorComponent implements OnInit , OnChanges {
-  maxSize = 3;
-
-  @Input() currentPage = 1;
-  @Input() totalPages = 1;
-  @Output() pageChange = new EventEmitter<number>();
-  currentDirection: 'ltr' | 'rtl';
-  constructor(private directionality: Directionality) {
-  }
-  viewablePages: (number | string)[] = [];
-  ngOnInit() {
-    this.currentDirection = this.directionality.value;
-    this.directionality.change.subscribe((value) => {
-      this.currentDirection = value;
-    })
-  }
-
-  ngOnChanges() {
-    this.calculatePages();
-  }
-
-  calculatePages() {
-    const pages: (number | string)[] = [];
-    const halfSize = Math.floor(this.maxSize / 2);
-
-    pages.push(1);
-
-    let start = Math.max(this.currentPage - halfSize, 2);
-    let end = Math.min(this.currentPage + halfSize, this.totalPages - 1);
-
-    if (this.currentPage <= halfSize) {
-      end = Math.min(this.maxSize, this.totalPages - 1);
-    } else if (this.currentPage + halfSize >= this.totalPages) {
-      start = Math.max(this.totalPages - this.maxSize + 2, 2);
-    }
-
-    if (start > 2) {
-      pages.push('...');
-    }
-
-    for (let i = start; i <= end; i++) {
-      pages.push(i);
-    }
-
-    if (end < this.totalPages - 1) {
-      pages.push('...');
-    }
-
-    if (this.totalPages > 1) {
-      pages.push(this.totalPages);
-    }
-
-    this.viewablePages = pages;
-  }
-
-  goToPage(page: number | string) {
-    if (page === '...') {
-      if (this.viewablePages[1] === '...') {
-        this.currentPage = Math.max(this.currentPage - this.maxSize, 1);
-      } else {
-        this.currentPage = Math.min(this.currentPage + this.maxSize, this.totalPages);
-      }
-    } else if (typeof page === 'number' && page !== this.currentPage) {
-      this.currentPage = page;
-    }
-
-    this.pageChange.emit(this.currentPage);
-    this.calculatePages();
-  }
-  nextPage() {
-    if (this.currentPage < this.totalPages) {
-      this.goToPage(this.currentPage + 1);
-    }
-  }
-
-  previousPage() {
-    if (this.currentPage > 1) {
-      this.goToPage(this.currentPage - 1);
-    }
-  }
-}
+import { Component, Input, Output, EventEmitter, OnInit, OnChanges } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import {NgIf, NgForOf, NgClass} from '@angular/common';
+import { Directionality } from '@angular/cdk/bidi';
+import { MatOption, MatSelect } from '@angular/material/select';
+import {TranslateModule} from "@ngx-translate/core";
+
+@Component({
+  selector: 'app-paginator',
+  templateUrl: './paginator.component.html',
+  styleUrls: ['./paginator.component.css'],
+  standalone: true,
+  imports: [MatIconModule, MatButtonModule, NgIf, NgForOf, MatSelect, MatOption, NgClass, TranslateModule],
+})
+export class PaginatorComponent implements OnInit, OnChanges {
+  @Input() currentPage = 1;
+  @Input() totalItems = 0;
+  @Input() pageSize = 10;
+  @Input() pageSizeOptions: number[] = [5, 10, 25, 50];
+
+  @Output() pageChange = new EventEmitter<number>();
+  @Output() pageSizeChange = new EventEmitter<number>();
+
+  currentDirection: 'ltr' | 'rtl' = 'ltr';
+
+  constructor(private directionality: Directionality) {}
+
+  ngOnInit() {
+    this.currentDirection = this.directionality.value;
+    this.directionality.change?.subscribe((value) => {
+      this.currentDirection = value;
+    });
+    if (!this.pageSizeOptions.includes(this.pageSize)) {
+      Promise.resolve().then(() => {
+        this.pageSize = this.pageSizeOptions[1];
+        this.pageSizeChange.emit(this.pageSize);
+      });
+    }
+  }
+
+  ngOnChanges() {
+    if (this.currentPage > this.totalPages) {
+      this.currentPage = this.totalPages || 1;
+    }
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.totalItems / this.pageSize);
+  }
+
+  get startIndex(): number {
+    return this.totalItems === 0 ? 0 : (this.currentPage - 1) * this.pageSize + 1;
+  }
+
+  get endIndex(): number {
+    return Math.min(this.currentPage * this.pageSize, this.totalItems);
+  }
+
+  goToPage(page: number) {
+    if (page >= 1 && page <= this.totalPages) {
+      this.currentPage = page;
+      this.pageChange.emit(this.currentPage);
+    }
+  }
+
+  nextPage() {
+    if (this.currentPage < this.totalPages) {
+      this.goToPage(this.currentPage + 1);
+    }
+  }
+
+  previousPage() {
+    if (this.currentPage > 1) {
+      this.goToPage(this.currentPage - 1);
+    }
+  }
+
+  onPageSizeChange(size: number) {
+    this.pageSize = size;
+    this.currentPage = 1;
+    this.pageSizeChange.emit(this.pageSize);
+    this.pageChange.emit(this.currentPage);
+  }
+
+  protected readonly Math = Math;
+}

package/src/lib/components/report-details-dialog/report-details-dialog.component.css

@@ -1,17 +1,17 @@
-::ng-deep .mat-dialog-actions {
-  justify-content: flex-end !important;
-}
-.close-button {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  z-index: 10;
-  background-color: white;
-  border-radius: 50%;
-}
-
-:host-context([dir="rtl"]) .close-button {
-  right: auto;
-  left: 8px;
-}
-
+::ng-deep .mat-dialog-actions {
+  justify-content: flex-end !important;
+}
+.close-button {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  z-index: 10;
+  background-color: white;
+  border-radius: 50%;
+}
+
+:host-context([dir="rtl"]) .close-button {
+  right: auto;
+  left: 8px;
+}
+

package/src/lib/components/report-details-dialog/report-details-dialog.component.html

@@ -1,16 +1,16 @@
-<mat-dialog-content style="max-height: 70vh; overflow: auto; position: relative;">
-  <button mat-icon-button class="close-button" (click)="cancel()" [attr.dir]="dialogDirection">
-    <mat-icon>close</mat-icon>
-  </button>
-
-    <h1 mat-dialog-title [innerHTML]="getTitle()"></h1>
-
-    <app-base-table
-            [pageInfo]="pageInfo"
-            [columns]="columns"
-            id="junior"
-            [enforceRefresh]="true"
-            [reportRequest]="reportRequest">
-    </app-base-table>
-</mat-dialog-content>
-
+<mat-dialog-content style="max-height: 70vh; overflow: auto; position: relative;">
+  <button mat-icon-button class="close-button" (click)="cancel()" [attr.dir]="dialogDirection" id="report-details-close-btn">
+    <mat-icon>close</mat-icon>
+  </button>
+
+    <h1 mat-dialog-title [innerHTML]="getTitle()"></h1>
+
+    <app-base-table
+            [pageInfo]="pageInfo"
+            [columns]="columns"
+            id="junior"
+            [enforceRefresh]="true"
+            [reportRequest]="reportRequest">
+    </app-base-table>
+</mat-dialog-content>
+

package/src/lib/components/report-details-dialog/report-details-dialog.component.spec.ts

@@ -1,23 +1,23 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ReportDetailsDialogComponent } from './report-details-dialog.component';
-
-describe('ActionCommentComponent', () => {
-  let component: ReportDetailsDialogComponent;
-  let fixture: ComponentFixture<ReportDetailsDialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ReportDetailsDialogComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ReportDetailsDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReportDetailsDialogComponent } from './report-details-dialog.component';
+
+describe('ActionCommentComponent', () => {
+  let component: ReportDetailsDialogComponent;
+  let fixture: ComponentFixture<ReportDetailsDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReportDetailsDialogComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ReportDetailsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});