@servicetitan/table 23.3.2 → 24.0.0

package/src/filters/async-select/async-select-filter.tsx

@@ -0,0 +1,249 @@
+import { Component, SyntheticEvent, ReactNode, Fragment, KeyboardEvent, FC } from 'react';
+
+import {
+    Checkbox,
+    TableFilterCellProps,
+    Radio,
+    Input,
+    Spinner,
+    BodyText,
+} from '@servicetitan/design-system';
+import { IdType } from '@servicetitan/data-query';
+
+import { renderCustomColumnMenuFilter } from '../column-menu-filters';
+import { makeObservable, observable, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+
+export type AsyncSelectFilterDataFetcher<
+    TV extends IdType = IdType,
+    TO extends AsyncSelectItem<TV> = AsyncSelectItem<TV>
+> = (opts: { search?: string }) => Promise<{ data: TO[] }>;
+
+export interface AsyncSelectItem<TV extends IdType = IdType> {
+    value: TV;
+    text: string;
+}
+
+interface SelectorProps<TID extends IdType, TO extends AsyncSelectItem<TID>> {
+    placeholder: string;
+    selected: TO[];
+    dataFetcher: AsyncSelectFilterDataFetcher<TID, TO>;
+    itemComponent: FC<SelectorItemProps>;
+    onChange(option: TO, checked: boolean, event: SyntheticEvent<HTMLInputElement>): void;
+    renderer?(item: TO): ReactNode;
+}
+
+interface SelectorItemProps {
+    option: AsyncSelectItem;
+    checked: boolean;
+    onChange(
+        option: AsyncSelectItem,
+        checked: boolean,
+        event: SyntheticEvent<HTMLInputElement>
+    ): void;
+    renderer?(item: AsyncSelectItem): ReactNode;
+}
+
+@observer
+class SelectorAsync<TID extends IdType, TO extends AsyncSelectItem<TID>> extends Component<
+    SelectorProps<TID, TO>
+> {
+    @observable shownOptions: AsyncSelectItem<TID>[] = [];
+    @observable search = '';
+    @observable error = false;
+    @observable loading = false;
+
+    constructor(props: SelectorProps<TID, TO>) {
+        super(props);
+        makeObservable(this);
+    }
+
+    componentDidMount() {
+        this.searchOptions().catch();
+    }
+
+    handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Enter') {
+            event.stopPropagation();
+        }
+    };
+
+    handleSearch = (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
+        runInAction(() => (this.search = data.value));
+        this.searchOptions().catch();
+    };
+
+    searchOptions = async () => {
+        runInAction(() => {
+            this.loading = true;
+        });
+
+        try {
+            const { data } = await this.props.dataFetcher({
+                search: this.search,
+            });
+
+            runInAction(() => {
+                this.shownOptions = data;
+                this.error = false;
+                this.loading = false;
+            });
+        } catch {
+            runInAction(() => {
+                this.error = true;
+                this.loading = false;
+            });
+        }
+    };
+
+    render() {
+        const selectedOptions = this.props.selected;
+        const selected = new Set(selectedOptions.map(opt => opt.value));
+        const ItemComponent = this.props.itemComponent;
+
+        return (
+            <Fragment>
+                <Input
+                    className="m-x-half m-t-half m-b-2"
+                    placeholder={this.props.placeholder}
+                    onChange={this.handleSearch}
+                    onKeyDown={this.handleKeyDown}
+                    size="xsmall"
+                    value={this.search}
+                />
+                <div className="p-x-half position-relative" onKeyDown={this.handleKeyDown}>
+                    {!!selectedOptions.length && (
+                        <div className="border-bottom m-y-half">
+                            {selectedOptions.map(option => (
+                                <ItemComponent
+                                    key={option.value}
+                                    option={option}
+                                    checked
+                                    renderer={this.props.renderer}
+                                    onChange={this.props.onChange}
+                                />
+                            ))}
+                        </div>
+                    )}
+                    {this.error ? (
+                        <BodyText className="c-red-500">Unable to load options</BodyText>
+                    ) : this.shownOptions.length ? (
+                        this.shownOptions
+                            .filter(opt => !selected.has(opt.value))
+                            .map(option => (
+                                <ItemComponent
+                                    key={option.value}
+                                    option={option}
+                                    checked={false}
+                                    renderer={this.props.renderer}
+                                    onChange={this.props.onChange}
+                                />
+                            ))
+                    ) : this.loading ? (
+                        <BodyText>&nbsp;</BodyText>
+                    ) : (
+                        <BodyText>No options found</BodyText>
+                    )}
+
+                    {this.loading && (
+                        <div className="position-absolute top-0 bottom-0 left-0 right-0 opacity-disabled bg-white d-f justify-content-center">
+                            <Spinner size="tiny" />
+                        </div>
+                    )}
+                </div>
+            </Fragment>
+        );
+    }
+}
+
+const SelectorItemSingle: FC<SelectorItemProps> = ({ option, renderer, checked, onChange }) => (
+    <Radio
+        label={renderer?.(option) ?? option.text}
+        checked={checked}
+        onChange={(_, event) => onChange(option, true, event)}
+        className="m-b-1"
+    />
+);
+
+const SelectorItemMultiple: FC<SelectorItemProps> = ({ option, renderer, checked, onChange }) => (
+    <Checkbox
+        label={renderer?.(option) ?? option.text}
+        checked={checked}
+        onChange={(_, checked, event) => onChange(option, checked, event)}
+        className="m-b-1"
+    />
+);
+
+export interface AsyncSelectFilterOptions<TID extends IdType, TO extends AsyncSelectItem<TID>> {
+    dataFetcher: AsyncSelectFilterDataFetcher<TID, TO>;
+    placeholder: string;
+    multiple?: boolean;
+    renderItem?: (item: TO) => ReactNode;
+}
+
+interface TableFilterCellPropsTyped<T = any> extends Omit<TableFilterCellProps, 'value'> {
+    value?: T;
+}
+
+export function asyncSelectColumnMenuFilter<TID extends IdType, TO extends AsyncSelectItem<TID>>(
+    options: AsyncSelectFilterOptions<TID, TO>
+) {
+    const contains = (value: TID, options?: TO[]) => options?.some(opt => opt.value === value);
+    const equals = (value: TID, option?: TO) => option?.value === value;
+
+    const FilterCell = options.multiple
+        ? ({ value, onChange }: TableFilterCellPropsTyped<TO[]>) => {
+              const handleChange = (
+                  option: TO,
+                  checked: boolean,
+                  event: SyntheticEvent<HTMLInputElement>
+              ) => {
+                  const val = checked
+                      ? (value ?? []).concat(option)
+                      : (value ?? []).filter(opt => opt.value !== option.value);
+
+                  onChange({
+                      value: val.length ? val : undefined,
+                      operator: val.length ? contains : '',
+                      syntheticEvent: event,
+                  });
+              };
+
+              return (
+                  <SelectorAsync
+                      selected={value ?? []}
+                      itemComponent={SelectorItemMultiple}
+                      onChange={handleChange}
+                      placeholder={options.placeholder}
+                      renderer={options.renderItem}
+                      dataFetcher={options.dataFetcher}
+                  />
+              );
+          }
+        : ({ value, onChange }: TableFilterCellPropsTyped<TO>) => {
+              const handleChange = (
+                  option: TO,
+                  checked: boolean,
+                  event: SyntheticEvent<HTMLInputElement>
+              ) => {
+                  onChange({
+                      value: option,
+                      operator: option ? equals : '',
+                      syntheticEvent: event,
+                  });
+              };
+
+              return (
+                  <SelectorAsync
+                      selected={value ? [value] : []}
+                      onChange={handleChange}
+                      itemComponent={SelectorItemSingle}
+                      placeholder={options.placeholder}
+                      renderer={options.renderItem}
+                      dataFetcher={options.dataFetcher}
+                  />
+              );
+          };
+
+    return renderCustomColumnMenuFilter(FilterCell);
+}

