verben-ng-ui 0.0.1

package/src/lib/components/data-export/data-export.service.ts

@@ -0,0 +1,152 @@
+import { Injectable } from '@angular/core';
+import {
+  ExportProfile,
+  Operation,
+  ExportItem,
+  ExportItemType,
+} from './data-export.types';
+
+@Injectable()
+export class DataExportService {
+  private profiles: ExportProfile[] = [];
+  private operations: Operation[] = [];
+  private baseProperties: string[] = [];
+
+  constructor() {
+    this.initializeDefaultProfile();
+  }
+
+  private initializeDefaultProfile() {
+    this.profiles = [
+      {
+        id: 'default',
+        name: 'All',
+        items: [],
+      },
+    ];
+  }
+
+  addProfile(profile: ExportProfile): void {
+    this.profiles.push(profile);
+  }
+
+  getProfiles(): ExportProfile[] {
+    return this.profiles;
+  }
+
+  updateProfile(id: string, updatedProfile: ExportProfile): void {
+    const index = this.profiles.findIndex((p) => p.id === id);
+    if (index !== -1) {
+      this.profiles[index] = updatedProfile;
+    }
+  }
+
+  removeProfile(id: string): void {
+    this.profiles = this.profiles.filter((p) => p.id !== id);
+  }
+
+  addOperation(operation: Operation): void {
+    this.operations.push(operation);
+    this.updateDefaultProfile();
+  }
+
+  getOperations(): Operation[] {
+    return this.operations;
+  }
+
+  updateOperation(id: string, updatedOperation: Operation): void {
+    const index = this.operations.findIndex((o) => o.id === id);
+    if (index !== -1) {
+      this.operations[index] = updatedOperation;
+      this.updateDefaultProfile();
+    }
+  }
+
+  removeOperation(id: string): void {
+    this.operations = this.operations.filter((o) => o.id !== id);
+    this.updateDefaultProfile();
+    // Remove operation from all profiles
+    this.profiles.forEach((profile) => {
+      profile.items = profile.items.filter((item) => item.id !== id);
+    });
+  }
+
+  resetAll(): void {
+    this.operations = [];
+    this.baseProperties = [];
+    this.initializeDefaultProfile();
+  }
+
+  getAllItems(): ExportItem[] {
+    return [
+      ...this.baseProperties.map((prop) => ({
+        id: prop,
+        name: prop,
+        type: 'property' as ExportItemType,
+      })),
+      ...this.operations.map((op) => ({
+        id: op.id,
+        name: op.name,
+        type: 'operation' as ExportItemType,
+      })),
+    ];
+  }
+
+  getBaseProperties(): string[] {
+    return this.baseProperties;
+  }
+
+  setBaseProperties(properties: string[]): void {
+    this.baseProperties = properties;
+    this.updateDefaultProfile();
+  }
+
+  private updateDefaultProfile(): void {
+    this.profiles[0].items = this.getAllItems();
+  }
+
+  exportData<T>(
+    data: T[],
+    selectedProfiles: ExportProfile[]
+  ): Record<string, any>[] {
+    const uniqueItems = new Set<ExportItem>();
+    selectedProfiles.forEach((profile) => {
+      profile.items.forEach((item) => uniqueItems.add(item));
+    });
+
+    return data.map((item) => {
+      const exportedItem: Record<string, any> = {};
+      uniqueItems.forEach((exportItem) => {
+        if (exportItem.type === 'property') {
+          exportedItem[exportItem.id] = (item as any)[exportItem.id];
+        } else {
+          const operation = this.operations.find((o) => o.id === exportItem.id);
+          if (operation) {
+            exportedItem[exportItem.id] = this.calculateOperation(
+              item,
+              operation
+            );
+          }
+        }
+      });
+      return exportedItem;
+    });
+  }
+
+  private calculateOperation<T>(item: T, operation: Operation): number {
+    const value1 = Number((item as any)[operation.field1]);
+    const value2 = Number((item as any)[operation.field2]);
+    switch (operation.operator) {
+      case 'add':
+        return value1 + value2;
+      case 'subtract':
+        return value1 - value2;
+      case 'multiply':
+        return value1 * value2;
+      case 'divide':
+        return value2 !== 0 ? value1 / value2 : NaN;
+      default:
+        return NaN;
+    }
+  }
+}

