@tcn/ui-table 2.2.0 → 2.3.0

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

@@ -0,0 +1,14 @@
+import { Node } from 'clarity-pattern-parser';
+
+export interface FieldFilterRegistry {
+  registerFieldFilter: (fieldName: string, fieldFilter: FieldFilterStrategy) => void;
+  unregisterFieldFilter: (fieldName: string) => void;
+}
+
+export interface FieldFilterStrategy {
+  getFilterString: () => string;
+  onChange: (handler: () => void) => () => void;
+  setFieldRegistry: (fieldRegistry: FieldFilterRegistry) => void;
+  dispose: () => void;
+  setFilterState: (filterAst: Node) => void;
+}

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

@@ -0,0 +1,68 @@
+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 { Multiselect, Option } 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 { MultiSelectFieldFilterPresenter } from './multi_select_field_filter_presenter.js';
+import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
+
+export type MulitSelectFieldFilterProps = FieldFilterProps & {
+  options: { label: string; value: string | boolean | number }[];
+};
+
+export function MulitSelectFieldFilter({
+  fieldName,
+  label,
+  options,
+}: MulitSelectFieldFilterProps) {
+  const presenter = useFieldFilterStrategy(MultiSelectFieldFilterPresenter, fieldName);
+
+  const values = useSignalValue(presenter.broadcasts.value);
+  const selectedLabels =
+    values
+      ?.map(value => options.find(option => option.value === value)?.label ?? '')
+      .filter(Boolean) ?? [];
+
+  return (
+    <VStack gap="4px">
+      <Box width="flex">
+        <Title size="md">{label}</Title>
+      </Box>
+      <HStack>
+        <Box width="flex">
+          <Multiselect
+            value={selectedLabels}
+            onChange={selectedLabels => {
+              const realValues = selectedLabels
+                .map(label => options.find(option => option.label === label)?.value)
+                .filter(value => value !== undefined) as (string | boolean | number)[];
+
+              presenter.setValue(realValues.length > 0 ? realValues : null);
+            }}
+          >
+            {options.map(option => (
+              <Option
+                key={option.value.toString()}
+                value={option.label}
+                label={option.label}
+              >
+                {option.label}
+              </Option>
+            ))}
+          </Multiselect>
+        </Box>
+        <Button
+          onClick={() => presenter.setValue(null)}
+          hierarchy="tertiary"
+          disabled={values == null || values.length === 0}
+        >
+          <CrossCircleIcon />
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}

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

@@ -0,0 +1,444 @@
+import { MultiSelectFieldFilterPresenter } from './multi_select_field_filter_presenter.js';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('MultiSelectFieldFilterPresenter', () => {
+  let presenter: MultiSelectFieldFilterPresenter;
+  let mockFieldRegistry: any;
+
+  beforeEach(() => {
+    presenter = new MultiSelectFieldFilterPresenter('test_field');
+    mockFieldRegistry = {
+      registerFieldFilter: vi.fn(),
+      unregisterFieldFilter: vi.fn(),
+    };
+  });
+
+  describe('constructor', () => {
+    it('should initialize with the correct field name', () => {
+      const presenter = new MultiSelectFieldFilterPresenter('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 an array of strings', () => {
+      presenter.setValue(['value1', 'value2']);
+      expect(presenter.getFilterString()).toBe(
+        '(test_field = "value1" OR test_field = "value2")'
+      );
+    });
+
+    it('should set the value when setValue is called with an array of numbers', () => {
+      presenter.setValue([1, 2, 3]);
+      expect(presenter.getFilterString()).toBe(
+        '(test_field = 1 OR test_field = 2 OR test_field = 3)'
+      );
+    });
+
+    it('should set the value when setValue is called with an array of booleans', () => {
+      presenter.setValue([true, false]);
+      expect(presenter.getFilterString()).toBe(
+        '(test_field = true OR test_field = false)'
+      );
+    });
+
+    it('should set the value when setValue is called with mixed types', () => {
+      presenter.setValue(['string', 123, true]);
+      expect(presenter.getFilterString()).toBe(
+        '(test_field = "string" OR test_field = 123 OR test_field = true)'
+      );
+    });
+
+    it('should set the value when setValue is called with null', () => {
+      presenter.setValue(['value1', 'value2']);
+      presenter.setValue(null);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should set the value when setValue is called with empty array', () => {
+      presenter.setValue([]);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should trigger onChange handlers when value is set', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setValue(['value1', 'value2']);
+
+      expect(onChangeHandler).toHaveBeenCalledTimes(1);
+    });
+
+    it('should trigger onChange handlers when value is set to null', () => {
+      const onChangeHandler = vi.fn();
+      presenter.onChange(onChangeHandler);
+
+      presenter.setValue(['value1']);
+      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(['value1', 'value2']);
+      presenter.setValue(null);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should return empty string when value is empty array', () => {
+      presenter.setValue([]);
+      expect(presenter.getFilterString()).toBe('');
+    });
+
+    it('should return single filter without parentheses for one value', () => {
+      presenter.setValue(['single_value']);
+      expect(presenter.getFilterString()).toBe('test_field = "single_value"');
+    });
+
+    it('should return multiple filters with OR and parentheses for multiple values', () => {
+      presenter.setValue(['value1', 'value2']);
+      expect(presenter.getFilterString()).toBe(
+        '(test_field = "value1" OR test_field = "value2")'
+      );
+    });
+
+    it('should handle special characters in string values', () => {
+      presenter.setValue(['value"with"quotes', 'normal_value']);
+      expect(presenter.getFilterString()).toBe(
+        '(test_field = "value"with"quotes" OR test_field = "normal_value")'
+      );
+    });
+
+    it('should handle numeric values without quotes', () => {
+      presenter.setValue([1, 2, 3]);
+      expect(presenter.getFilterString()).toBe(
+        '(test_field = 1 OR test_field = 2 OR test_field = 3)'
+      );
+    });
+
+    it('should handle boolean values without quotes', () => {
+      presenter.setValue([true, false]);
+      expect(presenter.getFilterString()).toBe(
+        '(test_field = true OR test_field = false)'
+      );
+    });
+
+    it('should handle mixed value types correctly', () => {
+      presenter.setValue(['string', 123, true, false]);
+      expect(presenter.getFilterString()).toBe(
+        '(test_field = "string" OR test_field = 123 OR test_field = true OR test_field = false)'
+      );
+    });
+  });
+
+  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(['value1']);
+
+      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(['value1']);
+
+      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 single 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 multiple string values from filter AST', () => {
+      const mockNode1 = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'double-quote-str', value: '"value1"' }],
+        },
+      };
+
+      const mockNode2 = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'single-quote-string', value: "'value2'" }],
+        },
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode1, mockNode2]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe(
+        '(test_field = "value1" OR test_field = "value2")'
+      );
+    });
+
+    it('should parse numeric values from filter AST', () => {
+      const mockNode = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'number', value: '123' }],
+        },
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe('test_field = 123');
+    });
+
+    it('should parse boolean values from filter AST', () => {
+      const mockNode = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'boolean', value: 'true' }],
+        },
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe('test_field = 1');
+    });
+
+    it('should handle mixed value types from filter AST', () => {
+      const mockNode1 = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'double-quote-str', value: '"string"' }],
+        },
+      };
+
+      const mockNode2 = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'number', value: '123' }],
+        },
+      };
+
+      const mockNode3 = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, { name: 'boolean', value: 'false' }],
+        },
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode1, mockNode2, mockNode3]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe(
+        '(test_field = "string" OR test_field = 123 OR test_field = 0)'
+      );
+    });
+
+    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 missing value nodes', () => {
+      const mockNode = {
+        name: 'plain-field',
+        value: 'test_field',
+        parent: {
+          name: 'infix-expression',
+          children: [null, null, null],
+        },
+      };
+
+      const mockAst = {
+        findAll: vi.fn().mockReturnValue([mockNode]),
+      };
+
+      presenter.setFilterState(mockAst as any);
+
+      expect(presenter.getFilterString()).toBe('');
+    });
+  });
+
+  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/multi_select_field_filter_presenter.ts

