@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/action-confirmation/action-confirmation.component.ts

@@ -1,58 +1,58 @@
-import {Component, HostBinding, 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 {TranslateModule} from "@ngx-translate/core";
-import {MatButton} from "@angular/material/button";
-
-@Component({
-  selector: 'app-action-confirmation',
-  standalone: true,
-  imports: [
-    MatDialogTitle,
-    MatFormField,
-    MatDialogContent,
-    TranslateModule,
-    MatDialogActions,
-    MatButton
-  ],
-  templateUrl: './action-confirmation.component.html',
-  styleUrl: './action-confirmation.component.css'
-})
-export class ActionConfirmationComponent implements OnInit {
-  acceptActionLabel : string =''
-  rejectActionLabel : string =''
-  warningMsg : string = '';
-  direction: 'ltr' | 'rtl' = 'ltr';
-  constructor(public dialogRef: MatDialogRef<ActionConfirmationComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any,
-              @Inject('securityManager') private securityManager: any) {
-    dialogRef.disableClose = true;
-  }
-  @HostListener('window:keyup.esc') onKeyUp() {
-    this.dialogRef.close();
-  }
-  ngOnInit(): void {
-    this.acceptActionLabel = this.data.acceptActionLabel || 'accept' ;
-    this.rejectActionLabel = this.data.rejectActionLabel || 'reject';
-    this.warningMsg = this.data.warningMsg || '';
-    this.direction = this.securityManager.getDir() ;
-  }
-
-
-  commentAndClose() {
-    this.dialogRef.close('accept');
-
-    return "";
-  }
-
-  cancel() {
-    this.dialogRef.close();
-  }
-
-}
+import {Component, HostBinding, 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 {TranslateModule} from "@ngx-translate/core";
+import {MatButton, MatIconButton} from "@angular/material/button";
+import {MatIcon} from "@angular/material/icon";
+
+@Component({
+  selector: 'app-action-confirmation',
+  standalone: true,
+  imports: [
+    TranslateModule,
+    MatButton,
+    MatIconButton,
+    MatIcon
+  ],
+  templateUrl: './action-confirmation.component.html',
+  styleUrl: './action-confirmation.component.css'
+})
+export class ActionConfirmationComponent implements OnInit {
+  acceptActionLabel : string =''
+  rejectActionLabel : string =''
+  subMsg : string = '';
+  titleMsg : string = '';
+  currentDirection: 'ltr' | 'rtl' = 'ltr';
+  constructor(public dialogRef: MatDialogRef<ActionConfirmationComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+    dialogRef.disableClose = true;
+  }
+  @HostListener('window:keyup.esc') onKeyUp() {
+    this.dialogRef.close();
+  }
+  ngOnInit(): void {
+    this.acceptActionLabel = this.data.acceptActionLabel || 'accept' ;
+    this.rejectActionLabel = this.data.rejectActionLabel || 'reject';
+    this.subMsg = this.data.warningMsg || '';
+    this.titleMsg = this.data.confirmMsg || '';
+    this.currentDirection  = this.data.direction;
+  }
+
+
+  commentAndClose() {
+    this.dialogRef.close('accept');
+
+    return "";
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+}

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

@@ -1,109 +1,110 @@
-<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>
-
-  <div 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="49">
-      <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
-        <button *ngIf="activeLevel === 1" color="primary" mat-flat-button (click)="doAction(x)"
-                [disabled]="!isValidForm()"
-                style="font-weight: bold;min-width: 140px; max-width: 200px; margin: 0 10px;">
-          {{ 'REPORTS.generate' | translate }}
-        </button>
-        <button style="font-weight: bold;min-width: 180px ;max-width: 200px;" mat-raised-button [matMenuTriggerFor]="menu"
-                [disabled]="getIsEmptyList()"
-                color="primary"  class="btn-none-background-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"
-          style="font-weight: bold; min-width: 140px; max-width: 200px; margin: 0 10px; ">
-          {{ 'REPORTS.clear' | translate }}
-        </button>
-
-        <button *ngIf="activeLevel === 1 && drillDownEnabled()" color="warn" mat-flat-button (click)="drillDown()"
-                style="font-weight: bold;min-width: 140px; max-width: 200px; margin: 0 10px;">
-          {{ drillDownLabel() | translate }}
-        </button>
-        <button *ngIf="activeLevel > 1 && !(isComparisonReport && activeLevel == 2)" color="warn" mat-flat-button (click)="goUp()"
-                style="font-weight: bold;min-width: 140px; max-width: 200px; margin: 0 10px;">
-          {{ 'REPORTS.up' | translate }}
-        </button>
-
-      </div>
-    </div>
-    <div fxLayout="column" fxFlex="49"></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]="reportRequest"
-                      (userAction)="emitUserAction($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]="drillDownPageInfo" [columns]="drillDownColumns"  id="junior"
-                      [reportRequest]="reportRequest" (userAction)="emitUserAction($event)" (hyperLinkAction)="emitHyperLinkAction($event)" ></app-base-table>
-    </div>
-  </div>
-    <div *ngIf="activeLevel === 4" 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"
-                        [reportRequest]="reportRequest" (userAction)="emitUserAction($event)"  (hyperLinkAction)="emitHyperLinkAction($event)" ></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="page-container">
+
+  <div class="row row-center-start mb-10px full-width">
+    <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="help-icon"
+              matTooltipClass="custom-tooltip">
+      help_outline
+    </mat-icon>
+  </div>
+
+  <app-base-form-canvas
+    [pageInfo]="pageInfo"
+    [fields]="fields"
+    [editable]="isEditable"
+    [errors]="errors"
+    [item]="reportForm?.value || {}"
+    (formUpdated)="updateForm($event)">
+  </app-base-form-canvas>
+
+  <div class="row main-form-canvas mt-3vh">
+    <div class="column flex-49">
+      <div class="row row-center-start">
+        <button *ngIf="activeLevel === 1" color="primary" mat-flat-button (click)="doAction(x)"
+                [disabled]="!isValidForm()" class="action-button" id="activity-generate-btn">
+          {{ 'REPORTS.generate' | translate }}
+        </button>
+        <button mat-raised-button [matMenuTriggerFor]="menu" [disabled]="getIsEmptyList()"
+                color="primary" class="btn-none-background-primary action-button" id="activity-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"
+                class="action-button" id="activity-clear-btn">
+          {{ 'REPORTS.clear' | translate }}
+        </button>
+        <button *ngIf="activeLevel === 1 && drillDownEnabled()" color="warn" mat-flat-button
+                (click)="drillDown()" class="action-button" id="activity-drilldown-btn">
+          {{ drillDownLabel() | translate }}
+        </button>
+        <button *ngIf="activeLevel > 1 && !(isComparisonReport && activeLevel == 2)" color="warn"
+                mat-flat-button (click)="goUp()" class="action-button" id="activity-up-btn">
+          {{ 'REPORTS.up' | translate }}
+        </button>
+      </div>
+    </div>
+    <div class="column flex-49"></div>
+  </div>
+
+  <!-- Base tables -->
+  <ng-container *ngIf="activeLevel === 1">
+    <div class="row main-form-canvas mt-3vh">
+      <div class="column flex-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>
+  </ng-container>
+
+  <ng-container *ngIf="activeLevel === 2">
+    <div class="row main-form-canvas mt-3vh">
+      <div class="column flex-100">
+        <app-base-table [pageInfo]="drillDownPageInfo" [columns]="drillDownColumns" id="child"
+                        [reportRequest]="reportRequest"
+                        (userAction)="emitUserAction($event)"
+                        (hyperLinkAction)="emitHyperLinkAction($event)">
+        </app-base-table>
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="activeLevel === 3">
+    <div class="row main-form-canvas mt-3vh">
+      <div class="column flex-100">
+        <app-base-table [pageInfo]="drillDownPageInfo" [columns]="drillDownColumns" id="junior"
+                        [reportRequest]="reportRequest"
+                        (userAction)="emitUserAction($event)"
+                        (hyperLinkAction)="emitHyperLinkAction($event)">
+        </app-base-table>
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="activeLevel === 4">
+    <div class="row main-form-canvas mt-3vh">
+      <div class="column flex-100">
+        <app-base-table [pageInfo]="drillDownPageInfo" [columns]="drillDownColumns"
+                        [reportRequest]="reportRequest"
+                        (userAction)="emitUserAction($event)"
+                        (hyperLinkAction)="emitHyperLinkAction($event)">
+        </app-base-table>
+      </div>
+    </div>
+  </ng-container>
+
+</div>
+
+<!-- Menu -->
+<mat-menu #menu="matMenu">
+  <button type="button" mat-menu-item *ngFor="let type of types" (click)="extractReport(type)" [attr.id]="'activity-extract-item-' + type">
+    {{ type }}
+  </button>
+</mat-menu>

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

@@ -0,0 +1,69 @@
+
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-49 {
+  flex: 0 0 49%;
+}
+
+.flex-100 {
+  flex: 0 0 100%;
+}
+
+.row-center-start {
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.mt-3vh { margin-top: 3vh; }
+.mb-10px { margin-bottom: 10px; }
+
+.action-button {
+  font-weight: bold;
+  min-width: 140px;
+  max-width: 200px;
+  margin: 0 10px;
+}
+
+.help-icon {
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+@media (max-width: 960px) {
+  .flex-49, .flex-100 {
+    flex: 1 1 100%;
+  }
+}
+
+@media (max-width: 600px) {
+  .row {
+    flex-direction: column;
+    align-items: center;
+  }
+  .action-button {
+    width: 100%;
+    max-width: 300px;
+    margin: 5px 0;
+  }
+  .help-icon {
+    margin-left: 0;
+    margin-top: 5px;
+  }
+}

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

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