@oneblink/apps-react 0.6.2-beta.3 → 1.0.0-beta.10

package/dist/components/formStore/display/ElementDisplay.js

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { saveAs } from 'file-saver';
+import { Chip, CircularProgress, Grid } from '@mui/material';
+import { SaveAlt, AttachFile } from '@mui/icons-material';
+import ErrorSnackbar from '../../ErrorSnackbar';
+import { UnorderedList, ListItem } from '../../Lists';
+import { getCognitoIdToken } from '@oneblink/apps/dist/services/cognito';
+async function fetchFile(url) {
+    const idToken = await getCognitoIdToken();
+    const response = await fetch(url, {
+        headers: {
+            Authorization: `Bearer ${idToken}`,
+        },
+    });
+    if (!response.ok) {
+        throw new Error(`Unable to download file. HTTP Status Code: ${response.status}`);
+    }
+    return await response.blob();
+}
+export function FileChip({ file: { fileName, url, isPrivate, data }, }) {
+    const [{ isDownloading, error }, setState] = React.useState({
+        isDownloading: false,
+    });
+    const clearError = React.useCallback(() => {
+        setState({
+            isDownloading: false,
+        });
+    }, []);
+    const handleDownload = React.useCallback(async () => {
+        try {
+            setState({
+                isDownloading: true,
+            });
+            if (url) {
+                if (isPrivate) {
+                    const blob = await fetchFile(url);
+                    saveAs(blob, fileName);
+                }
+                else {
+                    saveAs(url, fileName);
+                }
+            }
+            else if (data) {
+                saveAs(data, fileName);
+            }
+            setState({
+                isDownloading: false,
+            });
+        }
+        catch (error) {
+            setState({
+                isDownloading: false,
+                error: error,
+            });
+        }
+    }, [data, fileName, isPrivate, url]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Chip, { label: fileName, deleteIcon: React.createElement(SaveAlt, null), onDelete: handleDownload, variant: "outlined", icon: isDownloading ? React.createElement(CircularProgress, { size: 16 }) : React.createElement(AttachFile, null) }),
+        React.createElement(ErrorSnackbar, { open: !!error, onClose: clearError },
+            React.createElement("span", { "data-cypress": "download-legacy-file-error-message" }, error && error.message))));
+}
+export function FilesElementDataTableCellContent({ value, }) {
+    return (React.createElement(Grid, { container: true, spacing: 1 }, value.map((file, index) => {
+        return (React.createElement(Grid, { item: true, key: index, xs: 12 },
+            React.createElement(FileChip, { file: file })));
+    })));
+}
+export function MultiSelectFormElementTableCellContent({ value, formElement, }) {
+    return (React.createElement(UnorderedList, { disablePadding: true }, value.map((selection, index) => {
+        const label = getSelectedOptionLabel(formElement, selection);
+        return React.createElement(ListItem, { key: index }, label);
+    })));
+}
+export function getSelectedOptionLabel(formElement, value) {
+    const selectedOption = (formElement.options || []).find((opt) => opt.value === value);
+    return selectedOption ? selectedOption.label : value;
+}
+//# sourceMappingURL=ElementDisplay.js.map

