@sneat/datagrid 0.1.3 → 0.1.6

package/types/sneat-datagrid.d.ts

@@ -0,0 +1,70 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnChanges, ElementRef, EventEmitter, SimpleChanges } from '@angular/core';
+import { RowContextMenuSignature, ColumnDefinition, Options } from 'tabulator-tables';
+import { IGridColumn } from '@sneat/grid';
+
+interface IRecordsetColumn {
+    name: string;
+    title?: string;
+    dbType: string;
+}
+interface ITableRef {
+    name: string;
+    schema: string;
+    catalog?: string;
+}
+interface IForeignKey {
+    name: string;
+    columns: string[];
+    refTable: ITableRef;
+}
+declare class CellPopoverComponent {
+    column?: IRecordsetColumn;
+    value: unknown;
+    fk?: IForeignKey;
+    tab: 'rec' | 'cols' | 'refs';
+    static ɵfac: i0.ɵɵFactoryDeclaration<CellPopoverComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CellPopoverComponent, "sneat-datatug-cell-popover", never, { "column": { "alias": "column"; "required": false; }; "value": { "alias": "value"; "required": false; }; "fk": { "alias": "fk"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * This is a wrapper class for the tabulator JS library.
+ * For more info see http://tabulator.info
+ */
+declare class DataGridComponent implements AfterViewInit, OnChanges {
+    private readonly errorLogger;
+    layout?: 'fitData' | 'fitColumns';
+    data?: unknown[];
+    columns?: IGridColumn[];
+    groupBy?: string;
+    height?: string;
+    maxHeight?: string | number;
+    rowContextMenu?: RowContextMenuSignature;
+    tabulatorDiv?: ElementRef;
+    rowClick?: (event: Event, row: unknown) => void;
+    readonly rowSelected: EventEmitter<{
+        row: unknown;
+        event?: Event;
+    }>;
+    readonly rowDeselected: EventEmitter<{
+        row: unknown;
+        event?: Event;
+    }>;
+    private tabulator?;
+    selectable?: boolean | number | 'highlight';
+    private tabulatorOptions?;
+    private clickEvent?;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    private drawTable;
+    private createTabulatorGrid;
+    private setTabulatorOptions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataGridComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataGridComponent, "sneat-datagrid", never, { "layout": { "alias": "layout"; "required": false; }; "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "height": { "alias": "height"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "rowContextMenu": { "alias": "rowContextMenu"; "required": false; }; "rowClick": { "alias": "rowClick"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; }, { "rowSelected": "rowSelected"; "rowDeselected": "rowDeselected"; }, never, never, true, never>;
+}
+
+type TabulatorColumn = ColumnDefinition;
+type TabulatorOptions = Options;
+
+export { CellPopoverComponent, DataGridComponent };
+export type { TabulatorColumn, TabulatorOptions };

package/eslint.config.js

@@ -1,7 +0,0 @@
-const baseConfig = require('../../eslint.config.js');
-const { sneatLibConfig } = require('../../eslint.lib.config.js');
-
-module.exports = [
-  ...baseConfig,
-  ...sneatLibConfig(__dirname),
-];

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/libs/datagrid",
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
-}

package/project.json

@@ -1,38 +0,0 @@
-{
-  "name": "datagrid",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "sourceRoot": "libs/datagrid/src",
-  "prefix": "sneat",
-  "targets": {
-    "build": {
-      "executor": "@nx/angular:package",
-      "outputs": [
-        "{workspaceRoot}/dist/libs/datagrid"
-      ],
-      "options": {
-        "project": "libs/datagrid/ng-package.json",
-        "tsConfig": "libs/datagrid/tsconfig.lib.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "libs/datagrid/tsconfig.lib.prod.json"
-        },
-        "development": {}
-      },
-      "defaultConfiguration": "production"
-    },
-    "test": {
-      "executor": "@nx/vitest:test",
-      "outputs": [
-        "{workspaceRoot}/coverage/libs/datagrid"
-      ],
-      "options": {
-        "tsConfig": "libs/datagrid/tsconfig.spec.json"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    }
-  }
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from './lib/components';
-export * from './lib/tabulator';

package/src/lib/components/cell-popover/cell-popover.component.html

@@ -1,64 +0,0 @@
-<ion-card-header>
-  <ion-card-title>Field: {{ column?.name }}</ion-card-title>
-  <ion-card-subtitle>Value: {{ value }}</ion-card-subtitle>
-</ion-card-header>
-<h3 class="ion-margin">
-  References:
-  @if (fk?.refTable) {
-    <a routerLink="{{ fk?.refTable?.schema }}.{{ fk?.refTable?.name }}">
-      {{ fk?.refTable?.schema }}.{{ fk?.refTable?.name }}
-    </a>
-  }
-</h3>
-<ion-segment [(ngModel)]="tab">
-  <ion-segment-button value="rec">
-    <ion-label>Record</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="cols">
-    <ion-label>Columns</ion-label>
-  </ion-segment-button>
-  <ion-segment-button value="refs">
-    <ion-label>References</ion-label>
-  </ion-segment-button>
-</ion-segment>
-
-@switch (tab) {
-  @case ("rec") {
-    <ion-list>
-      <ion-item>
-        <ion-label>Id</ion-label>
-        <ion-input
-          type="number"
-          style="text-align: right"
-          value="1"
-          readonly="true"
-        />
-      </ion-item>
-      <ion-item>
-        <ion-label>Code</ion-label>
-        <ion-input
-          type="text"
-          style="text-align: right"
-          value="Something"
-          readonly="true"
-        />
-      </ion-item>
-    </ion-list>
-  }
-  @case ("cols") {
-    <ion-list>
-      <ion-item>
-        <ion-label>Id</ion-label>
-        <ion-badge slot="end" color="light">
-          <ion-text color="medium">INT</ion-text>
-        </ion-badge>
-      </ion-item>
-      <ion-item>
-        <ion-label>Code</ion-label>
-        <ion-badge slot="end" color="light">
-          <ion-text color="medium">NVARCHAR</ion-text>
-        </ion-badge>
-      </ion-item>
-    </ion-list>
-  }
-}

package/src/lib/components/cell-popover/cell-popover.component.spec.ts

@@ -1,168 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-import { CellPopoverComponent } from './cell-popover.component';
-
-describe('CellPopoverComponent', () => {
-  let component: CellPopoverComponent;
-  let fixture: ComponentFixture<CellPopoverComponent>;
-
-  beforeEach(waitForAsync(async () => {
-    await TestBed.configureTestingModule({
-      imports: [CellPopoverComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(CellPopoverComponent);
-    component = fixture.componentInstance;
-    // Don't call detectChanges here - let individual tests control when it's called
-  }));
-
-  it('should create', () => {
-    fixture.detectChanges();
-    expect(component).toBeTruthy();
-  });
-
-  describe('Input Properties', () => {
-    it('should accept column input', () => {
-      const mockColumn = {
-        name: 'testColumn',
-        title: 'Test Column',
-        dbType: 'varchar',
-      };
-
-      component.column = mockColumn;
-      expect(component.column).toEqual(mockColumn);
-    });
-
-    it('should accept value input', () => {
-      const testValue = 'Test Value';
-      component.value = testValue;
-      expect(component.value).toBe(testValue);
-    });
-
-    it('should accept numeric value', () => {
-      const testValue = 42;
-      component.value = testValue;
-      expect(component.value).toBe(testValue);
-    });
-
-    it('should accept null value', () => {
-      component.value = null;
-      expect(component.value).toBeNull();
-    });
-
-    it('should accept undefined value', () => {
-      component.value = undefined;
-      expect(component.value).toBeUndefined();
-    });
-
-    it('should accept foreign key input', () => {
-      const mockFk = {
-        name: 'fk_user_id',
-        columns: ['user_id'],
-        refTable: {
-          name: 'users',
-          schema: 'public',
-          catalog: 'main',
-        },
-      };
-
-      component.fk = mockFk;
-      expect(component.fk).toEqual(mockFk);
-    });
-
-    it('should accept foreign key without catalog', () => {
-      const mockFk = {
-        name: 'fk_order_id',
-        columns: ['order_id'],
-        refTable: {
-          name: 'orders',
-          schema: 'public',
-        },
-      };
-
-      component.fk = mockFk;
-      expect(component.fk).toEqual(mockFk);
-    });
-  });
-
-  describe('Tab Property', () => {
-    it('should default tab to "rec"', () => {
-      expect(component.tab).toBe('rec');
-    });
-
-    it('should allow changing tab to "cols"', () => {
-      component.tab = 'cols';
-      expect(component.tab).toBe('cols');
-    });
-
-    it('should allow changing tab to "refs"', () => {
-      component.tab = 'refs';
-      expect(component.tab).toBe('refs');
-    });
-
-    it('should allow switching between tabs', () => {
-      expect(component.tab).toBe('rec');
-
-      component.tab = 'cols';
-      expect(component.tab).toBe('cols');
-
-      component.tab = 'refs';
-      expect(component.tab).toBe('refs');
-
-      component.tab = 'rec';
-      expect(component.tab).toBe('rec');
-    });
-  });
-
-  describe('Complex Scenarios', () => {
-    it('should handle column with all properties', () => {
-      const fullColumn = {
-        name: 'user_email',
-        title: 'User Email Address',
-        dbType: 'varchar(255)',
-      };
-
-      component.column = fullColumn;
-      component.value = 'user@example.com';
-
-      expect(component.column.name).toBe('user_email');
-      expect(component.column.title).toBe('User Email Address');
-      expect(component.column.dbType).toBe('varchar(255)');
-      expect(component.value).toBe('user@example.com');
-    });
-
-    it('should handle column without title', () => {
-      const columnWithoutTitle = {
-        name: 'status',
-        dbType: 'int',
-      };
-
-      component.column = columnWithoutTitle;
-      component.value = 1;
-
-      expect(component.column.title).toBeUndefined();
-      expect(component.column.name).toBe('status');
-    });
-
-    it('should handle multiple foreign key columns', () => {
-      const multiFk = {
-        name: 'fk_composite',
-        columns: ['user_id', 'account_id', 'tenant_id'],
-        refTable: {
-          name: 'user_accounts',
-          schema: 'auth',
-          catalog: 'main',
-        },
-      };
-
-      component.fk = multiFk;
-
-      expect(component.fk.columns.length).toBe(3);
-      expect(component.fk.columns).toContain('user_id');
-      expect(component.fk.columns).toContain('account_id');
-      expect(component.fk.columns).toContain('tenant_id');
-    });
-  });
-});

package/src/lib/components/cell-popover/cell-popover.component.ts

@@ -1,62 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import {
-  IonBadge,
-  IonCardHeader,
-  IonCardSubtitle,
-  IonCardTitle,
-  IonInput,
-  IonItem,
-  IonLabel,
-  IonList,
-  IonSegment,
-  IonSegmentButton,
-  IonText,
-} from '@ionic/angular/standalone';
-
-// TODO: Local minimal copies to avoid dependency on @sneat/datatug-main and break circular build deps
-interface IRecordsetColumn {
-  name: string;
-  title?: string;
-  dbType: string; // Using string here to avoid coupling to DbType type from datatug-main
-}
-
-interface ITableRef {
-  name: string;
-  schema: string;
-  catalog?: string;
-}
-
-interface IForeignKey {
-  name: string;
-  columns: string[];
-  refTable: ITableRef;
-}
-
-@Component({
-  selector: 'sneat-datatug-cell-popover',
-  templateUrl: './cell-popover.component.html',
-  imports: [
-    RouterModule,
-    FormsModule,
-    IonCardHeader,
-    IonCardTitle,
-    IonCardSubtitle,
-    IonSegment,
-    IonSegmentButton,
-    IonLabel,
-    IonList,
-    IonItem,
-    IonInput,
-    IonBadge,
-    IonText,
-  ],
-})
-export class CellPopoverComponent {
-  @Input() column?: IRecordsetColumn;
-  @Input() value: unknown;
-  @Input() fk?: IForeignKey;
-
-  public tab: 'rec' | 'cols' | 'refs' = 'rec';
-}

package/src/lib/components/cell-popover/index.ts

@@ -1 +0,0 @@
-export * from './cell-popover.component';