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

package/dist/components/formStore/FormStoreTableProvider.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+import querystring from 'query-string';
+import { formStoreService } from '@oneblink/apps';
+import useInfiniteScrollDataLoad from '../../hooks/useInfiniteScrollDataLoad';
+import useFormStoreTable from './table/useFormStoreTable';
+import { Button, Grid } from '@mui/material';
+import { Settings as SettingsIcon } from '@mui/icons-material';
+import useSubmissionIdValidationMessage, { validateIsUUID, } from '../../hooks/useSubmissionIdIsValid';
+import ErrorMessage from '../messages/ErrorMessage';
+import LoadingWithMessage from '../LoadingWithMessage';
+import NoResourcesYet from '../messages/NoResourcesYet';
+import FormStoreIcon from './display/FormStoreIcon';
+import { FormStoreTableContext } from './useFormStoreTableContext';
+export function FormStoreTableProvider({ form, children, }) {
+    var _a;
+    const history = useHistory();
+    const { isLoading, loadError, records: formStoreRecords, onTryAgain, onRefresh, filters, onChangeFilters, } = useInfiniteScrollDataLoad({
+        limit: 50,
+        debounceSearchMs: 1000,
+        onDefaultFilters: React.useCallback((query) => {
+            let filters = {};
+            try {
+                if (typeof query.filters === 'string') {
+                    filters = JSON.parse(query.filters);
+                }
+            }
+            catch (error) {
+                console.warn('Could not parse filter as JSON', error);
+            }
+            if (!filters.sorting) {
+                filters.sorting = [
+                    { property: 'dateTimeSubmitted', direction: 'descending' },
+                ];
+            }
+            return filters;
+        }, []),
+        onSearch: React.useCallback(async (filters, paging, abortSignal) => {
+            // Exclude all search parameters if searching
+            // for a specific submission using an identifier
+            const searchFilters = filters.submissionId
+                ? {
+                    submissionId: filters.submissionId,
+                }
+                : filters;
+            const result = await formStoreService.searchFormStoreRecords({
+                paging,
+                formId: form.id,
+                filters: searchFilters,
+            }, abortSignal);
+            return {
+                records: result.formStoreRecords,
+                meta: result.meta,
+            };
+        }, [form.id]),
+        onValidateFilters: React.useCallback((currentFilters) => {
+            var _a;
+            return validateIsUUID((_a = currentFilters.submissionId) === null || _a === void 0 ? void 0 : _a.$eq);
+        }, []),
+    });
+    React.useEffect(() => {
+        history.replace({
+            search: querystring.stringify({
+                filters: JSON.stringify(filters),
+            }),
+        });
+    }, [filters, history]);
+    const submissionIdValidationMessage = useSubmissionIdValidationMessage((_a = filters.submissionId) === null || _a === void 0 ? void 0 : _a.$eq);
+    const formStoreTable = useFormStoreTable({
+        formStoreRecords,
+        filters,
+        onChangeFilters,
+        submissionIdValidationMessage,
+        form,
+        onRefresh,
+    });
+    return (React.createElement(FormStoreTableContext.Provider, { value: formStoreTable },
+        children,
+        formStoreTable.visibleColumns.length ? (React.createElement(React.Fragment, null, !formStoreRecords.length && !isLoading && !loadError && (React.createElement(NoResourcesYet, { IconComponent: FormStoreIcon, title: "No Records Found..." }, "There are no Submissions matching your filters.")))) : (React.createElement(NoResourcesYet, { IconComponent: SettingsIcon, title: "No Columns Visible", gutterBottom: true }, "It looks like you have hidden all of the available columns. Please enable at least one column to view submissions.")),
+        isLoading && (React.createElement("div", { className: isLoading === 'INITIAL'
+                ? 'ob-form-store-loading-initial'
+                : 'ob-form-store-loading-more' },
+            React.createElement(LoadingWithMessage, { message: "Loading more records..." }))),
+        loadError && (React.createElement(React.Fragment, null,
+            React.createElement(ErrorMessage, { title: "Error Retrieving Submissions", gutterBottom: true, gutterTop: true }, loadError.message),
+            React.createElement(Grid, { container: true, justifyContent: "center" },
+                React.createElement(Button, { className: "ob-form-store-try-again-button", variant: "outlined", color: "primary", onClick: () => onTryAgain() }, "Try Again"))))));
+}
+//# sourceMappingURL=FormStoreTableProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormStoreTableProvider.js","sourceRoot":"","sources":["../../../src/components/formStore/FormStoreTableProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { useHistory } from 'react-router-dom'\nimport querystring from 'query-string'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { formStoreService } from '@oneblink/apps'\nimport useInfiniteScrollDataLoad from '../../hooks/useInfiniteScrollDataLoad'\nimport useFormStoreTable from './table/useFormStoreTable'\nimport { Button, Grid } from '@mui/material'\nimport { Settings as SettingsIcon } from '@mui/icons-material'\nimport { FormTypes } from '@oneblink/types'\nimport useSubmissionIdValidationMessage, {\n  validateIsUUID,\n} from '../../hooks/useSubmissionIdIsValid'\nimport ErrorMessage from '../messages/ErrorMessage'\nimport LoadingWithMessage from '../LoadingWithMessage'\nimport NoResourcesYet from '../messages/NoResourcesYet'\nimport FormStoreIcon from './display/FormStoreIcon'\nimport { FormStoreTableContext } from './useFormStoreTableContext'\n\nexport function FormStoreTableProvider({\n  form,\n  children,\n}: {\n  form: FormTypes.Form\n  children: React.ReactNode\n}) {\n  const history = useHistory()\n  const {\n    isLoading,\n    loadError,\n    records: formStoreRecords,\n    onTryAgain,\n    onRefresh,\n    filters,\n    onChangeFilters,\n  } = useInfiniteScrollDataLoad<\n    formStoreService.FormStoreFilters,\n    FormStoreRecord\n  >({\n    limit: 50,\n    debounceSearchMs: 1000,\n    onDefaultFilters: React.useCallback((query) => {\n      let filters: formStoreService.FormStoreFilters = {}\n      try {\n        if (typeof query.filters === 'string') {\n          filters = JSON.parse(query.filters)\n        }\n      } catch (error) {\n        console.warn('Could not parse filter as JSON', error)\n      }\n      if (!filters.sorting) {\n        filters.sorting = [\n          { property: 'dateTimeSubmitted', direction: 'descending' },\n        ]\n      }\n      return filters\n    }, []),\n    onSearch: React.useCallback(\n      async (filters, paging, abortSignal) => {\n        // Exclude all search parameters if searching\n        // for a specific submission using an identifier\n        const searchFilters = filters.submissionId\n          ? {\n              submissionId: filters.submissionId,\n            }\n          : filters\n        const result = await formStoreService.searchFormStoreRecords(\n          {\n            paging,\n            formId: form.id,\n            filters: searchFilters,\n          },\n          abortSignal,\n        )\n        return {\n          records: result.formStoreRecords,\n          meta: result.meta,\n        }\n      },\n      [form.id],\n    ),\n    onValidateFilters: React.useCallback(\n      (currentFilters: formStoreService.FormStoreFilters) => {\n        return validateIsUUID(currentFilters.submissionId?.$eq)\n      },\n      [],\n    ),\n  })\n\n  React.useEffect(() => {\n    history.replace({\n      search: querystring.stringify({\n        filters: JSON.stringify(filters),\n      }),\n    })\n  }, [filters, history])\n\n  const submissionIdValidationMessage = useSubmissionIdValidationMessage(\n    filters.submissionId?.$eq,\n  )\n\n  const formStoreTable = useFormStoreTable({\n    formStoreRecords,\n    filters,\n    onChangeFilters,\n    submissionIdValidationMessage,\n    form,\n    onRefresh,\n  })\n\n  return (\n    <FormStoreTableContext.Provider value={formStoreTable}>\n      {children}\n      {formStoreTable.visibleColumns.length ? (\n        <>\n          {!formStoreRecords.length && !isLoading && !loadError && (\n            <NoResourcesYet\n              IconComponent={FormStoreIcon}\n              title=\"No Records Found...\"\n            >\n              There are no Submissions matching your filters.\n            </NoResourcesYet>\n          )}\n        </>\n      ) : (\n        <NoResourcesYet\n          IconComponent={SettingsIcon}\n          title=\"No Columns Visible\"\n          gutterBottom\n        >\n          It looks like you have hidden all of the available columns. Please\n          enable at least one column to view submissions.\n        </NoResourcesYet>\n      )}\n\n      {isLoading && (\n        <div\n          className={\n            isLoading === 'INITIAL'\n              ? 'ob-form-store-loading-initial'\n              : 'ob-form-store-loading-more'\n          }\n        >\n          <LoadingWithMessage message=\"Loading more records...\" />\n        </div>\n      )}\n\n      {loadError && (\n        <>\n          <ErrorMessage\n            title=\"Error Retrieving Submissions\"\n            gutterBottom\n            gutterTop\n          >\n            {loadError.message}\n          </ErrorMessage>\n          <Grid container justifyContent=\"center\">\n            <Button\n              className=\"ob-form-store-try-again-button\"\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={() => onTryAgain()}\n            >\n              Try Again\n            </Button>\n          </Grid>\n        </>\n      )}\n    </FormStoreTableContext.Provider>\n  )\n}\n"]}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+declare function OneBlinkFormStoreClearFiltersButton(props: React.ComponentProps<typeof Button>): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof OneBlinkFormStoreClearFiltersButton>;
+export default _default;

