data-grid-workspace 0.0.120

package/projects/data-grid/src/lib/data-grid/data-grid.tokens.ts

@@ -0,0 +1,4 @@
+// import { InjectionToken } from '@angular/core';
+// import { DataGridConfig } from '../interfaces/data-grid-config.ts';
+
+// export const DATA_GRID_GLOBAL_CONFIG = new InjectionToken<DataGridConfig>('DATA_GRID_GLOBAL_CONFIG');

package/projects/data-grid/src/lib/data-grid/statuses.ts

@@ -0,0 +1,49 @@
+export const STATUSES_BADGE_MAP: { [key: string]: string } = {
+  //  Success – Green
+  'active': 'badge badge-success',
+  'approved': 'badge badge-success',
+  'accepted': 'badge badge-success',
+  'completed': 'badge badge-success',
+  'evaluated': 'badge badge-success',
+  'assigned': 'badge badge-success',
+  'scrap': 'badge badge-success',
+  'move-available': 'badge badge-success',
+  'move-assigned': 'badge badge-success',
+
+  // Warning – Yellow/Amber
+  'contract': 'badge badge-warning',
+  'warranty': 'badge badge-warning',
+  'scheduled': 'badge badge-warning',
+  'leased': 'badge badge-warning',
+  'disposed': 'badge badge-warning',
+  'maintenance': 'badge badge-warning',
+  'assigning start': 'badge badge-warning',
+  'evaluation start': 'badge badge-warning',
+  'to be start assigning': 'badge badge-warning',
+  'pending': 'badge badge-warning',
+  'leave': 'badge badge-warning',
+
+  //  Danger – Red
+  'inactive': 'badge badge-danger',
+  'rejected': 'badge badge-danger',
+  'unassigned': 'badge badge-danger',
+  'trashed': 'badge badge-danger',
+  'onhold': 'badge badge-danger',
+  'assigning stop': 'badge badge-danger',
+  'evaluation stop': 'badge badge-danger',
+  'unavailable': 'badge badge-danger',
+  'move-error': 'badge badge-danger',
+  'failed': 'badge badge-danger',
+  'absent': 'badge badge-danger',
+
+  //  Info – Blue
+  'insurance': 'badge badge-info',
+  'pastdue': 'badge badge-info',
+
+  //  Dark – Neutral/Other
+  'expired': 'badge badge-dark',
+  'draft': 'badge badge-dark',
+  'present': 'badge badge-success',
+
+  'todo': 'badge badge-secondary',
+};

package/projects/data-grid/src/lib/data-grid.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { DataGridComponent } from './data-grid/data-grid.component';
+import { CommonModule, DatePipe, TitleCasePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FilterPipe } from './pipes/filter.pipe';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { InlineSVGModule } from 'ng-inline-svg';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ScrollingModule } from '@angular/cdk/scrolling'; 
+import { CellHostDirective } from './directives/cellHost.directive'; 
+import { CellRenderInitDirective } from './directives/cell-render-init.directive'; 
+import { FormatCurrencyPipe } from './pipes/format-currency.pipe';
+import { CellEditorDirective } from './directives/cell-editor.directive';
+import { FormatIndexPipe } from './pipes/format-index.pipe';
+
+
+@NgModule({
+  declarations: [DataGridComponent, FilterPipe, FormatIndexPipe, CellHostDirective, CellRenderInitDirective, CellEditorDirective, FormatCurrencyPipe  ],
+  imports: [CommonModule, FormsModule, DragDropModule, InlineSVGModule.forRoot(), ScrollingModule, TitleCasePipe],
+exports: [DataGridComponent],
+  providers: [FormatCurrencyPipe, DatePipe],
+})
+export class DataGridModule {}

