angular-data-mapper 1.0.0

package/projects/demo-app/src/app/pages/mapper-page/mapper-page.component.scss

@@ -0,0 +1,202 @@
+/**
+ * Mapper Page Styles
+ *
+ * Theme Examples:
+ *
+ * DARK THEME (currently applied below):
+ * data-mapper {
+ *   --data-mapper-bg: #1e293b;
+ *   --data-mapper-panel-bg: #334155;
+ *   --data-mapper-text-primary: #f1f5f9;
+ *   --data-mapper-accent-primary: #818cf8;
+ *   --data-mapper-connector-color: #818cf8;
+ * }
+ *
+ * LIGHT THEME:
+ * data-mapper {
+ *   --data-mapper-bg: #f8fafc;
+ *   --data-mapper-panel-bg: #ffffff;
+ *   --data-mapper-panel-header-bg: #f1f5f9;
+ *   --data-mapper-text-primary: #1e293b;
+ *   --data-mapper-text-secondary: #64748b;
+ *   --data-mapper-text-muted: #94a3b8;
+ *   --data-mapper-accent-primary: #6366f1;
+ *   --data-mapper-connector-color: #6366f1;
+ *   --data-mapper-border-color: #e2e8f0;
+ *   --data-mapper-toolbar-bg: #ffffff;
+ *   --data-mapper-toolbar-border: #e2e8f0;
+ * }
+ *
+ * GREEN ACCENT THEME:
+ * data-mapper {
+ *   --data-mapper-bg: #f0fdf4;
+ *   --data-mapper-panel-bg: #ffffff;
+ *   --data-mapper-accent-primary: #10b981;
+ *   --data-mapper-connector-color: #10b981;
+ * }
+ */
+
+.page-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #f8fafc;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 32px;
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  color: #1e293b;
+  flex-shrink: 0;
+
+  .header-title {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+
+    button {
+      color: #64748b;
+      margin-top: 4px;
+    }
+  }
+
+  .title-text {
+    .name-display {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      h1 {
+        font-size: 20px;
+        font-weight: 600;
+        margin: 0;
+        color: #0f172a;
+        letter-spacing: -0.3px;
+      }
+
+      .edit-btn {
+        opacity: 0;
+        transition: opacity 0.15s;
+        width: 28px;
+        height: 28px;
+        color: #94a3b8;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        mat-icon {
+          font-size: 16px;
+          width: 16px;
+          height: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        &:hover {
+          color: #64748b;
+        }
+      }
+
+      &:hover .edit-btn {
+        opacity: 1;
+      }
+    }
+
+    .name-edit {
+      .name-input {
+        font-size: 20px;
+        font-weight: 600;
+        color: #0f172a;
+        letter-spacing: -0.3px;
+        border: 1px solid #6366f1;
+        border-radius: 6px;
+        padding: 4px 8px;
+        outline: none;
+        background: white;
+
+        &:focus {
+          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+      }
+    }
+
+    h1 {
+      font-size: 20px;
+      font-weight: 600;
+      margin: 0;
+      color: #0f172a;
+      letter-spacing: -0.3px;
+    }
+
+    .subtitle {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: #64748b;
+      margin: 2px 0 0;
+
+      .flow-icon {
+        font-size: 14px;
+        width: 14px;
+        height: 14px;
+        color: #cbd5e1;
+      }
+    }
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+
+    button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+}
+
+.page-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  padding: 24px;
+
+  data-mapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    background: white;
+    border-radius: 12px;
+    border: 1px solid #e2e8f0;
+    overflow: hidden;
+
+    // Light theme customization
+    --data-mapper-bg: white;
+    --data-mapper-panel-bg: white;
+    --data-mapper-panel-header-bg: #f8fafc;
+    --data-mapper-panel-border: 1px solid #e2e8f0;
+    --data-mapper-panel-border-radius: 10px;
+    --data-mapper-panel-shadow: none;
+    --data-mapper-text-primary: #1e293b;
+    --data-mapper-text-secondary: #64748b;
+    --data-mapper-text-muted: #94a3b8;
+    --data-mapper-accent-primary: #6366f1;
+    --data-mapper-connector-color: #6366f1;
+    --data-mapper-border-color: #e2e8f0;
+    --data-mapper-toolbar-bg: white;
+    --data-mapper-toolbar-border: #e2e8f0;
+  }
+}

package/projects/demo-app/src/app/pages/mapper-page/mapper-page.component.ts

