@sneat/datagrid 0.1.3 → 0.1.4

package/src/lib/components/data-grid/data-grid.component.ts

@@ -1,297 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  SimpleChanges,
-  ViewChild,
-  inject,
-} from '@angular/core';
-import { ErrorLogger, IErrorLogger } from '@sneat/core';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import {
-  Tabulator,
-  SelectRowModule,
-  MenuModule,
-  InteractionModule,
-  Module,
-  RowContextMenuSignature,
-} from 'tabulator-tables';
-import { IGridColumn } from '@sneat/grid';
-import { TabulatorColumn, TabulatorOptions } from '../../tabulator';
-
-class AdvertModule extends Module {
-  public static override moduleName = 'advert';
-
-  override initialize() {
-    return;
-  }
-}
-
-Tabulator.registerModule([
-  InteractionModule,
-  SelectRowModule,
-  AdvertModule,
-  MenuModule,
-]);
-
-
-// export interface IGridDef {
-// 	columns: IGridColumn[],
-// 	rows?: unknown[],
-// 	groupBy?: string;
-// }
-//
-// export const getTabulatorCols = (cols: IGridColumn[]): any[] => cols.map(c => {
-// 	const v = {...c};
-// 	delete v.dbType;
-// 	return v;
-// });
-//
-// export interface IGridColumn {
-// 	field: string;
-// 	colName?: string;
-// 	dbType: string;
-// 	title: string;
-// 	tooltip?: (cell: any) => string;
-// 	formatter?: any;
-// 	hozAlign?: 'left' | 'right';
-// 	widthShrink?: number;
-// 	widthGrow?: number;
-// 	width?: number | string;
-// }
-
-/**
- * This is a wrapper class for the tabulator JS library.
- * For more info see http://tabulator.info
- */
-@Component({
-  selector: 'sneat-datagrid',
-  template: `
-    <div id="tabulator" #tabulatorDiv></div>
-    <p class="ion-margin-start">Rows: {{ data?.length }}</p>
-  `,
-  imports: [],
-})
-export class DataGridComponent implements AfterViewInit, OnChanges {
-  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);
-
-  @Input() layout?: 'fitData' | 'fitColumns' = 'fitColumns';
-  @Input() data?: unknown[] = [];
-  @Input() columns?: IGridColumn[] = [];
-  @Input() groupBy?: string;
-  @Input() height?: string;
-  @Input() maxHeight?: string | number;
-  @Input() rowContextMenu?: RowContextMenuSignature;
-  @ViewChild('tabulatorDiv', { static: true }) tabulatorDiv?: ElementRef;
-
-  @Input() rowClick?: (event: Event, row: unknown) => void;
-
-  @Output() readonly rowSelected = new EventEmitter<{
-    row: unknown;
-    event?: Event;
-  }>();
-
-  @Output() readonly rowDeselected = new EventEmitter<{
-    row: unknown;
-    event?: Event;
-  }>();
-
-  // private tab = document.createElement('div');
-  private tabulator?: Tabulator;
-
-  @Input() public selectable?: boolean | number | 'highlight';
-
-  private tabulatorOptions?: TabulatorOptions;
-  private clickEvent?: Event;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    try {
-      if (
-        (changes['data'] && this.data && this.columns) ||
-        (changes['columns'] && this.columns) ||
-        (changes['rowClick'] && this.rowClick)
-      ) {
-        this.drawTable();
-      }
-    } catch (ex) {
-      this.errorLogger.logError(
-        ex,
-        'Failed to process ngOnChanges in DataGridComponent',
-      );
-    }
-  }
-
-  // ngOnDestroy(): void {
-  // console.log('DataGridComponent.ngOnDestroy()', this.tabulator);
-  // try { // TODO: destroy Tabulator
-  // 	if (this.tabulator?.element) {
-  // 		// noinspection TypeScriptValidateJSTypes
-  // 		this.tabulator.element.tabulator('destroy');
-  // 	}
-  // } catch (ex) {
-  // 	this.errorLogger.logError(ex, 'Failed to destroy tabulator');
-  // }
-  // }
-
-  ngAfterViewInit(): void /* Intentionally not ngOnInit */ {
-    if (this.tabulator) {
-      try {
-        this.tabulator.redraw();
-      } catch (e) {
-        this.errorLogger.logError(e, 'Failed to redraw tabulator', {
-          show: false,
-          report: false,
-        });
-      }
-    }
-  }
-
-  private drawTable(): void {
-    if (!this.data || !this.columns) {
-      console.warn('drawTable()', 'columns:', this.columns, 'data:', this.data);
-      return;
-    }
-    try {
-      if (!this.tabulatorDiv) {
-        this.errorLogger.logError(new Error('!this.tabulatorDiv'));
-        return;
-      }
-      if (this.tabulatorOptions) {
-        this.tabulatorOptions = { ...this.tabulatorOptions, data: this.data };
-        this.tabulator
-          ?.setData(this.data)
-          .catch(this.errorLogger.logErrorHandler('Failed to set data'));
-      } else {
-        this.createTabulatorGrid();
-      }
-      // this.tabulatorDiv.nativeElement.appendChild(this.tab);
-      // tabulator.redraw();
-    } catch (e) {
-      this.errorLogger.logError(e, 'Failed to drawTable');
-    }
-  }
-
-  private createTabulatorGrid(): void {
-    this.setTabulatorOptions();
-    if (!this.tabulator) {
-      this.tabulatorOptions = {
-        ...this.tabulatorOptions,
-        // rowClick: function (e, row) {
-        // 	console.log('rowClick1', row);
-        // },
-        // rowSelect: function (row) {
-        // 	console.log('rowSelect', row);
-        // },
-        // rowDeselect: function (row) {
-        // 	console.log('rowDeselect', row);
-        // }
-      };
-      this.tabulator = new Tabulator(
-        this.tabulatorDiv?.nativeElement,
-        this.tabulatorOptions,
-      );
-      this.tabulator.on('rowClick', (event: Event, row: unknown) => {
-        this.clickEvent = event;
-        if (this.rowClick) {
-          this.rowClick(event, row);
-        }
-      });
-      this.tabulator.on('rowSelected', (row: unknown) =>
-        this.rowSelected.emit({ row, event: this.clickEvent }),
-      );
-      this.tabulator.on('rowDeselected', (row: unknown) =>
-        this.rowDeselected.emit({ row, event: this.clickEvent }),
-      );
-    }
-  }
-
-  private setTabulatorOptions(): void {
-    this.tabulatorOptions = {
-      // tooltipsHeader: true, // enable header tooltips
-      // tooltipGenerationMode: 'hover',
-      rowContextMenu: this.rowContextMenu,
-      selectableRows: this.selectable,
-      data: this.data,
-      // reactiveData: true, // enable data reactivity
-      columns: this.columns?.map((c) => {
-        const col: TabulatorColumn = {
-          // TODO(help-wanted): Use strongly typed Tabulator col def
-          field: c.field,
-          title: c.title || c.field || c.title,
-          // headerTooltip: () =>
-          // 	`${c.colName || c.title || c.field}: ${c.dbType}`,
-        };
-        if (c.colName !== 'Id' && c.colName?.endsWith('Id')) {
-          col.formatter = 'link';
-          col.formatterParams = {
-            url: 'test-url',
-          };
-          col.cellClick = (e: Event, cell: unknown) => {
-            void cell;
-            e.preventDefault();
-            e.stopPropagation();
-          };
-        }
-        if (c.tooltip) {
-          col.tooltip = c.tooltip;
-        }
-        if (c.formatter) {
-          col.formatter = c.formatter;
-        }
-        if (c.hozAlign) {
-          col.hozAlign = c.hozAlign;
-        }
-        if (c.headerHozAlign) {
-          col.headerHozAlign = c.headerHozAlign;
-        }
-        if (c.widthGrow) {
-          col.widthGrow = c.widthGrow;
-        }
-        if (c.widthShrink) {
-          col.widthShrink = c.widthShrink;
-        }
-        if (c.width !== undefined) {
-          col.width = c.width;
-        }
-        // console.log('col:', col);
-        return col;
-      }),
-      layout: this.layout || 'fitColumns',
-    };
-    if (this.height) {
-      this.tabulatorOptions = {
-        ...this.tabulatorOptions,
-        height: this.height,
-      };
-    }
-    if (this.maxHeight) {
-      this.tabulatorOptions = {
-        ...this.tabulatorOptions,
-        maxHeight: this.maxHeight,
-      };
-    }
-    if (this.groupBy) {
-      this.tabulatorOptions = {
-        ...this.tabulatorOptions,
-        groupBy: this.groupBy,
-        groupHeader: (value: unknown, count: number) => {
-          // value - the value all members of this group share
-          // count - the number of rows in this group
-          // data - an array of all the row data objects in this group
-          // group - the group component for the group
-          // console.log('groupHeader', value);
-          return `${
-            this.groupBy
-          }: ${value} <span class="ion-margin-start">(${count} ${
-            count === 1 ? 'record' : 'records'
-          })</span>`;
-        },
-      };
-    }
-  }
-}

