@kronor/dtv 0.2.9

package/src/components/FilterForm.tsx

@@ -0,0 +1,375 @@
+import type { FilterExpr, FilterFieldGroup, FilterSchema, FilterId } from '../framework/filters';
+import { FilterControl, FilterSchemasAndGroups } from '../framework/filters';
+import { SavedFilter } from '../framework/saved-filters';
+import { FilterFormState } from '../framework/filter-form-state';
+import { InputText } from 'primereact/inputtext';
+import { InputNumber } from 'primereact/inputnumber';
+import { Calendar } from 'primereact/calendar';
+import { Dropdown } from 'primereact/dropdown';
+import { MultiSelect } from 'primereact/multiselect';
+import { Button } from 'primereact/button';
+import { SplitButton } from 'primereact/splitbutton';
+import { ReactNode, useMemo } from 'react';
+import { Panel } from 'primereact/panel';
+import { createDefaultFilterState, FilterState, getFilterStateById, setFilterStateById, buildInitialFormState, FormStateInitMode } from '../framework/state';
+
+// Re-export FilterFormState from the dedicated module
+export type { FilterFormState } from '../framework/filter-form-state';
+
+interface FilterFormProps {
+    filterSchemasAndGroups: FilterSchemasAndGroups;
+    filterState: FilterState
+    setFilterState: (state: FilterState) => void;
+    onSaveFilter: (state: FilterState) => void;
+    onUpdateFilter: (filter: SavedFilter, state: FilterState) => void;
+    onShareFilter: () => void;
+    savedFilters: SavedFilter[];
+    visibleFilterIds: FilterId[]; // indices of filters to display
+    onSubmit: () => void;
+}
+
+function renderInput(control: FilterControl, value: any, setValue: (v: unknown) => void): ReactNode {
+    switch (control.type) {
+        case 'text':
+            return (
+                <InputText
+                    className="tw:w-full"
+                    placeholder={control.placeholder}
+                    value={value ?? ''}
+                    onChange={e => setValue(e.target.value)}
+                />
+            )
+        case 'number':
+            return (
+                <InputNumber
+                    className="tw:w-full"
+                    placeholder={control.placeholder}
+                    value={value ?? null}
+                    onValueChange={e => setValue(e.value)}
+                />
+            )
+        case 'date':
+            return (
+                <Calendar
+                    className='tw:w-full'
+                    placeholder={control.placeholder}
+                    value={value ?? null}
+                    onChange={e => setValue(e.value)}
+                    showIcon
+                    showButtonBar
+                    showTime
+                    dateFormat='yy-mm-dd'
+                />
+            )
+        case 'dropdown':
+            return (
+                <Dropdown
+                    className='tw:w-full'
+                    value={value ?? null}
+                    options={control.items}
+                    onChange={e => setValue(e.value)}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder='Any'
+                />
+            );
+        case 'multiselect':
+            return (
+                <MultiSelect
+                    className='tw:w-full'
+                    value={value ?? []}
+                    options={control.items}
+                    onChange={e => setValue(e.value)}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder='Any'
+                    display='chip'
+                    filter={control.filterable}
+                />
+            );
+        case 'customOperator': {
+            const operator = value?.operator ?? control.operators[0]?.value;
+            const valueOrDefault = value?.value ?? '';
+            return (
+                <div className="tw:flex tw:gap-2">
+                    <Dropdown
+                        className="tw:min-w-[90px]"
+                        value={operator}
+                        options={control.operators}
+                        onChange={e => setValue({ operator: e.value, value: valueOrDefault })}
+                        optionLabel="label"
+                        optionValue="value"
+                        placeholder="operator"
+                    />
+                    <div className="tw:flex-1">
+                        {renderInput(control.valueControl, valueOrDefault, v => setValue({ operator, value: v }))}
+                    </div>
+                </div>
+            );
+        }
+        case 'custom':
+            return control.component ? (
+                <control.component {...(control.props || {})} value={value} onChange={setValue} />
+            ) : null;
+    }
+}
+
+// Recursively renders a FilterFormState tree from state
+function renderFilterFormState(
+    state: FilterFormState,
+    setState: (state: FilterFormState) => void,
+    renderFilterType: boolean,
+    filterExpression: FilterExpr
+): ReactNode {
+    if (state.type === 'and' || state.type === 'or') {
+        // Schema consistency check: filter expression must match state type
+        if (filterExpression.type !== state.type) {
+            throw new Error(`Schema consistency error: FilterFormState type "${state.type}" does not match FilterExpr type "${filterExpression.type}"`);
+        }
+
+        const childExpressions = filterExpression.filters;
+
+        // Schema consistency check: must have same number of children
+        if (childExpressions.length !== state.children.length) {
+            throw new Error(`Schema consistency error: FilterFormState has ${state.children.length} children but FilterExpr has ${childExpressions.length} filters`);
+        }
+
+        return (
+            <div className="tw:flex tw:flex-col tw:gap-2 tw:border-l-2 tw:pl-2 tw:ml-2">
+                {
+                    renderFilterType
+                        ? (
+                            <div className="tw:font-semibold tw:text-xs tw:mb-1 tw:uppercase">{state.type}</div>
+                        )
+                        : null
+                }
+                {
+                    state.children.map((child, i) => (
+                        <div key={i}>
+                            {renderFilterFormState(
+                                child,
+                                newChild => {
+                                    const newChildren = [...state.children];
+                                    newChildren[i] = newChild;
+                                    setState({ ...state, children: newChildren });
+                                },
+                                renderFilterType,
+                                childExpressions[i]
+                            )}
+                        </div>
+                    ))
+                }
+            </div>
+        );
+    } else if (state.type === 'not') {
+        // Schema consistency check: filter expression must be 'not' type
+        if (filterExpression.type !== 'not') {
+            throw new Error(`Schema consistency error: FilterFormState type "not" does not match FilterExpr type "${filterExpression.type}"`);
+        }
+
+        const childExpression = filterExpression.filter;
+
+        return (
+            <div className="tw:flex tw:flex-col tw:gap-2 tw:border-l-2 tw:pl-2 tw:ml-2">
+                {
+                    renderFilterType
+                        ? (
+                            <div className="tw:font-semibold tw:text-xs tw:mb-1 tw:uppercase">{state.type}</div>
+                        )
+                        : null
+                }
+                {
+                    renderFilterFormState(
+                        state.child,
+                        newChild => setState({ ...state, child: newChild }),
+                        renderFilterType,
+                        childExpression
+                    )
+                }
+            </div>
+        );
+    } else if (state.type === 'leaf') {
+        // Schema consistency check: filter expression must be a leaf type (not 'and', 'or', or 'not')
+        if (filterExpression.type === 'and' || filterExpression.type === 'or' || filterExpression.type === 'not') {
+            throw new Error(`Schema consistency error: FilterFormState is leaf type but FilterExpr is "${filterExpression.type}"`);
+        }
+
+        const handleSetValue = (value: unknown) => {
+            const newState = { ...state, value };
+            setState(newState);
+        };
+
+        // Use the raw state value for display - transforms are applied during query building
+        const displayValue = state.value;
+
+        return (
+            <div className="tw:flex tw:flex-col tw:min-w-[220px] tw:mb-2">
+                <label className="tw:text-sm tw:font-medium tw:mb-1">{filterExpression.value.label}</label>
+                {renderInput(filterExpression.value, displayValue, handleSetValue)}
+            </div>
+        );
+    }
+    return null;
+}
+
+// Helper to check if a filter is empty
+function isFilterEmpty(state: FilterFormState): boolean {
+    if (state.type === 'leaf') {
+        return state.value === '' || state.value === null || (Array.isArray(state.value) && state.value.length === 0);
+    }
+    if (state.type === 'not') {
+        return isFilterEmpty(state.child);
+    }
+    return state.children.every(isFilterEmpty);
+}
+
+function FilterForm({
+    filterSchemasAndGroups,
+    filterState,
+    setFilterState,
+    onSaveFilter,
+    onUpdateFilter,
+    onShareFilter,
+    savedFilters,
+    visibleFilterIds,
+    onSubmit
+}: FilterFormProps) {
+
+    const filterSchemaById: Map<FilterId, FilterSchema> = useMemo(() => new Map(
+        filterSchemasAndGroups.filters.map(filter => [filter.id, filter])
+    ), [filterSchemasAndGroups]);
+
+    const visibleSet = useMemo(() => new Set(visibleFilterIds), [visibleFilterIds]);
+
+    // Helper to reset a filter by its ID
+    function resetFilter(filterId: FilterId) {
+        const filterSchema = filterSchemaById.get(filterId);
+        if (!filterSchema) return;
+        const initial = buildInitialFormState(filterSchema.expression, FormStateInitMode.Empty);
+        setFilterState(setFilterStateById(filterState, filterId, initial));
+    }
+
+    // Helper to reset all filters
+    function resetAllFilters() {
+        setFilterState(
+            createDefaultFilterState(filterSchemasAndGroups, FormStateInitMode.Empty)
+        );
+        onSubmit();
+    }
+
+    // Group filters by group name
+    const defaultGroup: FilterFieldGroup | undefined = filterSchemasAndGroups.groups.find(group => group.name === 'default');
+    const defaultFilters: FilterSchema[] = filterSchemasAndGroups.filters.filter(filter => filter.group === 'default' && visibleSet.has(filter.id));
+    const otherGroups: FilterFieldGroup[] = filterSchemasAndGroups.groups.filter(group => group.name !== 'default');
+    const filtersByGroup: Array<{ group: FilterFieldGroup; filters: FilterSchema[] }> =
+        otherGroups
+            .map(group => ({
+                group,
+                filters: filterSchemasAndGroups.filters.filter(filter => filter.group === group.name && visibleSet.has(filter.id))
+            }))
+            .filter(grouping => grouping.filters.length > 0);
+    return (
+        <form className="tw:mb-4" onSubmit={e => { e.preventDefault(); onSubmit(); }}>
+            {/* Render default group filters above the dividers */}
+            {defaultGroup && defaultFilters.length > 0 && (
+                <div className="tw:flex tw:flex-wrap tw:gap-4 tw:items-start tw:mb-4">
+                    {
+                        defaultFilters.map(filterSchema => (
+                            <div key={filterSchema.id} className="tw:flex tw:flex-col tw:min-w-[220px] tw:mb-2">
+                                <div className="tw:flex tw:items-center tw:mb-1 tw:max-h-[20px]">
+                                    <label className="tw:text-sm tw:font-bold">{filterSchema.label}</label>
+                                    <Button
+                                        type="button"
+                                        size='small'
+                                        icon='pi pi-filter-slash'
+                                        rounded
+                                        text
+                                        title="Reset filter"
+                                        onClick={() => resetFilter(filterSchema.id)}
+                                        visible={!isFilterEmpty(getFilterStateById(filterState, filterSchema.id))}
+                                    />
+                                </div>
+                                {
+                                    renderFilterFormState(
+                                        getFilterStateById(filterState, filterSchema.id),
+                                        newState => {
+                                            setFilterState(setFilterStateById(filterState, filterSchema.id, newState));
+                                        },
+                                        filterSchema.aiGenerated,
+                                        filterSchema.expression
+                                    )
+                                }
+                            </div>
+                        ))
+                    }
+                </div>
+            )}
+            {/* Render other groups with Panel and captions */}
+            {
+                filtersByGroup.map(({ group, filters }) => (
+                    <Panel key={group.name} header={group.label} className="tw:w-full tw:mb-4">
+                        <div className="tw:flex tw:flex-wrap tw:gap-4 tw:items-start">
+                            {
+                                filters.map((filterSchema) => (
+                                    <div key={filterSchema.id} className="tw:flex tw:flex-col tw:min-w-[220px] mb-2">
+                                        <div className="tw:flex items-center tw:mb-1 tw:max-h-[20px]">
+                                            <label className="tw:text-sm tw:font-bold">{filterSchema.label}</label>
+                                            <Button
+                                                type="button"
+                                                size='small'
+                                                icon='pi pi-filter-slash'
+                                                rounded
+                                                text
+                                                title="Reset filter"
+                                                onClick={() => resetFilter(filterSchema.id)}
+                                                visible={!isFilterEmpty(getFilterStateById(filterState, filterSchema.id))}
+                                            />
+                                        </div>
+                                        {
+                                            renderFilterFormState(
+                                                getFilterStateById(filterState, filterSchema.id),
+                                                newState => {
+                                                    setFilterState(setFilterStateById(filterState, filterSchema.id, newState));
+                                                },
+                                                filterSchema.aiGenerated,
+                                                filterSchema.expression
+                                            )
+                                        }
+                                    </div>
+                                ))
+                            }
+                        </div>
+                    </Panel>
+                ))
+            }
+            <div className="tw:flex tw:gap-2 tw:mb-3 tw:justify-end">
+                <Button type="submit" size='small' label="Apply filter" icon='pi pi-filter' />
+                <Button type="button" size='small' outlined label="Reset All" icon='pi pi-filter-slash' onClick={resetAllFilters} className='p-button-secondary' />
+                <SplitButton
+                    size='small'
+                    outlined
+                    label="Save Filter"
+                    icon='pi pi-bookmark'
+                    onClick={() => onSaveFilter(filterState)}
+                    model={savedFilters.map(filter => ({
+                        label: `Update “${filter.name}”`,
+                        icon: 'pi pi-file-import',
+                        command: () => onUpdateFilter(filter, filterState)
+                    }))}
+                    className='p-button-secondary'
+                />
+                <Button
+                    type="button"
+                    size='small'
+                    outlined
+                    icon="pi pi-share-alt"
+                    label="Share Filter"
+                    onClick={onShareFilter}
+                    className="p-button-secondary"
+                />
+            </div>
+        </form>
+    );
+}
+
+export default FilterForm;

