@oneblink/apps-react 0.6.2 → 1.0.0-beta.11

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

@@ -0,0 +1,233 @@
+import * as React from 'react';
+import FormElementTableCell from './FormElementTableCell';
+function generateSorting({ formElement, parentElementNames, filters, }) {
+    var _a, _b;
+    switch (formElement.type) {
+        case 'text':
+        case 'textarea':
+        case 'number':
+        case 'email':
+        case 'telephone':
+        case 'barcodeScanner':
+        case 'date':
+        case 'datetime':
+        case 'time':
+        case 'calculation': {
+            const sortProperty = [
+                'submission',
+                ...parentElementNames,
+                formElement.name,
+            ].join('.');
+            return {
+                property: sortProperty,
+                direction: (_b = (_a = filters.sorting) === null || _a === void 0 ? void 0 : _a.find(({ property }) => property === sortProperty)) === null || _b === void 0 ? void 0 : _b.direction,
+            };
+        }
+    }
+}
+function generateFilter({ formElement, onChangeFilters, rootSubmissionFilters, parentElementNames, }) {
+    function onChange(newValue, shouldDebounce) {
+        onChangeFilters((currentFilters) => {
+            let newSubmission = {
+                [formElement.name]: newValue,
+            };
+            if (parentElementNames.length) {
+                const copy = [...parentElementNames];
+                while (copy.length) {
+                    const nestedSubmission = copy.reduce((memo, elementName) => memo === null || memo === void 0 ? void 0 : memo[elementName], rootSubmissionFilters);
+                    const elementName = copy.pop();
+                    if (elementName) {
+                        newSubmission = {
+                            [elementName]: {
+                                ...nestedSubmission,
+                                ...newSubmission,
+                            },
+                        };
+                    }
+                }
+            }
+            return {
+                ...currentFilters,
+                submission: {
+                    ...currentFilters.submission,
+                    ...newSubmission,
+                },
+            };
+        }, shouldDebounce);
+    }
+    const submissionFilters = parentElementNames.reduce((memo, elementName) => memo === null || memo === void 0 ? void 0 : memo[elementName], rootSubmissionFilters);
+    switch (formElement.type) {
+        case 'text':
+        case 'textarea':
+        case 'email':
+        case 'telephone':
+        case 'barcodeScanner': {
+            return {
+                type: 'TEXT',
+                value: submissionFilters === null || submissionFilters === void 0 ? void 0 : submissionFilters[formElement.name],
+                onChange,
+            };
+        }
+        case 'number':
+        case 'calculation': {
+            return {
+                type: 'NUMBER',
+                value: submissionFilters === null || submissionFilters === void 0 ? void 0 : submissionFilters[formElement.name],
+                onChange,
+            };
+        }
+        case 'checkboxes':
+        case 'select':
+        case 'radio':
+        case 'autocomplete': {
+            const value = submissionFilters === null || submissionFilters === void 0 ? void 0 : submissionFilters[formElement.name];
+            if (Array.isArray(formElement.options)) {
+                if ((formElement.type === 'select' && formElement.multi) ||
+                    formElement.type === 'checkboxes') {
+                    return {
+                        type: 'OPTIONS_MULTIPLE',
+                        value: value,
+                        options: formElement.options,
+                        onChange,
+                    };
+                }
+                else {
+                    return {
+                        type: 'OPTIONS_SINGLE',
+                        value: value,
+                        options: formElement.options,
+                        onChange,
+                    };
+                }
+            }
+            else {
+                return {
+                    type: 'TEXT',
+                    value: value,
+                    onChange,
+                };
+            }
+        }
+        case 'boolean':
+            return {
+                type: 'BOOLEAN',
+                value: submissionFilters === null || submissionFilters === void 0 ? void 0 : submissionFilters[formElement.name],
+                onChange,
+            };
+        case 'date': {
+            return {
+                type: 'DATE',
+                value: submissionFilters === null || submissionFilters === void 0 ? void 0 : submissionFilters[formElement.name],
+                onChange,
+            };
+        }
+        case 'datetime':
+            return {
+                type: 'DATETIME',
+                value: submissionFilters === null || submissionFilters === void 0 ? void 0 : submissionFilters[formElement.name],
+                onChange,
+            };
+        default: {
+            return undefined;
+        }
+    }
+}
+const generateColumns = ({ formElements, onChangeFilters, filters, parentElementNames, initialColumns, allowCopy, }) => {
+    return formElements.reduce((columns, formElement) => {
+        switch (formElement.type) {
+            case 'page':
+            case 'section': {
+                generateColumns({
+                    onChangeFilters,
+                    formElements: formElement.elements,
+                    parentElementNames,
+                    filters,
+                    initialColumns: columns,
+                    allowCopy,
+                });
+                break;
+            }
+            case 'form': {
+                if (formElement.elements) {
+                    generateColumns({
+                        onChangeFilters,
+                        formElements: formElement.elements,
+                        parentElementNames: [...parentElementNames, formElement.name],
+                        initialColumns: columns,
+                        filters,
+                        allowCopy,
+                    });
+                }
+                break;
+            }
+            case 'compliance': {
+                generateColumns({
+                    onChangeFilters,
+                    formElements: [
+                        {
+                            ...formElement,
+                            tooltip: formElement.name,
+                            type: 'radio',
+                            name: 'value',
+                            buttons: false,
+                        },
+                        {
+                            ...formElement,
+                            tooltip: `${formElement.name}_notes`,
+                            type: 'textarea',
+                            name: 'notes',
+                            label: `${formElement.label} (Notes)`,
+                        },
+                        {
+                            ...formElement,
+                            tooltip: `${formElement.name}_media`,
+                            type: 'files',
+                            restrictFileTypes: false,
+                            name: 'files',
+                            label: `${formElement.label} (Media)`,
+                        },
+                    ],
+                    parentElementNames: [...parentElementNames, formElement.name],
+                    initialColumns: columns,
+                    filters,
+                    allowCopy,
+                });
+                break;
+            }
+            case 'summary':
+            case 'captcha':
+            case 'html':
+            case 'heading':
+            case 'infoPage':
+            case 'image': {
+                break;
+            }
+            default: {
+                columns.push({
+                    id: ['FORM_ELEMENT', ...parentElementNames, formElement.name].join('_'),
+                    sorting: generateSorting({
+                        formElement,
+                        filters,
+                        parentElementNames,
+                    }),
+                    headerText: formElement.label,
+                    tooltip: formElement.tooltip || formElement.name,
+                    filter: generateFilter({
+                        parentElementNames,
+                        formElement,
+                        onChangeFilters,
+                        rootSubmissionFilters: filters.submission,
+                    }),
+                    Cell: ({ row: { original: formStoreRecord } }) => {
+                        const submission = parentElementNames.reduce((memo, elementName) => memo === null || memo === void 0 ? void 0 : memo[elementName], formStoreRecord.submission);
+                        return (React.createElement(FormElementTableCell, { formElement: formElement, submission: submission, allowCopy: allowCopy }));
+                    },
+                });
+                break;
+            }
+        }
+        return columns;
+    }, initialColumns);
+};
+export default generateColumns;
+//# sourceMappingURL=generateColumns.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generateColumns.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/generateColumns.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { Column as ColumnWithCell, CellProps } from 'react-table'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport FormElementTableCell from './FormElementTableCell'\nimport { formStoreService } from '@oneblink/apps'\nimport { OnChangeFilters } from '../../../hooks/useInfiniteScrollDataLoad'\n\nfunction generateSorting({\n  formElement,\n  parentElementNames,\n  filters,\n}: {\n  formElement: FormTypes.FormElementWithName\n  parentElementNames: string[]\n  filters: formStoreService.FormStoreFilters\n}) {\n  switch (formElement.type) {\n    case 'text':\n    case 'textarea':\n    case 'number':\n    case 'email':\n    case 'telephone':\n    case 'barcodeScanner':\n    case 'date':\n    case 'datetime':\n    case 'time':\n    case 'calculation': {\n      const sortProperty = [\n        'submission',\n        ...parentElementNames,\n        formElement.name,\n      ].join('.')\n      return {\n        property: sortProperty,\n        direction: filters.sorting?.find(\n          ({ property }) => property === sortProperty,\n        )?.direction,\n      }\n    }\n  }\n}\n\nfunction generateFilter({\n  formElement,\n  onChangeFilters,\n  rootSubmissionFilters,\n  parentElementNames,\n}: {\n  formElement: FormTypes.FormElementWithName\n  onChangeFilters: OnChangeFilters<formStoreService.FormStoreFilters>\n  rootSubmissionFilters: formStoreService.FormStoreFilters['submission']\n  parentElementNames: string[]\n}): ColumnWithCell<Record<string, unknown>>['filter'] {\n  function onChange<T>(\n    newValue: formStoreService.FormStoreFilter<T> | undefined,\n    shouldDebounce: boolean,\n  ) {\n    onChangeFilters((currentFilters) => {\n      let newSubmission = {\n        [formElement.name]: newValue,\n      }\n\n      if (parentElementNames.length) {\n        const copy = [...parentElementNames]\n        while (copy.length) {\n          const nestedSubmission = copy.reduce<\n            formStoreService.FormStoreFilters['submission']\n          >(\n            (memo, elementName) =>\n              memo?.[\n                elementName\n              ] as formStoreService.FormStoreFilters['submission'],\n            rootSubmissionFilters,\n          )\n          const elementName = copy.pop()\n          if (elementName) {\n            newSubmission = {\n              [elementName]: {\n                ...nestedSubmission,\n                ...newSubmission,\n              },\n            }\n          }\n        }\n      }\n\n      return {\n        ...currentFilters,\n        submission: {\n          ...currentFilters.submission,\n          ...newSubmission,\n        },\n      } as formStoreService.FormStoreFilters\n    }, shouldDebounce)\n  }\n\n  const submissionFilters = parentElementNames.reduce<\n    formStoreService.FormStoreFilters['submission']\n  >(\n    (memo, elementName) =>\n      memo?.[elementName] as formStoreService.FormStoreFilters['submission'],\n    rootSubmissionFilters,\n  )\n  switch (formElement.type) {\n    case 'text':\n    case 'textarea':\n    case 'email':\n    case 'telephone':\n    case 'barcodeScanner': {\n      return {\n        type: 'TEXT',\n        value: submissionFilters?.[formElement.name] as\n          | { $regex: string; $options?: string }\n          | undefined,\n        onChange,\n      }\n    }\n    case 'number':\n    case 'calculation': {\n      return {\n        type: 'NUMBER',\n        value: submissionFilters?.[formElement.name] as\n          | { $gte?: number; $lte?: number }\n          | undefined,\n        onChange,\n      }\n    }\n    case 'checkboxes':\n    case 'select':\n    case 'radio':\n    case 'autocomplete': {\n      const value = submissionFilters?.[formElement.name]\n      if (Array.isArray(formElement.options)) {\n        if (\n          (formElement.type === 'select' && formElement.multi) ||\n          formElement.type === 'checkboxes'\n        ) {\n          return {\n            type: 'OPTIONS_MULTIPLE',\n            value: value as { $elemMatch: { $in: string[] } } | undefined,\n            options: formElement.options,\n            onChange,\n          }\n        } else {\n          return {\n            type: 'OPTIONS_SINGLE',\n            value: value as { $in: string[] } | undefined,\n            options: formElement.options,\n            onChange,\n          }\n        }\n      } else {\n        return {\n          type: 'TEXT',\n          value: value as { $regex: string } | undefined,\n          onChange,\n        }\n      }\n    }\n    case 'boolean':\n      return {\n        type: 'BOOLEAN',\n        value: submissionFilters?.[formElement.name] as\n          | { $eq: boolean }\n          | undefined,\n        onChange,\n      }\n    case 'date': {\n      return {\n        type: 'DATE',\n        value: submissionFilters?.[formElement.name] as\n          | { $gte?: string; $lte?: string }\n          | undefined,\n        onChange,\n      }\n    }\n    case 'datetime':\n      return {\n        type: 'DATETIME',\n        value: submissionFilters?.[formElement.name] as\n          | { $gte?: string; $lte?: string }\n          | undefined,\n        onChange,\n      }\n    default: {\n      return undefined\n    }\n  }\n}\n\nconst generateColumns = <\n  T extends { submission: FormStoreRecord['submission'] },\n>({\n  formElements,\n  onChangeFilters,\n  filters,\n  parentElementNames,\n  initialColumns,\n  allowCopy,\n}: {\n  formElements: (FormTypes.FormElement & { tooltip?: string })[]\n  onChangeFilters: OnChangeFilters<formStoreService.FormStoreFilters>\n  filters: formStoreService.FormStoreFilters\n  parentElementNames: string[]\n  initialColumns: Array<ColumnWithCell<T>>\n  allowCopy: boolean\n}) => {\n  return formElements.reduce<Array<ColumnWithCell<T>>>(\n    (columns, formElement) => {\n      switch (formElement.type) {\n        case 'page':\n        case 'section': {\n          generateColumns({\n            onChangeFilters,\n            formElements: formElement.elements,\n            parentElementNames,\n            filters,\n            initialColumns: columns,\n            allowCopy,\n          })\n          break\n        }\n        case 'form': {\n          if (formElement.elements) {\n            generateColumns({\n              onChangeFilters,\n              formElements: formElement.elements,\n              parentElementNames: [...parentElementNames, formElement.name],\n              initialColumns: columns,\n              filters,\n              allowCopy,\n            })\n          }\n          break\n        }\n        case 'compliance': {\n          generateColumns({\n            onChangeFilters,\n            formElements: [\n              {\n                ...formElement,\n                tooltip: formElement.name,\n                type: 'radio',\n                name: 'value',\n                buttons: false,\n              },\n              {\n                ...formElement,\n                tooltip: `${formElement.name}_notes`,\n                type: 'textarea',\n                name: 'notes',\n                label: `${formElement.label} (Notes)`,\n              },\n              {\n                ...formElement,\n                tooltip: `${formElement.name}_media`,\n                type: 'files',\n                restrictFileTypes: false,\n                name: 'files',\n                label: `${formElement.label} (Media)`,\n              },\n            ],\n            parentElementNames: [...parentElementNames, formElement.name],\n            initialColumns: columns,\n            filters,\n            allowCopy,\n          })\n          break\n        }\n        case 'summary':\n        case 'captcha':\n        case 'html':\n        case 'heading':\n        case 'infoPage':\n        case 'image': {\n          break\n        }\n        default: {\n          columns.push({\n            id: ['FORM_ELEMENT', ...parentElementNames, formElement.name].join(\n              '_',\n            ),\n            sorting: generateSorting({\n              formElement,\n              filters,\n              parentElementNames,\n            }),\n            headerText: formElement.label,\n            tooltip: formElement.tooltip || formElement.name,\n            filter: generateFilter({\n              parentElementNames,\n              formElement,\n              onChangeFilters,\n              rootSubmissionFilters: filters.submission,\n            }),\n            Cell: ({ row: { original: formStoreRecord } }: CellProps<T>) => {\n              const submission = parentElementNames.reduce<\n                SubmissionTypes.S3SubmissionData['submission']\n              >(\n                (memo, elementName) =>\n                  memo?.[elementName] as FormStoreRecord['submission'],\n                formStoreRecord.submission,\n              )\n              return (\n                <FormElementTableCell\n                  formElement={formElement}\n                  submission={submission}\n                  allowCopy={allowCopy}\n                />\n              )\n            },\n          })\n          break\n        }\n      }\n      return columns\n    },\n    initialColumns,\n  )\n}\n\nexport default generateColumns\n"]}

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