package/dist/components/formStore/OneBlinkFormStoreClearFiltersButton.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+import { FilterList as FilterIcon } from '@mui/icons-material';
+import useFormStoreTableContext from './useFormStoreTableContext';
+function OneBlinkFormStoreClearFiltersButton(props) {
+    const { onChangeFilters, filters } = useFormStoreTableContext();
+    const isDisabled = React.useMemo(() => {
+        return !Object.keys(filters).some((key) => key !== 'sorting');
+    }, [filters]);
+    return (React.createElement(Button, { className: "ob-form-store-clear-filters-button", startIcon: React.createElement(FilterIcon, null), disabled: isDisabled, onClick: () => {
+            onChangeFilters((currentFilters) => ({
+                sorting: currentFilters.sorting,
+            }), false);
+        }, 
+        // eslint-disable-next-line react/no-children-prop
+        children: React.createElement(React.Fragment, null, "Clear Filters"), ...props }));
+}
+export default React.memo(OneBlinkFormStoreClearFiltersButton);
+//# sourceMappingURL=OneBlinkFormStoreClearFiltersButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OneBlinkFormStoreClearFiltersButton.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreClearFiltersButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,UAAU,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,wBAAwB,MAAM,4BAA4B,CAAA;AAEjE,SAAS,mCAAmC,CAC1C,KAA0C;IAE1C,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,wBAAwB,EAAE,CAAA;IAC/D,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC,CAAA;IAC/D,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,OAAO,CACL,oBAAC,MAAM,IACL,SAAS,EAAC,oCAAoC,EAC9C,SAAS,EAAE,oBAAC,UAAU,OAAG,EACzB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,eAAe,CACb,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;gBACnB,OAAO,EAAE,cAAc,CAAC,OAAO;aAChC,CAAC,EACF,KAAK,CACN,CAAA;QACH,CAAC;QACD,kDAAkD;QAClD,QAAQ,EAAE,0DAAkB,KACxB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Button } from '@mui/material'\nimport { FilterList as FilterIcon } from '@mui/icons-material'\nimport useFormStoreTableContext from './useFormStoreTableContext'\n\nfunction OneBlinkFormStoreClearFiltersButton(\n  props: React.ComponentProps<typeof Button>,\n) {\n  const { onChangeFilters, filters } = useFormStoreTableContext()\n  const isDisabled = React.useMemo(() => {\n    return !Object.keys(filters).some((key) => key !== 'sorting')\n  }, [filters])\n  return (\n    <Button\n      className=\"ob-form-store-clear-filters-button\"\n      startIcon={<FilterIcon />}\n      disabled={isDisabled}\n      onClick={() => {\n        onChangeFilters(\n          (currentFilters) => ({\n            sorting: currentFilters.sorting,\n          }),\n          false,\n        )\n      }}\n      // eslint-disable-next-line react/no-children-prop\n      children={<>Clear Filters</>}\n      {...props}\n    />\n  )\n}\n\nexport default React.memo(OneBlinkFormStoreClearFiltersButton)\n"]}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+declare function OneBlinkFormStoreColumnsButton(props: React.ComponentProps<typeof Button>): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof OneBlinkFormStoreColumnsButton>;
+export default _default;

