@unifylib/ui-lib 1.0.3 → 1.1.3

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

@@ -1,113 +1,111 @@
-import {AfterViewInit, Component, ElementRef, HostListener, Inject, OnInit} from '@angular/core';
-import {
-  MAT_DIALOG_DATA, MatDialogActions, MatDialogContent,
-  MatDialogRef, MatDialogTitle,
-} from "@angular/material/dialog";
-import {FormsModule} from "@angular/forms";
-import {TranslateModule, TranslateService} from "@ngx-translate/core";
-import {FieldInfo, PageInfo, ReportRequest, TableColumn} from "../../base-model";
-import {BaseTableComponent} from "../base-table/base-table.component";
-import {FlexModule} from "@angular/flex-layout";
-import {MatButton, MatIconButton} from "@angular/material/button";
-import {BackendService} from "../../services";
-import {MatIcon} from "@angular/material/icon";
-
-@Component({
-  selector: 'app-audit-log-details-dialog',
-  standalone: true,
-  imports: [
-    FormsModule,
-    TranslateModule,
-    BaseTableComponent,
-    FlexModule,
-    MatDialogContent,
-    MatDialogTitle,
-    MatIconButton,
-    MatIcon
-  ],
-  templateUrl: './report-details-dialog.component.html',
-  styleUrl: './report-details-dialog.component.css'
-})
-export class ReportDetailsDialogComponent implements OnInit , AfterViewInit{
-  dialogDirection: 'ltr' | 'rtl' = 'ltr';
-
-  pageInfo: PageInfo;
-  fields: FieldInfo[] = [];
-
-  isTermination : boolean=false;
-  comment: string = '';
-  external: boolean = false;
-  signingRequired: boolean = false;
-  tokenReference: string = "";
-  warningMsg = false;
-  item: any = {};
-  reportRequest: ReportRequest;
-  columns: TableColumn<any>[];
-  constructor(public dialogRef: MatDialogRef<ReportDetailsDialogComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any,
-              private translateService: TranslateService,
-              public backendService:BackendService,
-              private elRef: ElementRef) {
-    dialogRef.disableClose = true;
-  }
-  @HostListener('window:keyup.esc') onKeyUp() {
-    this.dialogRef.close();
-  }
-  ngOnInit(): void {
-    this.pageInfo = this.data.pageInfo;
-    this.pageInfo.hideTitle = true;
-    this.item = this.data.item;
-    this.pageInfo.hideExtractButton = false;
-    this.columns = this.data.columns;
-    this.reportRequest = this.data.request;
-    this.warningMsg = this.data.warningMsg || false;
-    }
-
-  ngAfterViewInit(): void {
-    const container = this.elRef.nativeElement.closest('mat-dialog-container');
-    if (container && container.getAttribute('dir')) {
-      this.dialogDirection = container.getAttribute('dir') as 'ltr' | 'rtl';
-    }
-  }
-
-  cancel() {
-    this.reportRequest.filterRequest.filters = [];
-    this.backendService.isEmptyItems = false;
-    this.dialogRef.close();
-  }
-
-  @HostListener('document:click', ['$event'])
-  onBackdropClick(event: MouseEvent): void {
-    const target = event.target as HTMLElement;
-    if (target.classList.contains('cdk-overlay-backdrop')) {
-      this.reportRequest.filterRequest.filters = [];
-      this.backendService.isEmptyItems = false;
-      this.dialogRef.close();
-    }
-  }
-
-  getTitle() {
-    if (this.item?.isec_value_ar) {
-      const isecLabel = this.translateService.instant('ISEC');
-      return `<strong>${isecLabel} ${this.item.isec_value_ar}</strong>`;
-    }
-
-    const sectorLabel = this.translateService.instant('SECTOR');
-    const periodLabel = this.translateService.instant('FOR_PERIOD');
-    const directorateLabel = this.translateService.instant('DIRECTORATE');
-
-    const sectorText = this.item.sector ? `${sectorLabel} ${this.item.sector}` : '';
-    const periodText = this.item.period ? ` ${periodLabel} ${this.item.period}` : '';
-    const yearText = this.item.year ? ` - ${this.item.year}` : '';
-    const directorateLine = this.item.directorate ? `<br><strong>${directorateLabel} - ${this.item.directorate}</strong>` : '';
-
-    const mainLine = (sectorText || periodText || yearText)
-      ? `<strong>${[sectorText, periodText, yearText].filter(Boolean).join('')}</strong>`
-      : '';
-
-    return `${mainLine}${directorateLine}`;
-  }
-
-
-
-}
+import {AfterViewInit, Component, ElementRef, HostListener, Inject, OnInit} from '@angular/core';
+import {
+  MAT_DIALOG_DATA, MatDialogActions, MatDialogContent,
+  MatDialogRef, MatDialogTitle,
+} from "@angular/material/dialog";
+import {FormsModule} from "@angular/forms";
+import {TranslateModule, TranslateService} from "@ngx-translate/core";
+import {FieldInfo, PageInfo, ReportRequest, TableColumn} from "../../base-model";
+import {BaseTableComponent} from "../base-table/base-table.component";
+import {MatButton, MatIconButton} from "@angular/material/button";
+import {BackendService} from "../../services";
+import {MatIcon} from "@angular/material/icon";
+
+@Component({
+  selector: 'app-audit-log-details-dialog',
+  standalone: true,
+  imports: [
+    FormsModule,
+    TranslateModule,
+    BaseTableComponent,
+    MatDialogContent,
+    MatDialogTitle,
+    MatIconButton,
+    MatIcon
+  ],
+  templateUrl: './report-details-dialog.component.html',
+  styleUrl: './report-details-dialog.component.css'
+})
+export class ReportDetailsDialogComponent implements OnInit , AfterViewInit{
+  dialogDirection: 'ltr' | 'rtl' = 'ltr';
+
+  pageInfo: PageInfo;
+  fields: FieldInfo[] = [];
+
+  isTermination : boolean=false;
+  comment: string = '';
+  external: boolean = false;
+  signingRequired: boolean = false;
+  tokenReference: string = "";
+  warningMsg = false;
+  item: any = {};
+  reportRequest: ReportRequest;
+  columns: TableColumn<any>[];
+  constructor(public dialogRef: MatDialogRef<ReportDetailsDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any,
+              private translateService: TranslateService,
+              public backendService:BackendService,
+              private elRef: ElementRef) {
+    dialogRef.disableClose = true;
+  }
+  @HostListener('window:keyup.esc') onKeyUp() {
+    this.dialogRef.close();
+  }
+  ngOnInit(): void {
+    this.pageInfo = this.data.pageInfo;
+    this.pageInfo.hideTitle = true;
+    this.item = this.data.item;
+    this.pageInfo.hideExtractButton = false;
+    this.columns = this.data.columns;
+    this.reportRequest = this.data.request;
+    this.warningMsg = this.data.warningMsg || false;
+    }
+
+  ngAfterViewInit(): void {
+    const container = this.elRef.nativeElement.closest('mat-dialog-container');
+    if (container && container.getAttribute('dir')) {
+      this.dialogDirection = container.getAttribute('dir') as 'ltr' | 'rtl';
+    }
+  }
+
+  cancel() {
+    this.reportRequest.filterRequest.filters = [];
+    this.backendService.isEmptyItems = false;
+    this.dialogRef.close();
+  }
+
+  @HostListener('document:click', ['$event'])
+  onBackdropClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    if (target.classList.contains('cdk-overlay-backdrop')) {
+      this.reportRequest.filterRequest.filters = [];
+      this.backendService.isEmptyItems = false;
+      this.dialogRef.close();
+    }
+  }
+
+  getTitle() {
+    if (this.item?.isec_value_ar) {
+      const isecLabel = this.translateService.instant('ISEC');
+      return `<strong>${isecLabel} ${this.item.isec_value_ar}</strong>`;
+    }
+
+    const sectorLabel = this.translateService.instant('SECTOR');
+    const periodLabel = this.translateService.instant('FOR_PERIOD');
+    const directorateLabel = this.translateService.instant('DIRECTORATE');
+
+    const sectorText = this.item.sector ? `${sectorLabel} ${this.item.sector}` : '';
+    const periodText = this.item.period ? ` ${periodLabel} ${this.item.period}` : '';
+    const yearText = this.item.year ? ` - ${this.item.year}` : '';
+    const directorateLine = this.item.directorate ? `<br><strong>${directorateLabel} - ${this.item.directorate}</strong>` : '';
+
+    const mainLine = (sectorText || periodText || yearText)
+      ? `<strong>${[sectorText, periodText, yearText].filter(Boolean).join('')}</strong>`
+      : '';
+
+    return `${mainLine}${directorateLine}`;
+  }
+
+
+
+}

