@unifylib/ui-lib 1.0.3 → 1.1.4

package/src/lib/components/equation-builder/equation-builder.component.ts

@@ -1,121 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import { FormGroup } from "@angular/forms";
-import { AutoCompleteComponent } from "../auto-complete/auto-complete.component";
-import { MatFormField, MatOption, MatSelect } from "@angular/material/select";
-import {NgForOf, NgIf, NgSwitch, NgSwitchCase} from "@angular/common";
-import { FlexLayoutModule } from "@angular/flex-layout";
-import {MatIcon} from "@angular/material/icon";
-import {MatIconButton} from "@angular/material/button";
-
-@Component({
-  selector: 'lib-equation-builder',
-  standalone: true,
-  imports: [
-    AutoCompleteComponent,
-    MatSelect,
-    MatOption,
-    MatFormField,
-    NgSwitch,
-    NgForOf,
-    NgSwitchCase,
-    FlexLayoutModule,
-    MatIcon,
-    MatIconButton,
-    NgIf
-  ],
-  templateUrl: './equation-builder.component.html',
-  styleUrl: './equation-builder.component.css'
-})
-export class EquationBuilderComponent implements OnInit {
-  @Input() form!: FormGroup;
-  @Input() field!: any;
-  @Input() isPending!: boolean;
-  @Output() valueChanged = new EventEmitter<any>();
-
-  operators = [
-    { label: '+', value: '+' },
-    { label: '-', value: '-' },
-    { label: '=', value: '=' }
-  ];
-
-  items: any[] = [];
-  @Input() readOnly!: boolean;
-
-  ngOnInit() {
-    const fieldValues: any[] = this.form.get('fieldValue')?.value;
-
-    if (Array.isArray(fieldValues) && fieldValues.length > 0) {
-      this.items = fieldValues.map(val => {
-        if (this.operators.some(op => op.value === val)) {
-          return { type: 'dropdown', value: val };
-        } else {
-          return {
-            type: 'lookup',
-            value: this.getLookupByCode(val)
-          };
-        }
-      });
-    } else {
-      this.items = [{ type: 'lookup', value: null }];
-    }
-
-  }
-
-  getLookupByCode(code: string): any {
-    return  { code: code, id: 1, englishName: code, arabicName: code }
-  }
-
-  onLookupChange(index: number, value: any) {
-    this.items[index].value = value;
-
-    if (index === this.items.length - 1) {
-      this.items.push({ type: 'dropdown', value: null});
-    }
-
-    this.emitChange();
-  }
-
-  onDropdownChange(index: number, value: any) {
-    this.items[index].value = value;
-
-    if (index !== this.items.length - 1) {
-      this.emitChange();
-      return;
-    }
-
-    if (value === '=') {
-      this.items = this.items.slice(0, index + 1);
-    } else if (value != null && value !== '') {
-      const lastItem = this.items[this.items.length - 1];
-      if (lastItem.type !== 'lookup') {
-        this.items.push({ type: 'lookup', value: null });
-      }
-    }
-
-    this.emitChange();
-  }
-
-  emitChange() {
-    const simplifiedItems = this.items.map(item => {
-      if (item?.type === 'lookup') {
-        return item.value?.code ?? null;
-      } else if (item?.type === 'dropdown') {
-        return item.value ?? null;
-      }
-      return null;
-    });
-    const isValid = simplifiedItems[simplifiedItems.length - 1] === '=';
-
-    this.valueChanged.emit({
-      value: simplifiedItems.filter(val => val !== '='),
-      valid: isValid
-    });
-  }
-
-  onClearAll(): void {
-    this.items = [{ type: 'lookup', value: null }];
-    this.emitChange();
-  }
-
-
-}

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

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

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