package/dist/components/formStore/OneBlinkFormStoreColumnsButton.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, FormGroup, Typography, } from '@mui/material';
+import { Settings as SettingsIcon } from '@mui/icons-material';
+import useBooleanState from '../../hooks/useBooleanState';
+import useFormStoreTableContext from './useFormStoreTableContext';
+function OneBlinkFormStoreColumnsButton(props) {
+    const { getToggleHideAllColumnsProps, allColumns } = useFormStoreTableContext();
+    const [isConfiguringColumns, showColumnConfiguration, hideColumnConfiguration,] = useBooleanState(false);
+    const toggleHideAllColumnsProps = getToggleHideAllColumnsProps();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { className: "ob-form-store-columns-button", startIcon: React.createElement(SettingsIcon, null), onClick: showColumnConfiguration, 
+            // eslint-disable-next-line react/no-children-prop
+            children: React.createElement(React.Fragment, null, "Columns"), ...props }),
+        React.createElement(Dialog, { open: isConfiguringColumns, maxWidth: "sm", fullWidth: true, onClose: hideColumnConfiguration },
+            React.createElement(DialogTitle, null, "Column Configuration"),
+            React.createElement(DialogContent, { dividers: true },
+                React.createElement(FormGroup, null,
+                    React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { ...toggleHideAllColumnsProps, indeterminate: !!toggleHideAllColumnsProps.indeterminate }), label: React.createElement("b", null, "Toggle All") }),
+                    allColumns.map((column) => {
+                        return (React.createElement(React.Fragment, { key: column.id },
+                            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { ...column.getToggleHiddenProps() }), label: React.createElement(React.Fragment, null,
+                                    column.headerText,
+                                    column.tooltip && (React.createElement(Typography, { component: "span", color: "textSecondary" },
+                                        ' ',
+                                        "(",
+                                        column.tooltip,
+                                        ")"))) })));
+                    }))),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { onClick: hideColumnConfiguration, color: "primary", variant: "contained" }, "Done")))));
+}
+export default React.memo(OneBlinkFormStoreColumnsButton);
+//# sourceMappingURL=OneBlinkFormStoreColumnsButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OneBlinkFormStoreColumnsButton.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreColumnsButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,MAAM,EACN,QAAQ,EACR,MAAM,EACN,aAAa,EACb,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,eAAe,MAAM,6BAA6B,CAAA;AACzD,OAAO,wBAAwB,MAAM,4BAA4B,CAAA;AAEjE,SAAS,8BAA8B,CACrC,KAA0C;IAE1C,MAAM,EAAE,4BAA4B,EAAE,UAAU,EAAE,GAChD,wBAAwB,EAAE,CAAA;IAC5B,MAAM,CACJ,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACxB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAE1B,MAAM,yBAAyB,GAAG,4BAA4B,EAAE,CAAA;IAEhE,OAAO,CACL;QACE,oBAAC,MAAM,IACL,SAAS,EAAC,8BAA8B,EACxC,SAAS,EAAE,oBAAC,YAAY,OAAG,EAC3B,OAAO,EAAE,uBAAuB;YAChC,kDAAkD;YAClD,QAAQ,EAAE,oDAAY,KAClB,KAAK,GACT;QACF,oBAAC,MAAM,IACL,IAAI,EAAE,oBAAoB,EAC1B,QAAQ,EAAC,IAAI,EACb,SAAS,QACT,OAAO,EAAE,uBAAuB;YAEhC,oBAAC,WAAW,+BAAmC;YAC/C,oBAAC,aAAa,IAAC,QAAQ;gBACrB,oBAAC,SAAS;oBACR,oBAAC,gBAAgB,IACf,OAAO,EACL,oBAAC,QAAQ,OACH,yBAAyB,EAC7B,aAAa,EAAE,CAAC,CAAC,yBAAyB,CAAC,aAAa,GACxD,EAEJ,KAAK,EAAE,4CAAiB,GACxB;oBACD,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;wBACzB,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE;4BAC5B,oBAAC,gBAAgB,IACf,OAAO,EAAE,oBAAC,QAAQ,OAAK,MAAM,CAAC,oBAAoB,EAAE,GAAI,EACxD,KAAK,EACH;oCACG,MAAM,CAAC,UAAU;oCACjB,MAAM,CAAC,OAAO,IAAI,CACjB,oBAAC,UAAU,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;wCAC/C,GAAG;;wCACF,MAAM,CAAC,OAAO;4CACL,CACd,CACA,GAEL,CACa,CAClB,CAAA;oBACH,CAAC,CAAC,CACQ,CACE;YAChB,oBAAC,aAAa;gBACZ,oBAAC,MAAM,IACL,OAAO,EAAE,uBAAuB,EAChC,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,WAAW,WAGZ,CACK,CACT,CACR,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport {\n  Button,\n  Checkbox,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  FormControlLabel,\n  FormGroup,\n  Typography,\n} from '@mui/material'\nimport { Settings as SettingsIcon } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport useFormStoreTableContext from './useFormStoreTableContext'\n\nfunction OneBlinkFormStoreColumnsButton(\n  props: React.ComponentProps<typeof Button>,\n) {\n  const { getToggleHideAllColumnsProps, allColumns } =\n    useFormStoreTableContext()\n  const [\n    isConfiguringColumns,\n    showColumnConfiguration,\n    hideColumnConfiguration,\n  ] = useBooleanState(false)\n\n  const toggleHideAllColumnsProps = getToggleHideAllColumnsProps()\n\n  return (\n    <>\n      <Button\n        className=\"ob-form-store-columns-button\"\n        startIcon={<SettingsIcon />}\n        onClick={showColumnConfiguration}\n        // eslint-disable-next-line react/no-children-prop\n        children={<>Columns</>}\n        {...props}\n      />\n      <Dialog\n        open={isConfiguringColumns}\n        maxWidth=\"sm\"\n        fullWidth\n        onClose={hideColumnConfiguration}\n      >\n        <DialogTitle>Column Configuration</DialogTitle>\n        <DialogContent dividers>\n          <FormGroup>\n            <FormControlLabel\n              control={\n                <Checkbox\n                  {...toggleHideAllColumnsProps}\n                  indeterminate={!!toggleHideAllColumnsProps.indeterminate}\n                />\n              }\n              label={<b>Toggle All</b>}\n            />\n            {allColumns.map((column) => {\n              return (\n                <React.Fragment key={column.id}>\n                  <FormControlLabel\n                    control={<Checkbox {...column.getToggleHiddenProps()} />}\n                    label={\n                      <>\n                        {column.headerText}\n                        {column.tooltip && (\n                          <Typography component=\"span\" color=\"textSecondary\">\n                            {' '}\n                            ({column.tooltip})\n                          </Typography>\n                        )}\n                      </>\n                    }\n                  />\n                </React.Fragment>\n              )\n            })}\n          </FormGroup>\n        </DialogContent>\n        <DialogActions>\n          <Button\n            onClick={hideColumnConfiguration}\n            color=\"primary\"\n            variant=\"contained\"\n          >\n            Done\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n\nexport default React.memo(OneBlinkFormStoreColumnsButton)\n"]}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { LoadingButton } from '@mui/lab';
+declare function OneBlinkFormStoreDownloadButton(props: React.ComponentProps<typeof LoadingButton>): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof OneBlinkFormStoreDownloadButton>;
+export default _default;

