ms-data-grid 0.0.16 → 0.0.17

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

@@ -0,0 +1,47 @@
+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'
+};

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

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { DataGridComponent } from './data-grid/data-grid.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FilterPipe } from './pipes/filter.pipe';
+import { DraggableHeaderDirective } from './directives/draggable-header.directive';
+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'; 
+
+
+
+@NgModule({
+  declarations: [DataGridComponent, FilterPipe, DraggableHeaderDirective],
+  imports: [CommonModule, FormsModule, DragDropModule, InlineSVGModule.forRoot(), ScrollingModule],
+  exports: [DataGridComponent, DraggableHeaderDirective],
+  providers: [],
+})
+export class DataGridModule {}

package/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/src/lib/data-grid.service.ts

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

package/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/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/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();
+  });
+});

package/src/lib/pipes/filter.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filter',
+})
+export class FilterPipe implements PipeTransform {
+transform(items: any[], searchText: string,  key?: string): any[] {
+  if (!items || !searchText) return items;
+
+  searchText = searchText.toLowerCase();
+
+return items.filter(item => {
+    const value = key ? item?.[key] : item;
+    return value?.toString().toLowerCase().includes(searchText);
+  });
+}}

package/src/lib/services/cell-selection.service.spec.ts

@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { CellSelectionService } from './cell-selection.service';
+
+describe('Service: CellSelection', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CellSelectionService]
+    });
+  });
+
+  it('should ...', inject([CellSelectionService], (service: CellSelectionService) => {
+    expect(service).toBeTruthy();
+  }));
+});

package/src/lib/services/cell-selection.service.ts

