ms-data-grid 0.0.45 → 0.0.47

package/src/lib/services/export.service.ts

@@ -0,0 +1,189 @@
+import { Injectable } from '@angular/core';
+import * as XLSX from 'xlsx-js-style';
+import { saveAs } from 'file-saver';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExportService {
+
+  constructor() {}
+
+  /**
+   * Exports data to CSV or Excel.
+   * @param columns List of column definitions (each having name/key/is_visible)
+   * @param data The array of data objects
+   * @param fileName Name of the exported file (without extension)
+   * @param format 'csv' | 'xlsx'
+   */
+exportData(
+  columns: any[],
+  data: any[],
+  fileName: string,
+  format: 'csv' | 'xlsx' = 'xlsx',
+  rowSelectedIndexes: Set<number> | null = new Set(),
+  styleConfig: {
+    headerBgColor?: string;
+    headerTextColor?: string;
+    bodyTextColor?: string;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold';
+    zoomScale?: number;
+    headerRowHeight?: number;
+    selectedRowBgColor?: string;
+  } = {}
+) {
+  const {
+    headerBgColor = '#228B22',
+    headerTextColor = '#FFFFFF',
+    bodyTextColor = '#000000',
+    fontFamily = 'Calibri',
+    fontWeight = 'normal',
+    zoomScale = 120,
+    headerRowHeight = 20,
+    selectedRowBgColor = '#8AC5FF',
+  } = styleConfig;
+
+  const visibleColumns = columns.filter(
+    col => col.is_visible && col.type !== 'image' && col.type !== 'logo'
+  );
+
+  const headers = visibleColumns.map(col => col.header || col.headerName || col.name);
+
+  const flattenValue = (value: any): any => {
+    if (value == null) return '';
+    if (Array.isArray(value))
+      return value.map(v => (typeof v === 'object' ? flattenValue(v) : v)).join(', ');
+    if (typeof value === 'object')
+      return Object.entries(value)
+        .map(([k, v]) => `${k}: ${flattenValue(v)}`)
+        .join(', ');
+    return value;
+  };
+
+  const exportData = data.map(row =>
+    visibleColumns.reduce((acc: any, col) => {
+      const header = col.headerName || col.name || col.header;
+      let value = this.getNestedValue(row, col.field);
+
+      switch (col.type) {
+        case 'boolean':
+          value = value ? 'Yes' : 'No';
+          break;
+        case 'date':
+          if (value) {
+            const date = new Date(value);
+            if (!isNaN(date.getTime())) {
+              value = date.toLocaleDateString('en-US', {
+                day: '2-digit',
+                month: 'long',
+                year: 'numeric',
+              });
+            }
+          }
+          break;
+        default:
+          value = flattenValue(value);
+      }
+
+      acc[header] = value;
+      return acc;
+    }, {})
+  );
+
+  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(exportData, { header: headers });
+
+  // ✅ Define a reusable border style
+  const borderStyle = {
+    top: { style: 'thin', color: { rgb: 'CCCCCC' } },
+    bottom: { style: 'thin', color: { rgb: 'CCCCCC' } },
+    left: { style: 'thin', color: { rgb: 'CCCCCC' } },
+    right: { style: 'thin', color: { rgb: 'CCCCCC' } },
+  };
+
+  // ✅ Apply header styles
+  headers.forEach((header, index) => {
+    const cellAddress = XLSX.utils.encode_cell({ r: 0, c: index });
+    if (!worksheet[cellAddress]) return;
+
+    worksheet[cellAddress].s = {
+      fill: { fgColor: { rgb: headerBgColor.replace('#', '') } },
+      font: {
+        name: fontFamily,
+        sz: 14,
+        color: { rgb: headerTextColor.replace('#', '') },
+        bold: fontWeight === 'bold',
+      },
+      alignment: { horizontal: 'center', vertical: 'center' },
+      border: borderStyle, // ✅ Added border here
+    };
+  });
+
+  // ✅ Apply body styles + highlight selected rows
+  for (let r = 1; r <= exportData.length; r++) {
+    const isSelected = rowSelectedIndexes?.has(r - 1);
+    const rowBgColor = isSelected ? selectedRowBgColor : '#FFFFFF';
+
+    for (let c = 0; c < headers.length; c++) {
+      const col = visibleColumns[c];
+      const cellAddress = XLSX.utils.encode_cell({ r, c });
+      const cell = worksheet[cellAddress];
+      if (!cell) continue;
+
+      let horizontalAlign = 'left';
+      if (['number', 'boolean', 'date'].includes(col.type)) horizontalAlign = 'center';
+
+      cell.s = {
+        fill: { fgColor: { rgb: rowBgColor.replace('#', '') } },
+        font: {
+          name: fontFamily,
+          sz: 14,
+          color: { rgb: bodyTextColor.replace('#', '') },
+          bold: false,
+        },
+        alignment: { horizontal: horizontalAlign, vertical: 'center', wrapText: true },
+        border: borderStyle, // ✅ Added border here too
+      };
+    }
+  }
+
+  // ✅ Adjust column widths
+  const colWidths = headers.map(header => {
+    let maxLength = header.length;
+    exportData.forEach(row => {
+      const val = row[header];
+      if (val != null) {
+        const len = val.toString().length;
+        if (len > maxLength) maxLength = len;
+      }
+    });
+    return { wch: Math.min(maxLength + 2, 64) };
+  });
+  worksheet['!cols'] = colWidths;
+
+  worksheet['!rows'] = [{ hpt: headerRowHeight }];
+  worksheet['!zoom'] = zoomScale;
+
+  const workbook: XLSX.WorkBook = { Sheets: { Data: worksheet }, SheetNames: ['Data'] };
+
+  if (format === 'csv') {
+    const csv = XLSX.utils.sheet_to_csv(worksheet);
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    saveAs(blob, `${fileName}.csv`);
+  } else {
+    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+    const blob = new Blob([excelBuffer], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',
+    });
+    saveAs(blob, `${fileName}.xlsx`);
+  }
+}
+
+
+
+
+private getNestedValue(obj: any, path: string): any {
+  if (!path || typeof obj !== 'object') return obj;
+  return path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : ''), obj);
+}
+}

