@servicetitan/table 23.4.0 → 24.0.0

package/dist/utils/filters.js

@@ -0,0 +1,22 @@
+import { isCompositeFilterDescriptor, } from '@servicetitan/data-query';
+const getFiltersFlatInner = (filter) => {
+    if (!filter) {
+        return [];
+    }
+    else if (isCompositeFilterDescriptor(filter)) {
+        return filter.filters.reduce((out, item) => [...out, ...getFiltersFlatInner(item)], []);
+    }
+    return [filter];
+};
+export const getFiltersFlat = (filter) => {
+    return getFiltersFlatInner(filter);
+};
+export const getFiltersMap = (filter) => {
+    return getFiltersFlatInner(filter).reduce((out, filter) => {
+        if (typeof filter.field === 'string') {
+            out[filter.field] = filter;
+        }
+        return out;
+    }, {});
+};
+//# sourceMappingURL=filters.js.map

package/dist/utils/filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.js","sourceRoot":"","sources":["../../src/utils/filters.ts"],"names":[],"mappings":"AAAA,OAAO,EAGH,2BAA2B,GAE9B,MAAM,0BAA0B,CAAC;AAElC,MAAM,mBAAmB,GAAG,CACxB,MAAqD,EACnC,EAAE;IACpB,IAAI,CAAC,MAAM,EAAE;QACT,OAAO,EAAE,CAAC;KACb;SAAM,IAAI,2BAA2B,CAAC,MAAM,CAAC,EAAE;QAC5C,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CACxB,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC,EACrD,EAAwB,CAC3B,CAAC;KACL;IACD,OAAO,CAAC,MAAM,CAAC,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAuB,EAAsB,EAAE;IAC1E,OAAO,mBAAmB,CAAC,MAAM,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAuB,EAAoC,EAAE;IACvF,OAAO,mBAAmB,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QACtD,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ,EAAE;YAClC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC;SAC9B;QACD,OAAO,GAAG,CAAC;IACf,CAAC,EAAE,EAAsC,CAAC,CAAC;AAC/C,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/table",
-    "version": "23.4.0",
+    "version": "24.0.0",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/table",
     "repository": {
@@ -37,9 +37,9 @@
         "memoize-one": "~6.0.0"
     },
     "devDependencies": {
-        "@servicetitan/data-query": "^23.4.0",
+        "@servicetitan/data-query": "^24.0.0",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^23.4.0",
+        "@servicetitan/form": "^24.0.0",
         "@servicetitan/react-ioc": "^21.6.0",
         "@servicetitan/suppress-warnings": "^21.6.0",
         "@types/accounting": "~0.4.2",
@@ -53,9 +53,9 @@
         "react": "~17.0.2"
     },
     "peerDependencies": {
-        "@servicetitan/data-query": "^23.4.0",
+        "@servicetitan/data-query": "^24.0.0",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^23.4.0",
+        "@servicetitan/form": "^24.0.0",
         "@servicetitan/react-ioc": ">21.0.0",
         "@servicetitan/suppress-warnings": ">21.0.0",
         "accounting": "~0.4.1",
@@ -72,5 +72,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "1acc525c3516017ff8dc26cfe8a3988ec76678d4"
+    "gitHead": "136cde3c32f5798d1c73dd456b16bd691d0cf257"
 }

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

@@ -0,0 +1,53 @@
+import { useMemo, FC } from 'react';
+import { observer } from 'mobx-react';
+import { provide, useDependencies } from '@servicetitan/react-ioc';
+
+import { Table, TableColumn, asyncSelectColumnMenuFilter } from '../..';
+
+import { TableStore } from './table.store';
+import { CategoryCell } from './categories';
+
+export const TableExample: FC = provide({
+    singletons: [TableStore],
+})(
+    observer(() => {
+        const [{ categoryFetcher, madeInFetcher, tableState }] = useDependencies(TableStore);
+
+        const madeInColumnMenu = useMemo(
+            () =>
+                asyncSelectColumnMenuFilter({
+                    dataFetcher: madeInFetcher,
+                    placeholder: 'Search for made-ins',
+                }),
+            [madeInFetcher]
+        );
+
+        const categoryColumnMenu = useMemo(
+            () =>
+                asyncSelectColumnMenuFilter({
+                    dataFetcher: categoryFetcher,
+                    placeholder: 'Search for Categories',
+                    multiple: true,
+                }),
+            [categoryFetcher]
+        );
+
+        return (
+            <Table tableState={tableState} striped={false}>
+                <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
+                <TableColumn field="ProductName" title="Product Name" width="240px" />
+                <TableColumn
+                    field="MadeIn"
+                    title="Made In (async single-select filter)"
+                    columnMenu={madeInColumnMenu}
+                />
+                <TableColumn
+                    field="CategoryID"
+                    title="Category (async multi-select filter)"
+                    columnMenu={categoryColumnMenu}
+                    cell={CategoryCell}
+                />
+            </Table>
+        );
+    })
+);