@@ -0,0 +1,52 @@
+import { FormStoreRecord } from '@oneblink/types/typescript/submissions';
+import { TableState } from 'react-table';
+import { FormTypes } from '@oneblink/types';
+import { OnChangeFilters } from '../../../hooks/useInfiniteScrollDataLoad';
+import { formStoreService } from '@oneblink/apps';
+export default function useFormStoreTable({ form, formStoreRecords, filters, onChangeFilters, onRefresh, submissionIdValidationMessage, }: {
+    formStoreRecords: FormStoreRecord[];
+    form: FormTypes.Form;
+    filters: formStoreService.FormStoreFilters;
+    onChangeFilters: OnChangeFilters<formStoreService.FormStoreFilters>;
+    onRefresh: () => void;
+    submissionIdValidationMessage?: string;
+}): {
+    form: FormTypes.Form;
+    filters: formStoreService.FormStoreFilters;
+    onChangeFilters: OnChangeFilters<formStoreService.FormStoreFilters>;
+    onRefresh: () => void;
+    submissionIdValidationMessage: string | undefined;
+    data: readonly FormStoreRecord[];
+    initialState?: Partial<TableState<FormStoreRecord>> | undefined;
+    stateReducer?: ((newState: TableState<FormStoreRecord>, action: import("react-table").ActionType, previousState: TableState<FormStoreRecord>, instance?: import("react-table").TableInstance<FormStoreRecord> | undefined) => TableState<FormStoreRecord>) | undefined;
+    useControlledState?: ((state: TableState<FormStoreRecord>, meta: import("react-table").MetaBase<FormStoreRecord>) => TableState<FormStoreRecord>) | undefined;
+    defaultColumn?: Partial<import("react-table").Column<FormStoreRecord>> | undefined;
+    getSubRows?: ((originalRow: FormStoreRecord, relativeIndex: number) => FormStoreRecord[]) | undefined;
+    getRowId?: ((originalRow: FormStoreRecord, relativeIndex: number, parent?: import("react-table").Row<FormStoreRecord> | undefined) => string) | undefined;
+    autoResetHiddenColumns?: boolean | undefined;
+    disableResizing?: boolean | undefined;
+    autoResetResize?: boolean | undefined;
+    state: TableState<FormStoreRecord>;
+    plugins: import("react-table").PluginHook<FormStoreRecord>[];
+    dispatch: import("react-table").TableDispatch<any>;
+    columns: import("react-table").ColumnInstance<FormStoreRecord>[];
+    allColumns: import("react-table").ColumnInstance<FormStoreRecord>[];
+    visibleColumns: import("react-table").ColumnInstance<FormStoreRecord>[];
+    headerGroups: import("react-table").HeaderGroup<FormStoreRecord>[];
+    footerGroups: import("react-table").HeaderGroup<FormStoreRecord>[];
+    headers: import("react-table").ColumnInstance<FormStoreRecord>[];
+    flatHeaders: import("react-table").ColumnInstance<FormStoreRecord>[];
+    rows: import("react-table").Row<FormStoreRecord>[];
+    rowsById: Record<string, import("react-table").Row<FormStoreRecord>>;
+    getTableProps: (propGetter?: import("react-table").TablePropGetter<FormStoreRecord> | undefined) => import("react-table").TableProps;
+    getTableBodyProps: (propGetter?: import("react-table").TableBodyPropGetter<FormStoreRecord> | undefined) => import("react-table").TableBodyProps;
+    prepareRow: (row: import("react-table").Row<FormStoreRecord>) => void;
+    flatRows: import("react-table").Row<FormStoreRecord>[];
+    totalColumnsWidth: number;
+    allColumnsHidden: boolean;
+    toggleHideColumn: (columnId: string, value?: boolean | undefined) => void;
+    setHiddenColumns: (param: string[] | ((oldHidden: string[]) => string[])) => void;
+    toggleHideAllColumns: (value?: boolean | undefined) => void;
+    getToggleHideAllColumnsProps: (props?: Partial<import("react-table").TableToggleHideAllColumnProps> | undefined) => import("react-table").TableToggleHideAllColumnProps;
+    getHooks: () => import("react-table").Hooks<FormStoreRecord>;
+};

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

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { useFlexLayout, useResizeColumns, useTable, } from 'react-table';
+import { format } from 'date-fns';
+import generateColumns from './generateColumns';
+import ActionedByTableCell from './ActionedByTableCell';
+import TableCellCopyButton from './TableCellCopyButton';
+import { localisationService } from '@oneblink/apps';
+import { FormStoreElementsContext } from '../OneBlinkFormStoreProvider';
+const defaultColumn = {
+    minWidth: 150,
+    width: 225,
+};
+const localStorageKey = (formId) => `REACT_TABLE_STATE_FORM_STORE_${formId}`;
+export default function useFormStoreTable({ form, formStoreRecords, filters, onChangeFilters, onRefresh, submissionIdValidationMessage, }) {
+    const formElements = React.useContext(FormStoreElementsContext);
+    const columns = React.useMemo(() => {
+        var _a, _b, _c, _d;
+        return generateColumns({
+            formElements,
+            filters,
+            parentElementNames: [],
+            onChangeFilters,
+            allowCopy: true,
+            initialColumns: [
+                {
+                    id: 'SUBMITTED_AT',
+                    headerText: 'Submission Date Time',
+                    sorting: {
+                        property: 'dateTimeSubmitted',
+                        direction: (_b = (_a = filters.sorting) === null || _a === void 0 ? void 0 : _a.find(({ property }) => property === 'dateTimeSubmitted')) === null || _b === void 0 ? void 0 : _b.direction,
+                    },
+                    filter: {
+                        type: 'DATETIME',
+                        value: filters.dateTimeSubmitted,
+                        onChange: (newValue) => {
+                            onChangeFilters((currentFilters) => ({
+                                ...currentFilters,
+                                dateTimeSubmitted: newValue,
+                            }), false);
+                        },
+                    },
+                    Cell: ({ row: { original: formStoreRecord }, }) => {
+                        const text = format(new Date(formStoreRecord.dateTimeSubmitted), localisationService.getDateFnsFormats().longDateTime);
+                        return (React.createElement(React.Fragment, null,
+                            text,
+                            React.createElement(TableCellCopyButton, { text: text })));
+                    },
+                },
+                {
+                    id: 'SUBMITTED_BY',
+                    headerText: 'Submitted By',
+                    sorting: undefined,
+                    filter: {
+                        type: 'TEXT',
+                        value: filters.submittedBy,
+                        onChange: (newValue) => {
+                            onChangeFilters((currentFilters) => ({
+                                ...currentFilters,
+                                submittedBy: newValue,
+                            }), true);
+                        },
+                    },
+                    Cell: ({ row: { original: formStoreRecord }, }) => (React.createElement(ActionedByTableCell, { userProfile: formStoreRecord.user, developerKey: formStoreRecord.key, variant: "outlined" })),
+                },
+                {
+                    id: 'SUBMISSION_ID',
+                    headerText: 'Submission Id',
+                    sorting: undefined,
+                    filter: {
+                        type: 'SUBMISSION_ID',
+                        value: filters.submissionId,
+                        validationMessage: submissionIdValidationMessage,
+                        isInvalid: !!submissionIdValidationMessage,
+                        onChange: (newValue) => {
+                            onChangeFilters((currentFilters) => ({
+                                ...currentFilters,
+                                submissionId: newValue,
+                            }), true);
+                        },
+                    },
+                    Cell: ({ row: { original: formStoreRecord }, }) => (React.createElement(React.Fragment, null,
+                        formStoreRecord.submissionId,
+                        React.createElement(TableCellCopyButton, { text: formStoreRecord.submissionId }))),
+                },
+                {
+                    id: 'EXTERNAL_ID',
+                    headerText: 'External Id',
+                    sorting: {
+                        property: 'externalId',
+                        direction: (_d = (_c = filters.sorting) === null || _c === void 0 ? void 0 : _c.find(({ property }) => property === 'externalId')) === null || _d === void 0 ? void 0 : _d.direction,
+                    },
+                    filter: {
+                        type: 'TEXT',
+                        value: filters.externalId,
+                        onChange: (newValue) => {
+                            onChangeFilters((currentFilters) => ({
+                                ...currentFilters,
+                                externalId: newValue,
+                            }), true);
+                        },
+                    },
+                    Cell: ({ row: { original: formStoreRecord }, }) => (React.createElement(React.Fragment, null,
+                        formStoreRecord.externalId,
+                        formStoreRecord.externalId && (React.createElement(TableCellCopyButton, { text: formStoreRecord.externalId })))),
+                },
+            ],
+        });
+    }, [filters, formElements, onChangeFilters, submissionIdValidationMessage]);
+    const [initialState] = React.useState(() => {
+        const text = localStorage.getItem(localStorageKey(form.id));
+        if (text) {
+            return JSON.parse(text);
+        }
+    });
+    const table = useTable({
+        columns,
+        data: formStoreRecords,
+        defaultColumn,
+        autoResetHiddenColumns: false,
+        autoResetResize: false,
+        initialState: initialState
+            ? initialState
+            : { hiddenColumns: ['SUBMISSION_ID', 'EXTERNAL_ID'] },
+    }, useFlexLayout, useResizeColumns);
+    React.useEffect(() => {
+        if (!table.state.columnResizing.isResizingColumn) {
+            localStorage.setItem(localStorageKey(form.id), JSON.stringify(table.state));
+        }
+    }, [form.id, table.state]);
+    return {
+        ...table,
+        form,
+        filters,
+        onChangeFilters,
+        onRefresh,
+        submissionIdValidationMessage,
+    };
+}
+//# sourceMappingURL=useFormStoreTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormStoreTable.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/useFormStoreTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport {\n  CellProps,\n  useFlexLayout,\n  useResizeColumns,\n  useTable,\n  TableState,\n} from 'react-table'\nimport { format } from 'date-fns'\nimport generateColumns from './generateColumns'\nimport ActionedByTableCell from './ActionedByTableCell'\nimport TableCellCopyButton from './TableCellCopyButton'\nimport { FormTypes } from '@oneblink/types'\nimport { OnChangeFilters } from '../../../hooks/useInfiniteScrollDataLoad'\nimport { formStoreService, localisationService } from '@oneblink/apps'\nimport { FormStoreElementsContext } from '../OneBlinkFormStoreProvider'\n\nconst defaultColumn = {\n  minWidth: 150,\n  width: 225,\n}\n\nconst localStorageKey = (formId: number) =>\n  `REACT_TABLE_STATE_FORM_STORE_${formId}`\n\nexport default function useFormStoreTable({\n  form,\n  formStoreRecords,\n  filters,\n  onChangeFilters,\n  onRefresh,\n  submissionIdValidationMessage,\n}: {\n  formStoreRecords: FormStoreRecord[]\n  form: FormTypes.Form\n  filters: formStoreService.FormStoreFilters\n  onChangeFilters: OnChangeFilters<formStoreService.FormStoreFilters>\n  onRefresh: () => void\n  submissionIdValidationMessage?: string\n}) {\n  const formElements = React.useContext(FormStoreElementsContext)\n  const columns = React.useMemo(() => {\n    return generateColumns({\n      formElements,\n      filters,\n      parentElementNames: [],\n      onChangeFilters,\n      allowCopy: true,\n      initialColumns: [\n        {\n          id: 'SUBMITTED_AT',\n          headerText: 'Submission Date Time',\n          sorting: {\n            property: 'dateTimeSubmitted',\n            direction: filters.sorting?.find(\n              ({ property }) => property === 'dateTimeSubmitted',\n            )?.direction,\n          },\n          filter: {\n            type: 'DATETIME',\n            value: filters.dateTimeSubmitted as\n              | { $gte?: string; $lte?: string }\n              | undefined,\n            onChange: (newValue) => {\n              onChangeFilters(\n                (currentFilters) => ({\n                  ...currentFilters,\n                  dateTimeSubmitted: newValue,\n                }),\n                false,\n              )\n            },\n          },\n          Cell: ({\n            row: { original: formStoreRecord },\n          }: CellProps<FormStoreRecord>) => {\n            const text = format(\n              new Date(formStoreRecord.dateTimeSubmitted),\n              localisationService.getDateFnsFormats().longDateTime,\n            )\n            return (\n              <>\n                {text}\n                <TableCellCopyButton text={text} />\n              </>\n            )\n          },\n        },\n        {\n          id: 'SUBMITTED_BY',\n          headerText: 'Submitted By',\n          sorting: undefined,\n          filter: {\n            type: 'TEXT',\n            value: filters.submittedBy as { $regex: string } | undefined,\n            onChange: (newValue) => {\n              onChangeFilters(\n                (currentFilters) => ({\n                  ...currentFilters,\n                  submittedBy: newValue,\n                }),\n                true,\n              )\n            },\n          },\n          Cell: ({\n            row: { original: formStoreRecord },\n          }: CellProps<FormStoreRecord>) => (\n            <ActionedByTableCell\n              userProfile={formStoreRecord.user}\n              developerKey={formStoreRecord.key}\n              variant=\"outlined\"\n            />\n          ),\n        },\n        {\n          id: 'SUBMISSION_ID',\n          headerText: 'Submission Id',\n          sorting: undefined,\n          filter: {\n            type: 'SUBMISSION_ID',\n            value: filters.submissionId as { $eq: string } | undefined,\n            validationMessage: submissionIdValidationMessage,\n            isInvalid: !!submissionIdValidationMessage,\n            onChange: (newValue) => {\n              onChangeFilters(\n                (currentFilters) => ({\n                  ...currentFilters,\n                  submissionId: newValue,\n                }),\n                true,\n              )\n            },\n          },\n          Cell: ({\n            row: { original: formStoreRecord },\n          }: CellProps<FormStoreRecord>) => (\n            <>\n              {formStoreRecord.submissionId}\n              <TableCellCopyButton text={formStoreRecord.submissionId} />\n            </>\n          ),\n        },\n        {\n          id: 'EXTERNAL_ID',\n          headerText: 'External Id',\n          sorting: {\n            property: 'externalId',\n            direction: filters.sorting?.find(\n              ({ property }) => property === 'externalId',\n            )?.direction,\n          },\n          filter: {\n            type: 'TEXT',\n            value: filters.externalId as { $regex: string } | undefined,\n            onChange: (newValue) => {\n              onChangeFilters(\n                (currentFilters) => ({\n                  ...currentFilters,\n                  externalId: newValue,\n                }),\n                true,\n              )\n            },\n          },\n          Cell: ({\n            row: { original: formStoreRecord },\n          }: CellProps<FormStoreRecord>) => (\n            <>\n              {formStoreRecord.externalId}\n              {formStoreRecord.externalId && (\n                <TableCellCopyButton text={formStoreRecord.externalId} />\n              )}\n            </>\n          ),\n        },\n      ],\n    })\n  }, [filters, formElements, onChangeFilters, submissionIdValidationMessage])\n\n  const [initialState] = React.useState<Partial<TableState<FormStoreRecord>>>(\n    () => {\n      const text = localStorage.getItem(localStorageKey(form.id))\n      if (text) {\n        return JSON.parse(text)\n      }\n    },\n  )\n\n  const table = useTable(\n    {\n      columns,\n      data: formStoreRecords,\n      defaultColumn,\n      autoResetHiddenColumns: false,\n      autoResetResize: false,\n      initialState: initialState\n        ? initialState\n        : { hiddenColumns: ['SUBMISSION_ID', 'EXTERNAL_ID'] },\n    },\n    useFlexLayout,\n    useResizeColumns,\n  )\n\n  React.useEffect(() => {\n    if (!table.state.columnResizing.isResizingColumn) {\n      localStorage.setItem(\n        localStorageKey(form.id),\n        JSON.stringify(table.state),\n      )\n    }\n  }, [form.id, table.state])\n\n  return {\n    ...table,\n    form,\n    filters,\n    onChangeFilters,\n    onRefresh,\n    submissionIdValidationMessage,\n  }\n}\n"]}