@@ -1,38 +0,0 @@
-<ng-container *ngIf="this.field" class="main-multi-auto">
-  <div class="matField" (click)="this.filterLookupItems('', autocompleteTrigger)">
-    <mat-form-field fxFlex="100" appearance="outline" floatLabel="always">
-      <mat-label>{{ getLabel() }}</mat-label>
-      <mat-chip-listbox #chipList [selectable]="true">
-        <mat-chip
-          *ngFor="let item of selectedItems"
-          [removable]="true"
-          (removed)="remove(item)">
-          {{ itemNameByLag(item) }}
-          <mat-icon matChipRemove>cancel</mat-icon>
-        </mat-chip>
-        <input class="flex-auto" type="text"
-               [id]="getId()" #itemInput
-               [formControl]="multiControl"
-               [matAutocomplete]="auto" matInput
-               [readonly]="readonly"
-               [required]="isRequired"
-               (keydown)="onKeydown($event, autocompleteTrigger)"
-               [disabled]="field.readonly"
-               #autocompleteTrigger="matAutocompleteTrigger"
-        >
-      </mat-chip-listbox>
-
-      <mat-icon class="arrow_drop_down_autocomplete">arrow_drop_down</mat-icon>
-      <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn"
-                        (optionSelected)="selected($event.option.value)">
-        <ng-container *ngIf="!field.readonly">
-          <mat-option *ngFor="let item of  lookupItems$ | async" [value]="item"
-                      [disabled]="field.readonly || isSelected(item)"
-                      (click)="$event.stopPropagation(); autocompleteTrigger.openPanel()">
-            {{ itemNameByLag(item) }}
-          </mat-option>
-        </ng-container>
-      </mat-autocomplete>
-    </mat-form-field>
-  </div>
-</ng-container>

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

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

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

