@unifylib/ui-lib 1.0.3 → 1.1.3

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

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

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

@@ -1,11 +1,19 @@
-::ng-deep  .main-multi-auto {
-
-  .matField {
-    margin-bottom: 24px !important;
-    .mat-form-field-wrapper {
-      padding: 0  !important;
-      margin-bottom: 0 !important;
-    }
-  }
-}
-
+::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 +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>
+<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 +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();
-  });
-});
+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();
+  });
+});