package/dist/components/formStore/display/ElementDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementDisplay.js","sourceRoot":"","sources":["../../../../src/components/formStore/display/ElementDisplay.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { saveAs } from 'file-saver'\nimport { Chip, CircularProgress, Grid } from '@mui/material'\nimport { SaveAlt, AttachFile } from '@mui/icons-material'\nimport ErrorSnackbar from '../../ErrorSnackbar'\nimport { UnorderedList, ListItem } from '../../Lists'\nimport { FormElementWithOptions } from '@oneblink/types/typescript/forms'\nimport { getCognitoIdToken } from '@oneblink/apps/dist/services/cognito'\n\nasync function fetchFile(url: string) {\n  const idToken = await getCognitoIdToken()\n  const response = await fetch(url, {\n    headers: {\n      Authorization: `Bearer ${idToken}`,\n    },\n  })\n\n  if (!response.ok) {\n    throw new Error(\n      `Unable to download file. HTTP Status Code: ${response.status}`,\n    )\n  }\n\n  return await response.blob()\n}\n\nexport function FileChip({\n  file: { fileName, url, isPrivate, data },\n}: {\n  file: {\n    fileName: string\n    url?: string\n    isPrivate?: boolean\n    data?: string\n  }\n}) {\n  const [{ isDownloading, error }, setState] = React.useState<{\n    error?: Error\n    isDownloading: boolean\n  }>({\n    isDownloading: false,\n  })\n  const clearError = React.useCallback(() => {\n    setState({\n      isDownloading: false,\n    })\n  }, [])\n  const handleDownload = React.useCallback(async () => {\n    try {\n      setState({\n        isDownloading: true,\n      })\n\n      if (url) {\n        if (isPrivate) {\n          const blob = await fetchFile(url)\n          saveAs(blob, fileName)\n        } else {\n          saveAs(url, fileName)\n        }\n      } else if (data) {\n        saveAs(data, fileName)\n      }\n\n      setState({\n        isDownloading: false,\n      })\n    } catch (error) {\n      setState({\n        isDownloading: false,\n        error: error as Error,\n      })\n    }\n  }, [data, fileName, isPrivate, url])\n  return (\n    <>\n      <Chip\n        label={fileName}\n        deleteIcon={<SaveAlt />}\n        onDelete={handleDownload}\n        variant=\"outlined\"\n        icon={isDownloading ? <CircularProgress size={16} /> : <AttachFile />}\n      />\n      <ErrorSnackbar open={!!error} onClose={clearError}>\n        <span data-cypress=\"download-legacy-file-error-message\">\n          {error && error.message}\n        </span>\n      </ErrorSnackbar>\n    </>\n  )\n}\n\nexport function FilesElementDataTableCellContent({\n  value,\n}: {\n  value: Array<{\n    fileName: string\n    url?: string | undefined\n    isPrivate?: boolean | undefined\n    data?: string | undefined\n  }>\n}) {\n  return (\n    <Grid container spacing={1}>\n      {value.map((file, index) => {\n        return (\n          <Grid item key={index} xs={12}>\n            <FileChip file={file} />\n          </Grid>\n        )\n      })}\n    </Grid>\n  )\n}\n\nexport function MultiSelectFormElementTableCellContent({\n  value,\n  formElement,\n}: {\n  value: string[]\n  formElement: FormElementWithOptions\n}) {\n  return (\n    <UnorderedList disablePadding>\n      {value.map((selection, index) => {\n        const label = getSelectedOptionLabel(formElement, selection)\n        return <ListItem key={index}>{label}</ListItem>\n      })}\n    </UnorderedList>\n  )\n}\n\nexport function getSelectedOptionLabel(\n  formElement: FormElementWithOptions,\n  value: string,\n) {\n  const selectedOption = (formElement.options || []).find(\n    (opt) => opt.value === value,\n  )\n  return selectedOption ? selectedOption.label : value\n}\n"]}

package/dist/components/formStore/display/FormStoreIcon.d.ts

@@ -0,0 +1,2 @@
+import Work from '@mui/icons-material/Work';
+export default Work;

package/dist/components/formStore/display/FormStoreIcon.js

@@ -0,0 +1,3 @@
+import Work from '@mui/icons-material/Work';
+export default Work;
+//# sourceMappingURL=FormStoreIcon.js.map

package/dist/components/formStore/display/FormStoreIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormStoreIcon.js","sourceRoot":"","sources":["../../../../src/components/formStore/display/FormStoreIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,0BAA0B,CAAA;AAC3C,eAAe,IAAI,CAAA","sourcesContent":["import Work from '@mui/icons-material/Work'\nexport default Work\n"]}