@@ -1,317 +0,0 @@
-import {Component, ElementRef, EventEmitter, Input, Output, SimpleChanges, ViewChild} from '@angular/core';
-import {ALL_ITEM, LookupItem} from "../../base-model";
-import {MatAutocomplete, MatAutocompleteTrigger, MatOption} from "@angular/material/autocomplete";
-import {Observable, of} from "rxjs";
-import {FieldInfo} from "../../base-model";
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {BackendService} from "../../services";
-import {TranslateService} from "@ngx-translate/core";
-import {GetItemsList} from "../../base-model/get-items-list";
-import {MatFormField} from "@angular/material/form-field";
-import {FlexLayoutModule} from "@angular/flex-layout";
-import {MatChip, MatChipGrid, MatChipInput, MatChipListbox} from "@angular/material/chips";
-import {AsyncPipe, NgForOf, NgIf} from "@angular/common";
-import {MatIcon} from "@angular/material/icon";
-import {MatInput} from "@angular/material/input";
-import { MatLabel } from '@angular/material/form-field';
-import {buildItemsList} from "../../utils/base-utils";
-import {FilterRequest} from "../../base-model";
-import {Filter} from "../../base-model";
-import {RequireMatch} from "../../validators";
-import { MatChipsModule } from '@angular/material/chips';
-import { MatIconModule } from '@angular/material/icon';
-
-
-@Component({
-  selector: 'app-multi-auto-complete',
-  standalone: true,
-  imports: [
-    MatFormField,
-    FlexLayoutModule,
-    MatChip,
-    MatIconModule,
-    MatChipsModule,
-    NgForOf,
-    MatIcon,
-    ReactiveFormsModule,
-    MatAutocompleteTrigger,
-    MatChipInput,
-    MatInput,
-    MatAutocomplete,
-    MatOption,
-    AsyncPipe,
-    NgIf,
-    MatChipGrid,
-    MatChipListbox,
-    MatLabel
-  ],
-  templateUrl: './multi-auto-complete.component.html',
-  styleUrl: './multi-auto-complete.component.css'
-})
-export class MultiAutoCompleteComponent {
-// @ts-ignore
-  @ViewChild('itemInput') itemInput: ElementRef<HTMLInputElement>;
-  @ViewChild('autocompleteTrigger') matACTrigger: MatAutocompleteTrigger;
-
-  lookupItems$: Observable<LookupItem[]> | undefined;
-  private lookupItems: LookupItem[] = [];
-
-  selectedItems: LookupItem[] = [];
-  cascadedIdz: number[] = [];
-  isRequired: boolean= false;
-  private timer: any;
-
-  @Input()// @ts-ignore
-  field: FieldInfo;
-  //
-  @Input()// @ts-ignore
-  form: FormGroup;
-
-  @Input()// @ts-ignore
-  defaultValue: any;
-
-  @Input()
-  pathParam: any;
-
-  @Input()
-  readonly : boolean=false;
-
-  @Output()
-  selectedValue: EventEmitter<LookupItem[]> = new EventEmitter();
-
-  question = 'Would you like to add ?"';
-
-  multiControl = new FormControl();
-
-  constructor(private backendService: BackendService, private  translateService: TranslateService) {
-  }
-
-  ngOnInit(): void {
-    // this.form = this.rootFormGroup.control;
-    this.selectedItems = [];
-    this.multiControl = new FormControl(this.form?.controls[this.field?.property]);
-
-    this.multiControl.enable();
-    this.updateFieldAttributes();
-
-    if (!this.field.acceptNewItem){
-      // @ts-ignore
-      this.multiControl.setValidators([RequireMatch]);
-    }
-
-    this.multiControl.setValue(this.form?.controls[this.field?.property]?.value);
-
-    this.multiControl.valueChanges.subscribe( v => {
-        if (typeof v === 'string') {
-          clearTimeout(this.timer);
-          this.timer = setTimeout(() => {
-            this.filterLookupItems(v, null);}, 700);
-        }
-      }
-    );
-
-    // this.multiControl.valueChanges.subscribe(v => {
-    //     if (typeof v === 'string') this.filterLookupItems(v, null);
-    // })
-    // this.filterAutoCompleteData(this.field.property);
-
-    this.getLookupData();
-    if (this.field.cascadedBy) {
-      this.form?.get(this.field.cascadedBy)?.valueChanges.subscribe(v => {
-        this.removeChildItemsIfCascadedByRemoved(v);
-      });
-    }
-
-  }
-
-  private updateFieldAttributes() {
-    if (this.field.readonly) {
-      this.multiControl.disable();
-      this.isRequired = false;
-    } else if (this.field.required) {
-      this.form?.controls[this.field?.property].setValidators([Validators.required]);
-      this.form?.controls[this.field?.property].updateValueAndValidity();
-      this.multiControl.setValidators([Validators.required]);
-      this.isRequired = true;
-    }
-    this.multiControl.updateValueAndValidity();
-  }
-
-  private removeChildItemsIfCascadedByRemoved(v) {
-    this.cascadedIdz = [];
-    v.forEach(a => {
-      this.cascadedIdz.push(a.id);
-    });
-    let toDeleteIdz = [];
-    this.selectedItems?.forEach(x => {
-      const del = this.cascadedIdz.findIndex(y => y === x[this.field.cascadedBy]?.id);
-      if (del < 0) {
-        toDeleteIdz.push(x['id']);
-      }
-    });
-
-    if (toDeleteIdz) {
-      this.selectedItems = this.selectedItems.filter(s => !toDeleteIdz.includes(s.id));
-      this.form.get(this.field.property).patchValue(this.selectedItems, {emitEvent: true});
-    }
-  }
-
-  ngOnChanges({defaultValue, field}: SimpleChanges): void {
-    this.patchLookupValue(defaultValue?.currentValue);
-    if (field?.currentValue) {
-      this.field = field.currentValue;
-      this.updateFieldAttributes();
-    }
-  }
-
-  private getLookupData() {
-    const listItems: GetItemsList = buildItemsList('', this.field.lookupApiPath);
-
-    const filterRequest: FilterRequest = new FilterRequest();
-    filterRequest.filters = [];
-    this.cascadedIdz = [];
-    if (this.field.cascadedBy) {
-      this.form.get(this.field.cascadedBy)?.value?.forEach(a => {
-        this.cascadedIdz.push(a.id);
-      })
-    }
-    if (this.field.cascadedBy && this.cascadedIdz?.length > 0) {
-      filterRequest.filters.push(new Filter({
-        key: 'id', fieldName: this.field.cascadedBy, label: '',
-        filterType: 'FILED_FILTER', operator: 'IN',
-        valueObject: this.cascadedIdz
-      }));
-    }
-
-    filterRequest.columns = ['id','code','englishName','arabicName'];
-    this.backendService.getLookupItemsByMultiFilter(listItems, filterRequest).subscribe((resp => {
-      if (resp.valid) {
-        this.lookupItems = this.field.includeAllOption ? [ALL_ITEM].concat(resp.body) : resp.body;
-        if (!this.form.get('id')?.value) {
-          this.patchLookupValue(this.lookupItems?.find(l => l.defaultValue));
-        }
-        this.patchLookupValue(this.multiControl.value);
-
-      }
-
-    }));
-  }
-
-
-  selected(value: any): void {
-    if (value.id !== -1 && this.selectedItems.findIndex(i => i.id === value.id) === -1) {
-      this.selectedItems?.push(value);
-      this.itemInput.nativeElement.value = '';
-      this.form.get(this.field.property)?.setValue(this.selectedItems);
-      // @ts-ignore
-      this.selectedValue.emit(this.selectedItems);
-      this.multiControl.setValue(null);
-    }
-  }
-
-  displayFn(selected: any): string {
-    return selected ? selected.englishName : undefined;
-
-  }
-  isSelected(item: any): boolean {
-    return this.selectedItems?.some(selected => selected.id === item.id); // Use your unique identifier
-  }
-
-  _allowSelection(option: LookupItem): { [className: string]: boolean } {
-    return {
-      'prevent-selection': option.id === -1,
-    }
-  }
-
-  itemNameByLag(item: any): string {
-    // return item.arabicName;
-    return this.translateService.getDefaultLang() === 'en' ? item.englishName : item.arabicName
-  }
-
-  private readonly _columns = ['id','code','englishName','arabicName'];
-
-  filterLookupItems(name: any, trigger: MatAutocompleteTrigger) {
-    if (trigger) {
-      trigger.openPanel();
-    }
-    if (name === undefined) {
-      name = '';
-    }
-
-    const listItems: GetItemsList = buildItemsList(name, this.field.lookupApiPath);
-
-    const filterRequest: FilterRequest = new FilterRequest();
-    filterRequest.filters = this.field.lookupFilterList || [];
-    filterRequest.searchStr = name;
-    this.cascadedIdz = [];
-    if (this.field.cascadedBy) {
-      this.form.get(this.field.cascadedBy)?.value?.forEach(a => {
-        this.cascadedIdz.push(a.id);
-      })
-    }
-    if (this.field.cascadedBy && this.cascadedIdz?.length > 0) {
-      filterRequest.filters.push(new Filter({
-        key: 'id',joinObjectName: this.field.cascadedBy, fieldName: this.field.cascadedBy, label: '',
-        filterType: 'FILED_FILTER', operator: 'IN',
-        valueObject: this.cascadedIdz
-      }));
-    }
-
-    filterRequest.columns = [...this._columns, ...(this.field.extraLookupsColumns ?? [])];
-
-    this.backendService.getLookupItemsByMultiFilter(listItems, filterRequest).subscribe(resp => {
-      // console.log('result -->', resp);
-      let items: LookupItem[] = [];
-      if (resp.valid) {
-        // resp.body.forEach(r => items.push(r));
-        items = resp.body.filter(item =>
-          // (item.englishName.toLowerCase().includes(name.toLowerCase()) ||
-          // item.arabicName.toLowerCase().includes(name.toLowerCase())) &&
-          this.selectedItems?.findIndex( i=> i.id ===item.id ) ===-1 );
-        if (!items?.length) {
-          this.field.acceptNewItem ?
-            items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})):
-            items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '})) ;
-
-        }
-      } else {
-        this.field.acceptNewItem ?
-          items?.push(new LookupItem({id: -2, englishName: this.question + name, arabicName: this.question + name})):
-          items?.push(new LookupItem({id: -1, englishName: 'No match ...', arabicName: 'غير موجود  ... '})) ;
-      }
-      this.lookupItems$ = of(items);
-    });
-    return;
-  }
-
-  private patchLookupValue(defaultValue: any) {
-    if (defaultValue) {
-      // this.form?.get(this.field.property)?.patchValue(defaultValue);
-      this.selectedItems = defaultValue;
-      this.multiControl.setValue(defaultValue);
-      this.multiControl.patchValue(defaultValue, {emitEvent: true});
-    }
-  }
-
-  remove(item: LookupItem) {
-    const index = this.selectedItems.indexOf(item);
-    if (index >= 0) {
-      this.selectedItems.splice(index, 1);
-      this.form.get(this.field.property).patchValue(this.selectedItems, {emitEvent: true});
-    }
-  }
-
-  getLabel() {
-    return this.translateService.instant(this.field.label);
-  }
-  onKeydown(event: KeyboardEvent, autocompleteTrigger: MatAutocompleteTrigger) {
-    if (event.key === 'Enter') {
-      this.filterLookupItems('', autocompleteTrigger);
-      autocompleteTrigger.openPanel();
-      event.preventDefault();
-    }
-  }
-  getId() {
-    return this.field.property;
-  }
-}