package/dist/components/formStore/useFormStoreTableContext.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import useFormStoreTable from './table/useFormStoreTable';
+export declare type FormStoreTableContextValue = ReturnType<typeof useFormStoreTable> | undefined;
+export declare const FormStoreTableContext: React.Context<FormStoreTableContextValue>;
+export default function useFormStoreTableContext(): {
+    form: import("@oneblink/types/typescript/forms").Form;
+    filters: import("@oneblink/apps/dist/form-store-service").FormStoreFilters;
+    onChangeFilters: import("../../hooks/useInfiniteScrollDataLoad").OnChangeFilters<import("@oneblink/apps/dist/form-store-service").FormStoreFilters>;
+    onRefresh: () => void;
+    submissionIdValidationMessage: string | undefined;
+    data: readonly import("@oneblink/types/typescript/submissions").FormStoreRecord[];
+    initialState?: Partial<import("react-table").TableState<import("@oneblink/types/typescript/submissions").FormStoreRecord>> | undefined;
+    stateReducer?: ((newState: import("react-table").TableState<import("@oneblink/types/typescript/submissions").FormStoreRecord>, action: import("react-table").ActionType, previousState: import("react-table").TableState<import("@oneblink/types/typescript/submissions").FormStoreRecord>, instance?: import("react-table").TableInstance<import("@oneblink/types/typescript/submissions").FormStoreRecord> | undefined) => import("react-table").TableState<import("@oneblink/types/typescript/submissions").FormStoreRecord>) | undefined;
+    useControlledState?: ((state: import("react-table").TableState<import("@oneblink/types/typescript/submissions").FormStoreRecord>, meta: import("react-table").MetaBase<import("@oneblink/types/typescript/submissions").FormStoreRecord>) => import("react-table").TableState<import("@oneblink/types/typescript/submissions").FormStoreRecord>) | undefined;
+    defaultColumn?: Partial<import("react-table").Column<import("@oneblink/types/typescript/submissions").FormStoreRecord>> | undefined;
+    getSubRows?: ((originalRow: import("@oneblink/types/typescript/submissions").FormStoreRecord, relativeIndex: number) => import("@oneblink/types/typescript/submissions").FormStoreRecord[]) | undefined;
+    getRowId?: ((originalRow: import("@oneblink/types/typescript/submissions").FormStoreRecord, relativeIndex: number, parent?: import("react-table").Row<import("@oneblink/types/typescript/submissions").FormStoreRecord> | undefined) => string) | undefined;
+    autoResetHiddenColumns?: boolean | undefined;
+    disableResizing?: boolean | undefined;
+    autoResetResize?: boolean | undefined;
+    state: import("react-table").TableState<import("@oneblink/types/typescript/submissions").FormStoreRecord>;
+    plugins: import("react-table").PluginHook<import("@oneblink/types/typescript/submissions").FormStoreRecord>[];
+    dispatch: import("react-table").TableDispatch<any>;
+    columns: import("react-table").ColumnInstance<import("@oneblink/types/typescript/submissions").FormStoreRecord>[];
+    allColumns: import("react-table").ColumnInstance<import("@oneblink/types/typescript/submissions").FormStoreRecord>[];
+    visibleColumns: import("react-table").ColumnInstance<import("@oneblink/types/typescript/submissions").FormStoreRecord>[];
+    headerGroups: import("react-table").HeaderGroup<import("@oneblink/types/typescript/submissions").FormStoreRecord>[];
+    footerGroups: import("react-table").HeaderGroup<import("@oneblink/types/typescript/submissions").FormStoreRecord>[];
+    headers: import("react-table").ColumnInstance<import("@oneblink/types/typescript/submissions").FormStoreRecord>[];
+    flatHeaders: import("react-table").ColumnInstance<import("@oneblink/types/typescript/submissions").FormStoreRecord>[];
+    rows: import("react-table").Row<import("@oneblink/types/typescript/submissions").FormStoreRecord>[];
+    rowsById: Record<string, import("react-table").Row<import("@oneblink/types/typescript/submissions").FormStoreRecord>>;
+    getTableProps: (propGetter?: import("react-table").TablePropGetter<import("@oneblink/types/typescript/submissions").FormStoreRecord> | undefined) => import("react-table").TableProps;
+    getTableBodyProps: (propGetter?: import("react-table").TableBodyPropGetter<import("@oneblink/types/typescript/submissions").FormStoreRecord> | undefined) => import("react-table").TableBodyProps;
+    prepareRow: (row: import("react-table").Row<import("@oneblink/types/typescript/submissions").FormStoreRecord>) => void;
+    flatRows: import("react-table").Row<import("@oneblink/types/typescript/submissions").FormStoreRecord>[];
+    totalColumnsWidth: number;
+    allColumnsHidden: boolean;
+    toggleHideColumn: (columnId: string, value?: boolean | undefined) => void;
+    setHiddenColumns: (param: string[] | ((oldHidden: string[]) => string[])) => void;
+    toggleHideAllColumns: (value?: boolean | undefined) => void;
+    getToggleHideAllColumnsProps: (props?: Partial<import("react-table").TableToggleHideAllColumnProps> | undefined) => import("react-table").TableToggleHideAllColumnProps;
+    getHooks: () => import("react-table").Hooks<import("@oneblink/types/typescript/submissions").FormStoreRecord>;
+};