package/dist/components/formStore/OneBlinkFormStoreDownloadButton.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Tooltip } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import CsvIcon from '@mui/icons-material/Download';
+import ErrorSnackbar from '../ErrorSnackbar';
+import { formStoreService } from '@oneblink/apps';
+import useFormStoreTableContext from './useFormStoreTableContext';
+function OneBlinkFormStoreDownloadButton(props) {
+    const { visibleColumns, filters, form } = useFormStoreTableContext();
+    const [{ isDownloadingCsv, downloadingCsvError }, setState] = React.useState({
+        isDownloadingCsv: false,
+        downloadingCsvError: null,
+    });
+    const clearError = React.useCallback(() => {
+        setState({
+            isDownloadingCsv: false,
+            downloadingCsvError: null,
+        });
+    }, []);
+    const downloadCsv = React.useCallback(async () => {
+        setState({ isDownloadingCsv: true, downloadingCsvError: null });
+        try {
+            await formStoreService.exportFormStoreRecords(form.name, {
+                formId: form.id,
+                filters,
+                includeColumns: visibleColumns.map((visibleColumn) => visibleColumn.id),
+            });
+            setState({
+                isDownloadingCsv: false,
+                downloadingCsvError: null,
+            });
+        }
+        catch (error) {
+            setState({
+                isDownloadingCsv: false,
+                downloadingCsvError: error,
+            });
+        }
+    }, [form, filters, visibleColumns]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { title: "Download submission data as a CSV file" },
+            React.createElement(LoadingButton, { className: "ob-form-store-download-csv-button", type: "button", loading: isDownloadingCsv, loadingPosition: "start", startIcon: React.createElement(CsvIcon, null), onClick: downloadCsv, 
+                // eslint-disable-next-line react/no-children-prop
+                children: React.createElement(React.Fragment, null, "Download"), ...props })),
+        React.createElement(ErrorSnackbar, { open: !!downloadingCsvError, onClose: clearError },
+            React.createElement("span", { "data-cypress": "edit-dialog-error-message" }, downloadingCsvError && downloadingCsvError.message))));
+}
+export default React.memo(OneBlinkFormStoreDownloadButton);
+//# sourceMappingURL=OneBlinkFormStoreDownloadButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OneBlinkFormStoreDownloadButton.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreDownloadButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,OAAO,MAAM,8BAA8B,CAAA;AAClD,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,wBAAwB,MAAM,4BAA4B,CAAA;AAEjE,SAAS,+BAA+B,CACtC,KAAiD;IAEjD,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,wBAAwB,EAAE,CAAA;IACpE,MAAM,CAAC,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAGzE;QACD,gBAAgB,EAAE,KAAK;QACvB,mBAAmB,EAAE,IAAI;KAC1B,CAAC,CAAA;IACF,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,QAAQ,CAAC;YACP,gBAAgB,EAAE,KAAK;YACvB,mBAAmB,EAAE,IAAI;SAC1B,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAC/C,QAAQ,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,CAAA;QAC/D,IAAI;YACF,MAAM,gBAAgB,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE;gBACvD,MAAM,EAAE,IAAI,CAAC,EAAE;gBACf,OAAO;gBACP,cAAc,EAAE,cAAc,CAAC,GAAG,CAChC,CAAC,aAA8C,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,CACrE;aACF,CAAC,CAAA;YACF,QAAQ,CAAC;gBACP,gBAAgB,EAAE,KAAK;gBACvB,mBAAmB,EAAE,IAAI;aAC1B,CAAC,CAAA;SACH;QAAC,OAAO,KAAK,EAAE;YACd,QAAQ,CAAC;gBACP,gBAAgB,EAAE,KAAK;gBACvB,mBAAmB,EAAE,KAAc;aACpC,CAAC,CAAA;SACH;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAA;IAEnC,OAAO,CACL;QACE,oBAAC,OAAO,IAAC,KAAK,EAAC,wCAAwC;YACrD,oBAAC,aAAa,IACZ,SAAS,EAAC,mCAAmC,EAC7C,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,gBAAgB,EACzB,eAAe,EAAC,OAAO,EACvB,SAAS,EAAE,oBAAC,OAAO,OAAG,EACtB,OAAO,EAAE,WAAW;gBACpB,kDAAkD;gBAClD,QAAQ,EAAE,qDAAa,KACnB,KAAK,GACT,CACM;QAEV,oBAAC,aAAa,IAAC,IAAI,EAAE,CAAC,CAAC,mBAAmB,EAAE,OAAO,EAAE,UAAU;YAC7D,8CAAmB,2BAA2B,IAC3C,mBAAmB,IAAI,mBAAmB,CAAC,OAAO,CAC9C,CACO,CACf,CACJ,CAAA;AACH,CAAC;AACD,eAAe,KAAK,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip } from '@mui/material'\nimport { LoadingButton } from '@mui/lab'\nimport CsvIcon from '@mui/icons-material/Download'\nimport ErrorSnackbar from '../ErrorSnackbar'\nimport { ColumnInstance } from 'react-table'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { formStoreService } from '@oneblink/apps'\nimport useFormStoreTableContext from './useFormStoreTableContext'\n\nfunction OneBlinkFormStoreDownloadButton(\n  props: React.ComponentProps<typeof LoadingButton>,\n) {\n  const { visibleColumns, filters, form } = useFormStoreTableContext()\n  const [{ isDownloadingCsv, downloadingCsvError }, setState] = React.useState<{\n    isDownloadingCsv: boolean\n    downloadingCsvError: Error | null\n  }>({\n    isDownloadingCsv: false,\n    downloadingCsvError: null,\n  })\n  const clearError = React.useCallback(() => {\n    setState({\n      isDownloadingCsv: false,\n      downloadingCsvError: null,\n    })\n  }, [])\n\n  const downloadCsv = React.useCallback(async () => {\n    setState({ isDownloadingCsv: true, downloadingCsvError: null })\n    try {\n      await formStoreService.exportFormStoreRecords(form.name, {\n        formId: form.id,\n        filters,\n        includeColumns: visibleColumns.map(\n          (visibleColumn: ColumnInstance<FormStoreRecord>) => visibleColumn.id,\n        ),\n      })\n      setState({\n        isDownloadingCsv: false,\n        downloadingCsvError: null,\n      })\n    } catch (error) {\n      setState({\n        isDownloadingCsv: false,\n        downloadingCsvError: error as Error,\n      })\n    }\n  }, [form, filters, visibleColumns])\n\n  return (\n    <>\n      <Tooltip title=\"Download submission data as a CSV file\">\n        <LoadingButton\n          className=\"ob-form-store-download-csv-button\"\n          type=\"button\"\n          loading={isDownloadingCsv}\n          loadingPosition=\"start\"\n          startIcon={<CsvIcon />}\n          onClick={downloadCsv}\n          // eslint-disable-next-line react/no-children-prop\n          children={<>Download</>}\n          {...props}\n        />\n      </Tooltip>\n\n      <ErrorSnackbar open={!!downloadingCsvError} onClose={clearError}>\n        <span data-cypress=\"edit-dialog-error-message\">\n          {downloadingCsvError && downloadingCsvError.message}\n        </span>\n      </ErrorSnackbar>\n    </>\n  )\n}\nexport default React.memo(OneBlinkFormStoreDownloadButton)\n"]}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+export declare type FormStoreElementsContextValue = FormTypes.FormElementWithName[];
+export declare const FormStoreElementsContext: React.Context<FormStoreElementsContextValue>;
+export declare function OneBlinkFormStoreProvider({ form, children, }: {
+    form: FormTypes.Form;
+    children: React.ReactNode;
+}): JSX.Element;