package/src/lib/components/report-form/report-form.component.html

@@ -1,94 +1,92 @@
-<div fxLayout="column" fxFlex="2" fxHide.lt-sm [ngStyle]="{'height':isMatchHeight() ? '30vh' : '88vh' }">
-
-</div>
-
-<div fxLayout="column" fxFlex="98">
-
-  <div fxLayout="row" fxLayoutAlign="start center" style="margin-bottom: 10px;">
-    <app-title-bar [pageTitle]="getTitle()" [newAction]="false"></app-title-bar>
-
-    <mat-icon
-      *ngIf="pageInfo?.hasHint"
-      [matTooltip]="pageInfo.labelsSection + '.hint' | translate"
-      matTooltipPosition="right"
-      color="primary"
-      style="cursor: pointer; margin-left: 10px;"
-      matTooltipClass="custom-tooltip">
-      help_outline
-    </mat-icon>
-  </div>
-
-
-  <app-base-form-canvas
-    [pageInfo]="pageInfo"
-    [fields]="fields"
-    [editable]="isEditable"
-    [errors]="errors"
-    [item]="this.reportForm?.value || {}"
-    (formUpdated)="updateForm($event)"
-  ></app-base-form-canvas>
-  <br>
-  <br>
-  <div fxLayout="column">
-    <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="start center" fxLayoutAlign.lt-lg="start strat"  fxLayoutGap="10">
-      <button *ngIf="activeLevel === 1" color="primary" mat-flat-button (click)="doAction(x)" [disabled]="!isValidForm()">
-        {{ 'REPORTS.generate' | translate }}
-      </button>
-
-      <button mat-raised-button [matMenuTriggerFor]="menu" [disabled]="getIsEmptyList()" color="primary">
-        {{ 'extract' | translate }}
-        <mat-icon class="expand_more actionButton__expand">expand_more</mat-icon>
-      </button>
-
-      <button
-        mat-flat-button
-        (click)="clear()"
-        [disabled]="isFormEmpty() || activeLevel > 1">
-        {{ 'REPORTS.clear' | translate }}
-      </button>
-
-      <button *ngIf="activeLevel === 1 && drillDownEnabled()" color="warn" mat-flat-button (click)="drillDown()">
-        {{ drillDownLabel() | translate }}
-      </button>
-
-      <button *ngIf="activeLevel > 1 && backButtonEnabled" color="warn" mat-flat-button (click)="goUp()">
-        {{ 'REPORTS.up' | translate }}
-      </button>
-    </div>
-  </div>
-
-  <div *ngIf="activeLevel === 1" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start" fxLayoutAlign.lt-sm="center start"
-       class="main-form-canvas"
-       style="margin-top: 3vh; width: 100%">
-    <div fxLayout="column" fxFlex="100">
-      <app-base-table [pageInfo]="pageInfo" [columns]="columnsDefinition" [enforceRefresh]="reloadData" id="parent"
-                      [reportRequest]="reportRequest" (userAction)="emitUserAction($event)" (hyperLinkAction)="emitHyperLinkAction($event)"></app-base-table>
-    </div>
-  </div>
-  <div *ngIf="activeLevel === 2" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start" fxLayoutAlign.lt-sm="center start"
-       class="main-form-canvas"
-       style="margin-top: 3vh; width: 100%">
-    <div fxLayout="column" fxFlex="100">
-      <app-base-table [pageInfo]="drillDownPageInfo" [columns]="drillDownColumns " id="child"
-                      [reportRequest]="childReportRequest"
-                      (userAction)="emitJuniorAction($event)" (hyperLinkAction)="emitHyperLinkAction($event)"></app-base-table>
-    </div>
-  </div>
-  <div *ngIf="activeLevel === 3" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start" fxLayoutAlign.lt-sm="center start"
-       class="main-form-canvas"
-       style="margin-top: 3vh; width: 100%">
-    <div fxLayout="column" fxFlex="100">
-      <app-base-table [pageInfo]="juniorPageInfo" [columns]="juniorColumns" id="junior"
-                      [reportRequest]="juniorReportRequest"></app-base-table>
-    </div>
-  </div>
-
-</div>
-<mat-menu #menu="matMenu">
-  <button type="button"
-          mat-menu-item
-          *ngFor="let type of types"
-          (click)="extractReport(type)">
-    {{ type }}
-  </button>
-</mat-menu>
+<div class="column full-width">
+
+  <div class="row align-start-center" style="margin-bottom: 10px;">
+    <app-title-bar [pageTitle]="getTitle()" [newAction]="false"></app-title-bar>
+
+    <mat-icon
+      *ngIf="pageInfo?.hasHint"
+      [matTooltip]="pageInfo.labelsSection + '.hint' | translate"
+      matTooltipPosition="right"
+      color="primary"
+      class="hint-icon"
+      matTooltipClass="custom-tooltip">
+      help_outline
+    </mat-icon>
+  </div>
+
+  <app-base-form-canvas
+    [pageInfo]="pageInfo"
+    [fields]="fields"
+    [editable]="isEditable"
+    [errors]="errors"
+    [item]="this.reportForm?.value || {}"
+    (formUpdated)="updateForm($event)"
+  ></app-base-form-canvas>
+
+  <br><br>
+
+  <div class="column">
+    <div class="row gap-10 responsive-row">
+      <button *ngIf="activeLevel === 1" color="primary" mat-flat-button (click)="doAction(x)" [disabled]="!isValidForm()" id="report-generate-btn">
+        {{ 'REPORTS.generate' | translate }}
+      </button>
+
+      <button mat-raised-button [matMenuTriggerFor]="menu" [disabled]="getIsEmptyList()" color="primary" id="report-extract-trigger">
+        {{ 'extract' | translate }}
+        <mat-icon class="expand_more actionButton__expand">expand_more</mat-icon>
+      </button>
+
+      <button mat-flat-button (click)="clear()" [disabled]="isFormEmpty() || activeLevel > 1" id="report-clear-btn">
+        {{ 'REPORTS.clear' | translate }}
+      </button>
+
+      <button *ngIf="activeLevel === 1 && drillDownEnabled()" color="warn" mat-flat-button (click)="drillDown()" id="report-drilldown-btn">
+        {{ drillDownLabel() | translate }}
+      </button>
+
+      <button *ngIf="activeLevel > 1 && backButtonEnabled" color="warn" mat-flat-button (click)="goUp()" id="report-up-btn">
+        {{ 'REPORTS.up' | translate }}
+      </button>
+    </div>
+  </div>
+
+  <div *ngIf="activeLevel >= 1" class="main-form-canvas row align-start-start responsive-table" style="margin-top: 3vh;">
+    <div class="column full-width">
+      <app-base-table
+        *ngIf="activeLevel === 1"
+        [pageInfo]="pageInfo"
+        [columns]="columnsDefinition"
+        [enforceRefresh]="reloadData"
+        id="parent"
+        [reportRequest]="reportRequest"
+        (userAction)="emitUserAction($event)"
+        (hyperLinkAction)="emitHyperLinkAction($event)">
+      </app-base-table>
+
+      <app-base-table
+        *ngIf="activeLevel === 2"
+        [pageInfo]="drillDownPageInfo"
+        [columns]="drillDownColumns"
+        id="child"
+        [reportRequest]="childReportRequest"
+        (userAction)="emitJuniorAction($event)"
+        (hyperLinkAction)="emitHyperLinkAction($event)">
+      </app-base-table>
+
+      <app-base-table
+        *ngIf="activeLevel === 3"
+        [pageInfo]="juniorPageInfo"
+        [columns]="juniorColumns"
+        id="junior"
+        [reportRequest]="juniorReportRequest">
+      </app-base-table>
+    </div>
+  </div>
+
+</div>
+
+<mat-menu #menu="matMenu">
+  <button type="button" mat-menu-item *ngFor="let type of types" (click)="extractReport(type)" [attr.id]="'report-extract-item-' + type">
+    {{ type }}
+  </button>
+</mat-menu>

package/src/lib/components/report-form/report-form.component.scss

@@ -0,0 +1,51 @@
+.column {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.align-start-center {
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.align-start-start {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.gap-10 > * + * {
+  margin-left: 10px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.hint-icon {
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.responsive-row {
+  flex-wrap: wrap;
+}
+
+@media (max-width: 960px) {
+  .responsive-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 600px) {
+  .responsive-table {
+    justify-content: center;
+  }
+}

package/src/lib/components/report-form/report-form.component.spec.ts

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