data-grid-workspace 0.0.120

package/projects/data-grid/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/projects/data-grid/src/lib/styles/font-style.css

@@ -0,0 +1,34 @@
+@font-face {
+  font-family: "Inter";
+  src: url("../assets/fonts/Inter/static/Inter_18pt-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* medium */
+@font-face {
+  font-family: "Inter";
+  src: url("../assets/fonts/Inter/static/Inter_18pt-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* bold */
+@font-face {
+  font-family: "Inter";
+  src: url("../assets/fonts/Inter/static/Inter_18pt-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* semi bold */
+@font-face {
+  font-family: "Inter";
+  src: url("../assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}

package/projects/data-grid/src/public-api.ts

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of data-grid
+ */
+
+export * from './lib/data-grid.module';
+export * from './lib/data-grid/data-grid.component';
+// export * from './lib/interfaces/data-grid-config.ts';
+export * from './lib/services/common.service';

package/projects/data-grid/src/typings.d.ts

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

package/projects/data-grid/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/projects/data-grid/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/projects/data-grid/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"
+  ]
+}

package/src/app/app.component.html

@@ -0,0 +1,61 @@
+<!-- 
+<div class="p-4">
+  orignal date: 2025-10-31T19:00:00.000Z
+  <br>
+  formated date: {{ formattedDate }}
+</div> -->
+
+<div style="height: 90vh; width: 100%" class="data-table p-3">
+  <data-grid
+    [columns]="columns"
+    [dataSet]="dataSet"
+    [evenRowsBackgroundColor]="undefined"
+    [headerBackgroundColor]="'rgb(241 241 241)'"
+    [checkboxesBackgroundColor]="'rgb(241 241 241)'"
+    [sidemenuBackgroundColor]="'rgb(241 241 241)'"
+    [bodyBackgroundColor]="'#f6f8ff'"
+    [leftPinnedBackgroundColor]="'#f6f8ff'"
+    [rightPinnedBackgroundColor]="'#f6f8ff'"
+    [fontFaimly]="'sans-serif'"
+    [showVerticalBorder]="false"
+    [bodyTextColor]="'#7a7a7a'"
+    [headerTextColor]="'#444'"
+    [checkboxesColor]="'#444'"
+    [headerTextFontsSize]="14"
+    [bodyTextFontsSize]="14"
+    [bodyFontWeight]="400"
+    [checkedRowBackgroundColor]="'aliceblue'"
+    [dropdownsBackgroundColor]="'#f6f8ff'"
+    [footerRowBackgroundColor]="'#f6f8ff'"
+    [paginationConfig]="pagginationConfig"
+    [showCellDetailsBox]="true"
+    [taskbarActions]="['verify', 'unverify', 'delete', 'update']"
+    [showTaskbar]="true"
+    [closeDropdown]="dropdownState"
+    (genericEvent)="onDataTableEvent($event)"
+    [showColumnsGrouping]="false"
+    [showRowsGrouping]="true"
+    [showSideMenu]="false"
+    [showFilterRow]="false"
+    [showSerialNumber]="true"
+    [filtersConfig]="filtersConfig"
+    [nestedTableHeaderRowHeight]="45"
+    [nestedTablerowHeight]="50"
+    [rowHeight]="60"
+    [headerRowHeight]="50"
+    [gridType]="''"
+    [showTotalAmountRow]="false"
+    [horizintalScrollbarWidth]="'auto'"
+    [sortingConfig]="sortingConfig"
+    [loading]="loading"
+    [columnThreedotsMunuConfig]="columnThreedotsMunuConfig"
+    [tableView]="tableViewList"
+    [rowAnimation]="animation"
+    [pageSizeOptions]="[100, 500, 1000, 5000, 10000, 50000, 100000]"
+    (filterOptions)="getFilterOptions($event)"
+    [defaultConfig]="config"
+    [leftPinnedBoxshadow]="'rgb(85 85 85) 1px -5px 5px 0px'"
+    [rightPinnedBoxshadow]="'-6px 0 5px -4px rgba(85, 85, 85, 0.6)'"
+    (createUpdateConfigListing)="onCreateUpdate($event)"
+  ></data-grid>
+</div>

package/src/app/app.component.scss

@@ -0,0 +1 @@
+

package/src/app/app.component.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    declarations: [AppComponent]
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'data-grid-workspace'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('data-grid-workspace');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('data-grid-workspace app is running!');
+  });
+});

package/src/app/app.component.ts

@@ -0,0 +1,166 @@
+// import { result } from './testing-data/invoices/data';
+// import { data } from './testing-data/task-management/tasks';
+import {data as trasnlationData} from './testing-data/task-management/tasks'
+import { RowAnimationType } from 'projects/data-grid/src/lib/data-grid/data-grid.component';
+// import {result as trasnlationData} from './testing-data/assets-list/data'
+
+import { result } from './testing-data/manage-employee/data'
+
+
+import { Component, OnInit } from '@angular/core';
+import { DataGridConfig } from 'ms-data-grid';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: [],
+})
+export class AppComponent implements OnInit {
+  title = 'MS DATA GRID DEMO';
+  animation = RowAnimationType.SlideUp;
+
+  config: any =  {
+    "fontFaimly": "Segoe Script",
+    "bodyTextFontsSize": 16,
+    "headerTextFontsSize": 16,
+    "oddRowsBackgroundColor": "#f1f1f1",
+    "showVerticalBorder": true,
+    "selectedTableLayout": "large",
+    "globalSearch": "asd",
+    "filterNames": "",
+    "totalCount": 67,
+    "rowShadingEnabled": true,
+     activeFilters: true
+	}
+
+  originalDataset = trasnlationData.results;
+  // originalDataset = trasnlationData.results;
+
+  // dataSet: any[] = result.results;
+  //  columns = result.config.columns
+
+  dataSet = trasnlationData.results;
+  columns = trasnlationData.config.columns;
+  tableViewList: any = [{id: 1, name: 'A test filter'}, {id: 1, name: 'A test filter'}, {id: 1, name: 'A test filter'}, {id: 1, name: 'A test filter'},];
+  // singleDayTimesheetColumns = singleTimesheetData.getEmployeeTimeSheetAttendanceList.config.columns;
+  // singleDayTimesheetDataSet = singleTimesheetData.getEmployeeTimeSheetAttendanceList.dailyClockHistoryList.results;
+
+  columnThreedotsMunuConfig = {
+    showPinleft: true,
+    showPinright: true,
+    showAscending: true,
+    showDescending: true, 
+    showFilter: true,
+    showRowsGrouping: true,
+    showAutosizeAllColumns: true,
+    showAutosizeThisColumn: true,
+    showChoseColumns: true,
+    showResetColumns: true,
+  };
+
+  dropdownState: { preset: { closed: boolean; loading: boolean } } = {
+    preset: { closed: false, loading: false },
+  };
+  loading = false;
+
+  pagginationConfig = {
+    limit: trasnlationData.config.limit || 10,
+    totaltrasnlationDatas: trasnlationData.results || trasnlationData,
+    totalPages:
+      trasnlationData.config.totalPages ||
+      Math.ceil(trasnlationData.results.length / trasnlationData.config.limit) || 10,
+    page: trasnlationData.config.page || 1,
+    totalResults: 5000
+  };
+
+  sortingConfig = {
+    field: 'orderDate',
+    order_by: 'asc',
+  };
+
+  ngOnInit() {
+    // Set initial sliced data
+    this.setData();
+    this.dataSet = this.dataSet.slice(0, 10);
+  }
+
+  /** ✅ Handles table events */
+  onDataTableEvent(event: any) {
+    console.log('Event...................: ', event);
+    switch (event.eventType) {
+      case 'createPreset':
+        this.dropdownState.preset.loading = true;
+        this.dropdownState.preset.closed = false;
+        this.dropdownState = { ...this.dropdownState };
+
+        setTimeout(() => {
+          this.dropdownState.preset.loading = false;
+          this.dropdownState.preset.closed = true;
+          this.dropdownState = { ...this.dropdownState };
+        }, 3000);
+        break;
+
+      case 'changePageSize':
+        this.pagginationConfig.limit = parseInt(event.obj.limit, 10);
+        this.pagginationConfig.page = 1; // reset to first page
+        this.setData();
+        break;
+
+      case 'pageChange':
+        this.pagginationConfig.page = parseInt(event.obj.page, 10);
+        this.setData();
+        break;
+    }
+  }
+
+  /** ✅ Slice dataset based on current pagination */
+  setData() {
+    this.loading = true;
+
+    setTimeout(() => {
+      const { page, limit } = this.pagginationConfig;
+      const startIndex = (page - 1) * limit;
+      const endIndex = startIndex + limit;
+     const data = this.originalDataset.slice(startIndex, endIndex);
+      this.pagginationConfig.totalPages = Math.ceil(
+        this.pagginationConfig.totalResults / limit
+      );
+       this.dataSet = [...data];
+       this.pagginationConfig = {...this.pagginationConfig};
+    }, 1000);
+    setTimeout(() => {
+      this.loading = false;
+    }, 1500);
+  }
+
+  filtersConfig: any[] = [{
+    "query": {
+        "first_condition": "Less than or equal",
+        "first_value": "asd",
+        "condition": "or",
+        "second_condition": "Less than or equal",
+        "second_value": "asd",
+        "_ids": []
+    },
+    "search": "",
+    "field": "no_sub_task",
+    "type": "number",
+    "_ids": []
+}];
+  getFilterOptions(event: any){
+    this.loading = true;
+
+    setTimeout(() => {
+      this.dataSet = [...this.dataSet];
+      this.columns = [...this.columns];
+      this.filtersConfig = event;
+      console.log("Filters Config: ", this.filtersConfig);
+      this.loading = false;
+    }, 3000);
+  }
+
+  onCreateUpdate(event: any){
+    console.log("Event: ", event);
+  }
+  
+}