package/src/components/PhoneNumberFilter.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { Dropdown } from 'primereact/dropdown';
+import { InputText } from 'primereact/inputtext';
+
+const COUNTRY_CODES = [
+    { label: 'Sweden (+46)', value: '+46' },
+    { label: 'Austria (+43)', value: '+43' },
+    { label: 'Belgium (+32)', value: '+32' },
+    { label: 'Croatia (+385)', value: '+385' },
+    { label: 'Cyprus (+357)', value: '+357' },
+    { label: 'Czech Republic (+420)', value: '+420' },
+    { label: 'Denmark (+45)', value: '+45' },
+    { label: 'Estonia (+372)', value: '+372' },
+    { label: 'Finland (+358)', value: '+358' },
+    { label: 'France (+33)', value: '+33' },
+    { label: 'Germany (+49)', value: '+49' },
+    { label: 'Greece (+30)', value: '+30' },
+    { label: 'Hungary (+36)', value: '+36' },
+    { label: 'Iceland (+354)', value: '+354' },
+    { label: 'Ireland (+353)', value: '+353' },
+    { label: 'Italy (+39)', value: '+39' },
+    { label: 'Latvia (+371)', value: '+371' },
+    { label: 'Liechtenstein (+423)', value: '+423' },
+    { label: 'Lithuania (+370)', value: '+370' },
+    { label: 'Luxembourg (+352)', value: '+352' },
+    { label: 'Malta (+356)', value: '+356' },
+    { label: 'Netherlands (+31)', value: '+31' },
+    { label: 'Norway (+47)', value: '+47' },
+    { label: 'Poland (+48)', value: '+48' },
+    { label: 'Portugal (+351)', value: '+351' },
+    { label: 'Romania (+40)', value: '+40' },
+    { label: 'Slovakia (+421)', value: '+421' },
+    { label: 'Slovenia (+386)', value: '+386' },
+    { label: 'Spain (+34)', value: '+34' },
+];
+
+export interface PhoneNumberFilterProps {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+
+function parsePhoneNumber(value: string | undefined): { code: string | null; number: string } {
+    if (!value) return { code: COUNTRY_CODES[0].value, number: '' };
+    if (value.startsWith('+')) {
+        // Try to match the longest code from COUNTRY_CODES
+        const match = COUNTRY_CODES
+            .map(c => c.value)
+            .sort((a, b) => b.length - a.length) // longest first
+            .find(code => value.startsWith(code));
+        if (match) {
+            return { code: match, number: value.slice(match.length) };
+        }
+        // fallback: treat as unknown code
+        return { code: null, number: value };
+    }
+    return { code: COUNTRY_CODES[0].value, number: value };
+}
+
+export const PhoneNumberFilter: React.FC<PhoneNumberFilterProps> = ({ value, onChange }) => {
+    const parsed = React.useMemo(() => {
+        return parsePhoneNumber(value);
+    }, [value]);
+
+    const numberStartsWithPlus = parsed.number.trim().startsWith('+');
+
+    const emitChange = (code: string | null, number: string) => {
+        if (onChange) {
+            if (code === null || numberStartsWithPlus) {
+                onChange(number);
+            } else {
+                onChange(`${code}${number}`);
+            }
+        }
+    };
+
+    const handleCodeChange = (e: { value: string }) => {
+        emitChange(e.value, parsed.number);
+    };
+    const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const parsedNewValue = parsePhoneNumber(e.target.value);
+        emitChange(parsedNewValue.code ?? parsed.code, parsedNewValue.number);
+    };
+
+    return (
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <Dropdown
+                value={numberStartsWithPlus ? null : parsed.code}
+                options={COUNTRY_CODES}
+                onChange={handleCodeChange}
+                disabled={numberStartsWithPlus}
+                placeholder="Code"
+                filter
+            />
+            <InputText
+                type="text"
+                placeholder="Phone number"
+                value={parsed.number}
+                onChange={handleNumberChange}
+            />
+        </div>
+    );
+};

