@unifylib/ui-lib 1.1.3 → 1.1.4

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

@@ -1,19 +0,0 @@
-::ng-deep  .main-multi-auto {
-
-  .matField {
-    margin-bottom: 24px !important;
-    .mat-form-field-wrapper {
-      padding: 0  !important;
-      margin-bottom: 0 !important;
-    }
-  }
-}
-.full-width {
-  width: 100%;
-}
-
-.chip-input {
-  flex: 1 1 auto;
-}
-
-

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 class="full-width" 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="chip-input" 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,315 +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 {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,
-    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,65 +0,0 @@
-.custom-paginator {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 4px 8px;
-  border: 1px solid #f0f0f0;
-  border-radius: 6px;
-  background: #fff;
-  font-size: 14px;
-  color: #555 !important;
-  gap: 16px;
-  margin-top: 4px;
-
-  .range-label {
-    color: #6b7280;
-    font-size: 13px;
-  }
-
-  .right-section {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    .rows-per-page {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-
-      mat-select {
-        width: 60px;
-        font-size: 13px;
-        color: #555;
-      }
-    }
-
-    .nav-buttons {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      span {
-        min-width: 40px;
-        text-align: center;
-        font-size: 13px;
-      }
-    }
-  }
-
-  button {
-    border: 1px solid #dbdbdb;
-    border-radius: 5px !important;
-    width: 28px;
-    height: 28px;
-    padding: 0 !important;
-    font-size: 18px;
-
-    &.active-chevron mat-icon {
-      color: var(--primary-color) ;
-    }
-
-    &.disabled-chevron mat-icon {
-      color: #555;
-    }
-  }
-}

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

@@ -1,30 +0,0 @@
-<div class="custom-paginator" [dir]="currentDirection">
-  <span class="range-label">
-    {{ (currentPage - 1) * pageSize + 1 }} -
-    {{ Math.min(currentPage * pageSize, totalItems) }}
-    {{'PAGINATION.of' | translate}} {{ totalItems }}
-  </span>
-
-  <div class="right-section">
-    <div class="rows-per-page">
-      {{'PAGINATION.rowsPerPage' | translate}}:
-      <mat-select [(value)]="pageSize" (selectionChange)="onPageSizeChange($event.value)">
-        <mat-option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</mat-option>
-      </mat-select>
-    </div>
-
-    <div class="nav-buttons">
-      <button mat-icon-button (click)="previousPage()" [disabled]="currentPage === 1" id="paginator-prev-btn">
-        <mat-icon>{{ currentDirection === 'rtl' ? 'chevron_right' : 'chevron_left' }}</mat-icon>
-      </button>
-      <span><span style="color: var(--primary-color)">{{ currentPage }}</span> / {{ totalPages }}</span>
-      <button mat-icon-button
-              (click)="nextPage()"
-              [disabled]="currentPage === totalPages"
-              [ngClass]="{'active-chevron': currentPage !== totalPages, 'disabled-chevron': currentPage === totalPages}"
-              id="paginator-next-btn">
-        <mat-icon>{{ currentDirection === 'rtl' ? 'chevron_left' : 'chevron_right' }}</mat-icon>
-      </button>
-    </div>
-  </div>
-</div>

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

@@ -1,87 +0,0 @@
-import { Component, Input, Output, EventEmitter, OnInit, OnChanges } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import {NgIf, NgForOf, NgClass} from '@angular/common';
-import { Directionality } from '@angular/cdk/bidi';
-import { MatOption, MatSelect } from '@angular/material/select';
-import {TranslateModule} from "@ngx-translate/core";
-
-@Component({
-  selector: 'app-paginator',
-  templateUrl: './paginator.component.html',
-  styleUrls: ['./paginator.component.css'],
-  standalone: true,
-  imports: [MatIconModule, MatButtonModule, NgIf, NgForOf, MatSelect, MatOption, NgClass, TranslateModule],
-})
-export class PaginatorComponent implements OnInit, OnChanges {
-  @Input() currentPage = 1;
-  @Input() totalItems = 0;
-  @Input() pageSize = 10;
-  @Input() pageSizeOptions: number[] = [5, 10, 25, 50];
-
-  @Output() pageChange = new EventEmitter<number>();
-  @Output() pageSizeChange = new EventEmitter<number>();
-
-  currentDirection: 'ltr' | 'rtl' = 'ltr';
-
-  constructor(private directionality: Directionality) {}
-
-  ngOnInit() {
-    this.currentDirection = this.directionality.value;
-    this.directionality.change?.subscribe((value) => {
-      this.currentDirection = value;
-    });
-    if (!this.pageSizeOptions.includes(this.pageSize)) {
-      Promise.resolve().then(() => {
-        this.pageSize = this.pageSizeOptions[1];
-        this.pageSizeChange.emit(this.pageSize);
-      });
-    }
-  }
-
-  ngOnChanges() {
-    if (this.currentPage > this.totalPages) {
-      this.currentPage = this.totalPages || 1;
-    }
-  }
-
-  get totalPages(): number {
-    return Math.ceil(this.totalItems / this.pageSize);
-  }
-
-  get startIndex(): number {
-    return this.totalItems === 0 ? 0 : (this.currentPage - 1) * this.pageSize + 1;
-  }
-
-  get endIndex(): number {
-    return Math.min(this.currentPage * this.pageSize, this.totalItems);
-  }
-
-  goToPage(page: number) {
-    if (page >= 1 && page <= this.totalPages) {
-      this.currentPage = page;
-      this.pageChange.emit(this.currentPage);
-    }
-  }
-
-  nextPage() {
-    if (this.currentPage < this.totalPages) {
-      this.goToPage(this.currentPage + 1);
-    }
-  }
-
-  previousPage() {
-    if (this.currentPage > 1) {
-      this.goToPage(this.currentPage - 1);
-    }
-  }
-
-  onPageSizeChange(size: number) {
-    this.pageSize = size;
-    this.currentPage = 1;
-    this.pageSizeChange.emit(this.pageSize);
-    this.pageChange.emit(this.currentPage);
-  }
-
-  protected readonly Math = Math;
-}

package/src/lib/components/report-details-dialog/report-details-dialog.component.css

@@ -1,17 +0,0 @@
-::ng-deep .mat-dialog-actions {
-  justify-content: flex-end !important;
-}
-.close-button {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  z-index: 10;
-  background-color: white;
-  border-radius: 50%;
-}
-
-:host-context([dir="rtl"]) .close-button {
-  right: auto;
-  left: 8px;
-}
-

package/src/lib/components/report-details-dialog/report-details-dialog.component.html

@@ -1,16 +0,0 @@
-<mat-dialog-content style="max-height: 70vh; overflow: auto; position: relative;">
-  <button mat-icon-button class="close-button" (click)="cancel()" [attr.dir]="dialogDirection" id="report-details-close-btn">
-    <mat-icon>close</mat-icon>
-  </button>
-
-    <h1 mat-dialog-title [innerHTML]="getTitle()"></h1>
-
-    <app-base-table
-            [pageInfo]="pageInfo"
-            [columns]="columns"
-            id="junior"
-            [enforceRefresh]="true"
-            [reportRequest]="reportRequest">
-    </app-base-table>
-</mat-dialog-content>
-

package/src/lib/components/report-details-dialog/report-details-dialog.component.spec.ts

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