@unifylib/ui-lib 1.0.3

package/src/lib/components/search-bar/search-bar.component.ts

@@ -0,0 +1,70 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatOption, MatSelect} from "@angular/material/select";
+import {FormsModule} from "@angular/forms";
+import {MatIcon} from "@angular/material/icon";
+import {FlexModule} from "@angular/flex-layout";
+import {MatInput} from "@angular/material/input";
+import {MatIconButton} from "@angular/material/button";
+import {NgForOf} from "@angular/common";
+import {TableColumn} from "../../base-model";
+import {TranslateModule} from "@ngx-translate/core";
+type SearchType = 'exact' | 'like';
+type SortType = 'ASC' | 'DESC';
+@Component({
+  selector: 'ag-search-bar',
+  templateUrl: './search-bar.component.html',
+  standalone: true,
+  imports: [
+    MatFormField,
+    MatSelect,
+    MatOption,
+    FormsModule,
+    MatIcon,
+    FlexModule,
+    MatInput,
+    MatIconButton,
+    NgForOf,
+    TranslateModule
+  ],
+  styleUrls: ['./search-bar.component.scss']
+})
+export class SearchBarComponent implements OnInit {
+  @Input() columns: TableColumn<any>[];
+  @Input() defaultSortKey: string = '';
+
+  searchValue: string = '';
+  searchType: SearchType = 'like';
+  selectedSortKey: string = '';
+  selectedSortType: SortType = 'ASC';
+  @Output() searchTriggered = new EventEmitter<{
+    searchValue: string;
+    searchType: SearchType;
+    sortKey: string;
+    sortType: string;
+  }>();
+
+  onSearch() {
+    this.selectedSortKey ||= this.defaultSortKey || this.columns[0]?.property;
+
+    this.searchTriggered.emit({
+      searchValue: this.searchValue,
+      searchType: this.searchType,
+      sortKey: this.selectedSortKey,
+      sortType: this.selectedSortType
+    });
+  }
+
+  labelKey(column: { label?: string; property: string }): string {
+    return column.label || column.property;
+  }
+
+  ngOnInit(): void {
+  }
+
+  getColumns() {
+    return this.columns.filter(
+      (column) => ['text', 'date', 'localDateTime'].includes(column.type)
+    );
+  }
+}

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

@@ -0,0 +1,54 @@
+.attachment-uploader {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start; /* <== Ensures buttons align left*/
+gap: 10px;
+  flex-wrap: wrap;
+
+
+  .upload-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 18px;
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    min-width: 200px;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    mat-icon {
+      font-size: 20px;
+    }
+  }
+
+  .clear-button {
+    background-color: transparent;
+    border: none;
+    color: #d32f2f;
+    transition: color 0.2s ease;
+    padding: 4px;
+
+    &:hover {
+      color: #b71c1c;
+    }
+
+    mat-icon {
+      font-size: 20px;
+    }
+  }
+
+  .hidden-input {
+    display: none;
+  }
+}
+
+.icon-design {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+}

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

@@ -0,0 +1,22 @@
+<div class="attachment-uploader">
+  <button mat-raised-button
+          [color]="selectedFile ? 'accent' : 'primary'"
+          class="upload-button"
+          (click)="triggerAttachmentUpload()">
+    <div class="icon-design">
+      <mat-icon>attach_file</mat-icon>
+      <span *ngIf="!selectedFile">{{ 'uploadAttachment' | translate }}</span>
+      <span *ngIf="selectedFile">{{ selectedFile.name }}</span>
+    </div>
+  </button>
+
+  <button *ngIf="selectedFile"
+          mat-icon-button
+          class="clear-button"
+          (click)="clearFile()"
+          matTooltip="Remove file">
+    <mat-icon>close</mat-icon>
+  </button>
+
+  <input #fileUpload type="file" class="hidden-input" (change)="uploadFileToServer()" />
+</div>

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

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

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

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

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

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

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

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

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

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

package/src/lib/components/title-bar/title-bar.component.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"title-bar.component.css"}

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

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

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

@@ -0,0 +1,23 @@
+.mainTitleBar {
+  width: 100%;
+padding: 0 20px;
+  .textTitle {
+    width: 100%;
+    &__titleMode {
+      font-style: italic;
+      font-weight: 200;
+      color: grey;
+    }
+  }
+
+  .actionButton {
+    width: 100%;
+
+    &__expand {
+      font-size: 20px !important;
+      color: var(--accent-color);
+      margin-top: 5px
+    }
+  }
+
+}

package/src/lib/components/title-bar/title-bar.component.spec.ts

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

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

@@ -0,0 +1,119 @@
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
+import {Location, NgForOf, NgIf} from "@angular/common";
+import {MatIconModule} from "@angular/material/icon";
+import {MatButton} from "@angular/material/button";
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+import {FlexLayoutModule} from "@angular/flex-layout";
+import {TranslateModule} from "@ngx-translate/core";
+import {Directionality} from "@angular/cdk/bidi";
+
+@Component({
+  selector: 'app-title-bar',
+  standalone: true,
+  imports: [
+    NgIf,
+    MatIconModule,
+    MatButton,
+    MatMenuItem,
+    MatMenu,
+    NgForOf,
+    MatMenuTrigger,
+    FlexLayoutModule,
+    TranslateModule,
+
+  ],
+  templateUrl: './title-bar.component.html',
+  styleUrls: ['./title-bar.component.css', 'title-bar.component.scss']
+})
+export class TitleBarComponent implements OnInit, OnChanges {
+  @Input()
+  pageTitle: string = "";
+
+  @Input()
+  showExtractButton: boolean = false;
+
+  @Input()
+  totalElements?: number;
+
+  @Input()
+  titleMode: string = '';
+
+  @Input()
+  statusDesc?: string;
+
+  @Input()
+  newAction: boolean = false;
+
+
+  @Input() // @ts-ignore
+  extraButton: string;
+
+
+  @Input()
+  showDetails: any = [];
+
+  @Input()
+  showImport = false;
+
+  @Input()
+  showButton = false;
+
+  @Output()
+  newActionClicked = new EventEmitter();
+
+  @Output()
+  extraButtonClicked = new EventEmitter();
+
+
+  @Output()
+  extractReport = new EventEmitter();
+
+  @Input()
+  extraData = '';
+
+  listTitle = '';
+  newButton = '';
+
+  @Input()
+  titleCorporateAdmin: string = '';
+
+  isRoot: boolean = false;
+  @Input()
+  hideBackButton: boolean = true;
+
+  constructor(private location:Location,
+              private dir: Directionality) {
+  }
+
+  ngOnInit(): void {
+    this.listTitle = this.pageTitle;
+    this.newButton = this.extraButton;
+    // this.isRoot = this.authService.isRootOrg();
+    this.isRoot = false;
+  }
+  get backIcon(): string {
+    return this.dir.value === 'rtl' ? 'arrow_back' : 'arrow_forward';
+  }
+
+  publishEvent() {
+    this.newActionClicked.emit(true);
+  }
+
+
+  doExtractReport(value: any) {
+    this.extractReport.emit(value);
+  }
+  publishExtraButtonEvent() {
+    this.extraButtonClicked.emit(true);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["pageTitle"] && !changes["pageTitle"].isFirstChange() ) {
+      this.listTitle = this.pageTitle;
+    }
+  }
+
+  goBack() {
+    this.location.back()
+  }
+}