@servicetitan/table 23.4.0 → 24.1.0

package/src/demo/overview/products.ts

@@ -10,7 +10,7 @@ export const products: Product[] = [
         QuantityPerUnit: '10 boxes x 20 bags',
         UnitPrice: 18.0,
         UnitsInStock: 39,
-        UnitsOnOrder: new Date('1/11/2019'),
+        UnitsOnOrder: new Date('1/11/2023'),
         Discontinued: false,
         AvailableFor: UserRole.Admin,
     },
@@ -23,7 +23,7 @@ export const products: Product[] = [
         QuantityPerUnit: '24 - 12 oz bottles',
         UnitPrice: 19.0,
         UnitsInStock: 17,
-        UnitsOnOrder: new Date('2/11/2019'),
+        UnitsOnOrder: new Date('2/11/2023'),
         Discontinued: false,
     },
     {
@@ -35,7 +35,7 @@ export const products: Product[] = [
         QuantityPerUnit: '12 - 550 ml bottles',
         UnitPrice: 10.0,
         UnitsInStock: 13,
-        UnitsOnOrder: new Date('3/11/2019'),
+        UnitsOnOrder: new Date('3/11/2023'),
         Discontinued: false,
         AvailableFor: UserRole.Owner,
     },
@@ -48,7 +48,7 @@ export const products: Product[] = [
         QuantityPerUnit: '48 - 6 oz jars',
         UnitPrice: 22.0,
         UnitsInStock: 53,
-        UnitsOnOrder: new Date('4/11/2019'),
+        UnitsOnOrder: new Date('4/11/2023'),
         Discontinued: false,
     },
     {
@@ -60,7 +60,7 @@ export const products: Product[] = [
         QuantityPerUnit: '36 boxes',
         UnitPrice: 21.35,
         UnitsInStock: 0,
-        UnitsOnOrder: new Date('5/11/2019'),
+        UnitsOnOrder: new Date('5/11/2023'),
         Discontinued: true,
         AvailableFor: UserRole.GeneralOffice,
     },
@@ -73,7 +73,7 @@ export const products: Product[] = [
         QuantityPerUnit: '12 - 8 oz jars',
         UnitPrice: 25.0,
         UnitsInStock: 120,
-        UnitsOnOrder: new Date('6/11/2019'),
+        UnitsOnOrder: new Date('6/11/2023'),
         Discontinued: false,
     },
     {
@@ -85,7 +85,7 @@ export const products: Product[] = [
         QuantityPerUnit: '12 - 1 lb pkgs.',
         UnitPrice: 30.0,
         UnitsInStock: 15,
-        UnitsOnOrder: new Date('7/11/2019'),
+        UnitsOnOrder: new Date('7/11/2023'),
         Discontinued: false,
     },
     {
@@ -97,7 +97,7 @@ export const products: Product[] = [
         QuantityPerUnit: '12 - 12 oz jars',
         UnitPrice: 40.0,
         UnitsInStock: 6,
-        UnitsOnOrder: new Date('8/11/2019'),
+        UnitsOnOrder: new Date('8/11/2023'),
         Discontinued: false,
     },
     {
@@ -109,7 +109,7 @@ export const products: Product[] = [
         QuantityPerUnit: '18 - 500 g pkgs.',
         UnitPrice: 97.0,
         UnitsInStock: 29,
-        UnitsOnOrder: new Date('9/11/2019'),
+        UnitsOnOrder: new Date('9/11/2023'),
         Discontinued: true,
     },
     {
@@ -121,7 +121,7 @@ export const products: Product[] = [
         QuantityPerUnit: '12 - 200 ml jars',
         UnitPrice: 31.0,
         UnitsInStock: 31,
-        UnitsOnOrder: new Date('10/11/2019'),
+        UnitsOnOrder: new Date('10/11/2023'),
         Discontinued: false,
     },
 ];

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

@@ -4,5 +4,7 @@ export * from './standard-filter-with-multiselect/standard-filter-with-multisele
 export * from './time-filter/time-filter';
 export * from './column-menu-filters';
 export * from './field-values-filter';
-export * from './multiselect-filter';
+export * from './multiselect-filter/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/multiselect-filter/multiselect-filter.stories.tsx

@@ -0,0 +1,7 @@
+import { TableExampleSimple } from '../../demo/filters/multiselect-filter';
+
+export default {
+    title: 'Table/Filters/MultiSelect',
+};
+
+export const DefaultMultiSelect = () => <TableExampleSimple />;

package/src/filters/{multiselect-filter.tsx → multiselect-filter/multiselect-filter.tsx}

@@ -2,7 +2,7 @@ import { Component, SyntheticEvent, ReactNode, FC } from 'react';
 
 import { TableFilterCellProps, Checkbox } from '@servicetitan/design-system';
 
-import { renderCustomColumnMenuFilter } from './column-menu-filters';
+import { renderCustomColumnMenuFilter } from '../column-menu-filters';
 
 interface SelectorProps<T> {
     options: T[];

package/src/filters/range-filter/range-filter.stories.tsx

@@ -0,0 +1,13 @@
+import {
+    TableExampleCurrency,
+    TableExampleDate,
+    TableExampleNumber,
+} from '../../demo/filters/range-filter';
+
+export default {
+    title: 'Table/Filters/Range',
+};
+
+export const DateRange = () => <TableExampleDate />;
+export const NumericRange = () => <TableExampleNumber />;
+export const CurrencyRange = () => <TableExampleCurrency />;

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

package/dist/filters/multiselect-filter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"multiselect-filter.d.ts","sourceRoot":"","sources":["../../src/filters/multiselect-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAM,MAAM,OAAO,CAAC;AAuCjE,wBAAgB,2BAA2B,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,sFAqB5F;AAED,wBAAgB,sCAAsC,CAAC,CAAC,EACpD,IAAI,EAAE,CAAC,EAAE,EACT,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,sFAgCtC;AAED,wBAAgB,oCAAoC,CAAC,CAAC,EAClD,IAAI,EAAE,CAAC,EAAE,EACT,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,sFAgCtC"}

package/dist/filters/multiselect-filter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"multiselect-filter.js","sourceRoot":"","sources":["../../src/filters/multiselect-filter.tsx"],"names":[],"mappings":"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"}