package/dist/components/formStore/useFormStoreTableContext.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export const FormStoreTableContext = React.createContext(undefined);
+export default function useFormStoreTableContext() {
+    const formStoreTableContext = React.useContext(FormStoreTableContext);
+    if (!formStoreTableContext) {
+        throw new TypeError('You have attempted to run the hook "useFormStoreTableContext()" outside of the "FormStoreTableContext" context.');
+    }
+    return formStoreTableContext;
+}
+//# sourceMappingURL=useFormStoreTableContext.js.map

package/dist/components/formStore/useFormStoreTableContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormStoreTableContext.js","sourceRoot":"","sources":["../../../src/components/formStore/useFormStoreTableContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,CAAC,MAAM,qBAAqB,GAChC,KAAK,CAAC,aAAa,CAA6B,SAAS,CAAC,CAAA;AAE5D,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC9C,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAA;IACrE,IAAI,CAAC,qBAAqB,EAAE;QAC1B,MAAM,IAAI,SAAS,CACjB,iHAAiH,CAClH,CAAA;KACF;IACD,OAAO,qBAAqB,CAAA;AAC9B,CAAC","sourcesContent":["import * as React from 'react'\nimport useFormStoreTable from './table/useFormStoreTable'\nexport type FormStoreTableContextValue =\n  | ReturnType<typeof useFormStoreTable>\n  | undefined\n\nexport const FormStoreTableContext =\n  React.createContext<FormStoreTableContextValue>(undefined)\n\nexport default function useFormStoreTableContext() {\n  const formStoreTableContext = React.useContext(FormStoreTableContext)\n  if (!formStoreTableContext) {\n    throw new TypeError(\n      'You have attempted to run the hook \"useFormStoreTableContext()\" outside of the \"FormStoreTableContext\" context.',\n    )\n  }\n  return formStoreTableContext\n}\n"]}