package/src/filters/index.ts

@@ -6,3 +6,5 @@ export * from './column-menu-filters';
 export * from './field-values-filter';
 export * from './multiselect-filter';
 export * from './numeric-filter-extended/numeric-filter-extended';
+export * from './single-select/single-select-filter';
+export * from './async-select/async-select-filter';

package/src/filters/single-select/single-select-filter.stories.tsx

@@ -0,0 +1,7 @@
+import { TableExample } from '../../demo/filters/single-select-filter';
+
+export default {
+    title: 'Table/Filters',
+};
+
+export const SingleSelect = () => <TableExample />;

package/src/filters/single-select/single-select-filter.tsx

@@ -0,0 +1,66 @@
+import { Component, SyntheticEvent, ReactNode, FC } from 'react';
+
+import { TableFilterCellProps, Radio } from '@servicetitan/design-system';
+
+import { renderCustomColumnMenuFilter } from '../column-menu-filters';
+import { IdType } from '@servicetitan/data-query';
+
+interface SelectorProps<TV, TO> {
+    options: TO[];
+    value?: TV;
+    valueSelector(item: TO): TV;
+    onChange(value: TV | undefined, event: SyntheticEvent<HTMLInputElement>): void;
+    renderer?(item: TO): ReactNode;
+}
+
+class SelectorRadio<TV, TO> extends Component<SelectorProps<TV, TO>> {
+    render() {
+        const { options, value, renderer } = this.props;
+
+        return options.map((option, index) => {
+            const optionValue = this.props.valueSelector(option);
+            return (
+                // eslint-disable-next-line react/no-array-index-key
+                <span key={index} className="k-widget m-b-1-i d-b">
+                    <Radio
+                        label={renderer ? renderer(option) : `${option}`}
+                        checked={value === optionValue}
+                        onChange={(_, event) => this.props.onChange(optionValue, event)}
+                    />
+                </span>
+            );
+        });
+    }
+}
+
+export interface SingleSelectColumnMenuOptions<TV, TO = TV> {
+    options: TO[];
+    valueSelector?: (item: TO) => TV;
+    renderItem?: (item: TO) => ReactNode | string;
+}
+
+export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(
+    props: SingleSelectColumnMenuOptions<TV, TO>
+) {
+    const FilterCell: FC<TableFilterCellProps> = ({ value, onChange }) => {
+        const handleChange = (value: TV | undefined, event: SyntheticEvent<HTMLInputElement>) => {
+            onChange({
+                value: value ?? '',
+                operator: value ? 'equals' : '',
+                syntheticEvent: event,
+            });
+        };
+
+        return (
+            <SelectorRadio
+                options={props.options}
+                value={value === '' ? undefined : value}
+                onChange={handleChange}
+                renderer={props.renderItem}
+                valueSelector={props.valueSelector ?? (option => option)}
+            />
+        );
+    };
+
+    return renderCustomColumnMenuFilter(FilterCell);
+}