@@ -0,0 +1,192 @@
+/**
+ * Mapper Page - Example usage of the DataMapperComponent
+ *
+ * This page demonstrates how to:
+ * 1. Use the data-mapper component
+ * 2. Provide source and target schemas
+ * 3. Handle mapping changes
+ * 4. Export/import mappings
+ * 5. Apply custom styling via CSS variables
+ */
+import { Component, inject, OnInit, signal, computed, ViewChild, ElementRef } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DataMapperComponent, SchemaDocument, FieldMapping } from '@expeed/ngx-data-mapper';
+import { AppStateService } from '../../services/app-state.service';
+import { SampleDataService } from '../../services/sample-data.service';
+
+@Component({
+  selector: 'mapper-page',
+  standalone: true,
+  imports: [
+    DataMapperComponent,  // Import the reusable component
+    MatButtonModule,
+    MatIconModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+  ],
+  templateUrl: './mapper-page.component.html',
+  styleUrl: './mapper-page.component.scss',
+})
+export class MapperPageComponent implements OnInit {
+  private sampleDataService = inject(SampleDataService);
+  private snackBar = inject(MatSnackBar);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  appState = inject(AppStateService);
+
+  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
+  @ViewChild(DataMapperComponent) dataMapper!: DataMapperComponent;
+
+  // Current mapping ID from route
+  mappingId = signal<string | null>(null);
+
+  // Computed: current mapping
+  currentMapping = computed(() => {
+    const id = this.mappingId();
+    return this.appState.mappings().find(m => m.id === id) || null;
+  });
+
+  // State: schemas and mappings
+  sourceSchema = signal<SchemaDocument>({ type: 'object', title: '', properties: {} });
+  targetSchema = signal<SchemaDocument>({ type: 'object', title: '', properties: {} });
+  sampleData = signal<Record<string, unknown>>({});
+  mappings = signal<FieldMapping[]>([]);
+
+  // Name editing
+  isEditingName = signal(false);
+
+  startEditName(): void {
+    this.isEditingName.set(true);
+  }
+
+  cancelEditName(): void {
+    this.isEditingName.set(false);
+  }
+
+  saveName(newName: string): void {
+    const trimmed = newName.trim();
+    const id = this.mappingId();
+    if (id && trimmed) {
+      this.appState.updateMapping(id, { name: trimmed });
+    }
+    this.isEditingName.set(false);
+  }
+
+  ngOnInit(): void {
+    // Get mapping ID from route
+    const id = this.route.snapshot.paramMap.get('id');
+    this.mappingId.set(id);
+
+    if (id) {
+      // Load schemas based on the mapping's source and target schema IDs
+      const mapping = this.appState.mappings().find(m => m.id === id);
+      if (mapping) {
+        const sourceSchema = this.appState.schemas().find(s => s.id === mapping.sourceSchemaId);
+        const targetSchema = this.appState.schemas().find(s => s.id === mapping.targetSchemaId);
+
+        if (sourceSchema) {
+          const { id: _, ...schema } = sourceSchema;
+          this.sourceSchema.set(schema as SchemaDocument);
+        }
+        if (targetSchema) {
+          const { id: _, ...schema } = targetSchema;
+          this.targetSchema.set(schema as SchemaDocument);
+        }
+
+        // Load existing mapping data if available
+        if (mapping.mappingData) {
+          this.mappings.set(mapping.mappingData as FieldMapping[]);
+        }
+      }
+    } else {
+      // Fallback to sample data for demo
+      this.sourceSchema.set(this.sampleDataService.getSourceSchema());
+      this.targetSchema.set(this.sampleDataService.getTargetSchema());
+    }
+
+    this.sampleData.set(this.sampleDataService.getSampleData());
+  }
+
+  /**
+   * Handle mapping changes from the data mapper component
+   * This is called whenever the user creates, modifies, or deletes a mapping
+   */
+  onMappingsChange(mappings: FieldMapping[]): void {
+    this.mappings.set(mappings);
+
+    // Save mapping data to AppStateService
+    const id = this.mappingId();
+    if (id) {
+      this.appState.updateMappingData(id, mappings);
+    }
+  }
+
+  // --- Navigation ---
+
+  goBack(): void {
+    this.router.navigate(['/mappings']);
+  }
+
+  // --- Export/Import ---
+
+  /** Export mappings to JSON file */
+  exportMappings(): void {
+    const json = this.dataMapper.exportMappings();
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'mappings.json';
+    link.click();
+
+    URL.revokeObjectURL(url);
+
+    this.snackBar.open('Mappings exported to file', 'Close', {
+      duration: 3000,
+    });
+  }
+
+  /** Open file dialog for import */
+  importMappings(): void {
+    this.fileInput.nativeElement.click();
+  }
+
+  /** Handle file selection for import */
+  onFileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (!input.files?.length) return;
+
+    const file = input.files[0];
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      try {
+        const json = reader.result as string;
+        this.dataMapper.importMappings(json);
+        this.snackBar.open('Mappings imported successfully', 'Close', {
+          duration: 3000,
+        });
+      } catch (error) {
+        this.snackBar.open('Failed to import mappings: invalid file', 'Close', {
+          duration: 3000,
+        });
+      }
+    };
+
+    reader.readAsText(file);
+    input.value = '';
+  }
+
+  /** Clear all mappings */
+  clearMappings(): void {
+    this.dataMapper.clearAllMappings();
+    this.snackBar.open('All mappings cleared', 'Close', {
+      duration: 2000,
+    });
+  }
+}

