angular-data-mapper 1.0.0

package/projects/ngx-data-mapper/src/lib/components/array-filter-modal/array-filter-modal.component.scss

@@ -0,0 +1,352 @@
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.filter-modal {
+  position: relative;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  width: 600px;
+  max-width: 100%;
+  max-height: calc(100vh - 40px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  color: white;
+  flex-shrink: 0;
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .array-path {
+    flex: 1;
+    font-size: 13px;
+    opacity: 0.9;
+    text-align: right;
+    margin-right: 8px;
+  }
+
+  .close-btn {
+    color: white;
+    opacity: 0.9;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  min-height: 0;
+}
+
+.filter-mode {
+  mat-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .mode-option {
+    ::ng-deep .mdc-form-field {
+      align-items: flex-start;
+    }
+
+    ::ng-deep .mdc-radio {
+      margin-top: 4px;
+    }
+  }
+
+  .mode-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    transition: all 0.2s ease;
+    cursor: pointer;
+
+    &:hover {
+      background: #f1f5f9;
+      border-color: #cbd5e1;
+    }
+
+    mat-icon {
+      color: #64748b;
+      margin-top: 2px;
+    }
+  }
+
+  .mode-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .mode-label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #1e293b;
+  }
+
+  .mode-desc {
+    font-size: 12px;
+    color: #64748b;
+  }
+
+  mat-radio-button.mat-mdc-radio-checked {
+    .mode-content {
+      background: #fffbeb;
+      border-color: #f59e0b;
+
+      mat-icon {
+        color: #f59e0b;
+      }
+    }
+  }
+}
+
+mat-divider {
+  margin: 20px 0;
+}
+
+.conditions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+// Group styles
+.filter-group {
+  border-radius: 8px;
+
+  &.root-group {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    padding: 16px;
+  }
+
+  &.nested-group {
+    background: white;
+    border: 2px dashed #cbd5e1;
+    padding: 12px;
+    margin-top: 8px;
+  }
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.logic-toggle {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  .logic-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: #475569;
+  }
+
+  mat-radio-group {
+    display: flex;
+    gap: 12px;
+  }
+
+  mat-radio-button {
+    font-size: 12px;
+
+    ::ng-deep .mdc-label {
+      font-size: 12px;
+    }
+  }
+}
+
+.remove-group-btn {
+  color: #94a3b8;
+
+  &:hover {
+    color: #ef4444;
+  }
+}
+
+.group-children {
+  display: flex;
+  flex-direction: column;
+}
+
+.logic-connector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+
+  .logic-badge {
+    font-size: 10px;
+    font-weight: 700;
+    padding: 3px 10px;
+    border-radius: 12px;
+    letter-spacing: 0.5px;
+
+    &.and {
+      background: #dbeafe;
+      color: #1d4ed8;
+    }
+
+    &.or {
+      background: #fef3c7;
+      color: #b45309;
+    }
+  }
+}
+
+.condition-row {
+  .condition-inputs {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+
+    .field-select {
+      flex: 1;
+      min-width: 120px;
+    }
+
+    .operator-select {
+      flex: 1;
+      min-width: 130px;
+    }
+
+    .value-input {
+      flex: 1;
+      min-width: 100px;
+    }
+
+    .bool-toggle {
+      padding-top: 12px;
+      min-width: 80px;
+    }
+
+    .remove-btn {
+      color: #94a3b8;
+      align-self: center;
+
+      &:hover {
+        color: #ef4444;
+      }
+    }
+
+    mat-form-field {
+      ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+        display: none;
+      }
+    }
+  }
+}
+
+.nested-group .condition-row .condition-inputs {
+  background: #f8fafc;
+}
+
+.field-type {
+  font-size: 11px;
+  color: #94a3b8;
+  margin-left: 4px;
+}
+
+.empty-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  background: #fef3c7;
+  border-radius: 8px;
+  color: #92400e;
+  font-size: 13px;
+
+  mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.group-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.add-condition-btn {
+  color: #f59e0b;
+  border-color: #f59e0b;
+  font-size: 12px;
+
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.add-group-btn {
+  color: #6366f1;
+  border-color: #6366f1;
+  font-size: 12px;
+
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,277 @@
+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 {
+  ArrayMapping,
+  ArrayFilterConfig,
+  FilterCondition,
+  FilterGroup,
+  FilterItem,
+  FilterOperator,
+  SchemaField,
+} from '../../models/schema.model';
+
+interface OperatorOption {
+  value: FilterOperator;
+  label: string;
+  needsValue: boolean;
+}
+
+@Component({
+  selector: 'array-filter-modal',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSelectModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    MatSlideToggleModule,
+    MatTooltipModule,
+    MatDividerModule,
+  ],
+  templateUrl: './array-filter-modal.component.html',
+  styleUrl: './array-filter-modal.component.scss',
+})
+export class ArrayFilterModalComponent implements OnInit {
+  @Input({ required: true }) arrayMapping!: ArrayMapping;
+  @Output() save = new EventEmitter<ArrayFilterConfig | undefined>();
+  @Output() close = new EventEmitter<void>();
+
+  filterEnabled = signal(false);
+  rootGroup = 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.arrayMapping.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 filter config
+    if (this.arrayMapping.filter?.enabled && this.arrayMapping.filter.root) {
+      this.filterEnabled.set(true);
+      this.rootGroup.set(this.cloneGroup(this.arrayMapping.filter.root));
+    }
+  }
+
+  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;
+    }
+  }
+
+  getFieldType(fieldPath: string): string {
+    const field = this.availableFields().find((f) => f.path === fieldPath);
+    return field?.type || 'string';
+  }
+
+  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', // Default to opposite logic
+      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';
+      // Reset operator to first valid option for new type
+      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 {
+    // Trigger signal update by creating a new reference
+    this.rootGroup.set(this.cloneGroup(this.rootGroup()));
+  }
+
+  hasConditions(group: FilterGroup): boolean {
+    return group.children.length > 0;
+  }
+
+  countConditions(group: FilterGroup): number {
+    let count = 0;
+    for (const child of group.children) {
+      if (child.type === 'condition') {
+        count++;
+      } else {
+        count += this.countConditions(child);
+      }
+    }
+    return count;
+  }
+
+  onSave(): void {
+    if (!this.filterEnabled()) {
+      this.save.emit(undefined);
+    } else {
+      this.save.emit({
+        enabled: true,
+        root: this.rootGroup(),
+      });
+    }
+  }
+
+  onClose(): void {
+    this.close.emit();
+  }
+
+  onBackdropClick(event: MouseEvent): void {
+    if ((event.target as HTMLElement).classList.contains('modal-backdrop')) {
+      this.onClose();
+    }
+  }
+}