package/dist/components/formStore/table/ActionedByTableCell.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { UserProfile } from '@oneblink/types/typescript/misc';
+import { Chip } from '@mui/material';
+declare function ActionedByTableCell({ userProfile, developerKey, ...rest }: React.ComponentProps<typeof Chip> & {
+    userProfile?: UserProfile;
+    developerKey?: {
+        name: string;
+    };
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ActionedByTableCell>;
+export default _default;

package/dist/components/formStore/table/ActionedByTableCell.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { userService } from '@oneblink/sdk-core';
+import { Chip, Avatar } from '@mui/material';
+import { AccountCircle, VpnKey as KeyIcon, Help as HelpIcon, } from '@mui/icons-material';
+import TableCellCopyButton from './TableCellCopyButton';
+function ActionedByTableCell({ userProfile, developerKey, ...rest }) {
+    const chipProps = useActionedByChipProps({
+        userProfile,
+        developerKey,
+        ...rest,
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Chip, { ...chipProps, ...rest }),
+        React.createElement(TableCellCopyButton, { text: chipProps.label })));
+}
+export default React.memo(ActionedByTableCell);
+function useActionedByChipProps({ userProfile, developerKey, }) {
+    return React.useMemo(() => {
+        if (userProfile) {
+            const emptyChipProps = {
+                label: '',
+            };
+            if (userProfile.picture) {
+                emptyChipProps.avatar = (React.createElement(Avatar, { alt: userProfile.fullName, src: userProfile.picture }));
+            }
+            else {
+                emptyChipProps.icon = React.createElement(AccountCircle, null);
+            }
+            emptyChipProps.label = userService.getUserFriendlyName(userProfile);
+            return emptyChipProps;
+        }
+        if (developerKey) {
+            return {
+                icon: React.createElement(KeyIcon, null),
+                label: developerKey.name,
+            };
+        }
+        return {
+            icon: React.createElement(HelpIcon, null),
+            label: 'Anonymous',
+        };
+    }, [developerKey, userProfile]);
+}
+//# sourceMappingURL=ActionedByTableCell.js.map

package/dist/components/formStore/table/ActionedByTableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionedByTableCell.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/ActionedByTableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EACL,aAAa,EACb,MAAM,IAAI,OAAO,EACjB,IAAI,IAAI,QAAQ,GACjB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AAEvD,SAAS,mBAAmB,CAAC,EAC3B,WAAW,EACX,YAAY,EACZ,GAAG,IAAI,EAIR;IACC,MAAM,SAAS,GAAG,sBAAsB,CAAC;QACvC,WAAW;QACX,YAAY;QACZ,GAAG,IAAI;KACR,CAAC,CAAA;IAEF,OAAO,CACL;QACE,oBAAC,IAAI,OAAK,SAAS,KAAM,IAAI,GAAI;QACjC,oBAAC,mBAAmB,IAAC,IAAI,EAAE,SAAS,CAAC,KAAK,GAAI,CAC7C,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA;AAE9C,SAAS,sBAAsB,CAAC,EAC9B,WAAW,EACX,YAAY,GAIb;IAKC,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,WAAW,EAAE;YACf,MAAM,cAAc,GAIhB;gBACF,KAAK,EAAE,EAAE;aACV,CAAA;YAED,IAAI,WAAW,CAAC,OAAO,EAAE;gBACvB,cAAc,CAAC,MAAM,GAAG,CACtB,oBAAC,MAAM,IAAC,GAAG,EAAE,WAAW,CAAC,QAAQ,EAAE,GAAG,EAAE,WAAW,CAAC,OAAO,GAAI,CAChE,CAAA;aACF;iBAAM;gBACL,cAAc,CAAC,IAAI,GAAG,oBAAC,aAAa,OAAG,CAAA;aACxC;YAED,cAAc,CAAC,KAAK,GAAG,WAAW,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;YACnE,OAAO,cAAc,CAAA;SACtB;QAED,IAAI,YAAY,EAAE;YAChB,OAAO;gBACL,IAAI,EAAE,oBAAC,OAAO,OAAG;gBACjB,KAAK,EAAE,YAAY,CAAC,IAAI;aACzB,CAAA;SACF;QAED,OAAO;YACL,IAAI,EAAE,oBAAC,QAAQ,OAAG;YAClB,KAAK,EAAE,WAAW;SACnB,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAA;AACjC,CAAC","sourcesContent":["import * as React from 'react'\nimport { userService } from '@oneblink/sdk-core'\nimport { UserProfile } from '@oneblink/types/typescript/misc'\nimport { Chip, Avatar } from '@mui/material'\nimport {\n  AccountCircle,\n  VpnKey as KeyIcon,\n  Help as HelpIcon,\n} from '@mui/icons-material'\nimport TableCellCopyButton from './TableCellCopyButton'\n\nfunction ActionedByTableCell({\n  userProfile,\n  developerKey,\n  ...rest\n}: React.ComponentProps<typeof Chip> & {\n  userProfile?: UserProfile\n  developerKey?: { name: string }\n}) {\n  const chipProps = useActionedByChipProps({\n    userProfile,\n    developerKey,\n    ...rest,\n  })\n\n  return (\n    <>\n      <Chip {...chipProps} {...rest} />\n      <TableCellCopyButton text={chipProps.label} />\n    </>\n  )\n}\n\nexport default React.memo(ActionedByTableCell)\n\nfunction useActionedByChipProps({\n  userProfile,\n  developerKey,\n}: React.ComponentProps<typeof Chip> & {\n  userProfile?: UserProfile\n  developerKey?: { name: string }\n}): {\n  label: string\n  icon?: React.ComponentProps<typeof Chip>['icon']\n  avatar?: React.ComponentProps<typeof Chip>['avatar']\n} {\n  return React.useMemo(() => {\n    if (userProfile) {\n      const emptyChipProps: {\n        label: string\n        icon?: React.ComponentProps<typeof Chip>['icon']\n        avatar?: React.ComponentProps<typeof Chip>['avatar']\n      } = {\n        label: '',\n      }\n\n      if (userProfile.picture) {\n        emptyChipProps.avatar = (\n          <Avatar alt={userProfile.fullName} src={userProfile.picture} />\n        )\n      } else {\n        emptyChipProps.icon = <AccountCircle />\n      }\n\n      emptyChipProps.label = userService.getUserFriendlyName(userProfile)\n      return emptyChipProps\n    }\n\n    if (developerKey) {\n      return {\n        icon: <KeyIcon />,\n        label: developerKey.name,\n      }\n    }\n\n    return {\n      icon: <HelpIcon />,\n      label: 'Anonymous',\n    }\n  }, [developerKey, userProfile])\n}\n"]}

package/dist/components/formStore/table/ColumnFilters.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FormStoreRecord } from '@oneblink/types/typescript/submissions';
+import { HeaderGroup } from 'react-table';
+declare type Props = {
+    filter: NonNullable<HeaderGroup<FormStoreRecord>['filter']>;
+};
+declare function ColumnFilters({ filter }: Props): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof ColumnFilters>;
+export default _default;