package/src/index.ts

@@ -4,6 +4,8 @@ export * from './editable-cell';
 export * from './filters';
 export * from './export';
 export * from './select-cell';
+export * from './use-observing-table-state';
+export * from './utils/filters';
 
 export {
     TableColumn,

package/src/table-state.ts

@@ -67,7 +67,7 @@ export interface TableStateModel<TId extends IdType = never> {
     group: GroupDescriptor[];
 }
 
-interface TableStateConstructorParams<
+export interface TableStateConstructorParams<
     T,
     TId extends IdType = never,
     P = never,

package/src/use-observing-table-state/demo/components/use-observing-table-state-demo.tsx

@@ -0,0 +1,82 @@
+import { FC, Fragment } from 'react';
+import { observer } from 'mobx-react';
+import { provide, useDependencies } from '@servicetitan/react-ioc';
+import { BodyText, Button, TableColumn } from '@servicetitan/design-system';
+
+import { Table, ResetPaginationMode, useObservingTableState } from '../../../';
+import { UseObservingTableStateDemoStore } from '../stores/use-observing-table-state-demo.store';
+//
+
+export interface TableUseTableStateExampleProps {
+    resetPaginationMode: ResetPaginationMode;
+}
+export const TableUseTableStateExample: FC<TableUseTableStateExampleProps> = provide({
+    singletons: [UseObservingTableStateDemoStore],
+})(
+    observer(({ resetPaginationMode }) => {
+        const [
+            {
+                data,
+                updateDataKeepRoot,
+                updateDataChangeRoot,
+                add5RowsWithKeepDataRoot,
+                remove5RowsWithKeepDataRoot,
+                add5RowsWithUpdateDataRoot,
+                remove5RowsWithUpdateDataRoot,
+            },
+        ] = useDependencies(UseObservingTableStateDemoStore);
+        const tableState = useObservingTableState(
+            data,
+            { pageSize: 5 },
+            { idSelector: p => p.ProductID },
+            resetPaginationMode
+        );
+
+        return (
+            <Fragment>
+                <table className="m-b-2" cellPadding={4}>
+                    <tr>
+                        <td>
+                            <BodyText>Keep data root:</BodyText>
+                        </td>
+                        <td>
+                            <Button onClick={updateDataKeepRoot}>Update prices</Button>
+                        </td>
+                        <td>
+                            <Button onClick={add5RowsWithKeepDataRoot}>Add 5 rows</Button>
+                        </td>
+                        <td>
+                            <Button onClick={remove5RowsWithKeepDataRoot}>Remove 5 rows</Button>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <BodyText>Update data root:</BodyText>
+                        </td>
+                        <td>
+                            <Button onClick={updateDataChangeRoot}>Update prices</Button>
+                        </td>
+                        <td>
+                            <Button onClick={add5RowsWithUpdateDataRoot}>Add 5 rows</Button>
+                        </td>
+                        <td>
+                            <Button onClick={remove5RowsWithUpdateDataRoot}>Remove 5 rows</Button>
+                        </td>
+                    </tr>
+                </table>
+                <Table tableState={tableState} sortable groupable>
+                    <TableColumn field="ProductID" title="ID" width="100px" />
+
+                    <TableColumn field="ProductName" title="Product Name" />
+
+                    <TableColumn
+                        field="UnitPrice"
+                        title="Unit Price"
+                        format="{0:c}"
+                        width="125px"
+                    />
+                </Table>
+            </Fragment>
+        );
+    })
+);

package/src/use-observing-table-state/demo/stores/use-observing-table-state-demo.store.ts

@@ -0,0 +1,69 @@
+import { injectable } from '@servicetitan/react-ioc';
+import { action, makeObservable, observable } from 'mobx';
+
+import { products } from '../../../demo/overview/products';
+
+const getRandomPrice = () => Math.round(Math.random() * 10000) / 100;
+
+@injectable()
+export class UseObservingTableStateDemoStore {
+    @observable data = products.map(p => ({
+        ProductID: p.ProductID,
+        ProductName: p.ProductName,
+        UnitPrice: p.UnitPrice,
+    }));
+
+    constructor() {
+        makeObservable(this);
+    }
+
+    @action
+    updateDataKeepRoot = () => {
+        this.data.forEach(p => (p.UnitPrice = getRandomPrice()));
+    };
+
+    @action
+    updateDataChangeRoot = () => {
+        this.data = this.data.map(p => ({
+            ...p,
+            UnitPrice: getRandomPrice(),
+        }));
+    };
+
+    @action
+    add5RowsWithUpdateDataRoot = () => {
+        this.data = [
+            ...this.data,
+            ...Array.from({ length: 5 }).map((v, i) => ({
+                ProductID: this.data.length + i + 1,
+                ProductName: `Product ${this.data.length + i + 1}`,
+                UnitPrice: getRandomPrice(),
+            })),
+        ];
+    };
+    @action
+    remove5RowsWithUpdateDataRoot = () => {
+        if (this.data.length >= 5) {
+            this.data = this.data.slice(0, this.data.length - 5);
+        }
+    };
+
+    @action
+    add5RowsWithKeepDataRoot = () => {
+        const length = this.data.length;
+        for (let i = this.data.length; i < length + 5; ++i) {
+            this.data.push({
+                ProductID: i,
+                ProductName: `Product ${i}`,
+                UnitPrice: getRandomPrice(),
+            });
+        }
+    };
+
+    @action
+    remove5RowsWithKeepDataRoot = () => {
+        if (this.data.length >= 5) {
+            this.data.splice(this.data.length - 5, 5);
+        }
+    };
+}

package/src/use-observing-table-state/index.ts

@@ -0,0 +1 @@
+export * from './use-observing-table-state';

package/src/use-observing-table-state/use-observing-table-state.stories.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { TableUseTableStateExample } from './demo/components/use-observing-table-state-demo';
+import { ResetPaginationMode } from './';
+
+export default {
+    title: 'Table/UseObservingTableState',
+    parameters: {},
+};
+
+export const ResetPaginationOnUpdateDataRoot: FC = () => (
+    <TableUseTableStateExample resetPaginationMode={ResetPaginationMode.OnUpdateDataRoot} />
+);
+
+export const ResetPaginationNever: FC = () => (
+    <TableUseTableStateExample resetPaginationMode={ResetPaginationMode.Never} />
+);
+
+export const ResetPaginationAlways: FC = () => (
+    <TableUseTableStateExample resetPaginationMode={ResetPaginationMode.Always} />
+);

package/src/use-observing-table-state/use-observing-table-state.ts

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from 'react';
+import { autorun } from 'mobx';
+
+import { IdType, InMemoryDataSource, Preprocessors } from '@servicetitan/data-query';
+import { useInitializedRef } from '@servicetitan/react-hooks';
+import { TableState, TableStateConstructorParams } from '../table-state';
+//
+
+export enum ResetPaginationMode {
+    Never,
+    OnUpdateDataRoot,
+    Always,
+}
+
+export interface DatasourceOptions<T, TID extends IdType = any> {
+    idSelector: (row: T) => TID;
+    datasourcePreprocessors?: Preprocessors<T>;
+}
+
+export const useObservingTableState = <
+    T,
+    TID extends IdType = any,
+    P = never,
+    PID extends IdType = never
+>(
+    data: T[],
+    tableArgs: TableStateConstructorParams<T, TID, P, PID>,
+    datasourceOptions: DatasourceOptions<T, TID>,
+    resetPagination: ResetPaginationMode = ResetPaginationMode.OnUpdateDataRoot
+): TableState<T, TID, P, PID> => {
+    const tableStateRef = useInitializedRef(() => new TableState<T, TID, P, PID>(tableArgs));
+    const datasourceDataRef = useRef<T[]>();
+    const tableStateDataRef = useRef<T[]>();
+    const [dataSource, setDataSource] = useState<InMemoryDataSource<T, TID>>();
+
+    useEffect(() => {
+        const disposer = autorun(() => {
+            setDataSource(
+                new InMemoryDataSource(
+                    data,
+                    datasourceOptions.idSelector,
+                    datasourceOptions.datasourcePreprocessors
+                )
+            );
+            datasourceDataRef.current = data;
+        });
+        return () => disposer();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data]);
+
+    useEffect(() => {
+        if (dataSource) {
+            if (
+                tableStateRef.current.skip >= (datasourceDataRef.current?.length ?? 0) ||
+                resetPagination === ResetPaginationMode.Always ||
+                (resetPagination === ResetPaginationMode.OnUpdateDataRoot &&
+                    tableStateDataRef.current !== datasourceDataRef.current)
+            ) {
+                tableStateRef.current.setDataSource(dataSource);
+            } else {
+                const state = tableStateRef.current.exportState();
+                tableStateRef.current.setDataSource(dataSource, { initialState: state });
+            }
+            tableStateDataRef.current = datasourceDataRef.current;
+        }
+    }, [dataSource, resetPagination, tableStateRef]);
+
+    return tableStateRef.current;
+};

package/src/utils/__tests__/filters.test.ts

@@ -0,0 +1,31 @@
+import { getFiltersFlat, getFiltersMap } from '../filters';
+import { CompositeFilterDescriptor, FilterDescriptor } from '@servicetitan/data-query';
+
+const filter = (field: string) => ({ field, operator: 'qq', value: 'ee' });
+const composite = (
+    filters: (FilterDescriptor | CompositeFilterDescriptor)[]
+): CompositeFilterDescriptor => ({ filters, logic: 'and' });
+
+const filters1 = () =>
+    composite([composite([filter('f1'), filter('f2')]), filter('f3'), composite([filter('f1')])]);
+
+describe('getFiltersFlat', () => {
+    test('getFiltersFlat', () => {
+        expect(getFiltersFlat(filters1())).toEqual([
+            filter('f1'),
+            filter('f2'),
+            filter('f3'),
+            filter('f1'),
+        ]);
+    });
+});
+
+describe('getFiltersMap', () => {
+    test('getFiltersMap', () => {
+        expect(getFiltersMap(filters1())).toEqual({
+            f1: filter('f1'),
+            f2: filter('f2'),
+            f3: filter('f3'),
+        });
+    });
+});

package/src/utils/filters.ts

@@ -0,0 +1,33 @@
+import {
+    CompositeFilterDescriptor,
+    FilterDescriptor,
+    isCompositeFilterDescriptor,
+    State,
+} from '@servicetitan/data-query';
+
+const getFiltersFlatInner = (
+    filter?: FilterDescriptor | CompositeFilterDescriptor
+): FilterDescriptor[] => {
+    if (!filter) {
+        return [];
+    } else if (isCompositeFilterDescriptor(filter)) {
+        return filter.filters.reduce(
+            (out, item) => [...out, ...getFiltersFlatInner(item)],
+            [] as FilterDescriptor[]
+        );
+    }
+    return [filter];
+};
+
+export const getFiltersFlat = (filter: State['filter']): FilterDescriptor[] => {
+    return getFiltersFlatInner(filter);
+};
+
+export const getFiltersMap = (filter: State['filter']): Record<string, FilterDescriptor> => {
+    return getFiltersFlatInner(filter).reduce((out, filter) => {
+        if (typeof filter.field === 'string') {
+            out[filter.field] = filter;
+        }
+        return out;
+    }, {} as Record<string, FilterDescriptor>);
+};