@unifylib/ui-lib 1.0.3

package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.ts

@@ -0,0 +1,69 @@
+import {Component, HostListener, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
+import {FormsModule} from "@angular/forms";
+import {TranslateModule} from "@ngx-translate/core";
+import {MatButton} from "@angular/material/button";
+import {FieldInfo, PageInfo} from "../../base-model";
+import {BaseFormCanvasComponent} from "../base-form-canvas/base-form-canvas.component";
+import {MatDivider} from "@angular/material/divider";
+
+@Component({
+  selector: 'app-audit-log-details-dialog',
+  standalone: true,
+  imports: [
+    MatDialogTitle,
+    MatDialogContent,
+    FormsModule,
+    TranslateModule,
+    MatButton,
+    BaseFormCanvasComponent,
+    MatDivider
+  ],
+  templateUrl: './audit-log-details-dialog.component.html',
+  styleUrl: './audit-log-details-dialog.component.css'
+})
+export class AuditLogDetailsDialogComponent implements OnInit {
+  pageInfo: PageInfo;
+  fields: FieldInfo[] = [];
+
+  actionLabel : string =''
+  isTermination : boolean=false;
+  comment: string = '';
+  external: boolean = false;
+  signingRequired: boolean = false;
+  tokenReference: string = "";
+  warningMsg = false;
+  item: any = {};
+  constructor(public dialogRef: MatDialogRef<AuditLogDetailsDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+    dialogRef.disableClose = true;
+  }
+  @HostListener('window:keyup.esc') onKeyUp() {
+    this.dialogRef.close();
+  }
+  ngOnInit(): void {
+    this.pageInfo = this.data.pageInfo;
+    this.fields = this.data.fields;
+
+    this.fields = this.data.fields.map((f: any) => ({ ...f }));
+
+    const showHiddenFields: string[] = this.data.showHiddenFields || [];
+    this.fields.forEach(field => {
+      if (showHiddenFields.includes(field.property)) {
+        field.visible = true;
+      }
+    });
+    this.item = this.data.item;
+    this.comment = this.data.comment;
+    this.warningMsg = this.data.warningMsg || false;
+    }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+
+  getTitle() {
+    return `${this.pageInfo.labelsSection}.${this.pageInfo.id}`;
+  }
+}

package/src/lib/components/audit-log-list/audit-log.component.html

@@ -0,0 +1,23 @@
+<h4><span style="font-weight: normal; color: #222222" >{{'audit-log.title' | translate}}</span></h4>
+<div class="hrdivider-mini" >
+  <hr class="header-hr"/>
+</div>
+
+<div fxLayout="row" fxLayout.lt-md="row" fxLayoutGap="5px" fxLayoutAlign="start start" style="width: 100%;"
+     *ngFor="let auditLog of auditLogEntries; let i=index">
+  <div fxLayout="column" fxFlex="100" fxLayoutAlign="start start">
+    <p *ngIf="i===0" style="margin-bottom: 15px; margin-top: 0"></p>
+    <p style="margin-bottom: 0; margin-top: 0">
+      {{getDescription(auditLog)}}
+      <button mat-stroked-button color="secondary" (click)="viewObject(auditLog)">
+        {{ 'audit-log.view_details' | translate }}
+      </button>
+
+    </p>
+    <p class="invoice-label-text" style="margin: 0;word-wrap: break-word"></p>
+    <div class="hrdivider-mini" >
+      <hr class="header-hr"/>
+    </div>
+  </div>
+
+</div>

package/src/lib/components/audit-log-list/audit-log.component.spec.ts

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

package/src/lib/components/audit-log-list/audit-log.component.ts

@@ -0,0 +1,116 @@
+import {Component, Inject, Input, OnInit} from '@angular/core';
+import {FieldInfo, Filter, FilterRequest, PageInfo, TableColumn} from "../../base-model";
+import {TranslateModule, TranslateService} from "@ngx-translate/core";
+import {BackendService} from "../../services";
+import {DatePipe, NgForOf, NgIf} from "@angular/common";
+import {FlexLayoutModule} from "@angular/flex-layout";
+import {MatButton, MatButtonModule} from "@angular/material/button";
+import {MatIconModule} from "@angular/material/icon";
+import {MatDialog} from "@angular/material/dialog";
+import {ActivatedRoute, Router} from "@angular/router";
+import {AuditLogEntry} from "../../base-model/audit-log-entry";
+import {AuditLogDetailsDialogComponent} from "../audit-log-details-dialog/audit-log-details-dialog.component";
+import {Directionality} from "@angular/cdk/bidi";
+
+@Component({
+    selector: 'app-audit-log',
+    standalone: true,
+  imports: [
+    FlexLayoutModule,
+    NgForOf,
+    MatButtonModule,
+    TranslateModule,
+    NgIf,
+    MatIconModule,
+    MatButton
+  ],
+  providers: [DatePipe],
+    templateUrl: './audit-log.component.html',
+    styleUrl: './audit-log.component.scss'
+})
+export class AuditLogComponent implements OnInit {
+  auditLogEntries: AuditLogEntry[] = [];
+
+  @Input()
+  pageInfo!: PageInfo;
+
+  @Input()
+  fields: FieldInfo[];
+
+  @Input()
+  showHiddenFields : string[];
+
+
+  itemId: number;
+
+  item : any = {};
+  isLoaded : boolean = false;
+  columnsDefinition: TableColumn<any>[];
+
+  currentDirection: 'ltr' | 'rtl';
+
+
+  constructor(public dialog: MatDialog,
+                private activatedRoute: ActivatedRoute,
+                private datePipe: DatePipe,
+                private translateService:TranslateService,
+                private router:Router,
+                private directionality: Directionality,
+                @Inject('securityManager') private securityManager: any,
+                public backendService: BackendService) {
+    }
+
+    ngOnInit(): void {
+      this.currentDirection = this.directionality.value;
+      this.directionality.change.subscribe((value) => {
+        this.currentDirection = value;
+      })
+
+      this.loadItem();
+    }
+
+
+  private loadItem() {
+    if (this.activatedRoute.snapshot.queryParams['token']) {
+      this.itemId = this.backendService.decrypt(this.activatedRoute.snapshot.queryParams['token']);
+    }
+    const filterRequest = new FilterRequest;
+    if (this.itemId > 0) {
+      filterRequest.filters = [];
+      filterRequest.sortDirection = "DESC";
+      // TODO
+      // add pagination support here.
+      filterRequest.pageSize = 1000;
+      filterRequest.filters.push(new Filter({
+        key: 0,
+        fieldType: 'Long',
+        fieldName: 'id',
+        valueObject: this.itemId,
+        filterType: 'FILED_FILTER',
+        operator: 'EQUALS'
+      }));
+    }
+      this.backendService.getItemAuditLog(filterRequest, this.pageInfo!.apiUri).subscribe(resp => {
+        this.auditLogEntries = resp.body;
+      });
+  }
+
+
+  viewObject(auditLog: AuditLogEntry) {
+    const dialogRef = this.dialog.open(AuditLogDetailsDialogComponent, {
+      data: {pageInfo: this.pageInfo, fields: this.fields, item:auditLog.subject, comment: auditLog.comment, showHiddenFields:this.showHiddenFields},
+      width: '800px',
+      height: 'auto',
+      direction: this.currentDirection
+    });
+
+  }
+
+  getDescription(auditLog: AuditLogEntry) {
+    return `
+       ${auditLog.createdBy || this.translateService.instant('system')}
+       ${this.translateService.instant('on')}
+       ${this.datePipe.transform(auditLog.createdOn, 'medium')}
+       ${this.translateService.instant('audit-log.executed')} ${this.translateService.instant(auditLog.action.toString())}`
+  }
+}

package/src/lib/components/auto-complete/auto-complete.component.css

@@ -0,0 +1,14 @@
+::ng-deep .main-auto-complete {
+
+  .matField {
+    margin-bottom: 24px !important;
+    .mat-form-field-wrapper {
+      padding: 0  !important;
+      margin-bottom: 0 !important;
+    }
+  }
+
+
+}
+
+

package/src/lib/components/auto-complete/auto-complete.component.html

@@ -0,0 +1,29 @@
+<ng-container *ngIf="this.field" class="main-auto-complete">
+  <div class="matField" [formGroup]="form">
+    <mat-form-field fxFlex="100" appearance="outline" (click)="this.filterLookupItems('', autocompleteTrigger)">
+      <mat-label>{{ field.label! | translate}}</mat-label>
+      <input class="flex-auto" type="text"
+             [placeholder]="'search_placeholder' | translate"
+             [id]="getId()"
+             [formControl]="myControl"
+             (keydown)="onKeydown($event, autocompleteTrigger)"
+             [matAutocomplete]="auto" matInput
+             [required]="isRequired"
+             #autocompleteTrigger="matAutocompleteTrigger"
+             [readonly]="readonly"
+      >
+      <mat-icon class="arrow_drop_down_autocomplete">arrow_drop_down</mat-icon>
+
+      <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption="" [displayWith]="displayFn.bind(this)"
+                        (optionSelected)="itemSelected($event.option.value)"
+                        (closed)="closed()">
+        <ng-container *ngIf="!field.readonly">
+          <mat-option *ngIf="items.length > 1  && lookupItems$" [value]="null">{{ "none" | translate}}</mat-option>
+          <mat-option *ngFor="let item of  lookupItems$ | async" [value]="item"
+                      [ngClass]="_allowSelection(item)">
+            {{itemNameByLag(item)}}</mat-option>
+        </ng-container>
+      </mat-autocomplete>
+    </mat-form-field>
+  </div>
+</ng-container>

package/src/lib/components/auto-complete/auto-complete.component.spec.ts

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

package/src/lib/components/auto-complete/auto-complete.component.ts

@@ -0,0 +1,330 @@
+import {
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
+import {FieldInfo, Filter, LookupItem} from "../../base-model";
+import {MatAutocomplete, MatAutocompleteTrigger, MatOption} from "@angular/material/autocomplete";
+import {Observable, of} from "rxjs";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {BackendService} from "../../services";
+import {GetItemsList} from "../../base-model/get-items-list";
+import {TranslateModule, TranslateService} from "@ngx-translate/core";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatInputModule} from "@angular/material/input";
+import {AsyncPipe, NgClass, NgForOf, NgIf} from "@angular/common";
+import {MatIcon} from "@angular/material/icon";
+import {FlexLayoutModule} from "@angular/flex-layout";
+import {buildItemsList} from "../../utils/base-utils";
+import {RequireMatch} from "../../validators";
+
+@Component({
+  selector: 'app-auto-complete',
+  standalone: true,
+  imports: [
+    TranslateModule,
+    MatFormFieldModule,
+    MatAutocompleteTrigger,
+    MatInputModule,
+    ReactiveFormsModule,
+    NgIf,
+    MatAutocomplete,
+    AsyncPipe,
+    MatOption,
+    NgClass,
+    MatIcon,
+    NgForOf,
+    FlexLayoutModule,
+
+  ],
+  templateUrl: './auto-complete.component.html',
+  styleUrl: './auto-complete.component.css'
+})
+export class AutoCompleteComponent implements OnInit, OnChanges {
+  @ViewChild('autocompleteTrigger') matACTrigger: MatAutocompleteTrigger;
+
+  lookupItems$: Observable<LookupItem[]> | undefined;
+  lookupItems: LookupItem[] = [];
+  items: LookupItem[] = [];
+
+  // @ts-ignore
+  // form: FormGroup;
+
+  @Input()// @ts-ignore
+  field: FieldInfo;
+
+  @Input()// @ts-ignore
+  form: FormGroup;
+  @Input()// @ts-ignore
+  defaultValue: any;
+
+  @Input()
+  readonly:boolean = false;
+
+  @Input()
+  supportingAttributes: any;
+
+  @Output()
+  selectedValue: EventEmitter<LookupItem> = new EventEmitter();
+
+  @ViewChild(MatAutocompleteTrigger) autocompleteTrigger!: MatAutocompleteTrigger;
+
+  question = 'Would you like to add ?"';
+  cascadedId: number = 0;
+  isRequired:boolean = false;
+
+  private timer: any;
+  myControl = new FormControl();
+
+  constructor(private backendService: BackendService,
+              protected translateService: TranslateService,
+              @Inject('secretsManager') private secretsManager: any) {
+  }
+
+  ngOnInit(): void {
+    this.buildControl();
+    this.extractWorkflowGuidedCascading();
+    this.getLookupData();
+    // this.myControl.valueChanges.subscribe(v => {
+    //     if (typeof v === 'string') this.filterLookupItems(v, null);
+    // });
+
+    this.form.get(this.field.property).valueChanges.subscribe(x => {
+      if (x?.id === -100) {
+        this.myControl.reset()
+      }
+    })
+    if (this.field.cascadedBy) {
+      this.form.get(this.field.cascadedByProperty)?.valueChanges.subscribe(v => {
+        this.cascadedId = this.form.get(this.field.cascadedByProperty).value?.id;
+        this.lookupItems = [];
+        this.myControl.setValue(undefined);
+        this.myControl.patchValue(undefined, {emitEvent: true});
+        this.form.get(this.field.property)?.setValue(undefined);
+        this.form.get(this.field.property)?.patchValue(undefined, {emitEvent: true});
+        this.getLookupData();
+      });
+    }
+
+  }
+
+  private extractWorkflowGuidedCascading() {
+    if (this.supportingAttributes && this.field.workflowCascadingField && this.supportingAttributes[this.field.workflowCascadingField]) {
+      this.cascadedId = this.supportingAttributes[this.field.workflowCascadingField];
+    }
+  }
+
+  private buildControl() {
+    this.myControl = new FormControl(this.form?.controls[this.field?.property]);
+    this.backendService.fieldAction$.subscribe( e => {
+      if (e.property === this.field?.property) {
+        this.field.readonly = e.fieldInfo.readonly;
+        this.updateAttributes();
+      }
+    });
+    this.updateAttributes();
+
+    this.myControl.valueChanges.subscribe( v => {
+        if (typeof v === 'string') {
+          clearTimeout(this.timer);
+          this.timer = setTimeout(() => {
+            this.filterLookupItems(v, null); }, 700);
+        }
+      }
+    );
+  }
+
+  private updateAttributes() {
+    this.myControl.enable();
+    if (this.field.readonly) {
+      this.myControl.disable();
+      this.isRequired = false;
+    } else if (this.field.required) {
+      this.form?.controls[this.field?.property].setValidators([Validators.required]);
+      this.myControl.setValidators([Validators.required]);
+      this.isRequired = true;
+    }
+
+    if (!this.field.acceptNewItem) {
+      // @ts-ignore
+      this.myControl.setValidators(RequireMatch);
+    }
+
+    this.myControl.setValue(this.form?.get(this.field?.property)?.value);
+  }
+
+  ngOnChanges({defaultValue}: SimpleChanges): void {
+    this.patchLookupValue(defaultValue?.currentValue);
+  }
+
+  private getLookupData() {
+    if (this.field.cascadedBy && !this.cascadedId) {
+    } else {
+      const listItems = buildItemsList('', this.field.lookupApiPath, this.field.cascadedBy);
+      listItems.columns = ['id','code','englishName','arabicName'];
+
+      this.backendService.getLookupItemsByFilter(listItems, this.cascadedId).subscribe((resp => {
+        if (resp.valid) {
+          this.lookupItems = resp.body;
+          this.lookupItems = [];
+          resp.body.forEach((r: LookupItem) => this.lookupItems.push(r));
+          if (!this.form?.get('id')?.value) {
+            this.patchLookupValue(this.lookupItems?.find(l => l.defaultValue));
+          }
+          this.patchLookupValue(this.myControl.value);
+        }
+
+      }));
+    }
+  }
+
+  itemSelected(value: any) {
+    if (value && value.id !== -1) {
+      if (value.englishName.indexOf(this.question) === 0) {
+        value.englishName = value.englishName.substring(this.question.length).split('"?')[0];
+      }
+      if (value.arabicName && value.arabicName.indexOf(this.question) === 0) {
+        value.arabicName = value.arabicName.substring(this.question.length).split('"?')[0];
+      }
+      this.form.get(this.field.property)?.setValue(value);
+      // @ts-ignore
+      this.selectedValue.emit(this.myControl.value);
+    }
+    setTimeout(() => {
+      this.autocompleteTrigger.closePanel();
+    });
+
+  }
+
+  displayFn(selected: any): string | undefined {
+    if (selected?.id < 0) {
+      return null;
+    }
+
+    if (Array.isArray(selected))
+      selected = this.defaultValue
+    return this.translateService.getDefaultLang() === 'en'
+      ? selected?.englishName
+      : selected?.arabicName;
+  }
+
+
+  _allowSelection(option: LookupItem): { [className: string]: boolean } {
+    return {
+      'prevent-selection': option.id === -1,
+    };
+  }
+
+  itemNameByLag(item: any): string {
+    return this.translateService.getDefaultLang() === 'en' ? item.englishName : item.arabicName
+
+  }
+
+  filterLookupItems(name: any, trigger: MatAutocompleteTrigger) {
+    if (this.myControl.enabled) {
+      if (trigger) {
+        trigger.openPanel();
+      }
+      if (name === undefined) {
+        name = '';
+      }
+
+      if (name === '' && !this.myControl.value) {
+        this.myControl.setValue(undefined);
+        this.myControl.updateValueAndValidity();
+      }
+
+      const listItems: GetItemsList = buildItemsList(name, this.field.lookupApiPath, this.field.cascadedBy);
+      listItems.filters = this.field.lookupFilterList;
+      this.addLookupFilterByAnotherProperties(listItems);
+      listItems.columns = ['id','code','englishName','arabicName'];
+      this.backendService.getLookupItemsByFilter(listItems);
+      if (this.field.cascadedBy) {
+        this.cascadedId = this.form.get(this.field.cascadedByProperty).value?.id;
+      } else {
+        this.extractWorkflowGuidedCascading();
+      }
+      listItems.columns = ['id','code','englishName','arabicName'];
+      this.backendService.getLookupItemsByFilter(listItems, this.cascadedId).subscribe(resp => {
+        if (resp.valid) {
+          this.items = resp.body.filter((item: { id: any; }) => this.myControl.value?.id !== item.id);
+          if (!this.items?.length) {
+            this.field.acceptNewItem ?
+              this.items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})) :
+              this.items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '}));
+          }
+        } else {
+          if (this.items?.length == 0)
+          this.field.acceptNewItem && this.backendService.parentForm.get(this.field.cascadedBy).value != null ?
+            this.items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})) :
+            this.items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '}));
+        }
+        this.lookupItems$ = of(this.items);
+      });
+      return;
+    }
+  }
+
+  addLookupFilterByAnotherProperties(listItems: GetItemsList) {
+    const properties = this.field.lookupFilterList;
+    if (!Array.isArray(properties)) return;
+
+    const newFilters: Filter[] = [];
+
+    for (const prop of properties) {
+      const fieldValue = this.form?.value?.[prop.fieldName];
+      const finalValue = typeof fieldValue === 'object' && fieldValue !== null ? fieldValue.code : fieldValue;
+      if (!finalValue) continue;
+
+      const fieldName =typeof fieldValue === 'object' && fieldValue !== null ? prop.fieldName + "." + this.field.flattenBySubAttribute : prop.fieldName;
+      const filter = new Filter({
+        fieldType: 'FILED_FILTER',
+        filterType: undefined,
+        operator: prop.operator,
+        valueObject: finalValue,
+        fieldName: fieldName
+      });
+
+      newFilters.push(filter);
+    }
+
+    if (newFilters.length) {
+      listItems.filters = [...(listItems.filters || []), ...newFilters];
+    }
+    listItems.filters = listItems.filters.filter(f => f.valueObject);
+  }
+
+  private patchLookupValue(defaultValue: any) {
+    if (defaultValue) {
+
+      // this.form?.get(this.field.property)?.patchValue(defaultValue);
+      this.myControl.setValue(defaultValue);
+      this.myControl.patchValue(defaultValue, {emitEvent: true});
+    }
+  }
+  getId() {
+    return this.field.property;
+  }
+  onKeydown(event: KeyboardEvent, autocompleteTrigger: MatAutocompleteTrigger) {
+    if (event.key === 'Enter') {
+      this.filterLookupItems('', autocompleteTrigger);
+      autocompleteTrigger.openPanel();
+      event.preventDefault();
+    }
+  }
+
+  closed() {
+    if (!this.myControl.value){
+      this.form.get(this.field.property)?.setValue(this.myControl.value);
+      this.selectedValue.emit(this.myControl.value);
+    } else if (typeof this.myControl.value === 'string') {
+      this.myControl.setValue(null);
+    }
+  }
+}