package/dist/components/messages/ErrorMessage.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Props as LargeIconMessageProps } from './LargeIconMessage';
+declare type Props = {
+    IconComponent?: LargeIconMessageProps['IconComponent'];
+    title: string;
+    gutterTop?: boolean;
+    gutterBottom?: boolean;
+    children?: React.ReactNode;
+    onTryAgain?: () => void;
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/messages/ErrorMessage.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import ErrorIcon from '@mui/icons-material/Error';
+import LargeIconMessage from './LargeIconMessage';
+import { Button } from '@mui/material';
+function ErrorMessage({ title, children, gutterTop, gutterBottom, IconComponent, onTryAgain, }) {
+    if (!IconComponent) {
+        IconComponent = ErrorIcon;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(LargeIconMessage, { IconComponent: IconComponent, title: title, variant: "error", gutterTop: gutterTop, gutterBottom: gutterBottom, action: onTryAgain && (React.createElement(Button, { variant: "outlined", color: "primary", onClick: () => onTryAgain() }, "Try Again")), className: "ob-error-snackbar" }, children)));
+}
+export default React.memo(ErrorMessage);
+//# sourceMappingURL=ErrorMessage.js.map

package/dist/components/messages/ErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../../src/components/messages/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,2BAA2B,CAAA;AACjD,OAAO,gBAEN,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAUtC,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,aAAa,EACb,UAAU,GACJ;IACN,IAAI,CAAC,aAAa,EAAE;QAClB,aAAa,GAAG,SAAS,CAAA;KAC1B;IAED,OAAO,CACL;QACE,oBAAC,gBAAgB,IACf,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,OAAO,EACf,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,MAAM,EACJ,UAAU,IAAI,CACZ,oBAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,gBAGpB,CACV,EAEH,SAAS,EAAC,mBAAmB,IAE5B,QAAQ,CACQ,CAClB,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ErrorIcon from '@mui/icons-material/Error'\nimport LargeIconMessage, {\n  Props as LargeIconMessageProps,\n} from './LargeIconMessage'\nimport { Button } from '@mui/material'\ntype Props = {\n  IconComponent?: LargeIconMessageProps['IconComponent']\n  title: string\n  gutterTop?: boolean\n  gutterBottom?: boolean\n  children?: React.ReactNode\n  onTryAgain?: () => void\n}\n\nfunction ErrorMessage({\n  title,\n  children,\n  gutterTop,\n  gutterBottom,\n  IconComponent,\n  onTryAgain,\n}: Props) {\n  if (!IconComponent) {\n    IconComponent = ErrorIcon\n  }\n\n  return (\n    <>\n      <LargeIconMessage\n        IconComponent={IconComponent}\n        title={title}\n        variant=\"error\"\n        gutterTop={gutterTop}\n        gutterBottom={gutterBottom}\n        action={\n          onTryAgain && (\n            <Button\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={() => onTryAgain()}\n            >\n              Try Again\n            </Button>\n          )\n        }\n        className=\"ob-error-snackbar\"\n      >\n        {children}\n      </LargeIconMessage>\n    </>\n  )\n}\n\nexport default React.memo<Props>(ErrorMessage)\n"]}

package/dist/components/messages/LargeIconMessage.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { CommonProps } from '@mui/material/OverridableComponent';
+declare type Variant = 'primary' | 'success' | 'error' | 'warning';
+export declare type Props = {
+    IconComponent: React.ComponentType<{
+        color: Variant;
+    }>;
+    title: string;
+    variant: Variant;
+    gutterTop?: boolean;
+    gutterBottom?: boolean;
+    children?: React.ReactNode;
+    action?: React.ReactNode;
+    className?: CommonProps['className'];
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;