angular-data-mapper 1.0.0

package/projects/ngx-data-mapper/src/lib/components/transformation-popover/transformation-popover.component.ts

@@ -0,0 +1,368 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  inject,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
+import {
+  FieldMapping,
+  FilterGroup,
+  TransformationConfig,
+  TransformationType,
+} from '../../models/schema.model';
+import { ConditionBuilderComponent } from '../condition-builder/condition-builder.component';
+import { TransformationService } from '../../services/transformation.service';
+
+@Component({
+  selector: 'transformation-popover',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule,
+    MatButtonModule,
+    MatSelectModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatTooltipModule,
+    MatCheckboxModule,
+    DragDropModule,
+    ConditionBuilderComponent,
+  ],
+  templateUrl: './transformation-popover.component.html',
+  styleUrl: './transformation-popover.component.scss',
+})
+export class TransformationPopoverComponent implements OnInit, OnChanges {
+  @Input() mapping!: FieldMapping;
+  @Input() position: { x: number; y: number } = { x: 0, y: 0 };
+  @Input() sampleData: Record<string, unknown> = {};
+
+  @Output() save = new EventEmitter<TransformationConfig[]>();
+  @Output() delete = new EventEmitter<void>();
+  @Output() close = new EventEmitter<void>();
+
+  private transformationService = inject(TransformationService);
+
+  // Array of transformation steps
+  steps: TransformationConfig[] = [];
+
+  // Preview results for each step
+  stepPreviews: string[] = [];
+  // Input values for each step (to show input → output)
+  stepInputs: string[] = [];
+  finalPreview: string = '';
+
+  // Track which step is expanded (-1 means none, used in single-step mode)
+  expandedStepIndex: number = -1;
+
+  availableTransformations = this.transformationService.getAvailableTransformations();
+
+  ngOnInit(): void {
+    this.initFromMapping();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['mapping'] || changes['sampleData']) {
+      this.initFromMapping();
+    }
+  }
+
+  private initFromMapping(): void {
+    if (this.mapping) {
+      // Copy transformations array, with fallback for empty/undefined
+      if (this.mapping.transformations && this.mapping.transformations.length > 0) {
+        this.steps = this.mapping.transformations.map(t => ({ ...t }));
+      } else {
+        // Fallback to a single direct transformation
+        this.steps = [{ type: 'direct' }];
+      }
+      this.updatePreview();
+    }
+  }
+
+  // Check if we're in multi-step mode (more than one step)
+  get isMultiStep(): boolean {
+    return this.steps.length > 1;
+  }
+
+  onStepTypeChange(index: number): void {
+    const step = this.steps[index];
+
+    // Set defaults based on type
+    switch (step.type) {
+      case 'concat':
+        step.separator = step.separator ?? ' ';
+        step.template = step.template ?? this.getDefaultTemplate();
+        break;
+      case 'substring':
+        step.startIndex = step.startIndex ?? 0;
+        step.endIndex = step.endIndex ?? 10;
+        break;
+      case 'replace':
+        step.searchValue = step.searchValue ?? '';
+        step.replaceValue = step.replaceValue ?? '';
+        break;
+      case 'dateFormat':
+        step.outputFormat = step.outputFormat ?? 'YYYY-MM-DD';
+        break;
+      case 'numberFormat':
+        step.decimalPlaces = step.decimalPlaces ?? 2;
+        break;
+      case 'mask':
+        step.pattern = step.pattern ?? '(###) ###-####';
+        break;
+    }
+
+    this.updatePreview();
+  }
+
+  private getDefaultTemplate(): string {
+    return this.mapping.sourceFields.map((_, i) => `{${i}}`).join(' ');
+  }
+
+  addStep(): void {
+    this.steps.push({ type: 'direct' });
+    // Expand the newly added step
+    this.expandedStepIndex = this.steps.length - 1;
+    this.updatePreview();
+  }
+
+  removeStep(index: number): void {
+    if (this.steps.length > 1) {
+      this.steps.splice(index, 1);
+      // Collapse after deletion
+      this.expandedStepIndex = -1;
+      this.updatePreview();
+    }
+  }
+
+  onStepDrop(event: CdkDragDrop<TransformationConfig[]>): void {
+    if (event.previousIndex !== event.currentIndex) {
+      moveItemInArray(this.steps, event.previousIndex, event.currentIndex);
+      // Move expanded index with the step
+      if (this.expandedStepIndex === event.previousIndex) {
+        this.expandedStepIndex = event.currentIndex;
+      } else if (
+        this.expandedStepIndex > event.previousIndex &&
+        this.expandedStepIndex <= event.currentIndex
+      ) {
+        this.expandedStepIndex--;
+      } else if (
+        this.expandedStepIndex < event.previousIndex &&
+        this.expandedStepIndex >= event.currentIndex
+      ) {
+        this.expandedStepIndex++;
+      }
+      this.updatePreview();
+    }
+  }
+
+  toggleStep(index: number): void {
+    if (this.expandedStepIndex === index) {
+      this.expandedStepIndex = -1; // Collapse
+    } else {
+      this.expandedStepIndex = index; // Expand
+    }
+  }
+
+  isStepExpanded(index: number): boolean {
+    return this.expandedStepIndex === index;
+  }
+
+  updatePreview(): void {
+    if (!this.mapping || !this.sampleData) {
+      this.stepPreviews = [];
+      this.stepInputs = [];
+      this.finalPreview = '';
+      return;
+    }
+
+    this.stepPreviews = [];
+    this.stepInputs = [];
+    let currentValue: unknown = null;
+
+    // Get initial input from source fields
+    const initialValues = this.mapping.sourceFields
+      .map(f => this.getValueByPath(this.sampleData, f.path))
+      .map(v => String(v ?? ''));
+    const initialInput = initialValues.join(', ');
+
+    // For the first step, use the source fields from sample data
+    for (let i = 0; i < this.steps.length; i++) {
+      const step = this.steps[i];
+
+      if (i === 0) {
+        // First step: input is from source fields
+        this.stepInputs.push(initialInput);
+        // Check condition before applying transformation
+        if (this.transformationService.isConditionMet(initialInput, step)) {
+          currentValue = this.transformationService.applyTransformation(
+            this.sampleData,
+            this.mapping.sourceFields,
+            step
+          );
+        } else {
+          currentValue = initialInput; // Pass through if condition not met
+        }
+      } else {
+        // Subsequent steps: input is previous output
+        this.stepInputs.push(this.stepPreviews[i - 1]);
+        // Check condition before applying transformation
+        if (this.transformationService.isConditionMet(currentValue, step)) {
+          currentValue = this.transformationService.applyTransformationToValue(
+            currentValue,
+            step
+          );
+        }
+        // If condition not met, currentValue passes through unchanged
+      }
+
+      this.stepPreviews.push(String(currentValue ?? ''));
+    }
+
+    this.finalPreview = this.stepPreviews[this.stepPreviews.length - 1] || '';
+  }
+
+  private getValueByPath(obj: Record<string, unknown>, path: string): unknown {
+    return path.split('.').reduce((acc: unknown, part) => {
+      if (acc && typeof acc === 'object') {
+        return (acc as Record<string, unknown>)[part];
+      }
+      return undefined;
+    }, obj);
+  }
+
+  onConfigChange(): void {
+    this.updatePreview();
+  }
+
+  onSave(): void {
+    // Filter out 'direct' transformations if they're not the only one
+    const cleanedSteps = this.steps.length === 1
+      ? this.steps
+      : this.steps.filter(s => s.type !== 'direct');
+
+    // If all filtered out, keep at least one direct
+    const finalSteps = cleanedSteps.length > 0 ? cleanedSteps : [{ type: 'direct' as TransformationType }];
+
+    this.save.emit(finalSteps);
+  }
+
+  onDelete(): void {
+    this.delete.emit();
+  }
+
+  onClose(): void {
+    this.close.emit();
+  }
+
+  getSourceFieldNames(): string {
+    return this.mapping.sourceFields.map((f) => f.name).join(', ');
+  }
+
+  getPopoverStyle(): Record<string, string> {
+    return {
+      left: `${this.position.x}px`,
+      top: `${this.position.y}px`,
+    };
+  }
+
+  getStepTypeLabel(type: TransformationType): string {
+    const t = this.availableTransformations.find(t => t.type === type);
+    return t?.label || type;
+  }
+
+  // Condition methods
+  hasCondition(step: TransformationConfig): boolean {
+    return step.condition?.enabled === true;
+  }
+
+  toggleCondition(step: TransformationConfig, enabled: boolean): void {
+    if (enabled) {
+      if (!step.condition) {
+        step.condition = {
+          enabled: true,
+          root: this.createEmptyConditionGroup(),
+        };
+      } else {
+        step.condition.enabled = true;
+      }
+    } else {
+      if (step.condition) {
+        step.condition.enabled = false;
+      }
+    }
+  }
+
+  onConditionChange(step: TransformationConfig, group: FilterGroup): void {
+    if (step.condition) {
+      step.condition.root = group;
+    }
+  }
+
+  private createEmptyConditionGroup(): FilterGroup {
+    return {
+      id: `cond-${Date.now()}`,
+      type: 'group',
+      logic: 'and',
+      children: [],
+    };
+  }
+
+  getConditionSummary(step: TransformationConfig): string {
+    if (!step.condition?.enabled || !step.condition.root) return '';
+    return this.summarizeConditionGroup(step.condition.root);
+  }
+
+  private summarizeConditionGroup(group: FilterGroup): string {
+    if (group.children.length === 0) return '';
+
+    const parts = group.children.map(child => {
+      if (child.type === 'condition') {
+        const opLabel = this.getOperatorLabel(child.operator);
+        if (['isEmpty', 'isNotEmpty', 'isTrue', 'isFalse'].includes(child.operator)) {
+          return opLabel;
+        }
+        return `${opLabel} "${child.value}"`;
+      } else {
+        return `(${this.summarizeConditionGroup(child)})`;
+      }
+    });
+
+    return parts.join(` ${group.logic.toUpperCase()} `);
+  }
+
+  private getOperatorLabel(operator: string): string {
+    const labels: Record<string, string> = {
+      equals: '=',
+      notEquals: '!=',
+      contains: 'contains',
+      notContains: 'not contain',
+      startsWith: 'starts with',
+      endsWith: 'ends with',
+      isEmpty: 'is empty',
+      isNotEmpty: 'is not empty',
+      greaterThan: '>',
+      lessThan: '<',
+      greaterThanOrEqual: '>=',
+      lessThanOrEqual: '<=',
+      isTrue: 'is true',
+      isFalse: 'is false',
+    };
+    return labels[operator] || operator;
+  }
+}

