@tcn/ui-table 2.2.0 → 2.3.1

package/src/components/table_filter_panel/field_filters/select_field_filter.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
+import { useSignalValue } from '@tcn/state';
+import { Button } from '@tcn/ui/actions';
+import { Option, Select } from '@tcn/ui/inputs';
+import { Box, HStack, VStack } from '@tcn/ui/stacks';
+import { Title } from '@tcn/ui/typography';
+import { FieldFilterProps } from './field_filter_props.js';
+import { SelectFieldFilterPresenter } from './select_field_filter_presenter.js';
+import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
+
+export type SelectFieldFilterProps = FieldFilterProps & {
+  options: { label: string; value: string | boolean | number }[];
+};
+
+export function SelectFieldFilter({ fieldName, label, options }: SelectFieldFilterProps) {
+  const presenter = useFieldFilterStrategy(SelectFieldFilterPresenter, fieldName);
+
+  const value = useSignalValue(presenter.broadcasts.value);
+  const valueLabel = options.find(option => option.value === value)?.label ?? '';
+
+  return (
+    <VStack gap="4px">
+      <Box width="flex">
+        <Title size="md">{label}</Title>
+      </Box>
+      <HStack>
+        <Select
+          value={valueLabel}
+          onChange={value => {
+            const realValue = options.find(option => option.label === value)?.value;
+            presenter.setValue(realValue ?? null);
+          }}
+          width="flex"
+        >
+          {options.map(option => (
+            <Option
+              key={option.value.toString()}
+              value={option.label}
+              label={option.label}
+            >
+              {option.label}
+            </Option>
+          ))}
+        </Select>
+        <Button
+          onClick={() => presenter.setValue(null)}
+          hierarchy="tertiary"
+          disabled={value == null}
+        >
+          <CrossCircleIcon />
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}

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

@@ -0,0 +1,365 @@
+import { SelectFieldFilterPresenter } from './select_field_filter_presenter.js';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('SelectFieldFilterPresenter', () => {
+  let presenter: SelectFieldFilterPresenter;
+  let mockFieldRegistry: any;
+
+  beforeEach(() => {
+    presenter = new SelectFieldFilterPresenter('test_field');
+    mockFieldRegistry = {
+      registerFieldFilter: vi.fn(),
+      unregisterFieldFilter: vi.fn(),
+    };
+  });
+
+  describe('constructor', () => {
+    it('should initialize with the correct field name', () => {
+      const presenter = new SelectFieldFilterPresenter('custom_field');
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should initialize with default values', () => {
+      expect(presenter.getFilterString()).toBe('');
+    });
+  });
+
+  describe('setValue', () => {
+    it('should set the value when setValue is called with a string', () => {
+      presenter.setValue('test_value');
+      expect(presenter.getFilterString()).toBe('test_field = "test_value"');
+    });
+
+    it('should set the value when setValue is called with a number', () => {
+      presenter.setValue(123);
+      expect(presenter.getFilterString()).toBe('test_field = 123');
+    });
+
+    it('should set the value when setValue is called with a boolean', () => {
+      presenter.setValue(true);
+      expect(presenter.getFilterString()).toBe('test_field = true');
+    });
+
+    it('should set the value when setValue is called with null', () => {
+      presenter.setValue('test_value');
+      presenter.setValue(null);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should trigger onChange handlers when value is set', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setValue('new_value');
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(1);
+    });
+
+    it('should trigger onChange handlers when value is set to null', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setValue('test_value');
+      presenter.setValue(null);
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('getFilterString', () => {
+    it('should return empty string when value is null', () => {
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should return empty string when value is set to null', () => {
+      presenter.setValue('test_value');
+      presenter.setValue(null);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should return formatted filter string with string value', () => {
+      presenter.setValue('test_value');
+      expect(presenter.getFilterString()).toBe('test_field = "test_value"');
+    });
+
+    it('should return formatted filter string with numeric value', () => {
+      presenter.setValue(123);
+      expect(presenter.getFilterString()).toBe('test_field = 123');
+    });
+
+    it('should return formatted filter string with boolean value', () => {
+      presenter.setValue(true);
+      expect(presenter.getFilterString()).toBe('test_field = true');
+    });
+
+    it('should handle special characters in string values', () => {
+      presenter.setValue('test"value');
+      expect(presenter.getFilterString()).toBe('test_field = "test"value"');
+    });
+
+    it('should handle empty string values', () => {
+      presenter.setValue('');
+      expect(presenter.getFilterString()).toBe('test_field = ""');
+    });
+  });
+
+  describe('onChange', () => {
+    it('should register and return unsubscribe function', () => {
+      const handler = vi.fn();
+      const unsubscribe = presenter.onChange(handler);
+
+      expect(typeof unsubscribe).toBe('function');
+    });
+
+    it('should call registered handlers when value changes', () => {
+      const handler1 = vi.fn();
+      const handler2 = vi.fn();
+
+      presenter.onChange(handler1);
+      presenter.onChange(handler2);
+
+      presenter.setValue('new_value');
+
+      expect(handler1).toHaveBeenCalledTimes(1);
+      expect(handler2).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call unsubscribed handlers', () => {
+      const handler1 = vi.fn();
+      const handler2 = vi.fn();
+
+      const unsubscribe1 = presenter.onChange(handler1);
+      presenter.onChange(handler2);
+
+      unsubscribe1();
+      presenter.setValue('new_value');
+
+      expect(handler1).not.toHaveBeenCalled();
+      expect(handler2).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle multiple subscriptions and unsubscriptions', () => {
+      const handler1 = vi.fn();
+      const handler2 = vi.fn();
+      const handler3 = vi.fn();
+
+      const unsubscribe1 = presenter.onChange(handler1);
+      const unsubscribe2 = presenter.onChange(handler2);
+      const unsubscribe3 = presenter.onChange(handler3);
+
+      unsubscribe2();
+      presenter.setValue('value1');
+
+      expect(handler1).toHaveBeenCalledTimes(1);
+      expect(handler2).not.toHaveBeenCalled();
+      expect(handler3).toHaveBeenCalledTimes(1);
+
+      unsubscribe1();
+      unsubscribe3();
+      presenter.setValue('value2');
+
+      expect(handler1).toHaveBeenCalledTimes(1);
+      expect(handler2).not.toHaveBeenCalled();
+      expect(handler3).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  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);
+      // This is tested indirectly through the dispose method
+      presenter.dispose();
+      expect(mockFieldRegistry.unregisterFieldFilter).toHaveBeenCalledWith('test_field');
+    });
+  });
+
+  describe('setFilterState', () => {
+    it('should parse string value from filter AST', () => {
+      const mockNode = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'double-quote-str', value: '"test_value"' }],
+        },
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe('test_field = "test_value"');
+    });
+
+    it('should parse single-quoted string value from filter AST', () => {
+      const mockNode = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'single-quote-string', value: "'test_value'" }],
+        },
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe('test_field = "test_value"');
+    });
+
+    it('should handle no matching field nodes', () => {
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should handle field nodes without proper parent structure', () => {
+      const mockNode = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: null,
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should handle field nodes with non-infix-expression parent', () => {
+      const mockNode = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'other-expression',
+          children: [null, null, { name: 'double-quote-str', value: '"test_value"' }],
+        },
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should handle multiple field nodes and use the first valid one', () => {
+      const mockNode1 = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'double-quote-str', value: '"first_value"' }],
+        },
+      };
+
+      const mockNode2 = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'double-quote-str', value: '"second_value"' }],
+        },
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode1, mockNode2]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe('test_field = "first_value"');
+    });
+
+    it('should handle empty string values', () => {
+      const mockNode = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'double-quote-str', value: '""' }],
+        },
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe('test_field = ""');
+    });
+
+    it('should handle special characters in string values', () => {
+      const mockNode = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'double-quote-str', value: '"test\\"value"' }],
+        },
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe('test_field = "test\\"value"');
+    });
+  });
+
+  describe('dispose', () => {
+    it('should unregister field filter from registry', () => {
+      presenter.setFieldRegistry(mockFieldRegistry);
+      presenter.dispose();
+
+      expect(mockFieldRegistry.unregisterFieldFilter).toHaveBeenCalledWith('test_field');
+    });
+
+    it('should clear onChange handlers', () => {
+      const handler = vi.fn();
+      presenter.onChange(handler);
+      presenter.dispose();
+      presenter.setValue('value1');
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should handle disposal when no registry is set', () => {
+      expect(() => presenter.dispose()).not.toThrow();
+    });
+  });
+
+  describe('broadcasts', () => {
+    it('should provide value broadcast', () => {
+      expect(presenter.broadcasts).toHaveProperty('value');
+      expect(typeof presenter.broadcasts.value).toBe('object');
+      expect(typeof presenter.broadcasts.value.subscribe).toBe('function');
+    });
+  });
+});

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

