@unifylib/ui-lib 1.1.3 → 1.1.5

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,114 +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 {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: [
-    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,55 +0,0 @@
-
-.main-auto-complete {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.mat-field-wrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.label-and-asterisk-container {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-bottom: 4px;
-}
-
-.custom-label {
-  font-weight: 500;
-}
-
-.required-asterisk {
-  color: red;
-}
-
-
-.autocomplete-field {
-  width: 100%;
-  display: flex;
-  /*flex-direction: row;*/
-  align-items: center;
-}
-
-
-.autocomplete-button {
-  margin-left: 4px;
-}
-
-
-@media (max-width: 600px) {
-  .main-auto-complete,
-  .mat-field-wrapper,
-  .autocomplete-field {
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .autocomplete-button {
-    margin-left: 0;
-    margin-top: 4px;
-  }
-}

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

@@ -1,45 +0,0 @@
-<ng-container *ngIf="field" class="main-auto-complete">
-  <div class="mat-field-wrapper" [formGroup]="form">
-
-    <div class="label-and-asterisk-container">
-      <span class="custom-label" id="label-{{field.property}}">
-        {{ field.label! | translate }}
-      </span>
-      <span *ngIf="field.required" class="required-asterisk"> * </span>
-    </div>
-
-    <mat-form-field class="autocomplete-field" appearance="outline">
-      <input type="text"
-             [placeholder]="'search_placeholder' | translate"
-             [id]="getId()"
-             [formControl]="myControl"
-             (keydown)="onKeydown($event, autocompleteTrigger)"
-             [matAutocomplete]="auto"
-             matInput
-             [required]="isRequired"
-             #autocompleteTrigger="matAutocompleteTrigger"
-             [readonly]="readonly"
-      >
-
-      <button mat-button matSuffix
-              color="primary"
-              class="autocomplete-button"
-              (click)="autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()"
-              [attr.id]="'autocomplete-trigger-' + field.property">
-        <mat-icon>arrow_drop_down</mat-icon>
-      </button>
-
-      <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,331 +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 {buildItemsList} from "../../utils/base-utils";
-import {RequireMatch} from "../../validators";
-import {MatButton, MatIconButton} from "@angular/material/button";
-
-@Component({
-  selector: 'app-auto-complete',
-  standalone: true,
-  imports: [
-    TranslateModule,
-    MatFormFieldModule,
-    MatAutocompleteTrigger,
-    MatInputModule,
-    ReactiveFormsModule,
-    NgIf,
-    MatAutocomplete,
-    AsyncPipe,
-    MatOption,
-    NgClass,
-    MatIcon,
-    NgForOf,
-    MatIconButton,
-    MatButton,
-
-  ],
-  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);
-    }
-  }
-}

package/src/lib/components/base-form/base-form.component.html

@@ -1,59 +0,0 @@
-<div class="page-container">
-
-  <div class="row full-width mt-2vh">
-    <div class="column full-width">
-      <app-title-bar
-        [pageTitle]="getTitle()"
-        [newAction]="false"
-        [hideBackButton]="hideBackButton">
-      </app-title-bar>
-    </div>
-  </div>
-
-  <app-base-form-canvas
-    [pageInfo]="pageInfo"
-    [fields]="fields"
-    [editable]="editable"
-    [errors]="errors"
-    [item]="item"
-    (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="hasWfPositivePermission()" color="primary" mat-flat-button
-                (click)="doSaveApproveAction()"
-                [disabled]="disabledSaveButton(item)"
-                class="action-button"
-                id="base-form-positive-btn">
-          {{ getPositiveWfActionKey(item?.stateType) | translate }}
-        </button>
-        <button *ngIf="hasWfNegativePermission()" color="second" mat-raised-button
-                (click)="doCancelRejectAction()"
-                [disabled]="disabledSaveButton(item)"
-                class="action-button"
-                id="base-form-negative-btn">
-          {{ getNegativeWfActionKey(item?.stateType) | translate }}
-        </button>
-        <button *ngIf="pageInfo.hideExtractButton === false && itemId > 0 && editable" color="primary" mat-raised-button
-                (click)="doExtraAction()"
-                class="action-button"
-                id="base-form-extra-btn">
-          {{ pageInfo.labelsSection + "." + "EXTRA_BUTTON_NAME" | translate }}
-        </button>
-      </div>
-    </div>
-    <div class="column flex-49"></div>
-  </div>
-
-
-  <ng-container *ngIf="!pageInfo.hideAuditLog">
-    <div class="row main-form-canvas mt-4vh pb-5vh">
-      <div class="column flex-95">
-        <app-audit-log [pageInfo]="pageInfo" [fields]="fields"></app-audit-log>
-      </div>
-    </div>
-  </ng-container>
-
-</div>