@unifylib/ui-lib 1.1.3 → 1.1.4

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

@@ -1,119 +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 {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,
-    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/item-line-editor/item-line-editor.component.html

@@ -1,102 +0,0 @@
-<div class="item-line-editor">
-
-  <h3 class="title">{{ title | translate }}</h3>
-  <p class="subtitle">{{ subtitle | translate }}</p>
-
-  <div class="table-header" [ngStyle]="{ 'grid-template-columns': gridTemplate }">
-    <ng-container *ngFor="let f of headerFields; let idx = index">
-      <div class="col">
-        {{ labelOf(f)  | translate }}
-      </div>
-    </ng-container>
-  </div>
-  @if (!noDataFound) {
-    <div class="table-body" *ngFor="let it of items; let i = index; trackBy: trackByIndex">
-
-      <div class="table-row">
-
-        <div class="row-inputs">
-          <app-base-form-canvas
-            [pageInfo]="pageInfo"
-            [fields]="fields"
-            [editable]="editing[i]"
-            [emitOnValueChanges]="true"
-            [item]="it"
-            [currency]="currency"
-            (formUpdated)="onFormUpdated($event, i)">
-          </app-base-form-canvas>
-        </div>
-
-
-      </div>
-      <div class="row-actions">
-
-        <button *ngIf="editing[i]" mat-stroked-button class="btn-none-background-primary save-btn" (click)="saveRow(i)"
-                [disabled]="!canSave(i)">
-          <div class="button-text">
-            <mat-icon>check</mat-icon>
-            <span>{{ 'item-line.save' | translate }}</span>
-          </div>
-        </button>
-
-        <button *ngIf="!editing[i] && editable" mat-stroked-button class="btn-none-background-primary edit-btn"
-                (click)="editRow(i)">
-          <div class="button-text">
-            <mat-icon>edit</mat-icon>
-            <span>{{ 'item-line.edit' | translate }}</span>
-          </div>
-        </button>
-
-        <button *ngIf="allowDelete && editable" mat-stroked-button class="btn-none-background-primary delete-btn"
-                (click)="deleteItem(i)" type="button">
-          <div class="button-text">
-            <mat-icon>delete</mat-icon>
-            <span>{{ 'item-line.delete' | translate }}</span>
-          </div>
-        </button>
-      </div>
-    </div>
-  }
-  @if (noDataFound) {
-    <div class="dataNotFound flex-column">
-      <mat-icon class="dataNotFound__icon">{{ noDataFoundIcon }}</mat-icon>
-      <span class="dataNotFound__title">{{ noDataFoundTitle | translate }}</span>
-      <span class="dataNotFound__subtitle">{{ noDataFoundSubtitle | translate }}</span>
-    </div>
-
-  }
-  <div class="add-item" *ngIf="allowAdd && editable">
-    <div class="divider" style="border-top: 1px solid var(--primary-color-3nd)"></div>
-    <button mat-stroked-button color="primary" class="btn-none-background-primary" (click)="addNewItem()"
-            [disabled]="!canAddNew">
-      <div class="button-text">
-        <mat-icon>add</mat-icon>
-        <span>  {{ 'item-line.addNewItem' | translate }}</span>
-      </div>
-    </button>
-
-  </div>
-
-  @if (!noDataFound) {
-    <div class="totals-box">
-
-      <div class="total-row">
-        <span class="label">{{ 'item-line.discount' | translate }}</span>
-        <span class="value red">{{ discountTotal | currency:currency }}</span>
-      </div>
-
-      <div class="total-row">
-        <span class="label">{{ 'item-line.amount' | translate }}</span>
-        <span class="value">{{ subtotal | currency:currency }}</span>
-      </div>
-
-      <div class="divider"></div>
-
-      <div class="total-row grand">
-        <span class="label">{{ 'item-line.grandTotal' | translate }}</span>
-        <span class="value strong green">{{ grandTotal | currency:currency }}</span>
-      </div>
-    </div>
-  }
-
-</div>

package/src/lib/components/item-line-editor/item-line-editor.component.scss

@@ -1,152 +0,0 @@
-.item-line-editor {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-}
-
-.title {
-  font-size: 20px;
-  margin-bottom: 4px;
-  font-weight: 600;
-}
-
-.subtitle {
-  color: #777;
-  font-size: 13px;
-  margin-bottom: 16px;
-}
-
-.table-header {
-  display: grid;
-  grid-template-columns: 20% 25% 15% 10% 15% 15%;
-  font-weight: 600;
-  font-size: 13px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid var(--primary-color-3nd);
-  margin-bottom: 12px;
-}
-
-.col {
-  padding-left: 4px;
-}
-
-.table-body .table-row {
-  display: grid;
-  padding: 10px 0;
-  border-bottom: 1px solid #e6e6e6;
-}
-
-.row-inputs {
-  padding-right: 10px;
-}
-
-.row-actions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 6px;
-  margin-top: 24px;
-}
-
-
-.line-total {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.save-btn , .edit-btn , .delete-btn {
-  width: 114px !important;
-  height: 32px !important;
-  border-radius: 9999px !important;
-  border: 1px solid var(--primary-color-3nd);
-  background: #FFF;
-}
-.delete-btn {
-  color: #ce3b3a !important;
-  border: 1px solid #ce3b3a !important;
-}
-.add-item {
-  margin-top: 16px;
-}
-.totals-box {
-  margin-top: 20px;
-  width: 400px;
-}
-
-.total-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: 15px;
-  margin: 6px 0;
-}
-
-.grand{
-  font-family: 'lusail-bold', sans-serif !important;
-}
-
-.total-row .label {
-  font-weight: 500;
-  color: #333;
-}
-
-.total-row .value {
-  font-weight: 600;
-}
-
-.divider {
-  border-top: 1px solid #e0e0e0;
-  margin: 10px 0;
-}
-
-.red {
-  color: #d9534f;
-}
-
-.green {
-  color: #0c7d5e;
-  font-weight: 700;
-}
-
-.grand .value {
-  font-size: 16px;
-}
-
-.button-text {
-
-  span{
-    font-size: 16px;
-  }
-  mat-icon {
-    font-size: 16px !important;
-  }
-}
-.dataNotFound {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  text-align: center;
-
-  &__icon {
-    color: var(--primary-color-3nd);
-    font-size: 24px;
-    height: 24px;
-    width: 24px;
-    margin-bottom: 8px;
-  }
-
-  &__title {
-    color: #6A6A6A;
-    font-size: 18px;
-    font-weight: 700;
-    margin-bottom: 4px;
-  }
-
-  &__subtitle {
-    color: #6A6A6A;
-    font-size: 16px;
-    font-weight: 400;
-  }
-}