@@ -0,0 +1,74 @@
+import { Signal } from '@tcn/state';
+import { Node } from 'clarity-pattern-parser';
+import { FieldFilterRegistry, FieldFilterStrategy } from './field_filter_strategy.js';
+
+export class SelectFieldFilterPresenter implements FieldFilterStrategy {
+  private _fieldName: string;
+  private _value = new Signal<string | boolean | number | null>(null);
+  private _fieldFilterRegistry: FieldFilterRegistry | null = null;
+  private _onChangeHandlers = new Set<() => void>();
+
+  private _broadcasts = {
+    value: this._value.broadcast,
+  };
+
+  constructor(fieldName: string) {
+    this._fieldName = fieldName;
+  }
+
+  get broadcasts() {
+    return this._broadcasts;
+  }
+
+  setValue(value: string | boolean | number | null) {
+    this._value.set(value);
+    this._onChangeHandlers.forEach(handler => handler());
+  }
+
+  onChange(handler: () => void) {
+    this._onChangeHandlers.add(handler);
+    return () => {
+      this._onChangeHandlers.delete(handler);
+    };
+  }
+
+  setFieldRegistry(fieldRegistry: FieldFilterRegistry) {
+    this._fieldFilterRegistry = fieldRegistry;
+    fieldRegistry.registerFieldFilter(this._fieldName, this);
+  }
+
+  getFilterString() {
+    if (this._value.get() === null) {
+      return '';
+    }
+    const wrappedValue =
+      typeof this._value.get() === 'string'
+        ? `"${this._value.get()}"`
+        : this._value.get();
+    return `${this._fieldName} = ${wrappedValue}`;
+  }
+
+  setFilterState(filterAst: Node) {
+    const fieldNodes = filterAst.findAll(
+      (n: Node) => n.name === 'plain-field' && n.value === this._fieldName
+    );
+
+    const fieldNode = fieldNodes.filter(
+      (n: Node) => n.parent !== null && n.parent.name === 'infix-expression'
+    )[0];
+
+    if (fieldNode == null) {
+      return;
+    }
+
+    const parent = fieldNode.parent as Node;
+    const valueNode = parent.children[2] as Node;
+    const value = valueNode.value as string;
+    this._value.set(value.slice(1, -1));
+  }
+
+  dispose() {
+    this._fieldFilterRegistry?.unregisterFieldFilter(this._fieldName);
+    this._onChangeHandlers.clear();
+  }
+}