package/src/lib/components/paginator/paginator.component.css

@@ -1,25 +0,0 @@
-.custom-paginator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-button {
-  min-width: 32px;
-}
-
-.current-page {
-  font-weight: bold;
-  background-color: #2196f3;
-  color: white;
-  border-radius: 4px;
-}
-
-.ellipsis {
-  padding: 0 8px;
-  font-size: 14px;
-  color: gray;
-  background: none;
-  border: none;
-  cursor: pointer;
-}

package/src/lib/components/paginator/paginator.component.html

@@ -1,34 +0,0 @@
-<div class="custom-paginator" [dir]="currentDirection">
-  <!-- Previous Button -->
-  <button mat-icon-button (click)="previousPage()" [disabled]="currentPage === 1" *ngIf="currentDirection == 'ltr'">
-    <mat-icon>chevron_left</mat-icon>
-  </button>
-  <button mat-icon-button (click)="previousPage()" [disabled]="currentPage === 1" *ngIf="currentDirection == 'rtl'">
-    <mat-icon>chevron_right</mat-icon>
-  </button>
-
-  <!-- Page Numbers and Ellipses -->
-  <ng-container *ngFor="let page of viewablePages">
-    <ng-container *ngIf="page === '...'">
-      <span class="ellipsis" (click)="goToPage(page)">{{ page }}</span>
-    </ng-container>
-    <ng-container *ngIf="page !== '...'">
-      <button
-        mat-button
-        [disabled]="page === currentPage"
-        (click)="goToPage(page)"
-        [class.current-page]="page === currentPage"
-      >
-        {{ page }}
-      </button>
-    </ng-container>
-  </ng-container>
-
-  <!-- Next Button -->
-  <button mat-icon-button (click)="nextPage()" [disabled]="currentPage === totalPages" *ngIf="currentDirection == 'ltr'">
-    <mat-icon>chevron_right</mat-icon>
-  </button>
-  <button mat-icon-button (click)="nextPage()" [disabled]="currentPage === totalPages" *ngIf="currentDirection == 'rtl'">
-    <mat-icon>chevron_left</mat-icon>
-  </button>
-</div>