package/src/lib/components/data-export/data-export.types.ts

@@ -0,0 +1,21 @@
+export type ExportItemType = 'property' | 'operation';
+
+export interface ExportItem {
+  id: string;
+  name: string;
+  type: ExportItemType;
+}
+
+export interface ExportProfile {
+  id: string;
+  name: string;
+  items: ExportItem[];
+}
+
+export interface Operation {
+  id: string;
+  name: string;
+  field1: string;
+  operator: 'add' | 'subtract' | 'multiply' | 'divide';
+  field2: string;
+}

package/src/lib/components/data-table/column.directive.spec.ts

@@ -0,0 +1,8 @@
+import { ColumnDirective } from './column.directive';
+
+describe('ColumnDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ColumnDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/src/lib/components/data-table/column.directive.ts

@@ -0,0 +1,19 @@
+import {
+  ContentChild,
+  Directive,
+  Input,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+
+@Directive({
+  selector: '[libColumn]',
+})
+export class ColumnDirective {
+  @Input('libColumn') columnId!: string;
+
+  @ContentChild('cell', { static: true }) cellTemplate?: TemplateRef<any>;
+  @ContentChild('cellEdit', { static: true }) cellEditTemplate?: TemplateRef<any>;
+  @ContentChild('header', { static: true }) headerTemplate?: TemplateRef<any>;
+  @ContentChild('footer', { static: true }) footerTemplate?: TemplateRef<any>;
+}

package/src/lib/components/data-table/data-table.component.html

@@ -0,0 +1,55 @@
+<!-- <table [ngStyle]="styleConfig">
+  <thead>
+    <tr [ngStyle]="styleConfig?.header">
+      @for (column of columnsSignal(); track column.id) {
+      <th [ngStyle]="styleConfig?.cells">
+        @if (column.headerTemplate) {
+        <ng-container
+          [ngTemplateOutlet]="column.headerTemplate"
+          [ngTemplateOutletContext]="getHeaderContext(column)"
+        ></ng-container>
+        } @else {
+        {{ column.header }}
+        }
+      </th>
+      }
+    </tr>
+  </thead>
+  <tbody>
+    @for (row of data; track row.id; let rowIndex = $index) {
+    <tr [ngStyle]="getRowStyle(rowIndex)">
+      @for (column of columnsSignal(); track column.id) {
+      <td [ngStyle]="styleConfig?.cells">
+        @if (isRowEditing(row.id) && column.cellEditTemplate) {
+        <ng-container
+          [ngTemplateOutlet]="column.cellEditTemplate"
+          [ngTemplateOutletContext]="getCellContext(row, column, rowIndex)"
+        ></ng-container>
+        } @else if (column.cellTemplate) {
+        <ng-container
+          [ngTemplateOutlet]="column.cellTemplate"
+          [ngTemplateOutletContext]="getCellContext(row, column, rowIndex)"
+        ></ng-container>
+        } @else {
+        {{ getCellValue(row, column) }}
+        }
+      </td>
+      }
+    </tr>
+    }
+  </tbody>
+  <tfoot>
+    <tr [ngStyle]="styleConfig?.footer">
+      @for (column of columnsSignal(); track column.id) {
+      <td [ngStyle]="styleConfig?.cells">
+        @if (column.footerTemplate) {
+        <ng-container
+          [ngTemplateOutlet]="column.footerTemplate"
+          [ngTemplateOutletContext]="getFooterContext(column)"
+        ></ng-container>
+        }
+      </td>
+      }
+    </tr>
+  </tfoot>
+</table> -->

package/src/lib/components/data-table/data-table.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DataTableComponent } from './data-table.component';
+
+describe('DataTableComponent', () => {
+  let component: DataTableComponent;
+  let fixture: ComponentFixture<DataTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DataTableComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DataTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/data-table/data-table.component.ts

@@ -0,0 +1,336 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  Signal,
+  signal,
+  WritableSignal,
+} from '@angular/core';
+import { ColumnDefinition } from './data-table.types';
+import { ColumnDirective } from './column.directive';
+import { BaseStyles, TableStyles } from './style.types';
+
+@Component({
+  selector: 'lib-data-table',
+  templateUrl: './data-table.component.html',
+  styleUrl: './data-table.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DataTableComponent<T extends { id: string | number }>
+  implements AfterContentInit
+{
+  @Input({ required: true }) data!: T[];
+  @Input({ required: true }) columns!: ColumnDefinition<T>[];
+
+  @Input() styleConfig: TableStyles = defaultTableStyles;
+
+  @ContentChildren(ColumnDirective)
+  columnTemplates!: QueryList<ColumnDirective>;
+
+  @Output() rowEdit = new EventEmitter<T>();
+  @Output() rowSave = new EventEmitter<T>();
+  @Output() selectionChange = new EventEmitter<T[]>();
+
+  private editingRowsSignal = signal<Set<string | number>>(new Set());
+  private selectedRowsSignal = signal<Set<string | number>>(new Set());
+  private editedDataSignal = signal<Map<string | number, EditedData<T>>>(
+    new Map()
+  );
+
+  columnsSignal: WritableSignal<ColumnDefinition<T>[]> = signal([]);
+
+  ngAfterContentInit() {
+    this.columnTemplates.changes.subscribe(() => this.mergeColumnTemplates());
+    this.mergeColumnTemplates();
+  }
+
+  private mergeColumnTemplates() {
+    const updatedColumns = this.columns.map((column) => {
+      const matchingTemplate = this.columnTemplates.find(
+        (t) => t.columnId === column.id
+      );
+      if (matchingTemplate) {
+        return {
+          ...column,
+          cellTemplate: matchingTemplate.cellTemplate,
+          cellEditTemplate: matchingTemplate.cellEditTemplate,
+          headerTemplate: matchingTemplate.headerTemplate,
+          footerTemplate: matchingTemplate.footerTemplate,
+        };
+      }
+      return column;
+    });
+    this.columnsSignal.set(updatedColumns);
+  }
+
+  getCellValue = (row: T, column: ColumnDefinition<T>): any => {
+    if (column.accessorKey) {
+      return (row as any)[column.accessorKey];
+    }
+    return column.accessorFn ? column.accessorFn(row) : undefined;
+  };
+
+  isRowEditing = (rowId: string | number): boolean => {
+    return this.editingRowsSignal().has(rowId);
+  };
+
+  toggleRowEdit = (rowId: string | number) => {
+    this.editingRowsSignal.update((set) => {
+      const newSet = new Set(set);
+      if (newSet.has(rowId)) {
+        newSet.delete(rowId);
+        this.saveRow(rowId);
+      } else {
+        newSet.add(rowId);
+        this.initializeEditedData(rowId);
+      }
+      return newSet;
+    });
+  };
+
+  private initializeEditedData(rowId: string | number) {
+    const row = this.data.find((r) => r.id === rowId);
+    if (row) {
+      this.editedDataSignal.update((map) => {
+        const newMap = new Map(map);
+        newMap.set(rowId, { ...row });
+        return newMap;
+      });
+    }
+  }
+
+  private saveRow(rowId: string | number) {
+    const editedData = this.editedDataSignal().get(rowId);
+    if (editedData) {
+      const originalRowIndex = this.data.findIndex((r) => r.id === rowId);
+      if (originalRowIndex !== -1) {
+        const updatedRow = { ...this.data[originalRowIndex], ...editedData };
+        this.data[originalRowIndex] = updatedRow;
+        this.rowSave.emit(updatedRow);
+        this.editedDataSignal.update((map) => {
+          const newMap = new Map(map);
+          newMap.delete(rowId);
+          return newMap;
+        });
+      }
+    }
+  }
+
+  isRowSelected = (rowId: string | number): boolean => {
+    return this.selectedRowsSignal().has(rowId);
+  };
+
+  toggleRowSelection = (rowId: string | number) => {
+    this.selectedRowsSignal.update((set) => {
+      const newSet = new Set(set);
+      if (newSet.has(rowId)) {
+        newSet.delete(rowId);
+      } else {
+        newSet.add(rowId);
+      }
+      this.emitSelectionChange();
+      return newSet;
+    });
+  };
+
+  allRowsSelected = (): boolean => {
+    return this.selectedRowsSignal().size === this.data.length;
+  };
+
+  someRowsSelected = (): boolean => {
+    return (
+      this.selectedRowsSignal().size > 0 &&
+      this.selectedRowsSignal().size < this.data.length
+    );
+  };
+
+  toggleAllRows = () => {
+    if (this.allRowsSelected()) {
+      this.selectedRowsSignal.set(new Set());
+    } else {
+      this.selectedRowsSignal.set(new Set(this.data.map((row) => row.id)));
+    }
+    this.emitSelectionChange();
+  };
+
+  private emitSelectionChange() {
+    const selectedRows = this.data.filter((row) =>
+      this.selectedRowsSignal().has(row.id)
+    );
+    this.selectionChange.emit(selectedRows);
+  }
+
+  getHeaderContext(column: ColumnDefinition<T>) {
+    return {
+      $implicit: column,
+      column,
+      allRowsSelected: this.allRowsSelected,
+      someRowsSelected: this.someRowsSelected,
+      toggleAllRows: this.toggleAllRows,
+    };
+  }
+
+  // updateEditedField<K extends keyof T>(
+  //   rowId: string | number,
+  //   columnId: K,
+  //   field: T[K] extends object ? keyof T[K] : never,
+  //   value: any
+  // ) {
+  //   this.editedDataSignal.update((map) => {
+  //     const newMap = new Map(map);
+  //     const rowData = newMap.get(rowId) || ({} as EditedData<T>);
+  //     const columnData = (rowData[columnId] as any) || {};
+  //     newMap.set(rowId, {
+  //       ...rowData,
+  //       [columnId]: {
+  //         ...columnData,
+  //         [field]: value,
+  //       },
+  //     });
+  //     return newMap;
+  //   });
+  // }
+
+  updateEditedValue(rowId: string | number, columnId: keyof T, value: any) {
+    this.editedDataSignal.update((map) => {
+      const newMap = new Map(map);
+      const rowData = newMap.get(rowId) || ({} as EditedData<T>);
+      newMap.set(rowId, { ...rowData, [columnId]: value });
+      return newMap;
+    });
+  }
+
+  updateNestedEditedValue(
+    rowId: string | number,
+    columnId: keyof T,
+    nestedField: string,
+    value: any
+  ) {
+    this.editedDataSignal.update((map) => {
+      const newMap = new Map(map);
+      const rowData = newMap.get(rowId) || ({} as EditedData<T>);
+      const columnData = (rowData[columnId] as any) || {};
+      newMap.set(rowId, {
+        ...rowData,
+        [columnId]: {
+          ...columnData,
+          [nestedField]: value,
+        },
+      });
+      return newMap;
+    });
+  }
+
+  getCellContext(row: T, column: ColumnDefinition<T>, rowIndex: number) {
+    const rowId = row.id;
+    const isEditing = this.isRowEditing(rowId);
+    const editedData = this.editedDataSignal().get(rowId);
+
+    let value: any;
+    if (isEditing && editedData && column.id in editedData) {
+      value = editedData[column.id as keyof T];
+    } else {
+      value = this.getCellValue(row, column);
+    }
+
+    return {
+      $implicit: value,
+      value,
+      row,
+      column,
+      rowIndex,
+      isEditing,
+      isSelected: this.isRowSelected(rowId),
+      toggleRowSelection: () => this.toggleRowSelection(rowId),
+      toggleRowEdit: () => this.toggleRowEdit(rowId),
+      updateValue: (newValue: any) =>
+        this.updateEditedValue(rowId, column.id as keyof T, newValue),
+      updateNestedValue: (nestedField: string, newValue: any) =>
+        this.updateNestedEditedValue(
+          rowId,
+          column.id as keyof T,
+          nestedField,
+          newValue
+        ),
+    };
+  }
+
+  getFooterContext(column: ColumnDefinition<T>) {
+    return {
+      $implicit: column,
+      column,
+      data: this.data,
+    };
+  }
+
+  getRowStyle(rowIndex: number): BaseStyles {
+    if (this.styleConfig?.rows) {
+      const rowStyles = this.styleConfig.rows;
+
+      if ('even' in rowStyles && 'odd' in rowStyles) {
+        // TableSectionStyles
+        return (rowIndex % 2 === 0 ? rowStyles.even : rowStyles.odd) || {};
+      } else if ('nth' in rowStyles && rowStyles.nth) {
+        // TableSectionStyles with nth
+        const { interval, style } = rowStyles.nth;
+        return ((rowIndex + 1) % (interval || 1) === 0 ? style : {}) || {};
+      } else {
+        // TableStyles
+        return rowStyles as BaseStyles;
+      }
+    }
+    return {};
+  }
+}
+
+type EditedData<T> = {
+  [K in keyof T]?: T[K] extends object ? Partial<T[K]> : T[K];
+};
+
+// Default styles
+const defaultTableStyles: TableStyles = {
+  border: '1px solid #e0e0e0',
+  borderRadius: '4px',
+  overflow: 'hidden',
+  boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+  width: '100%',
+  header: {
+    backgroundColor: '#f5f5f5',
+    fontWeight: 'bold',
+    color: '#333',
+    textAlign: 'left',
+    padding: '12px 16px',
+    borderBottom: '2px solid #e0e0e0',
+  },
+  rows: {
+    even: {
+      backgroundColor: '#ffffff',
+    },
+    odd: {
+      backgroundColor: '#f9f9f9',
+    },
+    nth: {
+      interval: 5,
+      style: {
+        backgroundColor: '#f0f0f0',
+      },
+    },
+  },
+  cells: {
+    padding: '12px 16px',
+    borderBottom: '1px solid #e0e0e0',
+  },
+  footer: {
+    backgroundColor: '#f5f5f5',
+    fontWeight: 'bold',
+    color: '#333',
+    textAlign: 'left',
+    padding: '12px 16px',
+    borderTop: '2px solid #e0e0e0',
+  },
+};

package/src/lib/components/data-table/data-table.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ColumnDirective } from './column.directive';
+import { DataTableComponent } from './data-table.component';
+
+@NgModule({
+  declarations: [DataTableComponent, ColumnDirective],
+  imports: [CommonModule],
+  exports: [DataTableComponent, ColumnDirective],
+})
+export class DataTableModule {}

package/src/lib/components/data-table/data-table.types.ts

@@ -0,0 +1,13 @@
+import { TemplateRef } from '@angular/core';
+
+export interface ColumnDefinition<T> {
+  id: string;
+  header: string | ((context: any) => any);
+  accessorKey?: keyof T;
+  accessorFn?: (row: T) => any;
+  cellTemplate?: TemplateRef<any>;
+  cellEditTemplate?: TemplateRef<any>;
+  headerTemplate?: TemplateRef<any>;
+  footerTemplate?: TemplateRef<any>;
+  sortAction?: 'ASC' | 'DESC';
+}

package/src/lib/components/data-table/style.types.ts

@@ -0,0 +1,55 @@
+export interface BaseStyles {
+  border?: string;
+  borderTop?: string;
+  borderBottom?: string;
+  borderLeft?: string;
+  borderRight?: string;
+  borderColor?: string;
+  borderStyle?: string;
+  borderWidth?: string;
+  height?: string;
+  maxHeight?: string;
+  minHeight?: string;
+  width?: string;
+  maxWidth?: string;
+  minWidth?: string;
+  background?: string;
+  backgroundColor?: string;
+  color?: string;
+  shadow?: string;
+  boxShadow?: string;
+  position?: string;
+  top?: string;
+  left?: string;
+  right?: string;
+  bottom?: string;
+  borderRadius?: string;
+  padding?: string;
+  margin?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  textAlign?: string;
+  verticalAlign?: string;
+  cursor?: string;
+  overflow?: string;
+  zIndex?: string;
+  opacity?: string;
+}
+
+interface NTHStyles {
+  interval?: number;
+  style?: BaseStyles;
+}
+
+export interface TableSectionStyles {
+  even?: BaseStyles;
+  odd?: BaseStyles;
+  nth?: NTHStyles;
+}
+
+export interface TableStyles extends BaseStyles {
+  rows?: TableSectionStyles | BaseStyles;
+  cells?: TableSectionStyles | BaseStyles;
+  footer?: BaseStyles;
+  header?: BaseStyles;
+}