@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.spec.ts

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

package/src/lib/components/shared/attachment-uploader/attachment-uploader.component.ts

@@ -1,45 +1,71 @@
-import {Component, ElementRef, EventEmitter, Output, ViewChild} from '@angular/core';
-import {MatIcon} from "@angular/material/icon";
-import {TranslateModule} from "@ngx-translate/core";
-import {MatButton, MatIconButton} from "@angular/material/button";
-import {NgIf} from "@angular/common";
-import {MatTooltip} from "@angular/material/tooltip";
-
-@Component({
-  selector: 'app-attachment-uploader',
-  standalone: true,
-  imports: [
-    MatIcon,
-    TranslateModule,
-    MatButton,
-    NgIf,
-    MatTooltip,
-    MatIconButton,
-  ],
-  templateUrl: './attachment-uploader.component.html',
-  styleUrl: './attachment-uploader.component.css'
-})
-export class AttachmentUploaderComponent {
-  @ViewChild('fileUpload') fileUpload!: ElementRef<HTMLInputElement>;
-  @Output() fileSelected = new EventEmitter<File | null>();
-
-  selectedFile: File | null = null;
-
-  triggerAttachmentUpload(): void {
-    this.fileUpload.nativeElement.click();
-  }
-
-  uploadFileToServer(): void {
-    const file = this.fileUpload.nativeElement.files?.[0];
-    if (file) {
-      this.selectedFile = file;
-      this.fileSelected.emit(file);
-    }
-  }
-
-  clearFile(): void {
-    this.selectedFile = null;
-    this.fileUpload.nativeElement.value = '';
-    this.fileSelected.emit(null);
-  }
-}
+import {Component, ElementRef, EventEmitter, Output, ViewChild} from '@angular/core';
+import {MatIcon} from "@angular/material/icon";
+import {TranslateModule} from "@ngx-translate/core";
+import {MatButton, MatIconButton} from "@angular/material/button";
+import {NgIf} from "@angular/common";
+import {MatTooltip} from "@angular/material/tooltip";
+
+@Component({
+  selector: 'app-attachment-uploader',
+  standalone: true,
+  imports: [
+    MatIcon,
+    TranslateModule,
+    MatButton,
+    NgIf,
+    MatTooltip,
+    MatIconButton,
+  ],
+  templateUrl: './attachment-uploader.component.html',
+  styleUrl: './attachment-uploader.component.css'
+})
+export class AttachmentUploaderComponent {
+  @ViewChild('fileUpload') fileUpload!: ElementRef<HTMLInputElement>;
+  @Output() fileSelected = new EventEmitter<File | null>();
+
+  selectedFile: File | null = null;
+  isDragOver = false;
+
+  triggerAttachmentUpload(): void {
+    this.fileUpload.nativeElement.click();
+  }
+
+  uploadFileToServer(): void {
+    const file = this.fileUpload.nativeElement.files?.[0];
+    if (file) {
+      this.selectedFile = file;
+      this.fileSelected.emit(file);
+    }
+  }
+
+  clearFile(): void {
+    this.selectedFile = null;
+    this.fileUpload.nativeElement.value = '';
+    this.fileSelected.emit(null);
+  }
+
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = true;
+  }
+
+  onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = false;
+  }
+
+  onDrop(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = false;
+
+    const files = event.dataTransfer?.files;
+    if (files && files.length > 0) {
+      const file = files[0];
+      this.selectedFile = file;
+      this.fileSelected.emit(file);
+    }
+  }
+}

package/src/lib/components/shared-list/shared-list.component.html

@@ -1,17 +1,17 @@
-<ng-container *ngIf="readyToLoad">
-  @if (editableTable) {
-    <app-editable-base-table [filterRequest]="filterRequest" [pageInfo]="pageInfo"
-                    [fields]="fields"
-                    [isPending]="isPending"
-    ></app-editable-base-table>
-
-  } @else {
-
-    <app-base-table [filters]="filters" [pageInfo]="pageInfo"
-                    [columns]="columnsDefinition"
-                    [listAction]="listAction"
-                    [isPending]="isPending"
-    ></app-base-table>
-
-  }
-</ng-container>
+<ng-container *ngIf="readyToLoad">
+  @if (editableTable) {
+    <app-editable-base-table [filterRequest]="filterRequest" [pageInfo]="pageInfo"
+                    [fields]="fields"
+                    [isPending]="isPending"
+    ></app-editable-base-table>
+
+  } @else {
+
+    <app-base-table [filters]="filters" [pageInfo]="pageInfo"
+                    [columns]="columnsDefinition"
+                    [listAction]="listAction"
+                    [isPending]="isPending"
+    ></app-base-table>
+
+  }
+</ng-container>