package/src/lib/components/data-grid/index.ts

@@ -1 +0,0 @@
-export * from './data-grid.component';

package/src/lib/components/index.ts

@@ -1,2 +0,0 @@
-export * from './cell-popover';
-export * from './data-grid';

package/src/lib/tabulator/index.ts

@@ -1 +0,0 @@
-export * from './tabulator-options';

package/src/lib/tabulator/tabulator-options.spec.ts

@@ -1,142 +0,0 @@
-import { TabulatorColumn, TabulatorOptions } from './tabulator-options';
-
-describe('Tabulator Types', () => {
-  describe('TabulatorColumn', () => {
-    it('should accept valid column definition', () => {
-      const column: TabulatorColumn = {
-        field: 'testField',
-        title: 'Test Title',
-      };
-
-      expect(column.field).toBe('testField');
-      expect(column.title).toBe('Test Title');
-    });
-
-    it('should accept column with formatter', () => {
-      const column: TabulatorColumn = {
-        field: 'amount',
-        title: 'Amount',
-        formatter: 'money',
-      };
-
-      expect(column.formatter).toBe('money');
-    });
-
-    it('should accept column with width', () => {
-      const column: TabulatorColumn = {
-        field: 'id',
-        title: 'ID',
-        width: 100,
-      };
-
-      expect(column.width).toBe(100);
-    });
-
-    it('should accept column with alignment', () => {
-      const column: TabulatorColumn = {
-        field: 'price',
-        title: 'Price',
-        hozAlign: 'right',
-      };
-
-      expect(column.hozAlign).toBe('right');
-    });
-  });
-
-  describe('TabulatorOptions', () => {
-    it('should accept valid options', () => {
-      const options: TabulatorOptions = {
-        data: [{ id: 1, name: 'Test' }],
-        layout: 'fitColumns',
-      };
-
-      expect(options.data).toBeDefined();
-      expect(options.layout).toBe('fitColumns');
-    });
-
-    it('should accept columns in options', () => {
-      const options: TabulatorOptions = {
-        columns: [
-          { field: 'id', title: 'ID' },
-          { field: 'name', title: 'Name' },
-        ],
-      };
-
-      expect(options.columns).toBeDefined();
-      expect(options.columns?.length).toBe(2);
-    });
-
-    it('should accept height options', () => {
-      const optionsWithHeight: TabulatorOptions = {
-        height: '400px',
-      };
-
-      expect(optionsWithHeight.height).toBe('400px');
-
-      const optionsWithNumericHeight: TabulatorOptions = {
-        height: 500,
-      };
-
-      expect(optionsWithNumericHeight.height).toBe(500);
-    });
-
-    it('should accept maxHeight option', () => {
-      const options: TabulatorOptions = {
-        maxHeight: 600,
-      };
-
-      expect(options.maxHeight).toBe(600);
-    });
-
-    it('should accept layout options', () => {
-      const fitDataOptions: TabulatorOptions = {
-        layout: 'fitData',
-      };
-
-      expect(fitDataOptions.layout).toBe('fitData');
-
-      const fitColumnsOptions: TabulatorOptions = {
-        layout: 'fitColumns',
-      };
-
-      expect(fitColumnsOptions.layout).toBe('fitColumns');
-    });
-  });
-
-  describe('Type Compatibility', () => {
-    it('should work with empty options', () => {
-      const options: TabulatorOptions = {};
-
-      expect(options).toBeDefined();
-    });
-
-    it('should work with minimal column definition', () => {
-      const column: TabulatorColumn = {
-        field: 'id',
-      };
-
-      expect(column.field).toBe('id');
-    });
-
-    it('should support complex options configuration', () => {
-      const options: TabulatorOptions = {
-        data: [
-          { id: 1, name: 'John', age: 30 },
-          { id: 2, name: 'Jane', age: 25 },
-        ],
-        columns: [
-          { field: 'id', title: 'ID', width: 50 },
-          { field: 'name', title: 'Name', hozAlign: 'left' },
-          { field: 'age', title: 'Age', hozAlign: 'right' },
-        ],
-        layout: 'fitColumns',
-        height: 400,
-      };
-
-      expect(options.data?.length).toBe(2);
-      expect(options.columns?.length).toBe(3);
-      expect(options.layout).toBe('fitColumns');
-      expect(options.height).toBe(400);
-    });
-  });
-});