package/dist/components/formStore/table/ColumnFilters.js

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { Checkbox, FormControl, FormControlLabel, Grid, ListItemText, MenuItem, Radio, RadioGroup, TextField, } from '@mui/material';
+import V4CompatibleDateTimePicker from '../../pickers/V4CompatibleDateTimePicker';
+import V4CompatibleDatePicker from '../../pickers/V4CompatibleDatePicker';
+import { styled } from '@mui/material/styles';
+import { format } from 'date-fns';
+import { localisationService } from '@oneblink/apps';
+const StyledTextField = styled(TextField)(() => ({
+    width: '350px',
+}));
+const shortDateFormat = localisationService.getDateFnsFormats().shortDate;
+function ColumnFilters({ filter }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+    switch (filter.type) {
+        case 'SUBMISSION_ID': {
+            return (React.createElement(StyledTextField, { autoFocus: true, variant: "outlined", margin: "dense", size: "small", label: "Filter", type: "text", fullWidth: true, value: ((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$eq) || '', onChange: (e) => {
+                    filter.onChange(e.target.value
+                        ? {
+                            $eq: e.target.value,
+                        }
+                        : undefined, true);
+                } }));
+        }
+        case 'TEXT': {
+            return (React.createElement(StyledTextField, { autoFocus: true, variant: "outlined", margin: "dense", size: "small", label: "Filter", type: "text", fullWidth: true, value: ((_b = filter.value) === null || _b === void 0 ? void 0 : _b.$regex) || '', onChange: (e) => {
+                    filter.onChange(e.target.value
+                        ? {
+                            $regex: e.target.value,
+                            // hard code case in-sensitive and multi-line searching
+                            $options: 'im',
+                        }
+                        : undefined, true);
+                } }));
+        }
+        case 'NUMBER': {
+            return (React.createElement(Grid, { container: true, spacing: 1 },
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(TextField, { autoFocus: true, variant: "outlined", margin: "dense", size: "small", label: "More Than Or Equal To", type: "number", fullWidth: true, value: ((_d = (_c = filter.value) === null || _c === void 0 ? void 0 : _c.$gte) === null || _d === void 0 ? void 0 : _d.toString()) || '', onChange: (e) => {
+                            var _a;
+                            const newValue = e.target.value
+                                ? parseInt(e.target.value)
+                                : undefined;
+                            filter.onChange(typeof ((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte) === 'number' ||
+                                newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $gte: newValue,
+                                }
+                                : undefined, true);
+                        } })),
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(TextField, { variant: "outlined", margin: "dense", size: "small", label: "Less Than Or Equal To", type: "number", fullWidth: true, value: ((_f = (_e = filter.value) === null || _e === void 0 ? void 0 : _e.$lte) === null || _f === void 0 ? void 0 : _f.toString()) || '', onChange: (e) => {
+                            var _a;
+                            const newValue = e.target.value
+                                ? parseInt(e.target.value)
+                                : undefined;
+                            filter.onChange(typeof ((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte) === 'number' ||
+                                newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $lte: newValue,
+                                }
+                                : undefined, true);
+                        } }))));
+        }
+        case 'DATE': {
+            return (React.createElement(Grid, { container: true, spacing: 1 },
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(V4CompatibleDatePicker, { label: "After", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", maxDate: (_g = filter.value) === null || _g === void 0 ? void 0 : _g.$lte, maxDateMessage: ((_h = filter.value) === null || _h === void 0 ? void 0 : _h.$lte) &&
+                            `Must be before "${format(new Date((_j = filter.value) === null || _j === void 0 ? void 0 : _j.$lte), shortDateFormat)}"`, value: ((_k = filter.value) === null || _k === void 0 ? void 0 : _k.$gte) || null, onChange: (newDate) => {
+                            var _a;
+                            const newValue = newDate
+                                ? format(newDate, 'yyyy-MM-dd')
+                                : undefined;
+                            filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte) || newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $gte: newValue,
+                                }
+                                : undefined, false);
+                        }, endIconButton: true, iconButtonEdge: "end" })),
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(V4CompatibleDatePicker, { label: "Before", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", minDate: (_l = filter.value) === null || _l === void 0 ? void 0 : _l.$gte, minDateMessage: ((_m = filter.value) === null || _m === void 0 ? void 0 : _m.$lte) &&
+                            `Must be after "${format(new Date((_o = filter.value) === null || _o === void 0 ? void 0 : _o.$lte), shortDateFormat)}"`, value: ((_p = filter.value) === null || _p === void 0 ? void 0 : _p.$lte) || null, onChange: (newDate) => {
+                            var _a;
+                            const newValue = newDate
+                                ? format(newDate, 'yyyy-MM-dd')
+                                : undefined;
+                            filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte) || newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $lte: newValue,
+                                }
+                                : undefined, false);
+                        }, endIconButton: true, iconButtonEdge: "end" }))));
+        }
+        case 'DATETIME': {
+            return (React.createElement(Grid, { container: true, spacing: 1 },
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(V4CompatibleDateTimePicker, { label: "After", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", maxDate: (_q = filter.value) === null || _q === void 0 ? void 0 : _q.$lte, maxDateMessage: ((_r = filter.value) === null || _r === void 0 ? void 0 : _r.$lte) &&
+                            `Must be before "${format(new Date((_s = filter.value) === null || _s === void 0 ? void 0 : _s.$lte), shortDateFormat)}"`, value: ((_t = filter.value) === null || _t === void 0 ? void 0 : _t.$gte) || null, onChange: (momentDate) => {
+                            var _a;
+                            const newValue = momentDate === null || momentDate === void 0 ? void 0 : momentDate.toISOString();
+                            filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte) || newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $gte: newValue,
+                                }
+                                : undefined, false);
+                        }, endIconButton: true, iconButtonEdge: "end" })),
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(V4CompatibleDateTimePicker, { label: "Before", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", minDate: (_u = filter.value) === null || _u === void 0 ? void 0 : _u.$gte, minDateMessage: ((_v = filter.value) === null || _v === void 0 ? void 0 : _v.$lte) &&
+                            `Must be after "${format(new Date((_w = filter.value) === null || _w === void 0 ? void 0 : _w.$lte), shortDateFormat)}"`, value: ((_x = filter.value) === null || _x === void 0 ? void 0 : _x.$lte) || null, onChange: (momentDate) => {
+                            var _a;
+                            const newValue = momentDate === null || momentDate === void 0 ? void 0 : momentDate.toISOString();
+                            filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte) || newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $lte: newValue,
+                                }
+                                : undefined, false);
+                        }, endIconButton: true, iconButtonEdge: "end" }))));
+        }
+        case 'BOOLEAN': {
+            return (React.createElement(FormControl, { component: "fieldset" },
+                React.createElement(RadioGroup, { "aria-label": "gender", name: "gender1", value: ((_z = (_y = filter.value) === null || _y === void 0 ? void 0 : _y.$eq) === null || _z === void 0 ? void 0 : _z.toString()) || 'null', onChange: (e) => {
+                        filter.onChange({
+                            $eq: e.target.value === 'true',
+                        }, false);
+                    } },
+                    React.createElement(FormControlLabel, { value: "true", control: React.createElement(Radio, null), label: "Yes" }),
+                    React.createElement(FormControlLabel, { value: "false", control: React.createElement(Radio, null), label: "No" }))));
+        }
+        case 'OPTIONS_SINGLE': {
+            return (React.createElement(OptionsTextField, { options: filter.options, value: (_0 = filter.value) === null || _0 === void 0 ? void 0 : _0.$in, onChange: (newValue) => {
+                    filter.onChange(newValue.length
+                        ? {
+                            $in: newValue,
+                        }
+                        : undefined, false);
+                } }));
+        }
+        case 'OPTIONS_MULTIPLE': {
+            return (React.createElement(OptionsTextField, { options: filter.options, value: (_2 = (_1 = filter.value) === null || _1 === void 0 ? void 0 : _1.$elemMatch) === null || _2 === void 0 ? void 0 : _2.$in, onChange: (newValue) => {
+                    filter.onChange(newValue.length
+                        ? {
+                            $elemMatch: {
+                                $in: newValue,
+                            },
+                        }
+                        : undefined, false);
+                } }));
+        }
+        default: {
+            return null;
+        }
+    }
+}
+export default React.memo(ColumnFilters);
+function OptionsTextField({ options, value, onChange, }) {
+    return (React.createElement(StyledTextField, { variant: "outlined", margin: "dense", size: "small", label: "Filter", select: true, SelectProps: {
+            multiple: true,
+            renderValue: (selectedIds) => {
+                return options
+                    .reduce((selectedLabels, option) => {
+                    if (selectedIds.includes(option.value)) {
+                        selectedLabels.push(option.label);
+                    }
+                    return selectedLabels;
+                }, [])
+                    .join(', ');
+            },
+        }, fullWidth: true, value: value || [], onChange: (e) => {
+            const newValue = e.target.value;
+            onChange(newValue);
+        } }, options.map((option) => (React.createElement(MenuItem, { value: option.value, key: option.value },
+        React.createElement(Checkbox, { checked: !!(value === null || value === void 0 ? void 0 : value.some((v) => v === option.value)) }),
+        React.createElement(ListItemText, null, option.label))))));
+}
+//# sourceMappingURL=ColumnFilters.js.map

