angular-data-mapper 1.0.0

package/projects/ngx-data-mapper/src/lib/components/array-selector-modal/array-selector-modal.component.ts

@@ -0,0 +1,258 @@
+import { Component, Input, Output, EventEmitter, computed, signal, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDividerModule } from '@angular/material/divider';
+import {
+  ArrayToObjectMapping,
+  ArraySelectorConfig,
+  ArraySelectionMode,
+  FilterCondition,
+  FilterGroup,
+  FilterItem,
+  FilterOperator,
+  SchemaField,
+} from '../../models/schema.model';
+
+interface OperatorOption {
+  value: FilterOperator;
+  label: string;
+  needsValue: boolean;
+}
+
+@Component({
+  selector: 'array-selector-modal',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSelectModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    MatSlideToggleModule,
+    MatTooltipModule,
+    MatDividerModule,
+  ],
+  templateUrl: './array-selector-modal.component.html',
+  styleUrl: './array-selector-modal.component.scss',
+})
+export class ArraySelectorModalComponent implements OnInit {
+  @Input({ required: true }) mapping!: ArrayToObjectMapping;
+  @Output() save = new EventEmitter<ArraySelectorConfig>();
+  @Output() close = new EventEmitter<void>();
+
+  selectionMode = signal<ArraySelectionMode>('first');
+  conditionGroup = signal<FilterGroup>(this.createEmptyGroup());
+
+  // Available fields from the source array's children
+  availableFields = computed(() => {
+    const fields: { path: string; name: string; type: string }[] = [];
+    this.collectFields(this.mapping.sourceArray.children || [], '', fields);
+    return fields;
+  });
+
+  // Operators by type
+  stringOperators: OperatorOption[] = [
+    { value: 'equals', label: 'equals', needsValue: true },
+    { value: 'notEquals', label: 'not equals', needsValue: true },
+    { value: 'contains', label: 'contains', needsValue: true },
+    { value: 'notContains', label: 'does not contain', needsValue: true },
+    { value: 'startsWith', label: 'starts with', needsValue: true },
+    { value: 'endsWith', label: 'ends with', needsValue: true },
+    { value: 'isEmpty', label: 'is empty', needsValue: false },
+    { value: 'isNotEmpty', label: 'is not empty', needsValue: false },
+  ];
+
+  numberOperators: OperatorOption[] = [
+    { value: 'equals', label: 'equals', needsValue: true },
+    { value: 'notEquals', label: 'not equals', needsValue: true },
+    { value: 'greaterThan', label: 'greater than', needsValue: true },
+    { value: 'lessThan', label: 'less than', needsValue: true },
+    { value: 'greaterThanOrEqual', label: 'greater or equal', needsValue: true },
+    { value: 'lessThanOrEqual', label: 'less or equal', needsValue: true },
+  ];
+
+  booleanOperators: OperatorOption[] = [
+    { value: 'isTrue', label: 'is true', needsValue: false },
+    { value: 'isFalse', label: 'is false', needsValue: false },
+  ];
+
+  ngOnInit(): void {
+    // Initialize from existing selector config
+    if (this.mapping.selector) {
+      this.selectionMode.set(this.mapping.selector.mode);
+      if (this.mapping.selector.condition) {
+        this.conditionGroup.set(this.cloneGroup(this.mapping.selector.condition));
+      }
+    }
+  }
+
+  private createEmptyGroup(): FilterGroup {
+    return {
+      id: this.generateId(),
+      type: 'group',
+      logic: 'and',
+      children: [],
+    };
+  }
+
+  private generateId(): string {
+    return `filter-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  private cloneGroup(group: FilterGroup): FilterGroup {
+    return {
+      ...group,
+      children: group.children.map((child) =>
+        child.type === 'group' ? this.cloneGroup(child) : { ...child }
+      ),
+    };
+  }
+
+  private collectFields(
+    fields: SchemaField[],
+    prefix: string,
+    result: { path: string; name: string; type: string }[]
+  ): void {
+    for (const field of fields) {
+      const path = prefix ? `${prefix}.${field.name}` : field.name;
+      if (field.type !== 'object' && field.type !== 'array') {
+        result.push({ path, name: field.name, type: field.type });
+      }
+      if (field.children) {
+        this.collectFields(field.children, path, result);
+      }
+    }
+  }
+
+  getOperatorsForField(fieldPath: string): OperatorOption[] {
+    const field = this.availableFields().find((f) => f.path === fieldPath);
+    if (!field) return this.stringOperators;
+
+    switch (field.type) {
+      case 'number':
+        return this.numberOperators;
+      case 'boolean':
+        return this.booleanOperators;
+      default:
+        return this.stringOperators;
+    }
+  }
+
+  operatorNeedsValue(operator: FilterOperator): boolean {
+    const allOperators = [...this.stringOperators, ...this.numberOperators, ...this.booleanOperators];
+    const op = allOperators.find((o) => o.value === operator);
+    return op?.needsValue ?? true;
+  }
+
+  isCondition(item: FilterItem): item is FilterCondition {
+    return item.type === 'condition';
+  }
+
+  isGroup(item: FilterItem): item is FilterGroup {
+    return item.type === 'group';
+  }
+
+  addCondition(group: FilterGroup): void {
+    const fields = this.availableFields();
+    const firstField = fields[0];
+    const newCondition: FilterCondition = {
+      id: this.generateId(),
+      type: 'condition',
+      field: firstField?.path || '',
+      fieldName: firstField?.name || '',
+      operator: 'equals',
+      value: '',
+      valueType: (firstField?.type as 'string' | 'number' | 'boolean') || 'string',
+    };
+    group.children = [...group.children, newCondition];
+    this.triggerUpdate();
+  }
+
+  addGroup(parentGroup: FilterGroup): void {
+    const newGroup: FilterGroup = {
+      id: this.generateId(),
+      type: 'group',
+      logic: parentGroup.logic === 'and' ? 'or' : 'and',
+      children: [],
+    };
+    parentGroup.children = [...parentGroup.children, newGroup];
+    this.triggerUpdate();
+  }
+
+  removeItem(parentGroup: FilterGroup, itemId: string): void {
+    parentGroup.children = parentGroup.children.filter((c) => c.id !== itemId);
+    this.triggerUpdate();
+  }
+
+  onFieldChange(condition: FilterCondition, fieldPath: string): void {
+    const field = this.availableFields().find((f) => f.path === fieldPath);
+    if (field) {
+      condition.field = fieldPath;
+      condition.fieldName = field.name;
+      condition.valueType = field.type as 'string' | 'number' | 'boolean';
+      const operators = this.getOperatorsForField(fieldPath);
+      condition.operator = operators[0].value;
+      condition.value = '';
+    }
+    this.triggerUpdate();
+  }
+
+  onOperatorChange(condition: FilterCondition, operator: FilterOperator): void {
+    condition.operator = operator;
+    if (!this.operatorNeedsValue(operator)) {
+      condition.value = '';
+    }
+    this.triggerUpdate();
+  }
+
+  onValueChange(condition: FilterCondition, value: string | boolean): void {
+    if (condition.valueType === 'number') {
+      condition.value = parseFloat(value as string) || 0;
+    } else {
+      condition.value = value;
+    }
+    this.triggerUpdate();
+  }
+
+  onLogicChange(group: FilterGroup, logic: 'and' | 'or'): void {
+    group.logic = logic;
+    this.triggerUpdate();
+  }
+
+  private triggerUpdate(): void {
+    this.conditionGroup.set(this.cloneGroup(this.conditionGroup()));
+  }
+
+  onSave(): void {
+    const config: ArraySelectorConfig = {
+      mode: this.selectionMode(),
+    };
+
+    if (this.selectionMode() === 'condition') {
+      config.condition = this.conditionGroup();
+    }
+
+    this.save.emit(config);
+  }
+
+  onClose(): void {
+    this.close.emit();
+  }
+
+  onBackdropClick(event: MouseEvent): void {
+    if ((event.target as HTMLElement).classList.contains('modal-backdrop')) {
+      this.onClose();
+    }
+  }
+}

package/projects/ngx-data-mapper/src/lib/components/condition-builder/condition-builder.component.html

@@ -0,0 +1,139 @@
+<div class="condition-builder" [class.compact]="compact">
+  <ng-container *ngTemplateOutlet="groupTemplate; context: { group: rootGroup, isRoot: true }"></ng-container>
+</div>
+
+<!-- Recursive group template -->
+<ng-template #groupTemplate let-group="group" let-isRoot="isRoot" let-parentGroup="parentGroup">
+  <div class="filter-group" [class.root-group]="isRoot" [class.nested-group]="!isRoot">
+    <!-- Group header with logic toggle (only show if multiple children or nested) -->
+    @if (group.children.length > 1 || !isRoot) {
+      <div class="group-header">
+        <div class="logic-toggle">
+          <button
+            type="button"
+            class="logic-btn"
+            [class.active]="group.logic === 'and'"
+            (click)="onLogicChange(group, 'and')"
+          >
+            AND
+          </button>
+          <button
+            type="button"
+            class="logic-btn"
+            [class.active]="group.logic === 'or'"
+            (click)="onLogicChange(group, 'or')"
+          >
+            OR
+          </button>
+        </div>
+        @if (!isRoot) {
+          <button mat-icon-button class="remove-group-btn" matTooltip="Remove group" (click)="removeItem(parentGroup, group.id)">
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+      </div>
+    }
+
+    <!-- Group children -->
+    <div class="group-children">
+      @for (item of group.children; track item.id; let i = $index) {
+        <!-- Logic connector between items -->
+        @if (i > 0) {
+          <div class="logic-connector">
+            <span class="logic-badge" [class.and]="group.logic === 'and'" [class.or]="group.logic === 'or'">
+              {{ group.logic | uppercase }}
+            </span>
+          </div>
+        }
+
+        @if (isCondition(item)) {
+          <!-- Condition row -->
+          <div class="condition-row">
+            <!-- Field selector (only if multiple fields) -->
+            @if (showFieldSelector) {
+              <mat-form-field appearance="outline" class="field-select">
+                <mat-select [value]="item.field" (selectionChange)="onFieldChange(item, $event.value)">
+                  @for (field of availableFields; track field.path) {
+                    <mat-option [value]="field.path">{{ field.name }}</mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            }
+
+            <!-- Operator selector -->
+            <mat-form-field appearance="outline" class="operator-select">
+              <mat-select [value]="item.operator" (selectionChange)="onOperatorChange(item, $event.value)">
+                @for (op of getOperatorsForField(item.field); track op.value) {
+                  <mat-option [value]="op.value">{{ op.label }}</mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+
+            <!-- Value input (only if operator needs value) -->
+            @if (operatorNeedsValue(item.operator)) {
+              @if (item.valueType === 'boolean') {
+                <mat-slide-toggle
+                  [checked]="item.value === true"
+                  (change)="onValueChange(item, $event.checked)"
+                  class="bool-toggle"
+                >
+                </mat-slide-toggle>
+              } @else if (item.valueType === 'number') {
+                <mat-form-field appearance="outline" class="value-input">
+                  <input
+                    matInput
+                    type="number"
+                    [value]="item.value"
+                    (input)="onValueChange(item, $any($event.target).value)"
+                    placeholder="value"
+                  />
+                </mat-form-field>
+              } @else {
+                <mat-form-field appearance="outline" class="value-input">
+                  <input
+                    matInput
+                    type="text"
+                    [value]="item.value"
+                    (input)="onValueChange(item, $any($event.target).value)"
+                    placeholder="value"
+                  />
+                </mat-form-field>
+              }
+            }
+
+            <!-- Remove condition button -->
+            <button mat-icon-button class="remove-btn" matTooltip="Remove" (click)="removeItem(group, item.id)">
+              <mat-icon>close</mat-icon>
+            </button>
+          </div>
+        } @else if (isGroup(item)) {
+          <!-- Nested group -->
+          <ng-container *ngTemplateOutlet="groupTemplate; context: { group: item, isRoot: false, parentGroup: group }"></ng-container>
+        }
+      }
+
+      <!-- Empty state -->
+      @if (group.children.length === 0) {
+        <div class="empty-group">
+          <span>No conditions defined</span>
+        </div>
+      }
+    </div>
+
+    <!-- Group actions -->
+    <div class="group-actions">
+      <button type="button" class="add-btn" (click)="addCondition(group)">
+        <mat-icon>add</mat-icon>
+        @if (!compact) {
+          <span>Add condition</span>
+        }
+      </button>
+      @if (!compact && group.children.length > 0) {
+        <button type="button" class="add-btn add-group-btn" (click)="addGroup(group)">
+          <mat-icon>folder_open</mat-icon>
+          <span>Add group</span>
+        </button>
+      }
+    </div>
+  </div>
+</ng-template>

package/projects/ngx-data-mapper/src/lib/components/condition-builder/condition-builder.component.scss

@@ -0,0 +1,213 @@
+.condition-builder {
+  &.compact {
+    .filter-group {
+      padding: 8px;
+    }
+
+    .condition-row {
+      gap: 6px;
+    }
+
+    .operator-select {
+      min-width: 100px;
+    }
+
+    .value-input {
+      min-width: 80px;
+    }
+
+    .add-btn {
+      padding: 4px 8px;
+      font-size: 12px;
+    }
+  }
+}
+
+.filter-group {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 12px;
+
+  &.nested-group {
+    margin-top: 8px;
+    background: #f1f5f9;
+    border-color: #cbd5e1;
+  }
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.logic-toggle {
+  display: flex;
+  gap: 4px;
+}
+
+.logic-btn {
+  padding: 4px 12px;
+  border: 1px solid #cbd5e1;
+  background: white;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: #94a3b8;
+  }
+
+  &.active {
+    background: #6366f1;
+    border-color: #6366f1;
+    color: white;
+  }
+}
+
+.group-children {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.logic-connector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 0;
+}
+
+.logic-badge {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 4px;
+
+  &.and {
+    background: #dbeafe;
+    color: #1d4ed8;
+  }
+
+  &.or {
+    background: #fef3c7;
+    color: #b45309;
+  }
+}
+
+.condition-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.field-select {
+  min-width: 120px;
+}
+
+.operator-select {
+  min-width: 130px;
+}
+
+.value-input {
+  min-width: 100px;
+  flex: 1;
+}
+
+.bool-toggle {
+  margin: 0 8px;
+}
+
+.remove-btn,
+.remove-group-btn {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  flex-shrink: 0;
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: #94a3b8;
+  }
+
+  &:hover mat-icon {
+    color: #ef4444;
+  }
+}
+
+.empty-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  color: #94a3b8;
+  font-size: 13px;
+  font-style: italic;
+}
+
+.group-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed #e2e8f0;
+}
+
+.add-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  background: white;
+  border: 1px dashed #cbd5e1;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #64748b;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover {
+    border-color: #6366f1;
+    color: #6366f1;
+    background: #f5f3ff;
+  }
+
+  &.add-group-btn {
+    border-style: solid;
+  }
+}
+
+// Material form field overrides
+::ng-deep .condition-builder {
+  .mat-mdc-form-field {
+    font-size: 13px;
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+
+  .mdc-text-field--outlined {
+    --mdc-outlined-text-field-container-shape: 6px;
+  }
+
+  .mat-mdc-form-field-infix {
+    padding-top: 8px !important;
+    padding-bottom: 8px !important;
+    min-height: 36px;
+  }
+}