package/projects/data-grid/src/lib/data-grid.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DataGridService } from './data-grid.service';
+
+describe('DataGridService', () => {
+  let service: DataGridService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DataGridService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/projects/data-grid/src/lib/data-grid.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataGridService {
+
+  constructor() { }
+}

package/projects/data-grid/src/lib/directives/cell-editor.directive.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { CellEditorDirective } from './cell-editor.directive';
+
+describe('Directive: CellEditor', () => {
+  it('should create an instance', () => {
+    const directive = new CellEditorDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/projects/data-grid/src/lib/directives/cell-editor.directive.ts

@@ -0,0 +1,88 @@
+import {
+  Directive,
+  Input,
+  OnInit,
+  ViewContainerRef,
+  Injector,
+  ComponentRef,
+  Type,
+  EventEmitter,
+  Output
+} from '@angular/core';
+
+@Directive({
+  selector: '[cellEditor]'
+})
+export class CellEditorDirective implements OnInit {
+
+  // Component type
+  @Input('cellEditor') componentType!: Type<any>;
+
+  // Inputs passed to the editor component
+  @Input() rowData: any;
+  @Input() colData: any;
+  @Input() cellValue: any;
+
+  // Parent component listens using:
+  // (editorEvent)="finishEdit($event)"
+  @Output() editorEvent = new EventEmitter<{
+    eventName: string;
+    data: any;
+  }>();
+
+  constructor(
+    private vcr: ViewContainerRef,
+    private injector: Injector
+  ) {}
+
+  ngOnInit(): void {
+    if (!this.componentType) return;
+
+    // ✅ Dynamically create the editor component
+    const componentRef: ComponentRef<any> = this.vcr.createComponent(
+      this.componentType,
+      {
+        injector: Injector.create({
+          providers: [
+            { provide: 'rowData', useValue: this.rowData },
+            { provide: 'colData', useValue: this.colData },
+            { provide: 'cellValue', useValue: this.cellValue }
+          ],
+          parent: this.injector
+        })
+      }
+    );
+
+    // -----------------------------------------------
+    // 1️⃣ Call custom lifecycle hook if it exists
+    // -----------------------------------------------
+    if (typeof componentRef.instance.editorInit === 'function') {
+      componentRef.instance.editorInit({
+        row: this.rowData,
+        col: this.colData,
+        value: this.cellValue
+      });
+    }
+
+    // -----------------------------------------------
+    // 2️⃣ Auto-detect all @Output() EventEmitters
+    // -----------------------------------------------
+    for (const key of Object.keys(componentRef.instance)) {
+      const property = componentRef.instance[key];
+
+      // Check if any property is an EventEmitter
+      if (property instanceof EventEmitter) {
+        property.subscribe((value: any) => {
+          this.editorEvent.emit({
+            eventName: key,
+            data: {
+              row: this.rowData,
+              col: this.colData,
+              value
+            }
+          });
+        });
+      }
+    }
+  }
+}

package/projects/data-grid/src/lib/directives/cell-render-init.directive.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { CellRenderInitDirective } from './cell-render-init.directive';
+
+describe('Directive: CellRenderInit', () => {
+  it('should create an instance', () => {
+    const directive = new CellRenderInitDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/projects/data-grid/src/lib/directives/cell-render-init.directive.ts

@@ -0,0 +1,98 @@
+import {
+  Directive,
+  Input,
+  OnInit,
+  ViewContainerRef,
+  Injector,
+  ComponentRef,
+  Type,
+  EventEmitter,
+  Output,
+  OnDestroy,
+  SimpleChanges,
+  OnChanges
+} from '@angular/core';
+
+@Directive({
+  selector: '[cellRenderInit]'
+})
+export class CellRenderInitDirective implements OnInit, OnChanges, OnDestroy {
+  @Input('cellRenderInit') componentType!: Type<any>;
+  @Input() rowData: any;
+  @Input() colData: any;
+  @Input() cellValue: any;
+  @Input() context: any;
+
+
+  @Output() cellEvent = new EventEmitter<{ eventName: string; data: any }>();
+
+  constructor(private vcr: ViewContainerRef, private injector: Injector) { }
+  componentRef!: ComponentRef<any>
+
+  ngOnInit(): void {
+    if (!this.componentType) return;
+
+    // ✅ Dynamically create the component
+     this.componentRef = this.vcr.createComponent(this.componentType, {
+      injector: Injector.create({
+        providers: [
+          { provide: 'rowData', useValue: this.rowData },
+          { provide: 'colData', useValue: this.colData },
+          { provide: 'cellValue', useValue: this.cellValue }
+        ],
+        parent: this.injector
+      })
+    });
+
+    if (this.colData) {
+      this.colData.cellComponentRef = this.componentRef;
+    }
+
+    // ✅ Automatically call custom lifecycle hook if present
+    if (typeof this.componentRef.instance.gridInit === 'function') {
+      this.componentRef.instance.gridInit({
+        row: this.rowData,
+        col: this.colData,
+        value: this.cellValue,
+        context: this.context
+      });
+    }
+
+
+    for (const key of Object.keys(this.componentRef.instance)) {
+      const property = this.componentRef.instance[key];
+      if (property instanceof EventEmitter) {
+        property.subscribe((value: any) => {
+          this.cellEvent.emit({
+            eventName: key,
+            data: {
+              row: this.rowData,
+              col: this.colData,
+              value,
+            }
+          });
+        });
+      }
+    }
+  }
+
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      this.componentRef &&
+      typeof this.componentRef.instance.gridRefresh === 'function'
+    ) {
+      this.componentRef.instance.gridRefresh({
+        row: this.rowData,
+        col: this.colData,
+        value: this.cellValue,
+        context: this.context
+      });
+    }
+  }
+
+
+  ngOnDestroy(): void {
+    this.componentRef?.destroy();
+  }
+}

package/projects/data-grid/src/lib/directives/cellHost.directive.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { CellHostDirective } from './cellHost.directive';
+
+describe('Directive: CellHost', () => {
+  it('should create an instance', () => {
+    const directive = new CellHostDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/projects/data-grid/src/lib/directives/cellHost.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[cellHost]'
+})
+export class CellHostDirective  {
+
+  constructor(public viewContainerRef: ViewContainerRef) {}
+
+}

package/projects/data-grid/src/lib/directives/draggable-header.directive.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { DraggableHeaderDirective } from './draggable-header.directive';
+
+describe('Directive: DraggableHeader', () => {
+  it('should create an instance', () => {
+    const directive = new DraggableHeaderDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/projects/data-grid/src/lib/directives/draggable-header.directive.ts

@@ -0,0 +1,172 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+  Renderer2,
+} from '@angular/core';
+
+export interface DragMoveEvent {
+  event: MouseEvent;
+  data: any;
+}
+
+@Directive({
+  selector: '[appDraggableHeader]',
+})
+export class DraggableHeaderDirective {
+  @Input() column: any;
+  @Input() headerName: string = '';
+
+  @Output() dragStart = new EventEmitter<any>();
+  @Output() dragMove = new EventEmitter<any>();
+  @Output() dragEnd = new EventEmitter<any>();
+
+  private isDragging = false;
+  private placeholderEl: HTMLElement | null = null;
+  private previewEl: HTMLElement | null = null;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  startX = 0;
+  startY = 0;
+
+  @HostListener('mousedown', ['$event'])
+  onMouseDown(event: MouseEvent) {
+    if (event.button !== 0) return;
+    let target = event.target as HTMLElement;
+    const classes = target.classList;
+    debugger
+    if ((event.target as HTMLElement).classList.contains('three-dots')) return;
+      this.startX = event.clientX;
+    this.startY = event.clientY;
+    this.isDragging = false;
+
+    document.addEventListener('mousemove', this.onMouseMove);
+    document.addEventListener('mouseup', this.onMouseUp);
+  }
+
+  onMouseMove = (event: MouseEvent) => {
+    debugger
+    const moveX = Math.abs(event.clientX - this.startX - 10);
+    const moveY = Math.abs(event.clientY - this.startY - 10);
+    if (!this.isDragging && (moveX > 1 || moveY > 1)) {
+      this.startDragging(event);
+    }
+
+    if (this.isDragging && this.previewEl) {
+      this.renderer.setStyle(this.previewEl, 'top', `${event.pageY + 10}px`);
+      this.renderer.setStyle(this.previewEl, 'left', `${event.pageX + 10}px`);
+
+      // Find the element under cursor (hovered element)
+      const hoveredElement = document.elementFromPoint(
+        event.clientX,
+        event.clientY
+      );
+
+      this.dragMove.emit({
+        event,
+        column: this.column,
+        hoveredElement,
+      });
+    }
+  };
+
+  onMouseUp = (event: MouseEvent) => {
+    if (!this.isDragging) return;
+    this.isDragging = false;
+
+    this.dragEnd.emit({ column: this.column, event });
+
+    if (this.previewEl) {
+      this.renderer.removeChild(document.body, this.previewEl);
+      this.previewEl = null;
+    }
+
+    if (this.placeholderEl) {
+      const parent = this.placeholderEl.parentNode;
+      if (parent) {
+        parent.replaceChild(this.el.nativeElement, this.placeholderEl);
+      }
+      this.placeholderEl = null;
+    }
+
+    // Reset the cursor
+    this.resetCursor();
+
+    document.removeEventListener('mousemove', this.onMouseMove);
+    document.removeEventListener('mouseup', this.onMouseUp);
+  };
+
+  private originalCursor: string | null = null;
+
+  private setCursor(cursorStyle: string) {
+    this.renderer.setStyle(document.body, 'cursor', cursorStyle);
+  }
+
+  private resetCursor() {
+    this.renderer.setStyle(document.body, 'cursor', this.originalCursor || '');
+  }
+
+  private startDragging(event: MouseEvent) {
+    this.isDragging = true;
+
+    // Store original cursor (optional fallback)
+    this.originalCursor = getComputedStyle(document.body).cursor;
+
+    // Set cursor to grabbing
+    this.setCursor('move');
+
+    // --- Clone the element as a placeholder ---
+    this.placeholderEl = this.el.nativeElement.cloneNode(true) as HTMLElement;
+    this.renderer.setStyle(this.placeholderEl, 'opacity', '0.5');
+    this.renderer.setStyle(this.placeholderEl, 'pointer-events', 'none');
+    this.renderer.addClass(this.placeholderEl, 'drag-placeholder');
+
+    const parent = this.el.nativeElement.parentNode;
+    parent.replaceChild(this.placeholderEl, this.el.nativeElement);
+
+    // --- Create floating preview ---
+    this.previewEl = this.renderer.createElement('div');
+    this.renderer.setStyle(this.previewEl, 'position', 'absolute');
+    this.renderer.setStyle(this.previewEl, 'top', `${event.pageY + 10}px`);
+    this.renderer.setStyle(this.previewEl, 'left', `${event.pageX + 10}px`);
+    this.renderer.setStyle(this.previewEl, 'pointer-events', 'none');
+    this.renderer.setStyle(this.previewEl, 'z-index', '1000');
+    this.renderer.setStyle(this.previewEl, 'max-width', '200px');
+    this.renderer.setStyle(this.previewEl, 'padding', '8px');
+    this.renderer.setStyle(this.previewEl, 'border', '1px solid #ccc');
+    this.renderer.setStyle(this.previewEl, 'background-color', '#fff');
+    this.renderer.setStyle(
+      this.previewEl,
+      'box-shadow',
+      '0 2px 6px rgba(0,0,0,0.2)'
+    );
+    this.renderer.setStyle(this.previewEl, 'border-radius', '4px');
+    this.renderer.setStyle(this.previewEl, 'display', 'flex');
+    this.renderer.setStyle(this.previewEl, 'align-items', 'center');
+    this.renderer.setStyle(this.previewEl, 'gap', '8px');
+    this.renderer.setStyle(this.previewEl, 'font-weight', '500');
+    this.renderer.setStyle(this.previewEl, 'white-space', 'nowrap');
+
+    const icon = this.renderer.createElement('span');
+    this.renderer.setStyle(icon, 'font-size', '16px');
+    this.renderer.setStyle(icon, 'user-select', 'none');
+    this.renderer.setProperty(icon, 'innerText', '≡');
+
+    const text = this.renderer.createElement('span');
+    this.renderer.setProperty(text, 'innerText', this.headerName || 'Dragging');
+
+    this.renderer.appendChild(this.previewEl, icon);
+    this.renderer.appendChild(this.previewEl, text);
+    this.renderer.appendChild(document.body, this.previewEl);
+
+    this.dragStart.emit({ column: this.column, event });
+  }
+
+  public overrideCursor(style: string) {
+    this.setCursor(style);
+  }
+}

package/projects/data-grid/src/lib/interfaces/data-grid-config.ts.ts

@@ -0,0 +1,136 @@
+import { RowAnimationType } from "../data-grid/data-grid.component";
+
+export interface DataGridConfig {
+  rowAnimation?: RowAnimationType;
+
+  paginationConfig?: any;
+  dataSet?: any[];
+  columns?: any[];
+
+  rowHeight?: number;
+  headerRowHeight?: number;
+
+  showVerticalBorder?: boolean;
+
+  evenRowsBackgroundColor?: string;
+  oddRowsBackgroundColor?: string;
+
+  headerBackgroundColor?: string;
+  checkboxesBackgroundColor?: string;
+
+  showColumnsGrouping?: boolean;
+
+  rowHoverColor?: string;
+
+  leftPinnedBackgroundColor?: string;
+  bodyBackgroundColor?: string;
+  rightPinnedBackgroundColor?: string;
+  sidemenuBackgroundColor?: string;
+
+  bodyTextColor?: string;
+  headerTextColor?: string;
+  checkboxesColor?: string;
+
+  headerTextFontsSize?: number;
+  bodyTextFontsSize?: number;
+
+  headerFontWeight?: number;
+  bodyFontWeight?: number;
+
+  checkedRowBackgroundColor?: string;
+  dropdownsBackgroundColor?: string;
+
+  footerRowBackgroundColor?: string;
+  footerRowHeight?: number;
+
+  topGroupedBadgesBackgroundColor?: string;
+
+  showRowsGrouping?: boolean;
+  showFilterRow?: boolean;
+
+  fontFaimly?: string;
+
+  showSideMenu?: boolean;
+
+  footerPadding?: number;
+  topFilterRowHeight?: number;
+
+  rowShadingEnabled?: boolean;
+
+  showSerialNumber?: boolean;
+
+  singleSpaAssetsPath?: string;
+
+  filtersConfig?: any[];
+  loading?: boolean;
+
+  verticalScrollbarWidth?: 'auto' | 'thin';
+  horizintalScrollbarWidth?: 'auto' | 'thin';
+
+  showCellDetailsBox?: boolean;
+
+  dateFormat?: string;
+  tableSearch?: string;
+
+  actions?: any[];
+
+  config?: any;
+
+  showTaskbar?: boolean;
+  tableName?: boolean;
+
+  listingType?: string | boolean;
+
+  checkboxState?: { reset: boolean };
+
+  taskbarActions?: any[];
+
+  sortingConfig?: { field: string; order_by: string } | null;
+
+  tableFilterViewId?: any;
+
+  selectedTableLayout?: any;
+
+  closeDropdown?: { preset: { closed: boolean, loading: boolean } };
+
+  globalSearchText?: string;
+
+  nestedTablerowFontsize?: number;
+  nestedTableHeaderRowHeight?: number;
+  nestedTablerowHeight?: number;
+
+  gridType?: string;
+
+  currencySymbol?: string;
+  currencyFormat?: string;
+
+  leftPinnedBoxshadow?: string;
+  rightPinnedBoxshadow?: string;
+
+  selectedRowsBackgroundColor?: string;
+
+  nestedTableHeaderBackgroundColor?: string;
+  nestedTableRowBackgroundColor?: string;
+
+  tableView?: any[];
+
+  buttons?: { name: string; is_showIcon: boolean; icon: string; has_permission: boolean }[];
+
+  keepMultipleExpandedDetails?: boolean;
+
+  showTotalAmountRow?: boolean;
+
+  enableGlobalSearch?: boolean;
+
+  tableType?: string;
+
+  enableExport?: boolean;
+
+  showFullScreenButton?: boolean;
+
+  enableCut?: boolean;
+
+  tabs?: string[];
+
+  showCheckboxes?: boolean;
+}

package/projects/data-grid/src/lib/pipes/filter.pipe.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { FilterPipe } from './filter.pipe';
+
+describe('Pipe: Filtere', () => {
+  it('create an instance', () => {
+    let pipe = new FilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});