package/src/components/SavedFilterList.tsx

@@ -0,0 +1,181 @@
+import { Button } from 'primereact/button';
+import { confirmDialog } from 'primereact/confirmdialog';
+import { Tag } from 'primereact/tag';
+import { SavedFilter } from '../framework/saved-filters';
+import { FilterState } from '../framework/state';
+import { FilterSchemasAndGroups } from '../framework/filters';
+
+interface SavedFilterListProps {
+    savedFilters: SavedFilter[];
+    onFilterDelete: (filterId: string) => void;
+    onFilterLoad: (filterState: FilterState) => void;
+    onFilterApply: () => void;
+    onFilterShare: (filterState: FilterState) => void;
+    visible: boolean;
+    filterSchema: FilterSchemasAndGroups;
+}
+
+export default function SavedFilterList({ savedFilters, onFilterDelete, onFilterLoad, onFilterApply, onFilterShare, visible, filterSchema }: SavedFilterListProps) {
+    if (!visible) {
+        return null;
+    }
+
+    const handleDeleteFilter = (filter: SavedFilter) => {
+        confirmDialog({
+            message: `Are you sure you want to delete the filter "${filter.name}"? This action cannot be undone.`,
+            header: 'Confirm Filter Deletion',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept: () => {
+                onFilterDelete(filter.id);
+            },
+            reject: () => {
+                // User cancelled - no action needed
+            }
+        });
+    };
+
+    const formatDate = (date: Date) => {
+        return new Intl.DateTimeFormat('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        }).format(date);
+    };
+
+    function isActiveFilter(filter: unknown) {
+        if (!(typeof filter === 'object' && filter !== null && 'value' in filter)) {
+            return false
+        }
+        if (Array.isArray(filter.value)) {
+            return filter.value.length > 0;
+        }
+        if (typeof filter.value === 'object' && filter.value !== null && 'value' in filter.value) {
+            return isActiveFilter(filter.value);
+        }
+        return filter.value !== ''
+    }
+
+    const schemaById = new Map(filterSchema.filters.map(f => [f.id, f]));
+
+    function getFieldDisplay(filterId: string): string {
+        const schemaEntry = schemaById.get(filterId);
+        if (!schemaEntry) return '';
+        const expr: any = schemaEntry.expression;
+        if (expr && 'field' in expr) {
+            const fieldVal = expr.field;
+            if (typeof fieldVal === 'string') return fieldVal;
+            if (fieldVal && typeof fieldVal === 'object') {
+                if ('and' in fieldVal && Array.isArray(fieldVal.and)) return fieldVal.and.join(' & ');
+                if ('or' in fieldVal && Array.isArray(fieldVal.or)) return fieldVal.or.join(' | ');
+            }
+        }
+        return '';
+    }
+
+    const renderFilterState = (state: FilterState) => {
+        if (!state || state.size === 0) {
+            return null;
+        }
+
+        const activeFilters = Array.from(state.entries())
+            .filter(([, filter]) => isActiveFilter(filter));
+        if (activeFilters.length === 0) {
+            return null;
+        }
+
+        return (
+            <div className="tw:mt-2 tw:flex tw:flex-wrap tw:gap-1">
+                {
+                    activeFilters.map(([filterId, filter], index) => {
+                        // Handle different types of FilterFormState
+                        let displayText = '';
+                        if (filter.type === 'leaf') {
+                            const valueStr = typeof filter.value === 'string' && filter.value.length > 128
+                                ? `${filter.value.substring(0, 128)}...`
+                                : String(filter.value);
+                            const fieldName = getFieldDisplay(filterId);
+                            displayText = fieldName ? `${fieldName}: ${valueStr}` : valueStr;
+                        } else if (filter.type === 'and' || filter.type === 'or') {
+                            displayText = `${filter.type.toUpperCase()} (${filter.children.length} filters)`;
+                        } else if (filter.type === 'not') {
+                            displayText = `NOT (1 filter)`;
+                        }
+
+                        return (
+                            <Tag
+                                key={index}
+                                value={displayText}
+                                className="tw:text-xs"
+                                style={{
+                                    backgroundColor: 'transparent',
+                                    color: '#6366f1',
+                                    borderWidth: 1
+                                }}
+                            />
+                        );
+                    })
+                }
+            </div>
+        );
+    };
+
+    return (
+        <div className="tw:mb-4">
+            <div className="tw:mb-3">
+                <h3 className="tw:text-lg tw:font-medium tw:text-gray-900">Saved Filters</h3>
+            </div>
+            {savedFilters.length === 0 ? (
+                <p className="tw:text-gray-500 tw:text-center tw:py-4">No saved filters for this view</p>
+            ) : (
+                <div className="tw:space-y-3">
+                    {savedFilters.map((filter) => (
+                        <div key={filter.id} className="tw:flex tw:items-center tw:justify-between tw:p-3 tw:border tw:border-gray-200 tw:rounded-lg">
+                            <div className="tw:flex-1">
+                                <div className="tw:flex tw:items-center tw:gap-2 tw:mb-1">
+                                    <h4 className="tw:font-medium tw:text-gray-900">{filter.name}</h4>
+                                    <span className="tw:text-xs tw:text-gray-500 tw:bg-gray-100 tw:px-2 tw:py-1 tw:rounded">
+                                        Created: {formatDate(filter.createdAt)}
+                                    </span>
+                                </div>
+                                {renderFilterState(filter.state)}
+                            </div>
+                            <div className="tw:flex tw:gap-2">
+                                <Button
+                                    size="small"
+                                    outlined
+                                    icon="pi pi-filter"
+                                    label="Use"
+                                    onClick={() => {
+                                        onFilterLoad(filter.state);
+                                        onFilterApply();
+                                    }}
+                                    className="p-button"
+                                />
+                                <Button
+                                    size="small"
+                                    outlined
+                                    icon="pi pi-share-alt"
+                                    label="Share"
+                                    onClick={() => onFilterShare(filter.state)}
+                                    className="p-button-secondary"
+                                />
+                                <Button
+                                    size="small"
+                                    outlined
+                                    icon="pi pi-trash"
+                                    label='Delete'
+                                    onClick={() => handleDeleteFilter(filter)}
+                                    className="p-button-danger"
+                                />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}