@unifylib/ui-lib 1.0.3 → 1.1.3

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

@@ -0,0 +1,39 @@
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-full {
+  flex: 1 1 auto;
+}
+
+.flex-none {
+  flex: 0 0 auto;
+}
+
+.fill {
+  width: 100%;
+}
+
+.align-start-center {
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.align-center-center {
+  align-items: center;
+  justify-content: center;
+}
+
+.gap-5 {
+  gap: 5px;
+}
+
+.gap-10 {
+  gap: 10px;
+}

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

@@ -1,31 +1,31 @@
-<div fxLayout="row" fxLayoutGap="10px" fxFlexFill fxLayoutAlign="start center">
-  <ng-container *ngFor="let item of items; let i = index">
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
-      <ng-container [ngSwitch]="item.type">
-        <ng-container *ngSwitchCase="'lookup'">
-          <app-auto-complete
-            fxFlex
-            [field]="field"
-            [form]="form"
-            [defaultValue]="item.value"
-            (selectedValue)="onLookupChange(i, $event)">
-          </app-auto-complete>
-        </ng-container>
-
-        <ng-container *ngSwitchCase="'dropdown'">
-          <mat-form-field appearance="outline" fxFlex="none" style="width: 100px">
-            <mat-select [disabled]="readOnly" [value]="item.value" (selectionChange)="onDropdownChange(i, $event.value)">
-              <mat-option *ngFor="let opt of operators" [value]="opt.value">
-                {{ opt.label }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </ng-container>
-      </ng-container>
-    </div>
-  </ng-container>
-
-  <button [disabled]="isPending"  mat-icon-button color="warn" (click)="onClearAll()" *ngIf="items.length > 0">
-    <mat-icon>delete</mat-icon>
-  </button>
-</div>
+<div class="flex-row gap-10 fill align-start-center">
+  <ng-container *ngFor="let item of items; let i = index">
+    <div class="flex-row align-start-center gap-5">
+      <ng-container [ngSwitch]="item.type">
+        <ng-container *ngSwitchCase="'lookup'">
+          <app-auto-complete
+            class="flex-full"
+            [field]="field"
+            [form]="form"
+            [defaultValue]="item.value"
+            (selectedValue)="onLookupChange(i, $event)">
+          </app-auto-complete>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'dropdown'">
+          <mat-form-field class="flex-none" appearance="outline" style="width: 100px">
+            <mat-select [disabled]="readOnly" [value]="item.value" (selectionChange)="onDropdownChange(i, $event.value)">
+              <mat-option *ngFor="let opt of operators" [value]="opt.value">
+                {{ opt.label }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </ng-container>
+      </ng-container>
+    </div>
+  </ng-container>
+
+  <button [disabled]="isPending" mat-icon-button color="warn" (click)="onClearAll()" *ngIf="items.length > 0" id="equation-clear-all-btn">
+    <mat-icon>delete</mat-icon>
+  </button>
+</div>

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

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

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

@@ -1,121 +1,119 @@
-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();
-  }
-
-
-}
+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

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

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

@@ -0,0 +1,23 @@
+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();
+  });
+});