package/src/demo/filters/categories.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { TableCellProps } from '../../table';
+
+export interface Category {
+    CategoryID: number;
+    CategoryName: string;
+}
+
+export const categories: Category[] = [
+    {
+        CategoryID: 1,
+        CategoryName: 'Wok',
+    },
+    {
+        CategoryID: 2,
+        CategoryName: 'Sushi',
+    },
+    {
+        CategoryID: 6,
+        CategoryName: 'Gunkan',
+    },
+    {
+        CategoryID: 7,
+        CategoryName: 'Miso',
+    },
+    {
+        CategoryID: 8,
+        CategoryName: 'Roll',
+    },
+    {
+        CategoryID: 10,
+        CategoryName: 'Sashimi',
+    },
+];
+
+export const CategoryCell: FC<TableCellProps> = props => {
+    const { field, dataItem } = props;
+
+    return <td>{categories.find(c => c.CategoryID === dataItem[field!])?.CategoryName}</td>;
+};

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

@@ -0,0 +1,51 @@
+import { useMemo, FC } from 'react';
+
+import { provide, useDependencies } from '@servicetitan/react-ioc';
+
+import { observer } from 'mobx-react';
+
+import { Table, TableColumn, singleSelectColumnMenuFilter } from '../..';
+
+import { TableStore } from './table.store';
+import { categories, CategoryCell } from './categories';
+
+export const TableExample: FC = provide({
+    singletons: [TableStore],
+})(
+    observer(() => {
+        const [{ tableState, madeInOptions }] = useDependencies(TableStore);
+
+        const madeInColumnMenu = useMemo(
+            () => singleSelectColumnMenuFilter({ options: madeInOptions }),
+            [madeInOptions]
+        );
+
+        const categoryColumnMenu = useMemo(
+            () =>
+                singleSelectColumnMenuFilter({
+                    options: categories,
+                    renderItem: cat => cat.CategoryName,
+                    valueSelector: cat => cat.CategoryID,
+                }),
+            []
+        );
+
+        return (
+            <Table tableState={tableState} striped={false}>
+                <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
+                <TableColumn field="ProductName" title="Product Name" width="240px" />
+                <TableColumn
+                    field="MadeIn"
+                    title="Made In (simple single-select filter)"
+                    columnMenu={madeInColumnMenu}
+                />
+                <TableColumn
+                    field="CategoryID"
+                    title="Category (simple single-select filter)"
+                    columnMenu={categoryColumnMenu}
+                    cell={CategoryCell}
+                />
+            </Table>
+        );
+    })
+);

package/src/demo/filters/table.store.ts

@@ -0,0 +1,45 @@
+import { injectable } from '@servicetitan/react-ioc';
+
+import { InMemoryDataSource, TableState, AsyncSelectFilterDataFetcher } from '../..';
+import { products } from '../overview/products';
+import { categories } from './categories';
+
+@injectable()
+export class TableStore {
+    tableState = new TableState({
+        dataSource: this.getDataSource(),
+        pageSize: 5,
+    });
+
+    get madeInOptions() {
+        return Array.from(new Set(products.map(p => p.MadeIn)));
+    }
+
+    categoryFetcher: AsyncSelectFilterDataFetcher<number> = async opts => {
+        await new Promise(resolve => setTimeout(resolve, 1500));
+
+        const sv = opts.search?.trim().toLowerCase();
+
+        return {
+            data: categories
+                .filter(cat => (sv ? cat.CategoryName.toLowerCase().includes(sv) : true))
+                .map(cat => ({ value: cat.CategoryID, text: cat.CategoryName })),
+        };
+    };
+
+    madeInFetcher: AsyncSelectFilterDataFetcher<string> = async opts => {
+        await new Promise(resolve => setTimeout(resolve, 1500));
+
+        const sv = opts.search?.trim().toLowerCase();
+
+        return {
+            data: this.madeInOptions
+                .filter(opt => (sv ? opt.toLowerCase().includes(sv) : true))
+                .map(opt => ({ value: opt, text: opt })),
+        };
+    };
+
+    private getDataSource() {
+        return new InMemoryDataSource(products, row => row.ProductID);
+    }
+}

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

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

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

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

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>);
+};