package/src/lib/components/item-line-editor/item-line-editor.component.spec.ts

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

package/src/lib/components/item-line-editor/item-line-editor.component.ts

@@ -1,306 +0,0 @@
-import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
-import {AbstractControl, FormsModule} from "@angular/forms";
-import {CommonModule} from "@angular/common";
-import {MatButtonModule} from "@angular/material/button";
-import {MatIconModule} from "@angular/material/icon";
-import {BaseFormCanvasComponent} from "../base-form-canvas/base-form-canvas.component";
-import {FieldInfo, EMPTY_PAGE_INFO, PageInfo} from "../../base-model";
-import {FormGroup} from "@angular/forms";
-import {TranslateModule} from "@ngx-translate/core";
-import {LineItem} from "../../base-model/line-item.model";
-import {ItemsTotal} from "../../base-model/items-total.model";
-@Component({
-  selector: 'app-item-line-editor',
-  templateUrl: './item-line-editor.component.html',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatButtonModule,
-    MatIconModule,
-    BaseFormCanvasComponent,
-    TranslateModule
-  ],
-  styleUrls: ['./item-line-editor.component.scss']
-})
-
-
-export class ItemLineEditorComponent implements OnChanges {
-  @Input() noDataFoundIcon: string;
-  @Input() noDataFoundTitle: string;
-  @Input() noDataFoundSubtitle: string;
-
-  @Input() pageInfo: PageInfo;
-  @Input() columnHeaderWidths: string[];
-  @Input() title: string;
-  @Input() subtitle: string;
-  @Input() allowAdd: boolean = true;
-  @Input() allowDelete: boolean = true;
-  @Input() editable: boolean = true;
-  @Input() currency: string;
-  @Input() fields: FieldInfo[] = [];
-
-  private baseFieldsSnapshot: FieldInfo[] | undefined;
-
-
-  @Input() items: LineItem[] = [this.blankItem()];
-
-  @Output() itemsChange = new EventEmitter<LineItem[]>();
-  @Output() itemSaved = new EventEmitter<{ index: number, item: any }>();
-  @Output() itemDeleted = new EventEmitter<{ index: number }>();
-  @Output() totalsChange = new EventEmitter<ItemsTotal>();
-  @Output() editStateChange = new EventEmitter<{ index: number, editing: boolean }>();
-  formRefs: (FormGroup | undefined)[] = [];
-
-  editing: boolean[] = [true];
-  noDataFound: boolean = false
-
-  get headerFields(): FieldInfo[] {
-    return (this.fields || []).filter(f => f.visible && f.row === 1 && f.type !== 'spacer');
-  }
-
-  get hasInvalidEditingForm(): boolean {
-    if (!this.formRefs || !this.editing) return false;
-    for (let i = 0; i < this.formRefs.length; i++) {
-      const frm = this.formRefs[i];
-      if (this.editing[i] && frm && frm.invalid) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  get canAddNew(): boolean {
-    return !this.hasInvalidEditingForm;
-  }
-
-  canSave(index: number): boolean {
-    const frm = this.formRefs?.[index];
-    if (!this.editing?.[index]) return true;
-    return !!frm && frm.valid;
-  }
-
-  labelOf(field: FieldInfo): string {
-    const configuredKey = field.label ? field.label : field.property;
-    return configuredKey.startsWith(this.pageInfo.labelsSection)
-      ? configuredKey
-      : `${this.pageInfo.labelsSection}.${configuredKey}`;
-  }
-
-  private blankItem() {
-    return { gtinCode: '', description: '', unitPrice: null, qty: null, discount: null, total: null };
-  }
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['items'] && changes['items'].currentValue) {
-      const len = (this.items || []).length;
-      this.noDataFound = len <= 0;
-      if (changes['items'].firstChange) {
-        this.formRefs = new Array(len).fill(undefined);
-        this.editing = len > 0 ? new Array(len).fill(false) : [true];
-      } else {
-        const oldLen = this.editing?.length || 0;
-
-
-        if (!this.formRefs) this.formRefs = [];
-        if (this.formRefs.length > len) {
-          this.formRefs = this.formRefs.slice(0, len);
-        } else {
-          while (this.formRefs.length < len) this.formRefs.push(undefined);
-        }
-
-
-        if (!this.editing) this.editing = [];
-        if (this.editing.length > len) {
-          this.editing = this.editing.slice(0, len);
-        } else {
-          for (let i = this.editing.length; i < len; i++) {
-            this.editing[i] = true;
-          }
-        }
-
-
-        if (oldLen === 0 && len > 0 && this.editing[0] === undefined) {
-          this.editing[0] = true;
-        }
-      }
-      this.emitTotals();
-    }
-    if (changes['fields'] && changes['fields'].currentValue) {
-      this.baseFieldsSnapshot = (this.fields || []).map(f => ({...f}));
-    }
-  }
-
-  onFormUpdated(form: FormGroup, index: number) {
-    const discountCtrl = form.get('discount');
-
-    if (discountCtrl) {
-
-      const existing = discountCtrl.validator ? [discountCtrl.validator] : [];
-      discountCtrl.setValidators([
-        ...existing,
-        this.discountValidator(index)
-      ]);
-
-      discountCtrl.updateValueAndValidity({ emitEvent: false });
-    }
-
-    this.formRefs[index] = form;
-    try {
-      const emittedItems = this.items.map((it, i) => {
-        if (i !== index) return it;
-        const v = this.getCurrentValues(i) || it || {};
-        const up = Number(v?.unitPrice || 0);
-        const q = Number(v?.qty || 0);
-        const disc = Number(v?.discount || 0);
-        const total = Math.max(0, up * q - disc);
-        return { ...it, ...v, total };
-      });
-      this.itemsChange.emit(emittedItems);
-    } catch (_e) {
-
-    }
-    this.emitTotals();
-  }
-
-  addNewItem() {
-    this.items.push(this.blankItem());
-    this.formRefs.push(undefined);
-    this.editing.push(true);
-
-    this.restoreFieldsFromSnapshot();
-    this.itemsChange.emit([...this.items]);
-    this.editStateChange.emit({ index: this.items.length - 1, editing: true });
-    this.emitTotals();
-  }
-
-  saveRow(index: number) {
-
-    const frm = this.formRefs?.[index];
-    if (this.editing[index] && frm && frm.invalid) {
-
-      Object.values(frm.controls).forEach(c => c.markAsTouched());
-      return;
-    }
-    const v = this.getCurrentValues(index);
-    if (!v) return;
-    this.items[index] = { ...v, total: this.calcLineTotal(index) };
-
-    this.editing[index] = false;
-
-    this.setFieldsReadonly(true);
-    this.itemsChange.emit([...this.items]);
-    this.itemSaved.emit({ index, item: this.items[index] });
-    this.editStateChange.emit({ index, editing: false });
-    this.emitTotals();
-  }
-
-  deleteItem(index: number) {
-    if (index < 0 || index >= this.items.length) return;
-    this.items.splice(index, 1);
-    this.formRefs.splice(index, 1);
-    this.editing.splice(index, 1);
-
-    this.itemsChange.emit([...this.items]);
-    this.itemDeleted.emit({ index });
-    this.emitTotals();
-  }
-
-  clearAll() {
-    this.items = [this.blankItem()];
-    this.formRefs = [undefined];
-    this.editing = [true];
-    this.itemsChange.emit([...this.items]);
-    this.emitTotals();
-  }
-
-  getCurrentValues(index: number) {
-    const isEditing = this.editing[index];
-    const frm = this.formRefs[index];
-
-    const base = this.items[index] || {};
-    const src = (isEditing && frm) ? { ...base, ...frm.value } : { ...base };
-    if (!src) return null;
-    const val: any = { ...src };
-    val.unitPrice = val.unitPrice === null || val.unitPrice === '' ? null : Number(val.unitPrice);
-    val.qty = val.qty === null || val.qty === '' ? null : Number(val.qty);
-    val.discount = val.discount === null || val.discount === '' ? null : Number(val.discount);
-    return val;
-  }
-
-  calcLineTotal(index: number): number {
-    const val = this.getCurrentValues(index);
-    if (!val) return Number(this.items[index]?.total || 0);
-    return Math.max(0, (val.unitPrice || 0) * (val.qty || 0) - (val.discount || 0));
-  }
-
-  get subtotal(): number {
-    return this.items.reduce((s, _it, i) => {
-      const v = this.getCurrentValues(i);
-      const up = Number(v?.unitPrice || 0);
-      const q = Number(v?.qty || 0);
-      return s + (up * q);
-    }, 0);
-  }
-
-  get discountTotal(): number {
-    return this.items.reduce((s, _it, i) => {
-      const v = this.getCurrentValues(i);
-      return s + Number(v?.discount || 0);
-    }, 0);
-  }
-
-  get grandTotal(): number {
-    return this.items.reduce((s, _it, i) => s + this.calcLineTotal(i), 0);
-  }
-
-  trackByIndex(index: number, _item: any) {
-    return index;
-  }
-
-  editRow(index: number) {
-    this.editing[index] = true;
-    this.restoreFieldsFromSnapshot();
-    this.editStateChange.emit({ index, editing: true });
-  }
-
-  private emitTotals() {
-    this.totalsChange.emit({
-      subtotal: this.subtotal,
-      discount: this.discountTotal,
-      grandTotal: this.grandTotal
-    });
-  }
-
-  private setFieldsReadonly(state: boolean) {
-    this.fields = (this.fields || []).map(f => ({ ...f, readonly: state }));
-  }
-
-  private restoreFieldsFromSnapshot() {
-    if (this.baseFieldsSnapshot && this.baseFieldsSnapshot.length) {
-      this.fields = this.baseFieldsSnapshot.map(f => ({...f}));
-    } else {
-      this.setFieldsReadonly(false);
-    }
-  }
-
-  get gridTemplate() {
-    return this.columnHeaderWidths.join(' ');
-  }
-
-  private discountValidator(index: number) {
-    return (control: AbstractControl) => {
-      const val = this.getCurrentValues(index);
-      if (!val) return null;
-
-      const totalBeforeDiscount = (val.unitPrice ?? 0) * (val.qty ?? 0);
-      const discount = val.discount ?? null;
-
-      if (discount != null && discount > totalBeforeDiscount) {
-        return { discountTooHigh: true };
-      }
-
-      return null;
-    };
-  }
-
-}