package/src/lib/components/shared-list/shared-list.component.spec.ts

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

package/src/lib/components/shared-list/shared-list.component.ts

@@ -1,53 +1,53 @@
-import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute} from "@angular/router";
-import {NgIf} from "@angular/common";
-import {BaseTableComponent} from "../base-table/base-table.component";
-import {ButtonActionSettings, EMPTY_PAGE_INFO, FieldInfo, FilterRequest, PageInfo, TableColumn} from "../../base-model";
-import {Filter} from "../../base-model";
-import {EditableBaseTableComponent} from "../editable-base-table/editable-base-table.component";
-
-@Component({
-  selector: 'app-shared-list',
-  standalone: true,
-  imports: [
-    BaseTableComponent,
-    NgIf,
-    EditableBaseTableComponent
-  ],
-  templateUrl: './shared-list.component.html',
-  styleUrls:[ './shared-list.component.css']
-})
-export class SharedListComponent implements OnInit {
-  pageInfo: PageInfo = EMPTY_PAGE_INFO;
-  columnsDefinition: TableColumn<any>[] = [];
-  fields: FieldInfo[] = [];
-  filters: Filter[] = [];
-  readyToLoad: boolean = false;
-  isPending: boolean = false;
-  listAction: ButtonActionSettings[] = [];
-  editableTable : boolean = false;
-  filterRequest: FilterRequest = new FilterRequest();
-  constructor(private activatedRoute: ActivatedRoute) { }
-
-  ngOnInit(): void {
-    this.activatedRoute.data.subscribe(data => {
-      this.pageInfo = data['pageInfo'];
-      this.columnsDefinition = data["columnsDefinition"];
-      this.filters = data["filters"] || [];
-
-      this.isPending = 'pending' === data["mode"];
-      this.listAction = data['actions'];
-      this.editableTable = data['editableTable'] || false;
-      this.fields = data['fields'];
-
-      this.filterRequest = new FilterRequest();
-      this.filterRequest.columns = this.fields?.filter(c => c.type !== 'button').map(c => c.property) || [];
-      this.filterRequest.filters = this.filters;
-
-      this.readyToLoad = true;
-
-    });
-  }
-
-
-}
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from "@angular/router";
+import {NgIf} from "@angular/common";
+import {BaseTableComponent} from "../base-table/base-table.component";
+import {ButtonActionSettings, EMPTY_PAGE_INFO, FieldInfo, FilterRequest, PageInfo, TableColumn} from "../../base-model";
+import {Filter} from "../../base-model";
+import {EditableBaseTableComponent} from "../editable-base-table/editable-base-table.component";
+
+@Component({
+  selector: 'app-shared-list',
+  standalone: true,
+  imports: [
+    BaseTableComponent,
+    NgIf,
+    EditableBaseTableComponent
+  ],
+  templateUrl: './shared-list.component.html',
+  styleUrls:[ './shared-list.component.css']
+})
+export class SharedListComponent implements OnInit {
+  pageInfo: PageInfo = EMPTY_PAGE_INFO;
+  columnsDefinition: TableColumn<any>[] = [];
+  fields: FieldInfo[] = [];
+  filters: Filter[] = [];
+  readyToLoad: boolean = false;
+  isPending: boolean = false;
+  listAction: ButtonActionSettings[] = [];
+  editableTable : boolean = false;
+  filterRequest: FilterRequest = new FilterRequest();
+  constructor(private activatedRoute: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.activatedRoute.data.subscribe(data => {
+      this.pageInfo = data['pageInfo'];
+      this.columnsDefinition = data["columnsDefinition"];
+      this.filters = data["filters"] || [];
+
+      this.isPending = 'pending' === data["mode"];
+      this.listAction = data['actions'];
+      this.editableTable = data['editableTable'] || false;
+      this.fields = data['fields'];
+
+      this.filterRequest = new FilterRequest();
+      this.filterRequest.columns = this.fields?.filter(c => c.type !== 'button').map(c => c.property) || [];
+      this.filterRequest.filters = this.filters;
+
+      this.readyToLoad = true;
+
+    });
+  }
+
+
+}

package/src/lib/components/snackbar-static/snackbar-static.component.html