@@ -0,0 +1,234 @@
+// selection.service.ts
+import { Injectable } from '@angular/core';
+
+export interface SelectionRange {
+  startRow: number;
+  startGroupIndex: number;
+  startSubColIndex: number;
+  startField: string;
+  endRow: number;
+  endGroupIndex: number;
+  endSubColIndex: number;
+  endField: string;
+}
+
+export interface ActiveCell {
+  row: number;
+  groupIndex: number;
+  subColIndex: number;
+  field: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CellSelectionService {
+  private selectionRange: SelectionRange | null = null;
+  private activeCell: ActiveCell | null = null;
+  private isSelecting = false;
+
+  // Get the current selection range
+  getSelection(): SelectionRange | null {
+    return this.selectionRange;
+  }
+
+  // Get the active cell
+  getActiveCell(): ActiveCell | null {
+    return this.activeCell;
+  }
+
+  // Check if a cell is selected
+  isSelected(row: number, groupIndex: number, subColIndex: number, field: string): boolean {
+    if (!this.selectionRange) return false;
+    
+    const { 
+      startRow, 
+      startGroupIndex, 
+      startSubColIndex, 
+      startField,
+      endRow, 
+      endGroupIndex, 
+      endSubColIndex,
+      endField
+    } = this.selectionRange;
+    
+    // Normalize the selection range
+    const minRow = Math.min(startRow, endRow);
+    const maxRow = Math.max(startRow, endRow);
+    
+    // For group and subcolumn, we need to compare both indices AND field names
+    const isSameGroup = startGroupIndex === endGroupIndex;
+    const isSameField = startField === endField;
+    
+    if (isSameGroup && isSameField) {
+      // Selection is within the same group and same field
+      const minSubCol = Math.min(startSubColIndex, endSubColIndex);
+      const maxSubCol = Math.max(startSubColIndex, endSubColIndex);
+      
+      return row >= minRow && 
+             row <= maxRow && 
+             groupIndex === startGroupIndex && 
+             field === startField &&
+             subColIndex >= minSubCol && 
+             subColIndex <= maxSubCol;
+    } else if (isSameGroup) {
+      // Selection spans multiple fields within the same group
+      // We need to check if this field is between start and end fields
+      const fieldsInGroup = this.getFieldsInGroup(groupIndex); // You'll need to implement this
+      const startFieldIndex = fieldsInGroup.indexOf(startField);
+      const endFieldIndex = fieldsInGroup.indexOf(endField);
+      const minFieldIndex = Math.min(startFieldIndex, endFieldIndex);
+      const maxFieldIndex = Math.max(startFieldIndex, endFieldIndex);
+      const currentFieldIndex = fieldsInGroup.indexOf(field);
+      
+      return row >= minRow && 
+             row <= maxRow && 
+             groupIndex === startGroupIndex && 
+             currentFieldIndex >= minFieldIndex && 
+             currentFieldIndex <= maxFieldIndex;
+    } else {
+      // Selection spans multiple groups
+      const minGroup = Math.min(startGroupIndex, endGroupIndex);
+      const maxGroup = Math.max(startGroupIndex, endGroupIndex);
+      
+      // For cells in the starting group
+      if (groupIndex === startGroupIndex) {
+        const fieldsInGroup = this.getFieldsInGroup(groupIndex);
+        const startFieldIndex = fieldsInGroup.indexOf(startField);
+        const currentFieldIndex = fieldsInGroup.indexOf(field);
+        
+        return row >= minRow && 
+               row <= maxRow && 
+               currentFieldIndex >= (startGroupIndex === minGroup ? startFieldIndex : 0) &&
+               currentFieldIndex <= (startGroupIndex === maxGroup ? startFieldIndex : fieldsInGroup.length - 1);
+      }
+      
+      // For cells in the ending group
+      if (groupIndex === endGroupIndex) {
+        const fieldsInGroup = this.getFieldsInGroup(groupIndex);
+        const endFieldIndex = fieldsInGroup.indexOf(endField);
+        const currentFieldIndex = fieldsInGroup.indexOf(field);
+        
+        return row >= minRow && 
+               row <= maxRow && 
+               currentFieldIndex >= (endGroupIndex === minGroup ? endFieldIndex : 0) &&
+               currentFieldIndex <= (endGroupIndex === maxGroup ? endFieldIndex : fieldsInGroup.length - 1);
+      }
+      
+      // For cells in between groups
+      return row >= minRow && 
+             row <= maxRow && 
+             groupIndex > minGroup && 
+             groupIndex < maxGroup;
+    }
+  }
+
+  // Check if a cell is the active cell
+  isActiveCell(row: number, groupIndex: number, subColIndex: number, field: string): boolean {
+    return this.activeCell?.row === row && 
+           this.activeCell?.groupIndex === groupIndex && 
+           this.activeCell?.subColIndex === subColIndex &&
+           this.activeCell?.field === field;
+  }
+
+  // Start selection
+  startSelection(row: number, groupIndex: number, subColIndex: number, field: string): void {
+    this.isSelecting = true;
+    this.selectionRange = {
+      startRow: row,
+      startGroupIndex: groupIndex,
+      startSubColIndex: subColIndex,
+      startField: field,
+      endRow: row,
+      endGroupIndex: groupIndex,
+      endSubColIndex: subColIndex,
+      endField: field
+    };
+    this.activeCell = { row, groupIndex, subColIndex, field };
+  }
+
+  // Extend selection
+  extendSelection(row: number, groupIndex: number, subColIndex: number, field: string): void {
+    if (this.isSelecting && this.selectionRange) {
+      this.selectionRange.endRow = row;
+      this.selectionRange.endGroupIndex = groupIndex;
+      this.selectionRange.endSubColIndex = subColIndex;
+      this.selectionRange.endField = field;
+    }
+  }
+
+  // End selection
+  endSelection(): void {
+    this.isSelecting = false;
+  }
+
+  // Clear selection
+  clearSelection(): void {
+    this.selectionRange = null;
+    this.activeCell = null;
+  }
+
+  // Move selection with keyboard
+  moveSelection(direction: 'up' | 'down' | 'left' | 'right', columnStructure: any[]): void {
+    if (!this.activeCell) return;
+    
+    let { row, groupIndex, subColIndex, field } = this.activeCell;
+    
+    switch (direction) {
+      case 'up': 
+        row--;
+        break;
+      case 'down': 
+        row++;
+        break;
+      case 'left':
+        if (subColIndex > 0) {
+          // Move left within the same group
+          subColIndex--;
+          field = this.getFieldFromIndices(groupIndex, subColIndex, columnStructure);
+        } else if (groupIndex > 0) {
+          // Move to previous group
+          groupIndex--;
+          subColIndex = columnStructure[groupIndex].children.length - 1;
+          field = this.getFieldFromIndices(groupIndex, subColIndex, columnStructure);
+        }
+        break;
+      case 'right':
+        if (subColIndex < columnStructure[groupIndex].children.length - 1) {
+          // Move right within the same group
+          subColIndex++;
+          field = this.getFieldFromIndices(groupIndex, subColIndex, columnStructure);
+        } else if (groupIndex < columnStructure.length - 1) {
+          // Move to next group
+          groupIndex++;
+          subColIndex = 0;
+          field = this.getFieldFromIndices(groupIndex, subColIndex, columnStructure);
+        }
+        break;
+    }
+    
+    // Boundary checks for rows (you'll need to implement based on your data)
+    // if (row >= 0 && row < maxRows) {
+    this.startSelection(row, groupIndex, subColIndex, field);
+    this.endSelection();
+    // }
+  }
+
+  // Helper method to get field from indices
+  private getFieldFromIndices(groupIndex: number, subColIndex: number, columnStructure: any[]): string {
+    if (groupIndex >= 0 && 
+        groupIndex < columnStructure.length && 
+        subColIndex >= 0 && 
+        subColIndex < columnStructure[groupIndex].children.length) {
+      return columnStructure[groupIndex].children[subColIndex].field;
+    }
+    return '';
+  }
+
+  // Helper method to get all fields in a group
+  private getFieldsInGroup(groupIndex: number): string[] {
+    // You'll need to implement this based on your data structure
+    // This should return an array of field names for the specified group
+    return [];
+  }
+}

package/src/lib/services/common.service.spec.ts

@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { CommonService } from './common.service';
+
+describe('Service: Common', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CommonService]
+    });
+  });
+
+  it('should ...', inject([CommonService], (service: CommonService) => {
+    expect(service).toBeTruthy();
+  }));
+});