@@ -0,0 +1,90 @@
+import { Signal } from '@tcn/state';
+import { Node } from 'clarity-pattern-parser';
+import { FieldFilterRegistry, FieldFilterStrategy } from './field_filter_strategy.js';
+
+export class MultiSelectFieldFilterPresenter 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;
+  }
+
+  onChange(handler: () => void) {
+    this._onChangeHandlers.add(handler);
+    return () => {
+      this._onChangeHandlers.delete(handler);
+    };
+  }
+
+  setValue(value: (string | boolean | number)[] | null) {
+    this._value.set(value);
+    this._onChangeHandlers.forEach(handler => handler());
+  }
+
+  get broadcasts() {
+    return this._broadcasts;
+  }
+
+  setFieldRegistry(fieldRegistry: FieldFilterRegistry) {
+    this._fieldFilterRegistry = fieldRegistry;
+    fieldRegistry.registerFieldFilter(this._fieldName, this);
+  }
+
+  getFilterString() {
+    const values = this._value.get();
+    if (values == null) {
+      return '';
+    }
+    const wrappedValues = values.map(value =>
+      typeof value === 'string' ? `"${value}"` : value
+    );
+    const filterItems = wrappedValues.map(value => `${this._fieldName} = ${value}`);
+    const filterString = filterItems.join(' OR ');
+    return filterItems.length > 1 ? `(${filterString})` : filterString;
+  }
+
+  setFilterState(filterAst: Node) {
+    const fieldNodes = filterAst
+      .findAll((n: Node) => n.name === 'plain-field' && n.value === this._fieldName)
+      .filter((node: Node) => node.parent?.name === 'infix-expression');
+
+    if (fieldNodes.length === 0) {
+      return;
+    }
+
+    const valueNodes = fieldNodes
+      .map((node: Node) => node.parent?.children[2])
+      .filter((node: Node | undefined): node is Node => node != null);
+
+    const values = valueNodes
+      .map((node: Node) => {
+        return node.name === 'double-quote-str' || node.name === 'single-quote-string'
+          ? node.value.slice(1, -1)
+          : node.value;
+      })
+      .map((value: string) =>
+        value === 'true' ? true : value === 'false' ? false : value
+      )
+      .map((value: string | boolean) => {
+        const numValue = Number(value);
+        if (isNaN(numValue)) {
+          return value;
+        }
+        return numValue;
+      });
+
+    this._value.set(values);
+  }
+
+  dispose() {
+    this._fieldFilterRegistry?.unregisterFieldFilter(this._fieldName);
+    this._onChangeHandlers.clear();
+  }
+}

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

@@ -0,0 +1,53 @@
+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 { NumberFieldFilterPresenter } from './number_field_filter_presenter.js';
+import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
+import { ComparisonOperator } from '../types.js';
+
+const operators: ComparisonOperator[] = ['>=', '>', '<=', '<', '=', '!='];
+
+export function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {
+  const presenter = useFieldFilterStrategy(NumberFieldFilterPresenter, fieldName);
+
+  const value = useSignalValue(presenter.broadcasts.value);
+  const operator = useSignalValue(presenter.broadcasts.operator);
+
+  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="55px"
+        >
+          {operators.map(operator => (
+            <Option key={operator} value={operator} label={operator}>
+              {operator}
+            </Option>
+          ))}
+        </Select>
+        <Input
+          type="number"
+          value={String(value ?? '')}
+          onChange={value => presenter.setValue(Number(value))}
+        />
+        <Button
+          onClick={() => presenter.setValue(null)}
+          hierarchy="tertiary"
+          disabled={value == null}
+        >
+          <CrossCircleIcon />
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}