package/dist/components/formStore/OneBlinkFormStoreProvider.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import LoadingWithMessage from '../LoadingWithMessage';
+import ErrorMessage from '../messages/ErrorMessage';
+import { formStoreService } from '@oneblink/apps';
+import useLoadDataState from '../../hooks/useLoadDataState';
+import { Box } from '@mui/material';
+import { FormStoreTableProvider } from './FormStoreTableProvider';
+export const FormStoreElementsContext = React.createContext([]);
+export function OneBlinkFormStoreProvider({ form, children, }) {
+    const fetchFormStoreDefinition = React.useCallback((abortSignal) => {
+        return formStoreService.getFormStoreDefinition(form.id, abortSignal);
+    }, [form.id]);
+    const [formStoreDefinitionState, onTryAgain] = useLoadDataState(fetchFormStoreDefinition);
+    if (formStoreDefinitionState.status === 'LOADING') {
+        return React.createElement(LoadingWithMessage, null);
+    }
+    if (formStoreDefinitionState.status === 'ERROR') {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(ErrorMessage, { title: "Error Retrieving Form Definition", gutterTop: true, onTryAgain: onTryAgain }, formStoreDefinitionState.error.message)));
+    }
+    return (React.createElement(FormStoreElementsContext.Provider, { value: formStoreDefinitionState.result.formElements },
+        React.createElement(Box, { paddingBottom: 20 },
+            React.createElement(FormStoreTableProvider, { form: form }, children))));
+}
+//# sourceMappingURL=OneBlinkFormStoreProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OneBlinkFormStoreProvider.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,kBAAkB,MAAM,uBAAuB,CAAA;AACtD,OAAO,YAAY,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,gBAAgB,MAAM,8BAA8B,CAAA;AAE3D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AACnC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAIjE,MAAM,CAAC,MAAM,wBAAwB,GACnC,KAAK,CAAC,aAAa,CAAgC,EAAE,CAAC,CAAA;AAExD,MAAM,UAAU,yBAAyB,CAAC,EACxC,IAAI,EACJ,QAAQ,GAIT;IACC,MAAM,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAChD,CAAC,WAAyB,EAAE,EAAE;QAC5B,OAAO,gBAAgB,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAA;IACtE,CAAC,EACD,CAAC,IAAI,CAAC,EAAE,CAAC,CACV,CAAA;IACD,MAAM,CAAC,wBAAwB,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAC7D,wBAAwB,CACzB,CAAA;IAED,IAAI,wBAAwB,CAAC,MAAM,KAAK,SAAS,EAAE;QACjD,OAAO,oBAAC,kBAAkB,OAAG,CAAA;KAC9B;IAED,IAAI,wBAAwB,CAAC,MAAM,KAAK,OAAO,EAAE;QAC/C,OAAO,CACL;YACE,oBAAC,YAAY,IACX,KAAK,EAAC,kCAAkC,EACxC,SAAS,QACT,UAAU,EAAE,UAAU,IAErB,wBAAwB,CAAC,KAAK,CAAC,OAAO,CAC1B,CACd,CACJ,CAAA;KACF;IAED,OAAO,CACL,oBAAC,wBAAwB,CAAC,QAAQ,IAChC,KAAK,EAAE,wBAAwB,CAAC,MAAM,CAAC,YAAY;QAEnD,oBAAC,GAAG,IAAC,aAAa,EAAE,EAAE;YACpB,oBAAC,sBAAsB,IAAC,IAAI,EAAE,IAAI,IAAG,QAAQ,CAA0B,CACnE,CAC4B,CACrC,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport LoadingWithMessage from '../LoadingWithMessage'\nimport ErrorMessage from '../messages/ErrorMessage'\nimport { formStoreService } from '@oneblink/apps'\nimport useLoadDataState from '../../hooks/useLoadDataState'\nimport { FormTypes } from '@oneblink/types'\nimport { Box } from '@mui/material'\nimport { FormStoreTableProvider } from './FormStoreTableProvider'\n\nexport type FormStoreElementsContextValue = FormTypes.FormElementWithName[]\n\nexport const FormStoreElementsContext =\n  React.createContext<FormStoreElementsContextValue>([])\n\nexport function OneBlinkFormStoreProvider({\n  form,\n  children,\n}: {\n  form: FormTypes.Form\n  children: React.ReactNode\n}) {\n  const fetchFormStoreDefinition = React.useCallback(\n    (abortSignal?: AbortSignal) => {\n      return formStoreService.getFormStoreDefinition(form.id, abortSignal)\n    },\n    [form.id],\n  )\n  const [formStoreDefinitionState, onTryAgain] = useLoadDataState(\n    fetchFormStoreDefinition,\n  )\n\n  if (formStoreDefinitionState.status === 'LOADING') {\n    return <LoadingWithMessage />\n  }\n\n  if (formStoreDefinitionState.status === 'ERROR') {\n    return (\n      <>\n        <ErrorMessage\n          title=\"Error Retrieving Form Definition\"\n          gutterTop\n          onTryAgain={onTryAgain}\n        >\n          {formStoreDefinitionState.error.message}\n        </ErrorMessage>\n      </>\n    )\n  }\n\n  return (\n    <FormStoreElementsContext.Provider\n      value={formStoreDefinitionState.result.formElements}\n    >\n      <Box paddingBottom={20}>\n        <FormStoreTableProvider form={form}>{children}</FormStoreTableProvider>\n      </Box>\n    </FormStoreElementsContext.Provider>\n  )\n}\n"]}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+declare function OneBlinkFormStoreRefreshButton(props: React.ComponentProps<typeof Button>): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof OneBlinkFormStoreRefreshButton>;
+export default _default;