@@ -0,0 +1,20 @@
+<div class="snackbar snackbar-{{type}}" [ngStyle]="{'width': width == 'auto' ? 'auto' : width}">
+  <div class="sub-snackbar">
+    <mat-icon *ngIf="type === 'error'">error</mat-icon>
+    <mat-icon *ngIf="type === 'success'">check_box</mat-icon>
+    <mat-icon *ngIf="type === 'warning'">warning</mat-icon>
+    <mat-icon *ngIf="type === 'info'">info</mat-icon>
+    <mat-icon *ngIf="type === 'help'">help</mat-icon>
+
+    <div class="text-content">
+      <div class="title">{{ titleKey | translate : paramsTitle }}</div>
+      <div class="subtitle">{{ messageKey | translate: params }}</div>
+    </div>
+
+  </div>
+  <div class="action" *ngIf="textBtn">
+    <button mat-stroked-button class="btn-none-background-primary action-btn" (click)="submit()" id="snackbar-action-btn">
+        {{ textBtn | translate}}
+    </button>
+  </div>
+</div>

package/src/lib/components/snackbar-static/snackbar-static.component.scss

@@ -0,0 +1,135 @@
+.snackbar {
+  position: relative;
+  width: auto;
+  max-width: 100%;
+  box-sizing: border-box;
+  background: #fff;
+  border: 1.5px solid #1c8c7a;
+  border-radius: 10px;
+  padding: 12px 20px;
+  display: flex;
+  flex-direction: column;
+  color: #1c8c7a;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  --snackbar-icon-size: clamp(16px, 2.4vw, 20px);
+  --snackbar-title-size: clamp(14px, 2.6vw, 16px);
+  --snackbar-subtitle-size: clamp(12px, 2.3vw, 14px);
+
+  .sub-snackbar {
+    display: flex;
+    gap: 10px;
+    align-items: start;
+
+    mat-icon {
+      font-size: var(--snackbar-icon-size);
+      line-height: 1;
+      width: 1em;
+      height: 1em;
+      flex: 0 0 auto;
+    }
+
+    .text-content {
+      display: flex;
+      flex-direction: column;
+      line-height: 24px;
+
+      .title {
+        font-weight: 400;
+        color: inherit;
+        font-family: 'lusail-regular', sans-serif;
+        font-size: var(--snackbar-title-size);
+      }
+
+      .subtitle {
+        font-weight: 400;
+        color: #888;
+        font-family: 'lusail-light', sans-serif;
+        font-size: var(--snackbar-subtitle-size);
+      }
+    }
+  }
+
+  .action {
+    display: flex;
+    justify-content: flex-end;
+
+    .action-btn {
+      font-size: var(--snackbar-title-size);
+      font-weight: 400;
+      border-radius: 8px;
+      min-height: 19px !important;
+      margin: 0 !important;
+      max-width: 100%;
+
+      mat-icon {
+        font-size: var(--snackbar-icon-size);
+      }
+    }
+  }
+}
+
+.snackbar-success {
+  border-color: #0D7D6A;
+  color: #0D7D6A;
+}
+
+.snackbar-error {
+  border-color: #a42b2b;
+  color: #a42b2b;
+}
+
+.snackbar-warning {
+  border-color: #B54708;
+  color: #B54708;
+}
+
+.snackbar-info {
+  border-color: #0d47a1;
+  color: #0d47a1;
+}
+.snackbar-help {
+  border-color: var(--primary-color-3nd);
+  color: var(--primary-color-3nd);
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+  .snackbar {
+    padding: 10px 14px;
+    /* tighten fluid sizes a bit on small screens */
+    --snackbar-icon-size: clamp(16px, 3.6vw, 18px);
+    --snackbar-title-size: clamp(14px, 3.8vw, 15px);
+    --snackbar-subtitle-size: clamp(12px, 3.4vw, 13px);
+  }
+
+  .snackbar .sub-snackbar {
+    gap: 8px;
+  }
+
+  .snackbar .sub-snackbar .text-content {
+    line-height: 22px;
+  }
+
+  .snackbar .action {
+    margin-top: 8px;
+  }
+
+  .snackbar .action .action-btn {
+    width: 100%;
+    font-size: var(--snackbar-title-size);
+  }
+}
+
+@media (max-width: 360px) {
+  .snackbar {
+    padding: 8px 10px;
+    border-radius: 8px;
+    /* even tighter bounds for very small devices */
+    --snackbar-icon-size: clamp(14px, 4.5vw, 16px);
+    --snackbar-title-size: clamp(13px, 4.6vw, 14px);
+    --snackbar-subtitle-size: clamp(11px, 4.2vw, 12px);
+  }
+}