package/projects/demo-app/src/app/pages/mappings-page/add-mapping-dialog.component.ts

@@ -0,0 +1,163 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatIconModule } from '@angular/material/icon';
+import { StoredSchema } from '../../services/app-state.service';
+
+export interface AddMappingDialogData {
+  schemas: StoredSchema[];
+}
+
+export interface AddMappingResult {
+  name: string;
+  sourceSchemaId: string;
+  targetSchemaId: string;
+}
+
+@Component({
+  selector: 'add-mapping-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatIconModule,
+  ],
+  template: `
+    <h2 mat-dialog-title>Create New Mapping</h2>
+
+    <mat-dialog-content>
+      <div class="form-fields">
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Mapping Name</mat-label>
+          <input matInput [(ngModel)]="name" placeholder="e.g., Contact to Salesforce Lead">
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Source Schema</mat-label>
+          <mat-select [(ngModel)]="sourceSchemaId">
+            @for (schema of data.schemas; track schema.id) {
+              <mat-option [value]="schema.id">
+                <mat-icon>schema</mat-icon>
+                {{ schema.title }}
+              </mat-option>
+            }
+          </mat-select>
+          <mat-hint>The schema to map from</mat-hint>
+        </mat-form-field>
+
+        <div class="arrow-divider">
+          <mat-icon>arrow_downward</mat-icon>
+        </div>
+
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Target Schema</mat-label>
+          <mat-select [(ngModel)]="targetSchemaId">
+            @for (schema of data.schemas; track schema.id) {
+              <mat-option [value]="schema.id">
+                <mat-icon>schema</mat-icon>
+                {{ schema.title }}
+              </mat-option>
+            }
+          </mat-select>
+          <mat-hint>The schema to map to</mat-hint>
+        </mat-form-field>
+
+        @if (data.schemas.length === 0) {
+          <div class="no-schemas-warning">
+            <mat-icon>warning</mat-icon>
+            <span>No schemas available. Please create schemas first.</span>
+          </div>
+        }
+      </div>
+    </mat-dialog-content>
+
+    <mat-dialog-actions align="end">
+      <button mat-button mat-dialog-close>Cancel</button>
+      <button
+        mat-flat-button
+        color="primary"
+        [disabled]="!isValid()"
+        (click)="create()"
+      >
+        Create Mapping
+      </button>
+    </mat-dialog-actions>
+  `,
+  styles: [`
+    .form-fields {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 380px;
+      padding-top: 8px;
+    }
+
+    .full-width {
+      width: 100%;
+    }
+
+    .arrow-divider {
+      display: flex;
+      justify-content: center;
+      padding: 8px 0;
+      color: #94a3b8;
+
+      mat-icon {
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .no-schemas-warning {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 16px;
+      background: #fef3c7;
+      border-radius: 8px;
+      color: #92400e;
+      font-size: 14px;
+
+      mat-icon {
+        color: #f59e0b;
+      }
+    }
+
+    mat-dialog-actions {
+      padding: 16px 24px;
+    }
+  `],
+})
+export class AddMappingDialogComponent {
+  private dialogRef = inject(MatDialogRef<AddMappingDialogComponent>);
+  data = inject<AddMappingDialogData>(MAT_DIALOG_DATA);
+
+  name = '';
+  sourceSchemaId = '';
+  targetSchemaId = '';
+
+  isValid(): boolean {
+    return !!(this.name.trim() && this.sourceSchemaId && this.targetSchemaId);
+  }
+
+  create(): void {
+    if (this.isValid()) {
+      this.dialogRef.close({
+        name: this.name.trim(),
+        sourceSchemaId: this.sourceSchemaId,
+        targetSchemaId: this.targetSchemaId,
+      } as AddMappingResult);
+    }
+  }
+}