package/dist/components/formStore/OneBlinkFormStoreRefreshButton.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+import { Sync as SyncIcon } from '@mui/icons-material';
+import useFormStoreTableContext from './useFormStoreTableContext';
+function OneBlinkFormStoreRefreshButton(props) {
+    const { onRefresh, submissionIdValidationMessage } = useFormStoreTableContext();
+    return (React.createElement(Button, { className: "ob-form-store-refresh-button", startIcon: React.createElement(SyncIcon, null), onClick: onRefresh, color: "primary", variant: "contained", disabled: !!submissionIdValidationMessage, 
+        // eslint-disable-next-line react/no-children-prop
+        children: React.createElement(React.Fragment, null, "Refresh"), ...props }));
+}
+export default React.memo(OneBlinkFormStoreRefreshButton);
+//# sourceMappingURL=OneBlinkFormStoreRefreshButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OneBlinkFormStoreRefreshButton.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreRefreshButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,wBAAwB,MAAM,4BAA4B,CAAA;AAEjE,SAAS,8BAA8B,CACrC,KAA0C;IAE1C,MAAM,EAAE,SAAS,EAAE,6BAA6B,EAAE,GAChD,wBAAwB,EAAE,CAAA;IAC5B,OAAO,CACL,oBAAC,MAAM,IACL,SAAS,EAAC,8BAA8B,EACxC,SAAS,EAAE,oBAAC,QAAQ,OAAG,EACvB,OAAO,EAAE,SAAS,EAClB,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,CAAC,CAAC,6BAA6B;QACzC,kDAAkD;QAClD,QAAQ,EAAE,oDAAY,KAClB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Button } from '@mui/material'\nimport { Sync as SyncIcon } from '@mui/icons-material'\nimport useFormStoreTableContext from './useFormStoreTableContext'\n\nfunction OneBlinkFormStoreRefreshButton(\n  props: React.ComponentProps<typeof Button>,\n) {\n  const { onRefresh, submissionIdValidationMessage } =\n    useFormStoreTableContext()\n  return (\n    <Button\n      className=\"ob-form-store-refresh-button\"\n      startIcon={<SyncIcon />}\n      onClick={onRefresh}\n      color=\"primary\"\n      variant=\"contained\"\n      disabled={!!submissionIdValidationMessage}\n      // eslint-disable-next-line react/no-children-prop\n      children={<>Refresh</>}\n      {...props}\n    />\n  )\n}\n\nexport default React.memo(OneBlinkFormStoreRefreshButton)\n"]}

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare function OneBlinkFormStoreTable(): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof OneBlinkFormStoreTable>;
+export default _default;

package/dist/components/formStore/OneBlinkFormStoreTable.js