package/src/lib/components/snackbar-static/snackbar-static.component.ts

@@ -0,0 +1,26 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {MatButton, MatIconButton} from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import {NgIf, NgStyle} from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-snackbar-static',
+  standalone: true,
+  imports: [MatIcon, NgIf, TranslateModule, MatIconButton, MatButton, NgStyle],
+  templateUrl: './snackbar-static.component.html',
+  styleUrls: ['./snackbar-static.component.scss']
+})
+export class SnackbarStaticComponent {
+  @Input() messageKey = '';
+  @Input() titleKey = '';
+  @Input() params: Record<string, any> = {};
+  @Input() paramsTitle: Record<string, any> = {};
+  @Input() type: 'error' | 'success' | 'warning' | 'info' | 'help'
+  @Output() actionBtn: EventEmitter<void> = new EventEmitter();
+  @Input() width: string = 'auto';
+  @Input() textBtn: string;
+  submit() {
+    this.actionBtn.emit()
+  }
+}

package/src/lib/components/title-bar/title-bar.component.html

@@ -1,31 +1,35 @@
-<div [fxLayout]="!hideBackButton ? 'row' : 'column'" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.xs="1px" fxLayoutAlign="start center" fxLayoutAlign.lt-lg="start end" class="mainTitleBar">
-  <div fxLayout="column" fxFlex="auto" class="textTitle">
-    <h2><span class="textTitle__titleMode">{{titleMode | translate}}</span>
-      {{listTitle | translate}} <span *ngIf="titleCorporateAdmin&&isRoot">({{titleCorporateAdmin}})</span> {{extraData}}</h2>
-  </div>
-  <div fxLayout="column" fxFlex="auto"  style="place-items: end">
-    <button mat-flat-button color="primary" style="width: 100px" *ngIf="!hideBackButton" (click)="goBack()">
-      <mat-icon color="second">{{ backIcon }}</mat-icon>
-      <span style="font-weight: bold">{{ 'back' | translate }}</span>
-    </button>
-  </div>
-</div>
-<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.xs="1px" fxLayoutAlign="start center" class="mainTitleBar" style="width: 100% !important;">
-  <button mat-raised-button class="btn-none-background-primary" (click)="publishEvent()" color="primary"
-          *ngIf="newAction">
-    {{ 'add_new' | translate }}
-  </button>
-
-  <button [disabled]="totalElements == 0" mat-stroked-button [matMenuTriggerFor]="appMenu" *ngIf="showExtractButton">
-    {{ 'extract' | translate }}
-    <mat-icon class="expand_more actionButton__expand">expand_more</mat-icon>
-  </button>
-
-
-</div>
-<mat-menu #appMenu="matMenu">
-    <button mat-menu-item (click)="doExtractReport('pdf')">PDF</button>
-    <button mat-menu-item (click)="doExtractReport('xlsx')">Excel</button>
-    <button mat-menu-item (click)="doExtractReport('csv')">CSV</button>
-    <button mat-menu-item *ngFor="let detail of  showDetails" (click)="doExtractReport(detail.type)">{{detail.title}}</button>
-</mat-menu>
+<div class="row mainTitleBar gap-20 default-align">
+
+  <div class="column flex-auto textTitle" >
+    <h2 *ngIf="false">
+      <span class="textTitle__titleMode">{{ titleMode | translate }}</span>
+      {{ listTitle | translate }}
+      <span *ngIf="titleCorporateAdmin && isRoot">({{ titleCorporateAdmin }})</span>
+      {{ extraData }}
+    </h2>
+    <span  *ngIf="false" class="textTitle__subTitle">{{ subTitle | translate }}</span>
+  </div>
+
+  <div class="column end-items gap-20">
+    <button mat-flat-button color="primary" style="width: 100px" *ngIf="!hideBackButton" (click)="goBack()" id="title-bar-back-btn">
+      <mat-icon color="second">{{ backIcon }}</mat-icon>
+      <span style="font-weight: bold">{{ 'back' | translate }}</span>
+    </button>
+
+    <div class="row flex-auto gap-20 buttons-wrapper">
+      <button
+        mat-flat-button
+        *ngFor="let btn of buttons"
+        [color]="btn.color || 'primary'"
+        (click)="onButtonClick(btn)"
+        class="btn-background-primary action-btn"
+        [attr.id]="btn.id || ('title-bar-btn-' + (btn.action || btn.label || btn.key))"
+      >
+        <div class="button-text">
+          <mat-icon>{{ btn.icon }}</mat-icon>
+          <span>{{ btn.label | translate }}</span>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>