package/src/lib/services/split-columns.service.spec.ts

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

package/src/lib/services/split-columns.service.ts

@@ -0,0 +1,148 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SplitColumnsService {
+  prepareColumns(columns: any[], containerWidth: number): any {
+    const left: any[] = [];
+    const center: any[] = [];
+    const right: any[] = [];
+
+    for (const col of columns) {
+      if (col.children?.length) {
+        const leftChildren: any[] = [];
+        const centerChildren: any[] = [];
+        const rightChildren: any[] = [];
+
+        for (const child of col.children) {
+          if (child.is_visible === false) continue;
+
+          const pinned = child.pinned ?? col.pinned ?? null;
+          const childWithPinned = { ...child, pinned };
+
+          if (pinned === 'left') leftChildren.push(childWithPinned);
+          else if (pinned === 'right') rightChildren.push(childWithPinned);
+          else centerChildren.push(childWithPinned);
+        }
+
+        if (leftChildren.length) {
+          left.push({ header: col.header, children: leftChildren, id: col?.id || col?._id });
+        }
+        if (centerChildren.length) {
+          center.push({
+            header: col.header,
+            children: centerChildren,
+            id: col.id || col._id,
+          });
+        }
+        if (rightChildren.length) {
+          right.push({
+            header: col.header,
+            children: rightChildren,
+            id: col.id || col._id,
+          });
+        }
+      } else if (col.is_visible !== false) {
+        const pinned = col.pinned ?? null;
+        if (pinned === 'left') left.push(col);
+        else if (pinned === 'right') right.push(col);
+        else center.push(col);
+      }
+    }
+
+    return { left, center, right };
+  }
+
+  setColumnsQuery(columns: any[]) {
+    for (const col of columns) {
+      // if (col.children?.length) {
+      //   for (const child of col.children) {
+      //     if (!child?.query?.firt_value && !child?.query?._ids?.length) {
+      //       child['query'] = {
+      //         first_condition: 'contain',
+      //         first_value: null,
+      //         condition: 'none',
+      //         second_condition: 'contain',
+      //         second_value: null,
+      //         _ids: [],
+      //       };
+      //     }
+      //   }
+      // }
+      // if (!col?.query?.firt_value && !col?.query?._ids?.length) {
+      //   col.query = {
+      //     first_condition: 'contain',
+      //     first_value: null,
+      //     condition: 'none',
+      //     second_condition: 'contain',
+      //     second_value: null,
+      //     _ids: [],
+      //   };
+      // }
+    }
+
+    console.log('Updated Columns: ', columns);
+
+    return columns;
+  }
+
+   assignDefaultWidths(columns: any[], containerWidth: number): any[] {
+  const visibleLeafCols = this.getVisibleLeafColumns(columns);
+
+  if (!visibleLeafCols.length) return columns;
+
+  let defaultWidth = Math.floor(containerWidth / visibleLeafCols.length);
+  if (defaultWidth < 80) defaultWidth = 80;
+
+  const cloneColumns = (cols: any[]): any[] =>
+    cols.map((col) => {
+      if (col.children?.length) {
+        const newChildren = col.children.map((child: any) => {
+          // If visible → dynamic default width
+          // If invisible → fixed 150px
+          if (!child.width) {
+            if (child.is_visible === false) {
+              return { ...child, width: 150 };
+            } else {
+              return { ...child, width: defaultWidth };
+            }
+          }
+          return { ...child };
+        });
+
+        return { ...col, children: newChildren };
+      }
+
+      if (!col.width) {
+        if (col.is_visible === false) {
+          return { ...col, width: 150 };
+        } else {
+          return { ...col, width: defaultWidth };
+        }
+      }
+
+      return { ...col };
+    });
+
+  return cloneColumns(columns);
+}
+
+
+  private getVisibleLeafColumns(columns: any[]): any[] {
+    const result: any[] = [];
+
+    for (const col of columns) {
+      if (col.children?.length) {
+        const visibleChildren = col.children.filter(
+          (c: any) => c.is_visible !== false
+        );
+        result.push(...visibleChildren);
+      } else if (col.is_visible !== false) {
+        result.push(col);
+      }
+    }
+
+    return result;
+  }
+}

