@sneat/datagrid 0.1.1

package/eslint.config.js

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

package/ng-package.json

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

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@sneat/datagrid",
+  "version": "0.1.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0"
+  },
+  "dependencies": {
+    "tslib": "2.8.1"
+  }
+}

package/project.json

@@ -0,0 +1,38 @@
+{
+  "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

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

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

@@ -0,0 +1,64 @@
+<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

@@ -0,0 +1,168 @@
+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

@@ -0,0 +1,62 @@
+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

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