@@ -0,0 +1,184 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled, Tooltip } from '@mui/material';
+import { FilterList as FilterListIcon, Warning as WarningIcon, ArrowDownward, } from '@mui/icons-material';
+import { IsHoveringProvider } from '../../hooks/useIsHovering';
+import HeaderCellMoreButton from './table/HeaderCellMoreButton';
+import useFormStoreTableContext from './useFormStoreTableContext';
+const SortingIcon = styled(ArrowDownward)(({ theme }) => ({
+    transition: theme.transitions.create('transform'),
+}));
+const Table = styled('div')(({ theme }) => ({
+    display: 'inline-block',
+    backgroundColor: theme.palette.background.paper,
+    fontSize: theme.typography.body2.fontSize,
+    '& .tc': {
+        padding: theme.spacing(1),
+        borderBottom: '1px solid',
+        borderBottomColor: theme.palette.divider,
+        display: 'flex',
+        alignItems: 'center',
+        '&.is-clickable': {
+            cursor: 'pointer',
+            transition: theme.transitions.create('transform'),
+            '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+            },
+        },
+    },
+    '& .td': {
+        position: 'relative',
+        borderRight: '1px solid',
+        borderRightColor: theme.palette.divider,
+        overflowX: 'hidden',
+        // minus 1 to cater for the border
+        minHeight: `${parseInt(theme.spacing(5.5)) - 1}px`,
+        '&.is-resizing': {
+            borderRightStyle: 'dashed',
+        },
+    },
+    '& .th': {
+        position: 'relative',
+        fontWeight: theme.typography.fontWeightBold,
+        paddingRight: 0,
+        borderBottomWidth: '2px',
+        '& .th-content': {
+            flex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderRight: '1px solid',
+            borderRightColor: theme.palette.divider,
+            paddingRight: theme.spacing(),
+            '& .th-label': {
+                display: 'inline-flex',
+                alignItems: 'center',
+                '& .th-icon': {
+                    marginLeft: theme.spacing(),
+                },
+            },
+        },
+        '& .resizer': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderWidth: 0,
+            borderLeftStyle: 'solid',
+            borderRightStyle: 'solid',
+            borderColor: theme.palette.divider,
+            paddingTop: theme.spacing(),
+            paddingBottom: theme.spacing(),
+            paddingRight: `calc(${theme.spacing(1)} + 1px)`,
+            position: 'absolute',
+            right: 0,
+            top: theme.spacing(0.5),
+            bottom: theme.spacing(0.5),
+            transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,
+            zIndex: 1,
+            // prevents from scrolling while dragging on touch devices
+            touchAction: 'none',
+            '&:hover': {
+                borderWidth: '1px',
+            },
+            '&.is-resizing': {
+                borderWidth: '1px',
+                borderColor: theme.palette.grey[700],
+            },
+        },
+    },
+}));
+function OneBlinkFormStoreTable() {
+    const { getTableProps, getTableBodyProps, headerGroups: [parentHeaderGroup], rows, prepareRow, onChangeFilters, } = useFormStoreTableContext();
+    if (!parentHeaderGroup) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Table, { ...getTableProps(), className: "ob-form-store-table" },
+            React.createElement("div", { className: "thead" },
+                React.createElement("div", { ...parentHeaderGroup.getHeaderGroupProps(), className: "tr ob-form-store-table-header-row" }, 
+                // Loop over the headers in each row
+                parentHeaderGroup.headers.map((headerGroup) => {
+                    var _a, _b, _c, _d, _e;
+                    const sortingProperty = (_a = headerGroup.sorting) === null || _a === void 0 ? void 0 : _a.property;
+                    const sortingDirection = (_b = headerGroup.sorting) === null || _b === void 0 ? void 0 : _b.direction;
+                    return (React.createElement(Tooltip, { title: headerGroup.tooltip || '', arrow: true, key: headerGroup.id, PopperProps: {
+                            sx: {
+                                zIndex: 'drawer',
+                            },
+                        } },
+                        React.createElement("div", { className: clsx('th tc ob-form-store-table-header-cell', {
+                                'is-clickable': !!sortingProperty,
+                            }), onClick: sortingProperty
+                                ? () => {
+                                    onChangeFilters((currentFilters) => {
+                                        switch (sortingDirection) {
+                                            case 'ascending': {
+                                                return {
+                                                    ...currentFilters,
+                                                    sorting: [
+                                                        {
+                                                            property: sortingProperty,
+                                                            direction: 'descending',
+                                                        },
+                                                    ],
+                                                };
+                                            }
+                                            case 'descending': {
+                                                return {
+                                                    ...currentFilters,
+                                                    sorting: undefined,
+                                                };
+                                            }
+                                            default: {
+                                                return {
+                                                    ...currentFilters,
+                                                    sorting: [
+                                                        {
+                                                            property: sortingProperty,
+                                                            direction: 'ascending',
+                                                        },
+                                                    ],
+                                                };
+                                            }
+                                        }
+                                    }, false);
+                                }
+                                : undefined, ...headerGroup.getHeaderProps() },
+                            React.createElement(IsHoveringProvider, { className: "th-content" },
+                                React.createElement("div", { className: "th-label" },
+                                    React.createElement("span", null, headerGroup.headerText),
+                                    sortingDirection && (React.createElement(SortingIcon, { fontSize: "small", color: "primary", sx: sortingDirection === 'ascending'
+                                            ? {
+                                                transform: 'rotate(180deg)',
+                                            }
+                                            : undefined, className: "th-icon" })),
+                                    ((_c = headerGroup.filter) === null || _c === void 0 ? void 0 : _c.isInvalid) ? (React.createElement(Tooltip, { title: ((_d = headerGroup.filter) === null || _d === void 0 ? void 0 : _d.validationMessage) || '' },
+                                        React.createElement(WarningIcon, { fontSize: "small", color: "error", className: "th-icon" }))) : ((_e = headerGroup.filter) === null || _e === void 0 ? void 0 : _e.value) ? (React.createElement(FilterListIcon, { fontSize: "small", color: "primary", className: "th-icon" })) : null),
+                                React.createElement(HeaderCellMoreButton, { headerGroup: headerGroup, onHide: headerGroup.toggleHidden }),
+                                React.createElement("div", { ...headerGroup.getResizerProps(), className: clsx('resizer', {
+                                        'is-resizing': headerGroup.isResizing,
+                                    }), onClick: (event) => {
+                                        event.stopPropagation();
+                                    } })))));
+                }))),
+            React.createElement("div", { ...getTableBodyProps(), className: "tbody" }, 
+            // Loop over the table rows
+            rows.map((row) => {
+                // Prepare the row for display
+                prepareRow(row);
+                return (
+                // Apply the row props
+                React.createElement("div", { ...row.getRowProps(), key: row.id, className: "tr ob-form-store-table-row" }, 
+                // Loop over the rows cells
+                row.cells.map((cell) => {
+                    // Apply the cell props
+                    return (React.createElement(IsHoveringProvider, { ...cell.getCellProps(), key: cell.column.id, className: clsx('td tc ob-form-store-table-row-cell', {
+                            'is-resizing': cell.column.isResizing,
+                        }) }, 
+                    // Render the cell contents
+                    cell.render('Cell')));
+                })));
+            })))));
+}
+export default React.memo(OneBlinkFormStoreTable);
+//# sourceMappingURL=OneBlinkFormStoreTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OneBlinkFormStoreTable.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { styled, Tooltip } from '@mui/material'\nimport {\n  FilterList as FilterListIcon,\n  Warning as WarningIcon,\n  ArrowDownward,\n} from '@mui/icons-material'\nimport { IsHoveringProvider } from '../../hooks/useIsHovering'\nimport HeaderCellMoreButton from './table/HeaderCellMoreButton'\nimport useFormStoreTableContext from './useFormStoreTableContext'\n\nconst SortingIcon = styled(ArrowDownward)(({ theme }) => ({\n  transition: theme.transitions.create('transform'),\n}))\n\nconst Table = styled('div')(({ theme }) => ({\n  display: 'inline-block',\n  backgroundColor: theme.palette.background.paper,\n  fontSize: theme.typography.body2.fontSize,\n  '& .tc': {\n    padding: theme.spacing(1),\n    borderBottom: '1px solid',\n    borderBottomColor: theme.palette.divider,\n    display: 'flex',\n    alignItems: 'center',\n    '&.is-clickable': {\n      cursor: 'pointer',\n      transition: theme.transitions.create('transform'),\n      '&:hover': {\n        backgroundColor: theme.palette.action.hover,\n      },\n    },\n  },\n  '& .td': {\n    position: 'relative',\n    borderRight: '1px solid',\n    borderRightColor: theme.palette.divider,\n    overflowX: 'hidden',\n    // minus 1 to cater for the border\n    minHeight: `${parseInt(theme.spacing(5.5)) - 1}px`,\n    '&.is-resizing': {\n      borderRightStyle: 'dashed',\n    },\n  },\n  '& .th': {\n    position: 'relative',\n    fontWeight: theme.typography.fontWeightBold,\n    paddingRight: 0,\n    borderBottomWidth: '2px',\n    '& .th-content': {\n      flex: 1,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      borderRight: '1px solid',\n      borderRightColor: theme.palette.divider,\n      paddingRight: theme.spacing(),\n      '& .th-label': {\n        display: 'inline-flex',\n        alignItems: 'center',\n        '& .th-icon': {\n          marginLeft: theme.spacing(),\n        },\n      },\n    },\n    '& .resizer': {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderWidth: 0,\n      borderLeftStyle: 'solid',\n      borderRightStyle: 'solid',\n      borderColor: theme.palette.divider,\n      paddingTop: theme.spacing(),\n      paddingBottom: theme.spacing(),\n      paddingRight: `calc(${theme.spacing(1)} + 1px)`,\n      position: 'absolute',\n      right: 0,\n      top: theme.spacing(0.5),\n      bottom: theme.spacing(0.5),\n      transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,\n      zIndex: 1,\n      // prevents from scrolling while dragging on touch devices\n      touchAction: 'none',\n      '&:hover': {\n        borderWidth: '1px',\n      },\n      '&.is-resizing': {\n        borderWidth: '1px',\n        borderColor: theme.palette.grey[700],\n      },\n    },\n  },\n}))\n\nfunction OneBlinkFormStoreTable() {\n  const {\n    getTableProps,\n    getTableBodyProps,\n    headerGroups: [parentHeaderGroup],\n    rows,\n    prepareRow,\n    onChangeFilters,\n  } = useFormStoreTableContext()\n\n  if (!parentHeaderGroup) {\n    return null\n  }\n\n  return (\n    <>\n      <Table {...getTableProps()} className=\"ob-form-store-table\">\n        <div className=\"thead\">\n          <div\n            {...parentHeaderGroup.getHeaderGroupProps()}\n            className=\"tr ob-form-store-table-header-row\"\n          >\n            {\n              // Loop over the headers in each row\n              parentHeaderGroup.headers.map((headerGroup) => {\n                const sortingProperty = headerGroup.sorting?.property\n                const sortingDirection = headerGroup.sorting?.direction\n\n                return (\n                  <Tooltip\n                    title={headerGroup.tooltip || ''}\n                    arrow\n                    key={headerGroup.id}\n                    PopperProps={{\n                      sx: {\n                        zIndex: 'drawer',\n                      },\n                    }}\n                  >\n                    <div\n                      className={clsx('th tc ob-form-store-table-header-cell', {\n                        'is-clickable': !!sortingProperty,\n                      })}\n                      onClick={\n                        sortingProperty\n                          ? () => {\n                              onChangeFilters((currentFilters) => {\n                                switch (sortingDirection) {\n                                  case 'ascending': {\n                                    return {\n                                      ...currentFilters,\n                                      sorting: [\n                                        {\n                                          property: sortingProperty,\n                                          direction: 'descending',\n                                        },\n                                      ],\n                                    }\n                                  }\n                                  case 'descending': {\n                                    return {\n                                      ...currentFilters,\n                                      sorting: undefined,\n                                    }\n                                  }\n                                  default: {\n                                    return {\n                                      ...currentFilters,\n                                      sorting: [\n                                        {\n                                          property: sortingProperty,\n                                          direction: 'ascending',\n                                        },\n                                      ],\n                                    }\n                                  }\n                                }\n                              }, false)\n                            }\n                          : undefined\n                      }\n                      // Apply the header cell props\n                      {...headerGroup.getHeaderProps()}\n                    >\n                      <IsHoveringProvider className=\"th-content\">\n                        <div className=\"th-label\">\n                          <span>{headerGroup.headerText}</span>\n                          {sortingDirection && (\n                            <SortingIcon\n                              fontSize=\"small\"\n                              color=\"primary\"\n                              sx={\n                                sortingDirection === 'ascending'\n                                  ? {\n                                      transform: 'rotate(180deg)',\n                                    }\n                                  : undefined\n                              }\n                              className=\"th-icon\"\n                            />\n                          )}\n                          {headerGroup.filter?.isInvalid ? (\n                            <Tooltip\n                              title={\n                                headerGroup.filter?.validationMessage || ''\n                              }\n                            >\n                              <WarningIcon\n                                fontSize=\"small\"\n                                color=\"error\"\n                                className=\"th-icon\"\n                              />\n                            </Tooltip>\n                          ) : headerGroup.filter?.value ? (\n                            <FilterListIcon\n                              fontSize=\"small\"\n                              color=\"primary\"\n                              className=\"th-icon\"\n                            />\n                          ) : null}\n                        </div>\n                        <HeaderCellMoreButton\n                          headerGroup={headerGroup}\n                          onHide={headerGroup.toggleHidden}\n                        />\n                        <div\n                          {...headerGroup.getResizerProps()}\n                          className={clsx('resizer', {\n                            'is-resizing': headerGroup.isResizing,\n                          })}\n                          onClick={(event) => {\n                            event.stopPropagation()\n                          }}\n                        />\n                      </IsHoveringProvider>\n                    </div>\n                  </Tooltip>\n                )\n              })\n            }\n          </div>\n        </div>\n        <div {...getTableBodyProps()} className=\"tbody\">\n          {\n            // Loop over the table rows\n            rows.map((row) => {\n              // Prepare the row for display\n              prepareRow(row)\n              return (\n                // Apply the row props\n                <div\n                  {...row.getRowProps()}\n                  key={row.id}\n                  className=\"tr ob-form-store-table-row\"\n                >\n                  {\n                    // Loop over the rows cells\n                    row.cells.map((cell) => {\n                      // Apply the cell props\n                      return (\n                        <IsHoveringProvider\n                          {...cell.getCellProps()}\n                          key={cell.column.id}\n                          className={clsx(\n                            'td tc ob-form-store-table-row-cell',\n                            {\n                              'is-resizing': cell.column.isResizing,\n                            },\n                          )}\n                        >\n                          {\n                            // Render the cell contents\n                            cell.render('Cell')\n                          }\n                        </IsHoveringProvider>\n                      )\n                    })\n                  }\n                </div>\n              )\n            })\n          }\n        </div>\n      </Table>\n    </>\n  )\n}\n\nexport default React.memo(OneBlinkFormStoreTable)\n"]}

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { FormElementWithOptions } from '@oneblink/types/typescript/forms';
+export declare function FileChip({ file: { fileName, url, isPrivate, data }, }: {
+    file: {
+        fileName: string;
+        url?: string;
+        isPrivate?: boolean;
+        data?: string;
+    };
+}): JSX.Element;
+export declare function FilesElementDataTableCellContent({ value, }: {
+    value: Array<{
+        fileName: string;
+        url?: string | undefined;
+        isPrivate?: boolean | undefined;
+        data?: string | undefined;
+    }>;
+}): JSX.Element;
+export declare function MultiSelectFormElementTableCellContent({ value, formElement, }: {
+    value: string[];
+    formElement: FormElementWithOptions;
+}): JSX.Element;
+export declare function getSelectedOptionLabel(formElement: FormElementWithOptions, value: string): string;