package/src/app/app.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { DataGridModule } from 'projects/data-grid/src/lib/data-grid.module';
+import { AppComponent } from './app.component';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SubCategoryCellComponentComponent } from './sub-category-cell-component/sub-category-cell-component.component';
+import { StatusCellEditorComponent } from './status-cell-editor/status-cell-editor.component';
+import { FormsModule } from '@angular/forms';
+import { DropdownFilterComponent } from './dropdown-filter/dropdown-filter.component';
+import { StatusCellComponent } from './status-cell/status-cell.component';
+
+
+
+@NgModule({
+  declarations: [					
+    AppComponent,
+      SubCategoryCellComponentComponent,
+      StatusCellEditorComponent,
+      DropdownFilterComponent,
+      StatusCellComponent
+   ],
+  imports: [
+    BrowserModule,
+    DataGridModule, 
+    HttpClientModule,
+    FormsModule,
+    BrowserAnimationsModule,
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+}) 
+export class AppModule { }

package/src/app/dropdown-filter/dropdown-filter.component.css

@@ -0,0 +1,122 @@
+/* Container */
+.filter-panel {
+  padding: 14px;
+  background: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  font-family: inherit;
+}
+
+/* Groups */
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+}
+
+.filter-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+  margin-bottom: 4px;
+}
+
+/* Inputs */
+.filter-select,
+.filter-input {
+  height: 36px;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  padding: 0 10px;
+  font-size: 13px;
+  background: #fafafa;
+  transition: all 0.2s ease;
+}
+
+.filter-select:focus,
+.filter-input:focus {
+  outline: none;
+  border-color: #6366f1;
+  background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+}
+
+/* Logic radios */
+.filter-logic {
+  display: flex;
+  justify-content: space-between;
+  background: #f9fafb;
+  border-radius: 8px;
+  padding: 6px;
+  margin: 12px 0;
+}
+
+.logic-option {
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
+}
+
+.logic-option input {
+  display: none;
+}
+
+.logic-option span {
+  display: block;
+  padding: 6px 0;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+  transition: all 0.2s ease;
+}
+
+.logic-option input:checked + span {
+  background: #6366f1;
+  color: #ffffff;
+  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
+}
+
+/* Divider */
+.filter-divider {
+  height: 1px;
+  background: #e5e7eb;
+  margin: 10px 0;
+}
+
+/* Actions */
+.filter-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.btn-clear {
+  background: transparent;
+  border: 1px solid #e5e7eb;
+  color: #6b7280;
+  border-radius: 8px;
+  padding: 6px 14px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.btn-clear:hover {
+  background: #f3f4f6;
+}
+
+.btn-apply {
+  background: #6366f1;
+  border: none;
+  color: white;
+  border-radius: 8px;
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-apply:hover {
+  background: #4f46e5;
+}