data-grid-workspace 0.0.120

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

@@ -0,0 +1,395 @@
+import { DatePipe } from '@angular/common';
+import { inject, Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CommonService {
+
+  private datePipe = inject(DatePipe); 
+  constructor() { }
+
+  public mainContainerLeft = 0;
+
+  gethasVisibleColumns(columns: any[]): boolean {
+    const checkVisible = (columns: any[]): boolean => {
+      return columns.some((col) => {
+        if (col?.is_visible) return true;
+        if (col?.children?.length) {
+          return checkVisible(col.children);
+        }
+        return false;
+      });
+    };
+    return checkVisible(columns);
+  }
+
+  gethasInVisibleColumns(columns: any[]): boolean {
+    const checkVisible = (columns: any[]): boolean => {
+      return columns.some((col) => {
+        if (!col?.is_visible) return true;
+        if (col?.children?.length) {
+          return checkVisible(col.children);
+        }
+        return false;
+      });
+    };
+    return checkVisible(columns);
+  }
+
+
+  getTotalColumnsLength(columns: any[]): number {
+    let count = 0;
+
+    columns.forEach(col => {
+      if (col.children && Array.isArray(col.children) && col.children.length) {
+        count += col.children.length; // count children instead of parent
+      } else {
+        count += 1; // count parent directly
+      }
+    });
+
+    return count;
+  }
+
+  gethasRightPinnedColumns(columns: any[]): boolean {
+    const checkPinnedRight = (columns: any[]): boolean => {
+      return columns.some((col) => {
+        if (col?.pinned === 'right' && col?.is_visible) return true;
+        if (col?.children?.length) {
+          return checkPinnedRight(col.children);
+        }
+        return false;
+      });
+    };
+    return checkPinnedRight(columns);
+  }
+
+  gethasLeftPinnedColumns(columns: any[]): boolean {
+    const checkPinnedRight = (columns: any[]): boolean => {
+      return columns.some((col) => {
+        if (col?.pinned === 'left' && col?.is_visible) return true;
+        if (col?.children?.length) {
+          return checkPinnedRight(col.children);
+        }
+        return false;
+      });
+    };
+    return checkPinnedRight(columns);
+  }
+
+
+  getExpandedRowCount(data: any[]): number {
+    let groupCount = 0;
+    let rowCount = 0;
+
+    data.forEach(group => {
+      if (group?.isGroup) {
+        groupCount++;
+
+        if (group?.isExpand && Array.isArray(group?.children)) {
+          group.children.forEach((child: any) => {
+            if (child.isGroup) {
+              if (child.isExpand && Array.isArray(child.children)) {
+                rowCount += child.children.length;
+              }
+            } else {
+              rowCount++;
+            }
+          });
+        }
+      }
+    });
+
+    if (groupCount === 0) {
+      return data.length;
+    }
+
+    return groupCount + rowCount;
+  }
+
+
+  getFiltersFromColumns(columns: any[], filtersConfig: any[]): any[] {
+    const result: any[] = [];
+
+    const checkColumn = (col: any) => {
+      if (col.query?.condition === 'none') {
+        col.query.second_value = null;
+        col.query.second_condition = null;
+      }
+      const hasFirstValue = col.query?.first_value != null && col.query?.first_value !== "" && filtersConfig.some((ele) => ele.field == col.field);
+      const hasIds = Array.isArray(col.query?._ids) && col.query._ids.length > 0 && filtersConfig.some((ele) => ele.field == col.field);
+      if (hasFirstValue || hasIds) {
+        result.push({
+          search: col.search ?? "",
+          field: col.field,
+          type: col.type,
+          _ids: (col.type == 'dropdown' || col.type == 'array') ? col.query?._ids : [],
+          query: (col.type == 'dropdown' || col.type == 'array') ? null : (col?.query?.first_value ? col?.query : null)
+        });
+      }
+
+      if (Array.isArray(col.children) && col.children.length > 0) {
+        col.children.forEach(checkColumn);
+      }
+    };
+    columns.forEach(checkColumn);
+
+    return result;
+  }
+
+  async applyFiltersToColumns(columns: any[], filters: any[]): Promise<any[]> {
+    for (const col of columns) {
+      if (!col.query) {
+        col.query = {
+          first_value: null,
+          second_value: null,
+          first_condition: col.type !== 'date' && col.type !== 'number' &&  col.type !== 'time'? 'contain' : 'equal',
+          second_condition: null,
+          condition: 'none',
+          _ids: []
+        };
+      }
+
+      const filter = filters.find(f => f.field === col.field);
+
+      if (filter) {
+        if (col.type === 'dropdown' || col.type == 'array') {
+          const selectedIds = filter._ids ?? [];
+          const dropdownValues = col.column_dropdown_value ?? [];
+
+          // ✅ Map depending on dropdown value structure
+          let selectedLabels: string[] = [];
+
+          if (Array.isArray(dropdownValues) && dropdownValues.length > 0) {
+            if (typeof dropdownValues[0] === 'object') {
+              // object-based dropdowns: { id, name/label/value/text }
+              selectedLabels = dropdownValues
+                .filter(opt => selectedIds.includes(opt.id))
+                .map(opt => opt.name ?? opt.label ?? opt.value ?? opt.text ?? '');
+            } else {
+              // string-based dropdowns
+              selectedLabels = dropdownValues.filter(opt => selectedIds.includes(opt));
+            }
+          }
+
+          // ✅ Store readable text in filterValue (comma-separated)
+          col.filterValue = selectedLabels.join(', ');
+
+          // maintain query state
+          col.query._ids = selectedIds;
+          col.search = filter.search ?? '';
+
+        } else {
+          // ✅ Non-dropdown filters (text/date/number)
+          col.filterValue = filter.search || filter.query?.first_value || '';
+          col.search = filter.search ?? '';
+          col.query.first_value = filter.query?.first_value ?? null;
+          col.query.second_value = filter.query?.second_value ?? null;
+          col.query.first_condition =
+            filter.query?.first_condition ??
+            (col.type !== 'date' && col.type != 'number' ? 'contain' : 'equal');
+          col.query.second_condition = filter.query?.second_condition ?? null;
+          col.query.condition = filter.query?.condition ?? 'none';
+        }
+      } else {
+        // Clear filter if not present
+        col.filterValue = null;
+        col.search = '';
+        col.query._ids = [];
+        col.query.first_value = null;
+      }
+
+      // ✅ Recursively apply for children
+      if (Array.isArray(col.children) && col.children.length > 0) {
+        col.children = await this.applyFiltersToColumns(col.children, filters);
+      }
+    }
+
+    return columns;
+  }
+
+
+
+
+
+
+  activeFilteredColumns: any[] = [];
+  updateActiveFilteredColumns(columns: any[]): any[] {
+    const collectFiltered = (cols: any[]): any[] => {
+      let result: any[] = [];
+
+      for (let i = 0; i < cols.length; i++) {
+        const col = cols[i];
+        if (col.children && col.children.length > 0) {
+          result = result.concat(collectFiltered(col.children));
+        }
+
+        if (col.query) {
+          const hasDropdownFilter =
+            Array.isArray(col.query._ids) && col.query._ids.length > 0;
+
+          const hasValueFilter =
+            (col.query.first_value && col.query.first_value !== '') ||
+            (col.query.second_value && col.query.second_value !== '');
+
+          if (hasDropdownFilter || hasValueFilter) {
+            result.push(col);
+          }
+        }
+      }
+      return result;
+    };
+    this.activeFilteredColumns = [...collectFiltered(columns)];
+    return this.activeFilteredColumns;
+  }
+
+
+
+  hasFieldChanged(current: any, original: any, type: string): boolean {
+    switch (type) {
+      case 'number':
+        return Number(current) !== Number(original);
+
+      case 'string':
+        return String(current || '') !== String(original || '');
+
+      case 'dropdown':
+        if (typeof current === 'object' && typeof original === 'object') {
+          return current?.id !== original?.id || current?.value !== original?.value;
+        }
+        return current !== original;
+
+      case 'boolean':
+        return Boolean(current) !== Boolean(original);
+
+      case 'date':
+        const currentDate = new Date(current).getTime();
+        const originalDate = new Date(original).getTime();
+        return isNaN(currentDate) || isNaN(originalDate)
+          ? current !== original
+          : currentDate !== originalDate;
+
+      default:
+        return JSON.stringify(current) !== JSON.stringify(original);
+    }
+  }
+
+
+  // Copy column data to column dropdown values in case of absence
+  async copyDropdownDataRecursively(columns: any[]): Promise<any[]> {
+    for (const col of columns) {
+      if (col.type === 'dropdown' || col.type == 'array') {
+        const dropdownValues = col.column_dropdown_value;
+        const dataValues = col.column_data;
+
+        if (
+          (!Array.isArray(dropdownValues) || dropdownValues.length === 0) &&
+          Array.isArray(dataValues) &&
+          dataValues.length > 0
+        ) {
+          col.column_dropdown_value = dataValues.map(item =>
+            typeof item === 'object'
+              ? item
+              : { id: item, name: item, value: item }
+          );
+        }
+      }
+
+      if (Array.isArray(col.children) && col.children.length > 0) {
+        col.children = await this.copyDropdownDataRecursively(col.children);
+      }
+    }
+
+    return columns;
+  }
+
+
+  formatDateValue(value: any, momentFormat?: string): string {
+    const tryFormat = (date: Date) => {
+      const angularFormat = momentFormat
+        ? this.convertMomentToAngularDateFormat(momentFormat)
+        : 'dd/MM/yyyy';
+      return this.datePipe.transform(date, angularFormat) ?? '-';
+    };
+
+    if (value instanceof Date && !isNaN(value.getTime())) {
+      return tryFormat(value);
+    }
+
+    if (typeof value === 'string') {
+      let cleanedValue = value.replace(/^DD/, '01');
+
+      const parsedDDMM = this.parseDDMMYYYY(cleanedValue);
+      if (parsedDDMM) return tryFormat(parsedDDMM);
+
+      if (!isNaN(Date.parse(cleanedValue))) {
+        return tryFormat(new Date(cleanedValue));
+      }
+    }
+
+
+    if (typeof value === 'string' && !isNaN(Date.parse(value))) {
+      return tryFormat(new Date(value));
+    }
+
+    if (value?.name || value?.value) {
+      return value.value ?? value.name ?? '-';
+    }
+
+    if (value != null) return String(value);
+
+    return '-';
+  }
+
+
+
+
+  private convertMomentToAngularDateFormat(momentFormat: string): string {
+    if (!momentFormat) return 'mediumDate';
+
+    return momentFormat
+      .replace(/DD/g, 'dd')
+      .replace(/D/g, 'd')
+      .replace(/YYYY/g, 'yyyy')
+      .replace(/YY/g, 'yy')
+      .replace(/MMMM/g, 'MMMM')
+      .replace(/MMM/g, 'MMM')
+      .replace(/MM/g, 'MM')
+      .replace(/M/g, 'M')
+      .replace(/dddd/g, 'EEEE')
+      .replace(/ddd/g, 'EEE')
+      .replace(/HH/g, 'HH')
+      .replace(/H/g, 'H')
+      .replace(/hh/g, 'hh')
+      .replace(/h/g, 'h')
+      .replace(/mm/g, 'mm')
+      .replace(/m/g, 'm')
+      .replace(/ss/g, 'ss')
+      .replace(/s/g, 's')
+      .replace(/A/g, 'a')
+      .replace(/a/g, 'a');
+  }
+
+  private parseDDMMYYYY(value: string): Date | null {
+    const match = value.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+    if (!match) return null;
+
+    const day = +match[1];
+    const month = +match[2] - 1;
+    const year = +match[3];
+
+    const date = new Date(year, month, day);
+
+    return (date.getFullYear() === year &&
+      date.getMonth() === month &&
+      date.getDate() === day)
+      ? date
+      : null;
+  }
+
+}
+
+
+
+

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

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

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

@@ -0,0 +1,252 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CopyServiceService {
+
+  constructor() { }
+  getSelectedDataForCopy(
+    dataSet: any[],
+    columns: any[],
+    rowSelectedIndexes: Set<number>,
+    selectedCells: any[],
+    getNestedValue: (obj: any, path: string) => any
+  ): any[][] {
+    columns = columns.filter(col => col.is_visible);
+    const copiedRows: any[][] = [];
+    const findRowByVirtualIndex = (vIndex: number) =>
+      dataSet.find((r: any) => r.__virtualIndex === vIndex);
+    if (rowSelectedIndexes && rowSelectedIndexes.size > 0) {
+      const sortedIndexes = [...rowSelectedIndexes].sort((a, b) => a - b);
+      for (const vIndex of sortedIndexes) {
+        const row = findRowByVirtualIndex(vIndex);
+        if (!row) continue;
+        const extractValue = (field: string): string => {
+          const nested = getNestedValue(row, field);
+          const value =
+            nested?.value ??
+            nested?.name ??
+            nested ??
+            '-';
+
+          if (Array.isArray(value)) {
+            return value
+              .map(v =>
+                typeof v === 'object'
+                  ? (v.departmentName ?? v.roleName ?? '')
+                  : (v?.toString() ?? '')
+              )
+              .join(', ');
+          }
+          return value ?? '';
+        };
+        const mapped = columns.map(col => {
+          if (col.children && Array.isArray(col.children)) {
+            return col.children.map((c: { field: string }) => extractValue(c.field));
+          }
+          return [extractValue(col.field)];
+        });
+        const rowValues = mapped.reduce<string[]>((acc, curr) => acc.concat(curr), []);
+        copiedRows.push(rowValues);
+      }
+    }
+    if (selectedCells && selectedCells.length > 0) {
+      const rowsMap = new Map<number, any[]>();
+      for (const cell of selectedCells) {
+        const row = findRowByVirtualIndex(cell.rowIndex);
+        if (!row) continue;
+        const col = columns[cell.colIndex];
+        let fieldName = col?.field;
+        if (col?.children && col.children[cell.subColIndex]) {
+          fieldName = col.children[cell.subColIndex].field;
+        }
+        let value = getNestedValue(row, fieldName) || getNestedValue(row, fieldName)?.name || getNestedValue(row, fieldName) || '-';
+        if (Array.isArray(value)) {
+          value = value
+            .map(v =>
+              typeof v === 'object'
+                ? v.departmentName ?? v.roleName ?? v.full_name ?? ''
+                : v?.toString() ?? ''
+            )
+            .join(', ');
+        } else {
+          value = value ?? '';
+        }
+        if (!rowsMap.has(cell.rowIndex)) rowsMap.set(cell.rowIndex, []);
+        rowsMap.get(cell.rowIndex)!.push(value);
+      }
+      const sortedCells = [...rowsMap.entries()]
+        .sort(([a], [b]) => a - b)
+        .map(([_, v]) => v);
+      copiedRows.push(...sortedCells);
+    }
+    if (copiedRows.length === 0) {
+      const activeCell = document.querySelector('.active-cell');
+      if (activeCell) return [[activeCell.textContent?.trim() || '']];
+    }
+
+    const maxCols = copiedRows.reduce((max, row) => Math.max(max, row.length), 0);
+    return copiedRows.map(row => {
+      const newRow = [...row];
+      while (newRow.length < maxCols) newRow.push('');
+      return newRow;
+    });
+  }
+
+
+  copyToClipboard(
+    selectedData: any[][],
+    selector = '.selected-cell, .active-cell, .row-selected'
+  ): void {
+    if (!selectedData || selectedData.length === 0) return;
+    const textToCopy = selectedData
+      .map(row => row.map(cell => (cell ?? '').toString()).join('\t'))
+      .join('\n');
+    navigator.clipboard.writeText(textToCopy).catch(err => console.error(err));
+    const selectedEls = document.querySelectorAll(selector);
+    selectedEls.forEach(el => el.classList.add('flash-bg'));
+    setTimeout(() => {
+      selectedEls.forEach(el => el.classList.remove('flash-bg'));
+    }, 1000);
+  }
+
+
+updateRows: any[] = [];
+  currentColums : any = []
+  async pasteFromClipboardText(
+    text: string,
+    dataSet: any[],
+    columns: any[],
+    startRowIndex: number,
+    startColIndex: number,
+    startSubColIndex: number = 0
+  ): Promise<any> {
+    if (!text) return [];
+    this.updateRows = [];
+    const rows = text.split(/\r?\n/).map(r => r.split('\t'));
+    const flattenedColumns: any[] = [];
+    columns.forEach(col => {
+      if (col.children?.length) {
+        col.children.forEach((child: any) => flattenedColumns.push({ parent: col, ...child }));
+      } else {
+        flattenedColumns.push(col);
+      }
+    });
+    let startFlattenedIndex = 0;
+    for (let i = 0; i < startColIndex; i++) {
+      const col = columns[i];
+      startFlattenedIndex += col.children?.length || 1;
+    }
+    const startCol = columns[startColIndex];
+    if (startCol?.children?.length) {
+      startFlattenedIndex += Math.min(startSubColIndex, startCol.children.length - 1);
+    }
+ 
+    rows.forEach((rowValues, rOffset) => {
+      const targetRowIndex = startRowIndex + rOffset;
+      const row = dataSet.find(r => r?.__virtualIndex === targetRowIndex);
+      if (!row) return;
+ 
+      rowValues.forEach((value, cOffset) => {
+        const targetIndex = startFlattenedIndex + cOffset;
+        if (targetIndex < 0 || targetIndex >= flattenedColumns.length) return;
+ 
+        const targetColumn = flattenedColumns[targetIndex];
+        if(!targetColumn || !targetColumn.is_editable) return;
+         if (targetColumn?.type === 'string') {
+          this.currentColums.push(targetColumn);
+            this.setNestedValue(row, targetColumn, value);
+          } else if (targetColumn.type === 'number') {
+            const num = Number(value);
+            if (!isNaN(num) && value !== '') {
+              this.currentColums.push(targetColumn);
+              this.setNestedValue(row, targetColumn, num);
+            }
+          }
+      });
+    });
+ 
+    return {updateRows : this.updateRows, currentColums : this.currentColums};
+  }
+
+
+  setNestedValue(obj: any, column: any, option: any, calledFromInput = false): void {
+    if (column.type === 'date' || column.type === 'image') return;
+    const path = column.field;
+    if (!path) return;
+    const keys = path.split('.');
+    const lastKey = keys.pop();
+    const parent = keys.reduce((acc: any, key: string) => (acc[key] ??= {}), obj);
+    if (parent && lastKey) {
+      if (typeof option === 'object' && option !== null) {
+        parent[lastKey] = {
+          id: option.id ?? 1,
+          value: option.value ?? option,
+        };
+      } else {
+        parent[lastKey] = option;
+      }
+    }
+    const sendObj = {
+      data: { ...obj },
+      eventType: 'onCellEdit',
+    };
+    this.updateRows.push(obj);
+  }
+
+
+  cutSelectedSelectedData(
+    dataSet: any[],
+    rowSelectedIndexes: Set<number>,
+    selectedCells: any[],
+    columns: any[],
+    setNestedValue: (obj: any, column: any, value: any) => void
+  ): any {
+    let updatedData = [...dataSet];
+    if (rowSelectedIndexes?.size) {
+      const indexes = [...rowSelectedIndexes];
+      updatedData = updatedData.filter(
+        (row: any) => !indexes.includes(row.__virtualIndex)
+      );
+      // rowSelectedIndexes.clear();
+    }
+    else if (selectedCells?.length) {
+      this.updateRows = [];
+      for (const cell of selectedCells) {
+        const row = updatedData.find(r => r.__virtualIndex === cell.rowIndex);
+        if (!row) continue;
+        let col = columns[cell.colIndex];
+        if (col?.children && col.children[cell.subColIndex]) {
+          col = col.children[cell.subColIndex];
+        }
+        this.setNestedValue(row, col, '');
+      }
+      // selectedCells.length = 0;
+    }
+    return {updatedData: updatedData, updatedRows: this.updateRows};
+  }
+
+
+  cutWithAnimation(
+    selectedData: any[][],
+    selector = '.selected-cell, .active-cell, .row-selected'
+  ): void {
+    if (!selectedData || selectedData.length === 0) return;
+
+    const textToCopy = selectedData
+      .map(row => row.map(cell => (cell ?? '').toString()).join('\t'))
+      .join('\n');
+
+    navigator.clipboard.writeText(textToCopy).catch(err => console.error(err));
+
+    // Apply red cut animation
+    const selectedEls = document.querySelectorAll(selector);
+    selectedEls.forEach(el => el.classList.add('cut-flash-bg'));
+    setTimeout(() => {
+      selectedEls.forEach(el => el.classList.remove('cut-flash-bg'));
+    }, 1000);
+  }
+
+
+}

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

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