package/projects/ngx-data-mapper/src/lib/models/json-schema.model.ts

@@ -0,0 +1,164 @@
+/**
+ * Standard JSON Schema (draft-07) TypeScript interfaces
+ */
+
+export interface JsonSchema {
+  $schema?: string;
+  $id?: string;
+  title?: string;
+  description?: string;
+  type?: JsonSchemaType | JsonSchemaType[];
+  properties?: Record<string, JsonSchema>;
+  items?: JsonSchema;
+  required?: string[];
+  enum?: (string | number | boolean | null)[];
+  const?: unknown;
+  default?: unknown;
+
+  // String validations
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  format?: string;
+
+  // Number validations
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: number;
+  exclusiveMaximum?: number;
+  multipleOf?: number;
+
+  // Array validations
+  minItems?: number;
+  maxItems?: number;
+  uniqueItems?: boolean;
+
+  // Object validations
+  minProperties?: number;
+  maxProperties?: number;
+  additionalProperties?: boolean | JsonSchema;
+
+  // Combining schemas
+  allOf?: JsonSchema[];
+  anyOf?: JsonSchema[];
+  oneOf?: JsonSchema[];
+  not?: JsonSchema;
+
+  // References
+  $ref?: string;
+  definitions?: Record<string, JsonSchema>;
+}
+
+export type JsonSchemaType = 'string' | 'number' | 'integer' | 'boolean' | 'object' | 'array' | 'null';
+
+/**
+ * Helper type for working with JSON schemas in the UI
+ */
+export interface JsonSchemaField {
+  name: string;
+  path: string;
+  schema: JsonSchema;
+  children?: JsonSchemaField[];
+  expanded?: boolean;
+}
+
+/**
+ * Convert JSON Schema to flat field list for UI rendering
+ */
+export function schemaToFields(schema: JsonSchema, parentPath: string = ''): JsonSchemaField[] {
+  const fields: JsonSchemaField[] = [];
+
+  if (schema.type === 'object' && schema.properties) {
+    for (const [name, propSchema] of Object.entries(schema.properties)) {
+      const path = parentPath ? `${parentPath}.${name}` : name;
+      const field: JsonSchemaField = {
+        name,
+        path,
+        schema: propSchema,
+        expanded: false,
+      };
+
+      if (propSchema.type === 'object' && propSchema.properties) {
+        field.children = schemaToFields(propSchema, path);
+      } else if (propSchema.type === 'array' && propSchema.items) {
+        field.children = schemaToFields(propSchema.items, `${path}[]`);
+      }
+
+      fields.push(field);
+    }
+  }
+
+  return fields;
+}
+
+/**
+ * Get the simple type for display purposes
+ */
+export function getSchemaType(schema: JsonSchema): string {
+  if (Array.isArray(schema.type)) {
+    return schema.type.filter(t => t !== 'null').join(' | ');
+  }
+  if (schema.type === 'integer') {
+    return 'number';
+  }
+  if (schema.format === 'date' || schema.format === 'date-time') {
+    return 'date';
+  }
+  return schema.type || 'any';
+}
+
+/**
+ * Create an empty JSON Schema for a new schema definition
+ */
+export function createEmptySchema(title: string = 'New Schema'): JsonSchema {
+  return {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    title,
+    type: 'object',
+    properties: {},
+    required: [],
+  };
+}
+
+/**
+ * Add a property to a schema
+ */
+export function addProperty(
+  schema: JsonSchema,
+  name: string,
+  type: JsonSchemaType,
+  options?: { description?: string; required?: boolean }
+): JsonSchema {
+  const newSchema = { ...schema };
+  newSchema.properties = { ...newSchema.properties };
+
+  const propSchema: JsonSchema = { type };
+  if (options?.description) {
+    propSchema.description = options.description;
+  }
+
+  if (type === 'object') {
+    propSchema.properties = {};
+  } else if (type === 'array') {
+    propSchema.items = { type: 'string' };
+  }
+
+  newSchema.properties[name] = propSchema;
+
+  if (options?.required) {
+    newSchema.required = [...(newSchema.required || []), name];
+  }
+
+  return newSchema;
+}
+
+/**
+ * Remove a property from a schema
+ */
+export function removeProperty(schema: JsonSchema, name: string): JsonSchema {
+  const newSchema = { ...schema };
+  newSchema.properties = { ...newSchema.properties };
+  delete newSchema.properties[name];
+  newSchema.required = (newSchema.required || []).filter(r => r !== name);
+  return newSchema;
+}

