@unifylib/ui-lib 1.0.3

package/src/lib/components/rejection-comment/action-comment.component.html

@@ -0,0 +1,46 @@
+<div *ngIf="signingRequired">
+  <p mat-dialog-title align="start" class="invoice-note-text invoice-section m-0">
+    {{ 'comment.OTP' | translate }}
+    <span *ngIf="isTermination" class="text-red">*</span>
+  </p>
+  <mat-dialog-content class="mat-typography">
+    <mat-form-field appearance="outline" class="w-100" [class.error-input]="isSubmitted && !otp">
+      <input cdkFocusInitial agAcceptOnlyNumeric [(ngModel)]="otp" matInput type="text" class="pad-top"/>
+    </mat-form-field>
+  </mat-dialog-content>
+</div>
+<div>
+  <div class="action-comment">
+    <p class="invoice-note-text invoice-section">
+      <span style="padding: 10px 15px">{{ actionLabel | translate }}</span>
+      <span *ngIf="isTermination" class="text-red">*</span>
+    </p>
+    <mat-icon (click)="cancel()">close</mat-icon>
+<!--    <span class="material-icons" (click)="cancel()">close</span>-->
+  </div>
+  <mat-dialog-content class="mat-typography overflow-hidden">
+    <mat-form-field appearance="outline" class="w-100">
+                <textarea cdkFocusInitial [(ngModel)]="comment" matInput class="form-style"
+                          [id]="isTermination ? 'warn' : 'primary'"
+                          cdkTextareaAutosize
+                          cdkAutosizeMinRows="4"
+                          cdkAutosizeMaxRows="5"
+                          placeholder="{{'PAYER.placeHolder' | translate}}">
+                </textarea>
+    </mat-form-field>
+  </mat-dialog-content>
+
+  <div style="margin-top: 10px">
+    <p *ngIf="warningMsg" mat-dialog-title align="start" class="invoice-section m-0 text-red">
+      {{ 'vendorWarning' | translate }}
+    </p>
+  </div>
+
+  <mat-dialog-actions align="end" class="modal-footer">
+
+    <button mat-stroked-button [color]="isTermination ? 'warn': 'primary'" [disabled]="isTermination && !comment"
+            (click)="commentAndClose()" id="actionLabel">
+      {{ 'Proceed' | translate }}
+    </button>
+  </mat-dialog-actions>
+</div>

package/src/lib/components/rejection-comment/action-comment.component.spec.ts

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

package/src/lib/components/rejection-comment/action-comment.component.ts

@@ -0,0 +1,86 @@
+import {Component, HostListener, Inject, OnInit} from '@angular/core';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {MatFormField} from "@angular/material/form-field";
+import {FormsModule} from "@angular/forms";
+import {CdkTextareaAutosize} from "@angular/cdk/text-field";
+import {TranslateModule} from "@ngx-translate/core";
+import {MatCheckbox} from "@angular/material/checkbox";
+import {MatButton} from "@angular/material/button";
+import {MatInput} from "@angular/material/input";
+import {NgIf} from "@angular/common";
+import {MatIcon} from "@angular/material/icon";
+
+@Component({
+  selector: 'app-action-comment',
+  standalone: true,
+  imports: [
+    MatDialogTitle,
+    MatFormField,
+    MatDialogContent,
+    FormsModule,
+    CdkTextareaAutosize,
+    TranslateModule,
+    MatCheckbox,
+    MatDialogActions,
+    MatButton,
+    MatInput,
+    NgIf,
+    MatIcon
+  ],
+  templateUrl: './action-comment.component.html',
+  styleUrl: './action-comment.component.css'
+})
+export class ActionCommentComponent implements OnInit {
+  actionLabel : string =''
+  isTermination : boolean=false;
+  comment: string = '';
+  external: boolean = false;
+  signingRequired: boolean = false;
+  tokenReference: string = "";
+  otp: string = "";
+  isSubmitted: boolean = false;
+  showExternalBox = true;
+  warningMsg = false;
+  constructor(public dialogRef: MatDialogRef<ActionCommentComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+    dialogRef.disableClose = true;
+  }
+  @HostListener('window:keyup.esc') onKeyUp() {
+    this.dialogRef.close();
+  }
+  ngOnInit(): void {
+    this.actionLabel = this.data.label;
+    this.isTermination = this.data.isTermination ;
+    this.signingRequired = this.data.signingRequired;
+    this.tokenReference = this.data.tokenReference;
+    this.warningMsg = this.data.warningMsg || false;
+  }
+
+
+  commentAndClose() {
+    this.isSubmitted = true;
+    if (this.signingRequired && !this.otp) return false;//validation
+    let obj:{[key: string]:any} = {
+      comment: this.comment,
+      shareExternal : this.external
+    };
+    //
+    if(this.signingRequired) obj["token"] = this.otp;
+    if(this.signingRequired) obj["tokenReference"] = this.tokenReference;
+    //
+    this.dialogRef.close(obj);
+
+    return "";
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+}

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

@@ -0,0 +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;
+}
+

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

@@ -0,0 +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>
+

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

@@ -0,0 +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();
+  });
+});

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

@@ -0,0 +1,113 @@
+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}`;
+  }
+
+
+
+}

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

@@ -0,0 +1,94 @@
+<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>

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

@@ -0,0 +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();
+  });
+});