@unifylib/ui-lib 1.0.3 → 1.1.4

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

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

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

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

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

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

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

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

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