package/src/lib/services/swap-columns.service.spec.ts

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

package/src/lib/services/swap-columns.service.ts

@@ -0,0 +1,162 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SwapColumnsService {
+  constructor() {}
+
+  deepClone(obj: any) {
+    return JSON.parse(JSON.stringify(obj));
+  }
+
+  flattenColumnsWithPaths(columns: any[]): { col: any; path: number[] }[] {
+    const result: { col: any; path: number[] }[] = [];
+
+    const recurse = (cols: any[], currentPath: number[] = []) => {
+      cols.forEach((col, index) => {
+        const path = [...currentPath, index];
+        result.push({ col, path });
+
+        if (Array.isArray(col.children)) {
+          recurse(col.children, path);
+        }
+      });
+    };
+
+    recurse(columns);
+    return result;
+  }
+
+  findColumnByIndex(
+    columns: any[],
+    index: number,
+    flat: any[],
+    _path: number[][] = [],
+    currentPath: number[] = []
+  ): { column: any; parent: any[]; path: number[] } | null {
+    for (let i = 0; i < columns.length; i++) {
+      const col = columns[i];
+      const nextPath = [...currentPath, i];
+
+      if (flat[index] === col) {
+        return { column: col, parent: columns, path: nextPath };
+      }
+
+      if (Array.isArray(col?.children)) {
+        const result = this.findColumnByIndex(
+          col?.children,
+          index,
+          flat,
+          _path,
+          nextPath
+        );
+        if (result) return result;
+      }
+    }
+
+    return null;
+  }
+
+  insertAtPath(columns: any[], path: number[], newColumn: any): any[] {
+    const cloned = this.deepClone(columns);
+    let current = cloned;
+
+    for (let i = 0; i < path.length - 1; i++) {
+      if (!current[path[i]]?.children) {
+        current[path[i]]!.children = [];
+      }
+
+      current = current[path[i]]?.children;
+    }
+
+    const insertIndex = path[path.length - 1];
+    current.splice(insertIndex, 0, newColumn);
+    return cloned;
+  }
+
+  removeAtPath(columns: any[], path: number[]): any[] {
+    const cloned = this.deepClone(columns);
+    let current = cloned;
+
+    for (let i = 0; i < path.length - 1; i++) {
+      if (!current[path[i]]?.children) {
+        return cloned; // Safety: path is invalid
+      }
+      current = current[path[i]]?.children;
+    }
+
+    const removeIndex = path[path.length - 1];
+    if (Array.isArray(current) && current.length > removeIndex) {
+      current.splice(removeIndex, 1);
+    }
+
+    return cloned;
+  }
+
+  swapColumnsInTree(
+    currentColumn: any,
+    columns: any[],
+    fromIndex: number,
+    toIndex: number
+  ): any[] {
+    const flat = this.flattenColumnsWithPaths(columns);
+
+    if (
+      fromIndex < 0 ||
+      toIndex < 0 ||
+      fromIndex >= flat.length ||
+      toIndex >= flat.length
+    ) {
+      return columns; // invalid indices
+    }
+
+    const fromInfo = this.findColumnByIndex(columns, fromIndex, flat);
+    const toInfo = this.findColumnByIndex(columns, toIndex, flat);
+
+    if (!fromInfo || !toInfo) return columns;
+
+    const fromCol = fromInfo.column;
+    const toCol = toInfo.column;
+
+    let updatedCols = this.removeAtPath(columns, fromInfo.path);
+
+    // Case 1: Same parent
+    if (
+      JSON.stringify(fromInfo.path.slice(0, -1)) ===
+      JSON.stringify(toInfo.path.slice(0, -1))
+    ) {
+      return this.insertAtPath(updatedCols, toInfo.path, fromCol);
+    }
+
+    // Case 2: Drop target is a group header
+    if (Array.isArray(toCol?.children)) {
+      const cloned = this.deepClone(updatedCols);
+      let parent = cloned;
+
+      for (let i = 0; i < toInfo.path.length - 1; i++) {
+        parent = parent[toInfo.path[i]].children;
+      }
+
+      const target = parent[toInfo.path[toInfo.path.length - 1]];
+      if (!target.children) {
+        target.children = [];
+      }
+
+      target.children.push(fromCol);
+      return cloned;
+    }
+
+    // Case 3: Drop target is a regular column → wrap both into a group
+    const groupHeader = {
+      headerName: toCol.headerName || 'Group',
+      children: [toCol, fromCol],
+    };
+
+    // Remove target from its original location
+    updatedCols = this.removeAtPath(updatedCols, toInfo.path);
+
+    // Insert group at target index
+    return this.insertAtPath(updatedCols, toInfo.path, groupHeader);
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of data-grid
+ */
+
+export * from './lib/data-grid.module';
+export * from './lib/data-grid/data-grid.component';

package/src/typings.d.ts

@@ -0,0 +1,4 @@
+declare module 'xlsx-style' {
+  import * as XLSX from 'xlsx';
+  export = XLSX;
+}

package/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "target": "es2019",
+    "lib": ["es2019", "dom"]
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ],
+  "include": [
+    "src/**/*.ts",
+    "src/typings.d.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}