package/src/lib/tabulator/tabulator-options.ts

@@ -1,37 +0,0 @@
-import { ColumnDefinition, Options } from 'tabulator-tables';
-
-export type TabulatorColumn = ColumnDefinition;
-
-// export interface TabulatorColumn {
-// 	field: string;
-// 	title?: string;
-// 	formatter?: 'link' | 'progress' | 'html' | 'text' | 'number' | 'money' | 'image' | 'tickCross';
-// 	formatterParams?: unknown;
-// 	cellClick?: (e: Event, cell: unknown) => void;
-// 	headerTooltip?: () => string;
-// 	tooltip?: (cell: unknown) => string;
-// 	hozAlign?: 'left' | 'right';
-// 	headerHozAlign?: 'left' | 'right';
-// 	widthShrink?: number;
-// 	widthGrow?: number;
-// 	width?: number | string;
-// }
-
-export type TabulatorOptions = Options;
-// export interface TabulatorOptions {
-// 	readonly tooltipsHeader?: boolean;
-// 	readonly tooltipGenerationMode?: 'hover' | 'mouseover';
-// 	readonly reactiveData?: boolean;
-// 	readonly selectable?: boolean | number | 'highlight';
-// 	readonly data?: unknown[];
-// 	readonly layout?: 'fitData' | 'fitColumns';
-// 	readonly columns?: TabulatorColumn[];
-// 	readonly height?: string | number;
-// 	readonly maxHeight?: string | number;
-// 	readonly groupBy?: string;
-// 	readonly groupHeader?: (value: unknown, count: number) => string;
-// 	readonly rowClick?: (event: Event, row: unknown) => void;
-// 	readonly rowSelect?: (row: unknown) => void;
-// 	readonly rowDeselect?: (row: unknown) => void;
-// 	readonly rowContextMenu?: IRowMenu[];
-// }

package/src/test-setup.ts

@@ -1,3 +0,0 @@
-import { setupTestEnvironment } from '@sneat/core/testing';
-
-setupTestEnvironment();

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.angular.json",
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}

package/tsconfig.lib.json

@@ -1,19 +0,0 @@
-{
-  "extends": "../../tsconfig.lib.base.json",
-  "exclude": [
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/test-setup.ts",
-    "src/lib/testing/**/*"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {}
-}

package/tsconfig.spec.json

@@ -1,31 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "vitest/globals",
-      "vitest/importMeta",
-      "vite/client",
-      "node",
-      "vitest"
-    ]
-  },
-  "include": [
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ],
-  "files": [
-    "src/test-setup.ts"
-  ]
-}

package/vite.config.mts

@@ -1,10 +0,0 @@
-/// <reference types='vitest' />
-import { defineConfig } from 'vitest/config';
-import { createBaseViteConfig } from '../../vite.config.base';
-
-export default defineConfig(() =>
-	createBaseViteConfig({
-		dirname: __dirname,
-		name: 'datagrid',
-	}),
-);