package/projects/ngx-data-mapper/src/lib/models/schema.model.ts

@@ -0,0 +1,173 @@
+export interface SchemaField {
+  id: string;
+  name: string;
+  type: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'date';
+  path: string;
+  children?: SchemaField[];
+  expanded?: boolean;
+  description?: string;
+  isArrayItem?: boolean; // Marks fields that are children of an array
+  parentArrayPath?: string; // Path to parent array for context
+}
+
+export interface SchemaDefinition {
+  name: string;
+  fields: SchemaField[];
+}
+
+export type TransformationType =
+  | 'direct'
+  | 'concat'
+  | 'substring'
+  | 'replace'
+  | 'uppercase'
+  | 'lowercase'
+  | 'trim'
+  | 'mask'
+  | 'dateFormat'
+  | 'extractYear'
+  | 'extractMonth'
+  | 'extractDay'
+  | 'extractHour'
+  | 'extractMinute'
+  | 'extractSecond'
+  | 'numberFormat'
+  | 'template';
+
+export interface TransformationCondition {
+  enabled: boolean;
+  root: FilterGroup;
+}
+
+export interface TransformationConfig {
+  type: TransformationType;
+  // For concat
+  separator?: string;
+  template?: string;
+  // For substring
+  startIndex?: number;
+  endIndex?: number;
+  // For replace
+  searchValue?: string;
+  replaceValue?: string;
+  // For date format
+  inputFormat?: string;
+  outputFormat?: string;
+  // For number format
+  decimalPlaces?: number;
+  prefix?: string;
+  suffix?: string;
+  // For mask
+  pattern?: string;
+  // Optional condition - transformation only applies if condition is met
+  condition?: TransformationCondition;
+}
+
+export interface FieldMapping {
+  id: string;
+  sourceFields: SchemaField[];
+  targetField: SchemaField;
+  transformations: TransformationConfig[]; // Array of transformation steps applied in sequence
+  // For array-to-array mappings
+  isArrayMapping?: boolean;
+  arrayMappingId?: string; // Reference to parent array mapping
+  // For array-to-object mappings
+  isArrayToObjectMapping?: boolean;
+  arrayToObjectMappingId?: string; // Reference to parent array-to-object mapping
+}
+
+export type FilterOperator =
+  | 'equals'
+  | 'notEquals'
+  | 'contains'
+  | 'notContains'
+  | 'startsWith'
+  | 'endsWith'
+  | 'greaterThan'
+  | 'lessThan'
+  | 'greaterThanOrEqual'
+  | 'lessThanOrEqual'
+  | 'isEmpty'
+  | 'isNotEmpty'
+  | 'isTrue'
+  | 'isFalse';
+
+export interface FilterCondition {
+  id: string;
+  type: 'condition';
+  field: string; // Field path within the array item
+  fieldName: string; // Display name
+  operator: FilterOperator;
+  value: string | number | boolean;
+  valueType: 'string' | 'number' | 'boolean';
+}
+
+export interface FilterGroup {
+  id: string;
+  type: 'group';
+  logic: 'and' | 'or';
+  children: FilterItem[];
+}
+
+export type FilterItem = FilterCondition | FilterGroup;
+
+export interface ArrayFilterConfig {
+  enabled: boolean;
+  root: FilterGroup;
+}
+
+export interface ArrayMapping {
+  id: string;
+  sourceArray: SchemaField;
+  targetArray: SchemaField;
+  itemMappings: FieldMapping[]; // Mappings for fields within the array items
+  filter?: ArrayFilterConfig; // Optional filter on source array
+}
+
+// Selection mode for array-to-object mapping
+export type ArraySelectionMode = 'first' | 'last' | 'condition';
+
+export interface ArraySelectorConfig {
+  mode: ArraySelectionMode;
+  condition?: FilterGroup; // Reuse filter group for condition mode
+}
+
+export interface ArrayToObjectMapping {
+  id: string;
+  sourceArray: SchemaField;
+  targetObject: SchemaField;
+  selector: ArraySelectorConfig; // How to select the single item
+  itemMappings: FieldMapping[]; // Mappings for fields within the selected item
+}
+
+export interface ConnectionPoint {
+  fieldId: string;
+  side: 'source' | 'target';
+  x: number;
+  y: number;
+}
+
+export interface Connection {
+  id: string;
+  mappingId: string;
+  sourcePoints: ConnectionPoint[];
+  targetPoint: ConnectionPoint;
+  transformations: TransformationConfig[];
+}
+
+export interface DragState {
+  isDragging: boolean;
+  sourceField: SchemaField | null;
+  startPoint: { x: number; y: number } | null;
+  currentPoint: { x: number; y: number } | null;
+  // For endpoint dragging (moving existing connection)
+  dragMode: 'new' | 'move-source' | 'move-target';
+  mappingId?: string;  // The mapping being modified when moving endpoint
+  sourceFieldIndex?: number;  // For multi-source mappings, which source is being moved
+}
+
+export interface DefaultValue {
+  id: string;
+  targetField: SchemaField;
+  value: string | number | boolean | Date | null;
+}