angular-data-mapper 1.0.0

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

@@ -0,0 +1,261 @@
+import { Component, Input, Output, EventEmitter, 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 {
+  FilterCondition,
+  FilterGroup,
+  FilterItem,
+  FilterOperator,
+} from '../../models/schema.model';
+
+interface OperatorOption {
+  value: FilterOperator;
+  label: string;
+  needsValue: boolean;
+}
+
+export interface ConditionField {
+  path: string;
+  name: string;
+  type: 'string' | 'number' | 'boolean';
+}
+
+@Component({
+  selector: 'condition-builder',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSelectModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    MatSlideToggleModule,
+    MatTooltipModule,
+  ],
+  templateUrl: './condition-builder.component.html',
+  styleUrl: './condition-builder.component.scss',
+})
+export class ConditionBuilderComponent implements OnInit {
+  // Available fields for conditions (optional - if not provided, uses 'value' as the only field)
+  @Input() fields: ConditionField[] = [];
+
+  // The condition group to edit
+  @Input() condition: FilterGroup | null = null;
+
+  // Whether to show a compact/inline version
+  @Input() compact = false;
+
+  // Emits when condition changes
+  @Output() conditionChange = new EventEmitter<FilterGroup>();
+
+  rootGroup!: FilterGroup;
+
+  // Default field for transformation conditions (the input value)
+  private defaultField: ConditionField = { path: 'value', name: 'Input value', type: 'string' };
+
+  // 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: '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: '>', needsValue: true },
+    { value: 'lessThan', label: '<', needsValue: true },
+    { value: 'greaterThanOrEqual', label: '>=', needsValue: true },
+    { value: 'lessThanOrEqual', label: '<=', needsValue: true },
+  ];
+
+  booleanOperators: OperatorOption[] = [
+    { value: 'isTrue', label: 'is true', needsValue: false },
+    { value: 'isFalse', label: 'is false', needsValue: false },
+  ];
+
+  ngOnInit(): void {
+    if (this.condition) {
+      this.rootGroup = this.cloneGroup(this.condition);
+    } else {
+      this.rootGroup = this.createEmptyGroup();
+    }
+  }
+
+  get availableFields(): ConditionField[] {
+    return this.fields.length > 0 ? this.fields : [this.defaultField];
+  }
+
+  get showFieldSelector(): boolean {
+    return this.fields.length > 1;
+  }
+
+  private createEmptyGroup(): FilterGroup {
+    return {
+      id: this.generateId(),
+      type: 'group',
+      logic: 'and',
+      children: [],
+    };
+  }
+
+  private generateId(): string {
+    return `cond-${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 }
+      ),
+    };
+  }
+
+  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 firstField = this.availableFields[0];
+    const newCondition: FilterCondition = {
+      id: this.generateId(),
+      type: 'condition',
+      field: firstField.path,
+      fieldName: firstField.name,
+      operator: 'isNotEmpty',
+      value: '',
+      valueType: firstField.type,
+    };
+    group.children = [...group.children, newCondition];
+    this.emitChange();
+  }
+
+  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.emitChange();
+  }
+
+  removeItem(parentGroup: FilterGroup, itemId: string): void {
+    parentGroup.children = parentGroup.children.filter((c) => c.id !== itemId);
+    this.emitChange();
+  }
+
+  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;
+      const operators = this.getOperatorsForField(fieldPath);
+      condition.operator = operators[0].value;
+      condition.value = '';
+    }
+    this.emitChange();
+  }
+
+  onOperatorChange(condition: FilterCondition, operator: FilterOperator): void {
+    condition.operator = operator;
+    if (!this.operatorNeedsValue(operator)) {
+      condition.value = '';
+    }
+    this.emitChange();
+  }
+
+  onValueChange(condition: FilterCondition, value: string | boolean): void {
+    if (condition.valueType === 'number') {
+      condition.value = parseFloat(value as string) || 0;
+    } else {
+      condition.value = value;
+    }
+    this.emitChange();
+  }
+
+  onLogicChange(group: FilterGroup, logic: 'and' | 'or'): void {
+    group.logic = logic;
+    this.emitChange();
+  }
+
+  private emitChange(): void {
+    this.rootGroup = this.cloneGroup(this.rootGroup);
+    this.conditionChange.emit(this.rootGroup);
+  }
+
+  getConditionSummary(): string {
+    return this.summarizeGroup(this.rootGroup);
+  }
+
+  private summarizeGroup(group: FilterGroup): string {
+    if (group.children.length === 0) return '';
+
+    const parts = group.children.map(child => {
+      if (child.type === 'condition') {
+        return this.summarizeCondition(child);
+      } else {
+        return `(${this.summarizeGroup(child)})`;
+      }
+    });
+
+    return parts.join(` ${group.logic.toUpperCase()} `);
+  }
+
+  private summarizeCondition(cond: FilterCondition): string {
+    const opLabel = this.getOperatorLabel(cond.operator);
+    if (this.operatorNeedsValue(cond.operator)) {
+      return `${opLabel} "${cond.value}"`;
+    }
+    return opLabel;
+  }
+
+  private getOperatorLabel(operator: FilterOperator): string {
+    const allOperators = [...this.stringOperators, ...this.numberOperators, ...this.booleanOperators];
+    const op = allOperators.find((o) => o.value === operator);
+    return op?.label || operator;
+  }
+}

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

@@ -0,0 +1,199 @@
+<div class="data-mapper">
+  <!-- Header Toolbar -->
+  <div class="mapper-toolbar">
+    <div class="toolbar-title">
+      <mat-icon>account_tree</mat-icon>
+      <span>Data Mapper</span>
+    </div>
+    <div class="toolbar-actions">
+      <span class="mapping-count">{{ mappings().length }} mapping(s)</span>
+      <button
+        mat-icon-button
+        matTooltip="Clear all mappings"
+        (click)="clearAllMappings()"
+        [disabled]="mappings().length === 0"
+      >
+        <mat-icon>delete_sweep</mat-icon>
+      </button>
+    </div>
+  </div>
+
+  <!-- Main Mapper Area -->
+  <div class="mapper-container" #svgContainer>
+    <!-- Source Schema Panel -->
+    <div class="schema-panel source-panel">
+      <schema-tree
+        [schema]="sourceSchemaForTree()"
+        [side]="'source'"
+        [mappings]="mappings()"
+        (fieldDragStart)="onFieldDragStart($event)"
+        (fieldPositionsChanged)="onSourcePositionsChanged($event)"
+        (sourceDrop)="onSourceFieldDrop($event)"
+      ></schema-tree>
+    </div>
+
+    <!-- SVG Connection Layer -->
+    <svg class="connection-layer" #svgElement>
+      <!-- Existing connections -->
+      @for (connection of connections(); track trackByConnectionId($index, connection)) {
+        <g class="connection-group" [class.selected]="connection.isSelected" [class.array-mapping]="connection.isArrayMapping" [class.array-to-object-mapping]="connection.isArrayToObjectMapping" [class.being-dragged]="connection.isBeingDragged">
+          <!-- Connection paths -->
+          @for (path of connection.paths; track $index) {
+            <!-- Shadow path for glow effect -->
+            <path
+              [attr.d]="path"
+              fill="none"
+              [attr.stroke]="connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))"
+              stroke-width="6"
+              stroke-opacity="0.2"
+              stroke-linecap="round"
+            />
+            <!-- Main connection path -->
+            <path
+              [attr.d]="path"
+              class="connection-path"
+              [class.selected]="connection.isSelected"
+              [class.array-path]="connection.isArrayMapping"
+              [class.array-to-object-path]="connection.isArrayToObjectMapping"
+              [attr.stroke]="connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))"
+              fill="none"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              [attr.stroke-dasharray]="connection.isArrayMapping || connection.isArrayToObjectMapping ? '8,4' : 'none'"
+              (click)="onConnectionClick(connection, $event)"
+            />
+            <!-- Invisible wider path for easier clicking -->
+            <path
+              [attr.d]="path"
+              class="connection-hitbox"
+              fill="none"
+              stroke="transparent"
+              stroke-width="20"
+              (click)="onConnectionClick(connection, $event)"
+            />
+          }
+
+          <!-- Transformation node -->
+          <g
+            class="transformation-node"
+            [class.has-transformation]="connection.hasTransformation"
+            [class.is-array-mapping]="connection.isArrayMapping"
+            [class.is-array-to-object-mapping]="connection.isArrayToObjectMapping"
+            [attr.transform]="'translate(' + connection.midPoint.x + ',' + connection.midPoint.y + ')'"
+            (click)="onTransformationNodeClick(connection, $event)"
+          >
+            <circle r="14" class="node-bg" [attr.fill]="connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')" [attr.stroke]="connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')" />
+            <text
+              class="node-icon"
+              text-anchor="middle"
+              dominant-baseline="central"
+              font-family="Material Icons"
+              font-size="16"
+              [attr.fill]="connection.isArrayMapping || connection.isArrayToObjectMapping ? 'white' : ''"
+            >
+              {{ getTransformationIcon(connection.mappingId) }}
+            </text>
+          </g>
+
+          <!-- Source endpoint circles (draggable) -->
+          @for (sourcePoint of connection.sourcePoints; track $index) {
+            <circle
+              class="endpoint-handle source-endpoint"
+              [attr.cx]="sourcePoint.x"
+              [attr.cy]="sourcePoint.y"
+              r="6"
+              [class.selected]="connection.isSelected"
+              (mousedown)="onEndpointDragStart(connection, 'source', $index, $event)"
+            />
+          }
+
+          <!-- Target endpoint circle (draggable) -->
+          <circle
+            class="endpoint-handle target-endpoint"
+            [attr.cx]="connection.targetPoint.x"
+            [attr.cy]="connection.targetPoint.y"
+            r="6"
+            [class.selected]="connection.isSelected"
+            (mousedown)="onEndpointDragStart(connection, 'target', 0, $event)"
+          />
+        </g>
+      }
+
+      <!-- Drag preview path -->
+      @if (dragPath()) {
+        <path
+          [attr.d]="dragPath()"
+          class="drag-path"
+          fill="none"
+          stroke="#6366f1"
+          stroke-width="2.5"
+          stroke-dasharray="8,4"
+          stroke-linecap="round"
+        />
+      }
+    </svg>
+
+    <!-- Target Schema Panel -->
+    <div class="schema-panel target-panel">
+      <schema-tree
+        [schema]="targetSchemaForTree()"
+        [side]="'target'"
+        [mappings]="mappings()"
+        [defaultValues]="defaultValues()"
+        (fieldDrop)="onFieldDrop($event)"
+        (fieldPositionsChanged)="onTargetPositionsChanged($event)"
+        (fieldDefaultValueClick)="onDefaultValueClick($event)"
+      ></schema-tree>
+    </div>
+  </div>
+
+  <!-- Instructions -->
+  @if (mappings().length === 0) {
+    <div class="empty-state">
+      <mat-icon>drag_indicator</mat-icon>
+      <p>Drag fields from the source schema to the target schema to create mappings</p>
+    </div>
+  }
+</div>
+
+<!-- Transformation Popover -->
+@if (showPopover() && selectedMapping()) {
+  <transformation-popover
+    [mapping]="selectedMapping()!"
+    [position]="popoverPosition()!"
+    [sampleData]="sampleData"
+    (save)="onPopoverSave($event)"
+    (delete)="onPopoverDelete()"
+    (close)="closePopover()"
+  ></transformation-popover>
+}
+
+<!-- Array Filter Modal -->
+@if (showArrayFilterModal() && selectedArrayMapping()) {
+  <array-filter-modal
+    [arrayMapping]="selectedArrayMapping()!"
+    (save)="onArrayFilterSave($event)"
+    (close)="closeArrayFilterModal()"
+  ></array-filter-modal>
+}
+
+<!-- Array Selector Modal (for array-to-object) -->
+@if (showArraySelectorModal() && selectedArrayToObjectMapping()) {
+  <array-selector-modal
+    [mapping]="selectedArrayToObjectMapping()!"
+    (save)="onArraySelectorSave($event)"
+    (close)="closeArraySelectorModal()"
+  ></array-selector-modal>
+}
+
+<!-- Default Value Popover -->
+@if (showDefaultValuePopover() && selectedDefaultValueField()) {
+  <default-value-popover
+    [field]="selectedDefaultValueField()!"
+    [existingValue]="getExistingDefaultValue(selectedDefaultValueField()!.id)"
+    [position]="defaultValuePopoverPosition()!"
+    (save)="onDefaultValueSave($event)"
+    (delete)="onDefaultValueDelete()"
+    (close)="closeDefaultValuePopover()"
+  ></default-value-popover>
+}