@tcn/ui-table 2.2.0 → 2.3.0

package/src/components/table_filter_panel/field_filters/date_field_filter_presenter.test.ts

@@ -0,0 +1,583 @@
+import { Node } from 'clarity-pattern-parser';
+import { DateFieldFilterPresenter } from './date_field_filter_presenter.js';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('DateFieldFilterPresenter', () => {
+  let presenter: DateFieldFilterPresenter;
+  let mockFieldRegistry: any;
+  let testStartDate: Date;
+  let testEndDate: Date;
+
+  beforeEach(() => {
+    presenter = new DateFieldFilterPresenter('test_field');
+    mockFieldRegistry = {
+      registerFieldFilter: vi.fn(),
+      unregisterFieldFilter: vi.fn(),
+    };
+
+    // Create fixed test dates for consistent testing
+    testStartDate = new Date('2023-01-01T00:00:00.000Z');
+    testEndDate = new Date('2023-12-31T23:59:59.999Z');
+  });
+
+  describe('constructor', () => {
+    it('should initialize with the correct field name', () => {
+      const presenter = new DateFieldFilterPresenter('custom_field');
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should initialize with default values', () => {
+      expect(presenter.getFilterString()).toBe('');
+    });
+  });
+
+  describe('setStartDate', () => {
+    it('should set the start date when setStartDate is called with a Date', () => {
+      presenter.setStartDate(testStartDate);
+      expect(presenter.getFilterString()).toBe(
+        `test_field >= '${testStartDate.toISOString()}'`
+      );
+    });
+
+    it('should set the start date when setStartDate is called with null', () => {
+      presenter.setStartDate(testStartDate);
+      presenter.setStartDate(null);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should handle epoch date', () => {
+      const epochDate = new Date(0);
+      presenter.setStartDate(epochDate);
+      expect(presenter.getFilterString()).toBe(
+        `test_field >= '${epochDate.toISOString()}'`
+      );
+    });
+
+    it('should handle future date', () => {
+      const futureDate = new Date('2030-01-01T00:00:00.000Z');
+      presenter.setStartDate(futureDate);
+      expect(presenter.getFilterString()).toBe(
+        `test_field >= '${futureDate.toISOString()}'`
+      );
+    });
+
+    it('should handle past date', () => {
+      const pastDate = new Date('1990-01-01T00:00:00.000Z');
+      presenter.setStartDate(pastDate);
+      expect(presenter.getFilterString()).toBe(
+        `test_field >= '${pastDate.toISOString()}'`
+      );
+    });
+
+    it('should trigger onChange handlers when start date is set', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setStartDate(testStartDate);
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setEndDate', () => {
+    it('should set the end date when setEndDate is called with a Date', () => {
+      presenter.setEndDate(testEndDate);
+      expect(presenter.getFilterString()).toBe(
+        `test_field <= '${testEndDate.toISOString()}'`
+      );
+    });
+
+    it('should set the end date when setEndDate is called with null', () => {
+      presenter.setEndDate(testEndDate);
+      presenter.setEndDate(null);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should handle epoch date', () => {
+      const epochDate = new Date(0);
+      presenter.setEndDate(epochDate);
+      expect(presenter.getFilterString()).toBe(
+        `test_field <= '${epochDate.toISOString()}'`
+      );
+    });
+
+    it('should handle future date', () => {
+      const futureDate = new Date('2030-01-01T00:00:00.000Z');
+      presenter.setEndDate(futureDate);
+      expect(presenter.getFilterString()).toBe(
+        `test_field <= '${futureDate.toISOString()}'`
+      );
+    });
+
+    it('should handle past date', () => {
+      const pastDate = new Date('1990-01-01T00:00:00.000Z');
+      presenter.setEndDate(pastDate);
+      expect(presenter.getFilterString()).toBe(
+        `test_field <= '${pastDate.toISOString()}'`
+      );
+    });
+
+    it('should trigger onChange handlers when end date is set', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setEndDate(testEndDate);
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('getFilterString', () => {
+    it('should return empty string when both dates are null', () => {
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should return start date filter when only start date is set', () => {
+      presenter.setStartDate(testStartDate);
+      expect(presenter.getFilterString()).toBe(
+        `test_field >= '${testStartDate.toISOString()}'`
+      );
+    });
+
+    it('should return end date filter when only end date is set', () => {
+      presenter.setEndDate(testEndDate);
+      expect(presenter.getFilterString()).toBe(
+        `test_field <= '${testEndDate.toISOString()}'`
+      );
+    });
+
+    it('should return range filter when both dates are set', () => {
+      presenter.setStartDate(testStartDate);
+      presenter.setEndDate(testEndDate);
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${testStartDate.toISOString()}' AND test_field <= '${testEndDate.toISOString()}')`
+      );
+    });
+
+    it('should handle same start and end date', () => {
+      const sameDate = new Date('2023-06-15T12:00:00.000Z');
+      presenter.setStartDate(sameDate);
+      presenter.setEndDate(sameDate);
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${sameDate.toISOString()}' AND test_field <= '${sameDate.toISOString()}')`
+      );
+    });
+
+    it('should handle dates with milliseconds', () => {
+      const dateWithMs = new Date('2023-06-15T12:30:45.123Z');
+      presenter.setStartDate(dateWithMs);
+      presenter.setEndDate(dateWithMs);
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${dateWithMs.toISOString()}' AND test_field <= '${dateWithMs.toISOString()}')`
+      );
+    });
+
+    it('should handle dates with different timezones (converted to UTC)', () => {
+      const localDate = new Date('2023-06-15T12:00:00');
+      presenter.setStartDate(localDate);
+      presenter.setEndDate(localDate);
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${localDate.toISOString()}' AND test_field <= '${localDate.toISOString()}')`
+      );
+    });
+  });
+
+  describe('onChange', () => {
+    it('should register onChange handler and return unsubscribe function', () => {
+      const onChangeHandler = vi.fn();
+      const unsubscribe = presenter.onChange(onChangeHandler);
+
+      presenter.setStartDate(testStartDate);
+      expect(onChangeHandler).toHaveBeenCalledTimes(1);
+
+      unsubscribe();
+      presenter.setEndDate(testEndDate);
+      expect(onChangeHandler).toHaveBeenCalledTimes(1); // Should not be called again
+    });
+
+    it('should handle multiple onChange handlers', () => {
+      const handler1 = vi.fn();
+      const handler2 = vi.fn();
+
+      presenter.onChange(handler1);
+      presenter.onChange(handler2);
+
+      presenter.setStartDate(testStartDate);
+
+      expect(handler1).toHaveBeenCalledTimes(1);
+      expect(handler2).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle removing onChange handlers', () => {
+      const handler1 = vi.fn();
+      const handler2 = vi.fn();
+
+      const unsubscribe1 = presenter.onChange(handler1);
+      presenter.onChange(handler2);
+
+      unsubscribe1();
+      presenter.setEndDate(testEndDate);
+
+      expect(handler1).not.toHaveBeenCalled();
+      expect(handler2).toHaveBeenCalledTimes(1);
+    });
+
+    it('should trigger handlers for both start and end date changes', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setStartDate(testStartDate);
+      presenter.setEndDate(testEndDate);
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('setFieldRegistry', () => {
+    it('should register the field filter with the registry', () => {
+      presenter.setFieldRegistry(mockFieldRegistry);
+
+      expect(mockFieldRegistry.registerFieldFilter).toHaveBeenCalledWith(
+        'test_field',
+        presenter
+      );
+    });
+
+    it('should store the field registry reference', () => {
+      presenter.setFieldRegistry(mockFieldRegistry);
+
+      // Test that dispose can call unregisterFieldFilter
+      presenter.dispose();
+      expect(mockFieldRegistry.unregisterFieldFilter).toHaveBeenCalledWith('test_field');
+    });
+  });
+
+  describe('setFilterState', () => {
+    it('should parse single start date filter from AST', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: {
+              name: 'infix-expression',
+              children: [
+                { name: 'plain-field', value: 'test_field' },
+                { name: 'operator', value: '>=' },
+                { name: 'string', value: '"2023-01-01T00:00:00.000Z"' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe(
+        `test_field >= '${testStartDate.toISOString()}'`
+      );
+    });
+
+    it('should parse single end date filter from AST', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: {
+              name: 'infix-expression',
+              children: [
+                { name: 'plain-field', value: 'test_field' },
+                { name: 'operator', value: '<=' },
+                { name: 'string', value: '"2023-12-31T23:59:59.999Z"' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe(
+        `test_field <= '${testEndDate.toISOString()}'`
+      );
+    });
+
+    it('should parse range filter with start >= and end <= from AST', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: {
+              name: 'infix-expression',
+              children: [
+                { name: 'plain-field', value: 'test_field' },
+                { name: 'operator', value: '>=' },
+                { name: 'string', value: '"2023-01-01T00:00:00.000Z"' },
+              ],
+            },
+          },
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: {
+              name: 'infix-expression',
+              children: [
+                { name: 'plain-field', value: 'test_field' },
+                { name: 'operator', value: '<=' },
+                { name: 'string', value: '"2023-12-31T23:59:59.999Z"' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${testStartDate.toISOString()}' AND test_field <= '${testEndDate.toISOString()}')`
+      );
+    });
+
+    it('should parse range filter with end <= and start >= from AST (reversed order)', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: {
+              name: 'infix-expression',
+              children: [
+                { name: 'plain-field', value: 'test_field' },
+                { name: 'operator', value: '<=' },
+                { name: 'string', value: '"2023-12-31T23:59:59.999Z"' },
+              ],
+            },
+          },
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: {
+              name: 'infix-expression',
+              children: [
+                { name: 'plain-field', value: 'test_field' },
+                { name: 'operator', value: '>=' },
+                { name: 'string', value: '"2023-01-01T00:00:00.000Z"' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${testStartDate.toISOString()}' AND test_field <= '${testEndDate.toISOString()}')`
+      );
+    });
+
+    it('should handle case when field is not found in AST', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([]),
+      } as unknown as Node;
+
+      presenter.setStartDate(testStartDate);
+      presenter.setEndDate(testEndDate);
+
+      presenter.setFilterState(mockAst);
+
+      // Should not change existing state
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${testStartDate.toISOString()}' AND test_field <= '${testEndDate.toISOString()}')`
+      );
+    });
+
+    it('should handle case when field node has no parent', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: null,
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setStartDate(testStartDate);
+      presenter.setEndDate(testEndDate);
+
+      presenter.setFilterState(mockAst);
+
+      // Should not change existing state
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${testStartDate.toISOString()}' AND test_field <= '${testEndDate.toISOString()}')`
+      );
+    });
+
+    it('should parse dates with milliseconds from AST', () => {
+      const dateWithMs = new Date('2023-06-15T12:30:45.123Z');
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: {
+              name: 'infix-expression',
+              children: [
+                { name: 'plain-field', value: 'test_field' },
+                { name: 'operator', value: '>=' },
+                { name: 'string', value: `"${dateWithMs.toISOString()}"` },
+              ],
+            },
+          },
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: {
+              name: 'infix-expression',
+              children: [
+                { name: 'plain-field', value: 'test_field' },
+                { name: 'operator', value: '<=' },
+                { name: 'string', value: `"${dateWithMs.toISOString()}"` },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${dateWithMs.toISOString()}' AND test_field <= '${dateWithMs.toISOString()}')`
+      );
+    });
+
+    it('should ignore non-range operators', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([
+          {
+            name: 'plain-field',
+            value: 'test_field',
+            parent: {
+              name: 'infix-expression',
+              children: [
+                { name: 'plain-field', value: 'test_field' },
+                { name: 'operator', value: '=' },
+                { name: 'string', value: '"2023-06-15T12:00:00.000Z"' },
+              ],
+            },
+          },
+        ]),
+      } as unknown as Node;
+
+      presenter.setFilterState(mockAst);
+
+      // Should not change existing state
+      expect(presenter.getFilterString()).toBe('');
+    });
+  });
+
+  describe('dispose', () => {
+    it('should unregister field filter from registry when registry is set', () => {
+      presenter.setFieldRegistry(mockFieldRegistry);
+      presenter.dispose();
+
+      expect(mockFieldRegistry.unregisterFieldFilter).toHaveBeenCalledWith('test_field');
+    });
+
+    it('should not call unregisterFieldFilter when no registry is set', () => {
+      presenter.dispose();
+
+      expect(mockFieldRegistry.unregisterFieldFilter).not.toHaveBeenCalled();
+    });
+
+    it('should clear onChange handlers', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.dispose();
+      presenter.setStartDate(testStartDate);
+
+      expect(onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should clear field registry reference', () => {
+      presenter.setFieldRegistry(mockFieldRegistry);
+      presenter.dispose();
+
+      // Should not call unregisterFieldFilter again
+      presenter.dispose();
+      expect(mockFieldRegistry.unregisterFieldFilter).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('edge cases and error handling', () => {
+    it('should handle rapid successive date changes', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      const date1 = new Date('2023-01-01T00:00:00.000Z');
+      const date2 = new Date('2023-06-15T12:00:00.000Z');
+      const date3 = new Date('2023-12-31T23:59:59.999Z');
+
+      presenter.setStartDate(date1);
+      presenter.setEndDate(date3);
+      presenter.setStartDate(date2);
+      presenter.setEndDate(date3);
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(4);
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${date2.toISOString()}' AND test_field <= '${date3.toISOString()}')`
+      );
+    });
+
+    it('should handle very old dates', () => {
+      const oldDate = new Date('1900-01-01T00:00:00.000Z');
+      presenter.setStartDate(oldDate);
+      presenter.setEndDate(oldDate);
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${oldDate.toISOString()}' AND test_field <= '${oldDate.toISOString()}')`
+      );
+    });
+
+    it('should handle very future dates', () => {
+      const futureDate = new Date('2100-01-01T00:00:00.000Z');
+      presenter.setStartDate(futureDate);
+      presenter.setEndDate(futureDate);
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${futureDate.toISOString()}' AND test_field <= '${futureDate.toISOString()}')`
+      );
+    });
+
+    it('should handle dates with different timezones', () => {
+      const utcDate = new Date('2023-06-15T12:00:00.000Z');
+      const localDate = new Date('2023-06-15T12:00:00');
+
+      presenter.setStartDate(utcDate);
+      presenter.setEndDate(localDate);
+
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${utcDate.toISOString()}' AND test_field <= '${localDate.toISOString()}')`
+      );
+    });
+
+    it('should handle leap year dates', () => {
+      const leapYearDate = new Date('2024-02-29T12:00:00.000Z');
+      presenter.setStartDate(leapYearDate);
+      presenter.setEndDate(leapYearDate);
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${leapYearDate.toISOString()}' AND test_field <= '${leapYearDate.toISOString()}')`
+      );
+    });
+
+    it('should handle daylight saving time transitions', () => {
+      const dstDate = new Date('2023-03-12T02:00:00.000Z');
+      presenter.setStartDate(dstDate);
+      presenter.setEndDate(dstDate);
+      expect(presenter.getFilterString()).toBe(
+        `(test_field >= '${dstDate.toISOString()}' AND test_field <= '${dstDate.toISOString()}')`
+      );
+    });
+  });
+});