package/src/lib/components/paginator/paginator.component.ts

@@ -1,94 +0,0 @@
-import {Component, Input, Output, EventEmitter, OnChanges, OnInit} from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { NgIf, NgForOf } from '@angular/common';
-import {Directionality} from "@angular/cdk/bidi";
-
-@Component({
-  selector: 'app-paginator',
-  templateUrl: './paginator.component.html',
-  styleUrls: ['./paginator.component.css'],
-  standalone: true,
-  imports: [MatIconModule, MatButtonModule, NgIf, NgForOf],
-})
-export class PaginatorComponent implements OnInit , OnChanges {
-  maxSize = 3;
-
-  @Input() currentPage = 1;
-  @Input() totalPages = 1;
-  @Output() pageChange = new EventEmitter<number>();
-  currentDirection: 'ltr' | 'rtl';
-  constructor(private directionality: Directionality) {
-  }
-  viewablePages: (number | string)[] = [];
-  ngOnInit() {
-    this.currentDirection = this.directionality.value;
-    this.directionality.change.subscribe((value) => {
-      this.currentDirection = value;
-    })
-  }
-
-  ngOnChanges() {
-    this.calculatePages();
-  }
-
-  calculatePages() {
-    const pages: (number | string)[] = [];
-    const halfSize = Math.floor(this.maxSize / 2);
-
-    pages.push(1);
-
-    let start = Math.max(this.currentPage - halfSize, 2);
-    let end = Math.min(this.currentPage + halfSize, this.totalPages - 1);
-
-    if (this.currentPage <= halfSize) {
-      end = Math.min(this.maxSize, this.totalPages - 1);
-    } else if (this.currentPage + halfSize >= this.totalPages) {
-      start = Math.max(this.totalPages - this.maxSize + 2, 2);
-    }
-
-    if (start > 2) {
-      pages.push('...');
-    }
-
-    for (let i = start; i <= end; i++) {
-      pages.push(i);
-    }
-
-    if (end < this.totalPages - 1) {
-      pages.push('...');
-    }
-
-    if (this.totalPages > 1) {
-      pages.push(this.totalPages);
-    }
-
-    this.viewablePages = pages;
-  }
-
-  goToPage(page: number | string) {
-    if (page === '...') {
-      if (this.viewablePages[1] === '...') {
-        this.currentPage = Math.max(this.currentPage - this.maxSize, 1);
-      } else {
-        this.currentPage = Math.min(this.currentPage + this.maxSize, this.totalPages);
-      }
-    } else if (typeof page === 'number' && page !== this.currentPage) {
-      this.currentPage = page;
-    }
-
-    this.pageChange.emit(this.currentPage);
-    this.calculatePages();
-  }
-  nextPage() {
-    if (this.currentPage < this.totalPages) {
-      this.goToPage(this.currentPage + 1);
-    }
-  }
-
-  previousPage() {
-    if (this.currentPage > 1) {
-      this.goToPage(this.currentPage - 1);
-    }
-  }
-}

package/src/lib/components/rejection-comment/action-comment.component.css

@@ -1,33 +0,0 @@
-.m-0{
-  margin: 0 !important;
-}
-.w-100{
-  width: 100%;
-}
-.form-style{
-  min-height: 12vh !important;
-  height: auto !important;
-}
-.text-red{
-  color: red !important;
-}
-.modal-footer{
-  margin-top: 5vh;
-}
-.overflow-hidden{
-  overflow: hidden;
-}
-.pad-top{
-  margin-top: -7px;
-  display: block;
-}
-.action-comment {
-  display: flex;
-  justify-content: space-between;
-}
-.material-icons {
-  color: #E22222;padding: 10px;cursor: pointer;
-}
-textarea#warn::placeholder {
-  color: red;
-}