@unifylib/ui-lib 1.0.3

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+.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;
+}