package/src/components/table_filter_panel/field_filters/date_field_filter_presenter.ts

@@ -0,0 +1,110 @@
+import { Signal } from '@tcn/state';
+import { Node } from 'clarity-pattern-parser';
+import { FieldFilterRegistry, FieldFilterStrategy } from './field_filter_strategy.js';
+
+export class DateFieldFilterPresenter implements FieldFilterStrategy {
+  private _fieldName: string;
+  private _fieldFilterRegistry: FieldFilterRegistry | null = null;
+  private _startDate = new Signal<Date | null>(null);
+  private _endDate = new Signal<Date | null>(null);
+  private _onChangeHandlers = new Set<() => void>();
+
+  private _broadcasts = {
+    startDate: this._startDate.broadcast,
+    endDate: this._endDate.broadcast,
+  };
+
+  constructor(fieldName: string) {
+    this._fieldName = fieldName;
+  }
+
+  get broadcasts() {
+    return this._broadcasts;
+  }
+
+  getFilterString() {
+    const startDate = this._startDate.get();
+    const endDate = this._endDate.get();
+    if (startDate && endDate) {
+      return `(${this._fieldName} >= '${startDate.toISOString()}' AND ${this._fieldName} <= '${endDate.toISOString()}')`;
+    } else if (startDate) {
+      return `${this._fieldName} >= '${startDate.toISOString()}'`;
+    } else if (endDate) {
+      return `${this._fieldName} <= '${endDate.toISOString()}'`;
+    }
+    return '';
+  }
+
+  onChange(handler: () => void) {
+    this._onChangeHandlers.add(handler);
+    return () => {
+      this._onChangeHandlers.delete(handler);
+    };
+  }
+
+  setStartDate(startDate: Date | null) {
+    this._startDate.set(startDate);
+    this._onChangeHandlers.forEach(handler => handler());
+  }
+
+  setEndDate(endDate: Date | null) {
+    this._endDate.set(endDate);
+    this._onChangeHandlers.forEach(handler => handler());
+  }
+
+  setFieldRegistry(fieldFilterRegistry: FieldFilterRegistry) {
+    this._fieldFilterRegistry = fieldFilterRegistry;
+    fieldFilterRegistry.registerFieldFilter(this._fieldName, this);
+  }
+
+  setFilterState(filterAst: Node) {
+    const fieldNodes = filterAst.findAll(
+      (n: Node) => n.name === 'plain-field' && n.value === this._fieldName
+    );
+
+    if (fieldNodes.length === 0) {
+      return;
+    }
+
+    if (fieldNodes.length === 1) {
+      const operatorNode = fieldNodes[0].parent?.children[1];
+      const valueNode = fieldNodes[0].parent?.children[2];
+      if (operatorNode?.value === '>=' && valueNode != null) {
+        this.setStartDate(new Date(valueNode?.value.slice(1, -1)));
+      } else if (operatorNode?.value === '<=' && valueNode != null) {
+        this.setEndDate(new Date(valueNode?.value.slice(1, -1)));
+      }
+      return;
+    }
+
+    if (fieldNodes.length === 2) {
+      const operatorOneNode = fieldNodes[0].parent?.children[1];
+      const operatorTwoNode = fieldNodes[1].parent?.children[1];
+      const valueOneNode = fieldNodes[0].parent?.children[2];
+      const valueTwoNode = fieldNodes[1].parent?.children[2];
+      if (
+        operatorOneNode?.value === '>=' &&
+        operatorTwoNode?.value === '<=' &&
+        valueOneNode != null &&
+        valueTwoNode != null
+      ) {
+        this.setStartDate(new Date(valueOneNode?.value.slice(1, -1)));
+        this.setEndDate(new Date(valueTwoNode?.value.slice(1, -1)));
+      } else if (
+        operatorOneNode?.value === '<=' &&
+        operatorTwoNode?.value === '>=' &&
+        valueOneNode != null &&
+        valueTwoNode != null
+      ) {
+        this.setEndDate(new Date(valueOneNode?.value.slice(1, -1)));
+        this.setStartDate(new Date(valueTwoNode?.value.slice(1, -1)));
+      }
+    }
+  }
+
+  dispose() {
+    this._fieldFilterRegistry?.unregisterFieldFilter(this._fieldName);
+    this._fieldFilterRegistry = null;
+    this._onChangeHandlers.clear();
+  }
+}

package/src/components/table_filter_panel/field_filters/field_filter_props.ts

@@ -0,0 +1,5 @@
+export type FieldFilterProps = {
+  fieldName: string;
+  label: string;
+  operators?: ('is' | 'isNot' | 'has')[];
+};