package/src/components/table_filter_panel/field_filters/string_field_filter.tsx

@@ -0,0 +1,70 @@
+import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
+import { useSignalValue } from '@tcn/state';
+import { Button } from '@tcn/ui/actions';
+import { Input, Option, Select } from '@tcn/ui/inputs';
+import { Box, HStack, VStack } from '@tcn/ui/stacks';
+import { Title } from '@tcn/ui/typography';
+import React from 'react';
+import { FieldFilterProps } from './field_filter_props.js';
+import { StringFieldFilterPresenter } from './string_field_filter_presenter.js';
+import { ComparisonOperator } from '../types.js';
+
+import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
+
+const allOperators: ('is' | 'isNot' | 'has')[] = ['is', 'isNot', 'has'];
+const operatorSymbols: Record<'is' | 'isNot' | 'has', string> = {
+  is: '=',
+  isNot: '!=',
+  has: ':',
+};
+const operatorLabels: Record<'is' | 'isNot' | 'has', string> = {
+  is: 'is',
+  isNot: 'is not',
+  has: 'has',
+};
+
+export function StringFieldFilter({ fieldName, label, operators }: FieldFilterProps) {
+  const presenter = useFieldFilterStrategy(StringFieldFilterPresenter, fieldName);
+
+  const value = useSignalValue(presenter.broadcasts.value);
+  const operator = useSignalValue(presenter.broadcasts.operator);
+
+  const availableOperators = operators || allOperators;
+
+  return (
+    <VStack gap="4px">
+      <Box width="flex">
+        <Title size="md">{label}</Title>
+      </Box>
+      <HStack width="flex">
+        <Select
+          value={operator}
+          onChange={value => presenter.setOperator(value as ComparisonOperator)}
+          width="65px"
+        >
+          {availableOperators.map(operator => (
+            <Option
+              key={operator}
+              value={operatorSymbols[operator]}
+              label={operatorLabels[operator]}
+            >
+              {operatorLabels[operator]}
+            </Option>
+          ))}
+        </Select>
+        <Input
+          type="text"
+          value={value ?? ''}
+          onChange={value => presenter.setValue(value)}
+        />
+        <Button
+          onClick={() => presenter.setValue(null)}
+          hierarchy="tertiary"
+          disabled={value == null}
+        >
+          <CrossCircleIcon />
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}