package/dist/components/formStore/table/ColumnFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnFilters.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/ColumnFilters.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { HeaderGroup } from 'react-table'\nimport {\n  Checkbox,\n  FormControl,\n  FormControlLabel,\n  Grid,\n  ListItemText,\n  MenuItem,\n  Radio,\n  RadioGroup,\n  TextField,\n} from '@mui/material'\nimport V4CompatibleDateTimePicker from '../../pickers/V4CompatibleDateTimePicker'\nimport V4CompatibleDatePicker from '../../pickers/V4CompatibleDatePicker'\nimport { styled } from '@mui/material/styles'\nimport { format } from 'date-fns'\nimport { localisationService } from '@oneblink/apps'\n\nconst StyledTextField = styled(TextField)(() => ({\n  width: '350px',\n}))\n\ntype Props = {\n  filter: NonNullable<HeaderGroup<FormStoreRecord>['filter']>\n}\n\nconst shortDateFormat = localisationService.getDateFnsFormats().shortDate\n\nfunction ColumnFilters({ filter }: Props) {\n  switch (filter.type) {\n    case 'SUBMISSION_ID': {\n      return (\n        <StyledTextField\n          autoFocus\n          variant=\"outlined\"\n          margin=\"dense\"\n          size=\"small\"\n          label=\"Filter\"\n          type=\"text\"\n          fullWidth\n          value={filter.value?.$eq || ''}\n          onChange={(e) => {\n            filter.onChange(\n              e.target.value\n                ? {\n                    $eq: e.target.value,\n                  }\n                : undefined,\n              true,\n            )\n          }}\n        />\n      )\n    }\n    case 'TEXT': {\n      return (\n        <StyledTextField\n          autoFocus\n          variant=\"outlined\"\n          margin=\"dense\"\n          size=\"small\"\n          label=\"Filter\"\n          type=\"text\"\n          fullWidth\n          value={filter.value?.$regex || ''}\n          onChange={(e) => {\n            filter.onChange(\n              e.target.value\n                ? {\n                    $regex: e.target.value,\n                    // hard code case in-sensitive and multi-line searching\n                    $options: 'im',\n                  }\n                : undefined,\n              true,\n            )\n          }}\n        />\n      )\n    }\n    case 'NUMBER': {\n      return (\n        <Grid container spacing={1}>\n          <Grid item xs={6}>\n            <TextField\n              autoFocus\n              variant=\"outlined\"\n              margin=\"dense\"\n              size=\"small\"\n              label=\"More Than Or Equal To\"\n              type=\"number\"\n              fullWidth\n              value={filter.value?.$gte?.toString() || ''}\n              onChange={(e) => {\n                const newValue = e.target.value\n                  ? parseInt(e.target.value)\n                  : undefined\n                filter.onChange(\n                  typeof filter.value?.$lte === 'number' ||\n                    newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $gte: newValue,\n                      }\n                    : undefined,\n                  true,\n                )\n              }}\n            />\n          </Grid>\n          <Grid item xs={6}>\n            <TextField\n              variant=\"outlined\"\n              margin=\"dense\"\n              size=\"small\"\n              label=\"Less Than Or Equal To\"\n              type=\"number\"\n              fullWidth\n              value={filter.value?.$lte?.toString() || ''}\n              onChange={(e) => {\n                const newValue = e.target.value\n                  ? parseInt(e.target.value)\n                  : undefined\n                filter.onChange(\n                  typeof filter.value?.$gte === 'number' ||\n                    newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $lte: newValue,\n                      }\n                    : undefined,\n                  true,\n                )\n              }}\n            />\n          </Grid>\n        </Grid>\n      )\n    }\n    case 'DATE': {\n      return (\n        <Grid container spacing={1}>\n          <Grid item xs={6}>\n            <V4CompatibleDatePicker\n              label=\"After\"\n              showTodayButton\n              clearable\n              margin=\"dense\"\n              size=\"small\"\n              inputVariant=\"outlined\"\n              maxDate={filter.value?.$lte}\n              maxDateMessage={\n                filter.value?.$lte &&\n                `Must be before \"${format(\n                  new Date(filter.value?.$lte),\n                  shortDateFormat,\n                )}\"`\n              }\n              value={filter.value?.$gte || null}\n              onChange={(newDate) => {\n                const newValue = newDate\n                  ? format(newDate, 'yyyy-MM-dd')\n                  : undefined\n                filter.onChange(\n                  filter.value?.$lte || newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $gte: newValue,\n                      }\n                    : undefined,\n                  false,\n                )\n              }}\n              endIconButton\n              iconButtonEdge=\"end\"\n            />\n          </Grid>\n          <Grid item xs={6}>\n            <V4CompatibleDatePicker\n              label=\"Before\"\n              showTodayButton\n              clearable\n              margin=\"dense\"\n              size=\"small\"\n              inputVariant=\"outlined\"\n              minDate={filter.value?.$gte}\n              minDateMessage={\n                filter.value?.$lte &&\n                `Must be after \"${format(\n                  new Date(filter.value?.$lte),\n                  shortDateFormat,\n                )}\"`\n              }\n              value={filter.value?.$lte || null}\n              onChange={(newDate) => {\n                const newValue = newDate\n                  ? format(newDate, 'yyyy-MM-dd')\n                  : undefined\n                filter.onChange(\n                  filter.value?.$gte || newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $lte: newValue,\n                      }\n                    : undefined,\n                  false,\n                )\n              }}\n              endIconButton\n              iconButtonEdge=\"end\"\n            />\n          </Grid>\n        </Grid>\n      )\n    }\n    case 'DATETIME': {\n      return (\n        <Grid container spacing={1}>\n          <Grid item xs={6}>\n            <V4CompatibleDateTimePicker\n              label=\"After\"\n              showTodayButton\n              clearable\n              margin=\"dense\"\n              size=\"small\"\n              inputVariant=\"outlined\"\n              maxDate={filter.value?.$lte}\n              maxDateMessage={\n                filter.value?.$lte &&\n                `Must be before \"${format(\n                  new Date(filter.value?.$lte),\n                  shortDateFormat,\n                )}\"`\n              }\n              value={filter.value?.$gte || null}\n              onChange={(momentDate) => {\n                const newValue = momentDate?.toISOString()\n                filter.onChange(\n                  filter.value?.$lte || newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $gte: newValue,\n                      }\n                    : undefined,\n                  false,\n                )\n              }}\n              endIconButton\n              iconButtonEdge=\"end\"\n            />\n          </Grid>\n          <Grid item xs={6}>\n            <V4CompatibleDateTimePicker\n              label=\"Before\"\n              showTodayButton\n              clearable\n              margin=\"dense\"\n              size=\"small\"\n              inputVariant=\"outlined\"\n              minDate={filter.value?.$gte}\n              minDateMessage={\n                filter.value?.$lte &&\n                `Must be after \"${format(\n                  new Date(filter.value?.$lte),\n                  shortDateFormat,\n                )}\"`\n              }\n              value={filter.value?.$lte || null}\n              onChange={(momentDate) => {\n                const newValue = momentDate?.toISOString()\n                filter.onChange(\n                  filter.value?.$gte || newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $lte: newValue,\n                      }\n                    : undefined,\n                  false,\n                )\n              }}\n              endIconButton\n              iconButtonEdge=\"end\"\n            />\n          </Grid>\n        </Grid>\n      )\n    }\n    case 'BOOLEAN': {\n      return (\n        <FormControl component=\"fieldset\">\n          <RadioGroup\n            aria-label=\"gender\"\n            name=\"gender1\"\n            value={filter.value?.$eq?.toString() || 'null'}\n            onChange={(e) => {\n              filter.onChange(\n                {\n                  $eq: e.target.value === 'true',\n                },\n                false,\n              )\n            }}\n          >\n            <FormControlLabel value=\"true\" control={<Radio />} label=\"Yes\" />\n            <FormControlLabel value=\"false\" control={<Radio />} label=\"No\" />\n          </RadioGroup>\n        </FormControl>\n      )\n    }\n    case 'OPTIONS_SINGLE': {\n      return (\n        <OptionsTextField\n          options={filter.options}\n          value={filter.value?.$in}\n          onChange={(newValue) => {\n            filter.onChange(\n              newValue.length\n                ? {\n                    $in: newValue,\n                  }\n                : undefined,\n              false,\n            )\n          }}\n        />\n      )\n    }\n    case 'OPTIONS_MULTIPLE': {\n      return (\n        <OptionsTextField\n          options={filter.options}\n          value={filter.value?.$elemMatch?.$in}\n          onChange={(newValue) => {\n            filter.onChange(\n              newValue.length\n                ? {\n                    $elemMatch: {\n                      $in: newValue,\n                    },\n                  }\n                : undefined,\n              false,\n            )\n          }}\n        />\n      )\n    }\n    default: {\n      return null\n    }\n  }\n}\n\nexport default React.memo(ColumnFilters)\n\nfunction OptionsTextField({\n  options,\n  value,\n  onChange,\n}: {\n  options: FormTypes.DynamicChoiceElementOption[]\n  value: string[] | undefined\n  onChange: (newValue: string[]) => void\n}) {\n  return (\n    <StyledTextField\n      variant=\"outlined\"\n      margin=\"dense\"\n      size=\"small\"\n      label=\"Filter\"\n      select\n      SelectProps={{\n        multiple: true,\n        renderValue: (selectedIds) => {\n          return options\n            .reduce<string[]>((selectedLabels, option) => {\n              if ((selectedIds as string[]).includes(option.value)) {\n                selectedLabels.push(option.label)\n              }\n              return selectedLabels\n            }, [])\n            .join(', ')\n        },\n      }}\n      fullWidth\n      value={value || []}\n      onChange={(e) => {\n        const newValue = e.target.value as unknown as string[]\n        onChange(newValue)\n      }}\n    >\n      {options.map((option) => (\n        <MenuItem value={option.value} key={option.value}>\n          <Checkbox checked={!!value?.some((v) => v === option.value)} />\n          <ListItemText>{option.label}</ListItemText>\n        </MenuItem>\n      ))}\n    </StyledTextField>\n  )\n}\n"]}

package/dist/components/formStore/table/FormElementTableCell.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FormTypes, SubmissionTypes } from '@oneblink/types';
+declare type Props = {
+    formElement: FormTypes.FormElement;
+    submission: SubmissionTypes.S3SubmissionData['submission'] | undefined;
+    allowCopy: boolean;
+};
+declare function FormElementTableCell({ formElement, submission, allowCopy }: Props): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof FormElementTableCell>;
+export default _default;