@eeacms/volto-tableau 7.0.4 → 7.1.0

package/src/Tableau/helpers.js

@@ -1,4 +1,127 @@
-import isUndefined from 'lodash/isUndefined';
+import { reduce, isUndefined, isString } from 'lodash';
+import qs from 'querystring';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
+
+export function getQuery({
+  data_query = [],
+  location = {},
+  tableau_vis_url = '',
+  discodata_query = {},
+}) {
+  return {
+    ...reduce(
+      data_query,
+      (acc, { i, v }) => {
+        if (i && v.length) {
+          return { ...acc, [i]: v };
+        }
+        return acc;
+      },
+      {},
+    ),
+    ...(qs.parse(location.search?.replace('?', '')) || {}),
+    ...(qs.parse(tableau_vis_url.split('?')[1]) || {}),
+    ...(discodata_query?.search || {}),
+  };
+}
+
+export function getTableauVisualization({
+  isBlock,
+  data,
+  tableauContent,
+  content,
+}) {
+  const mergedContent = (isBlock ? tableauContent : content) || {};
+  const tableau_visualization =
+    (isBlock
+      ? tableauContent?.tableau_visualization
+      : content?.tableau_visualization) ||
+    data?.tableau_visualization ||
+    {};
+  return {
+    ...pickMetadata(mergedContent),
+    ...tableau_visualization,
+  };
+}
+
+export function getParameters({ tableauVisualization, query, data }) {
+  const { urlParameters = [] } = tableauVisualization || {};
+
+  const staticParameters = [
+    ...(tableauVisualization?.staticParameters || []),
+    ...(data?.staticParameters || []),
+  ];
+
+  return {
+    ...reduce(
+      staticParameters,
+      (acc, { field, value }) => {
+        if (field && value) {
+          return {
+            ...acc,
+            [field]: value,
+          };
+        }
+        return acc;
+      },
+      {},
+    ),
+    ...reduce(
+      urlParameters,
+      (acc, { field, urlParam }) => {
+        if (field && query[urlParam]) {
+          return {
+            ...acc,
+            [field]: isString(query[urlParam])
+              ? query[urlParam].split(',')
+              : query[urlParam],
+          };
+        }
+        return acc;
+      },
+      {},
+    ),
+  };
+}
+
+export function getFilters({ tableauVisualization, query, data }) {
+  // const { dynamicFilters = [] } = tableauVisualization || {};
+  const staticFilters = [
+    ...(tableauVisualization?.staticFilters || []),
+    ...(data?.staticFilters || []),
+  ];
+
+  return {
+    ...reduce(
+      staticFilters,
+      (acc, { field, value }) => {
+        if (field && value) {
+          return {
+            ...acc,
+            [field]: value,
+          };
+        }
+        return acc;
+      },
+      {},
+    ),
+    // ...reduce(
+    //   dynamicFilters,
+    //   (acc, { field, urlParam }) => {
+    //     if (field && urlParam) {
+    //       return {
+    //         ...acc,
+    //         [field]: isString(query[urlParam])
+    //           ? query[urlParam].split(',')
+    //           : query[urlParam],
+    //       };
+    //     }
+    //     return acc;
+    //   },
+    //   {},
+    // ),
+  };
+}
 
 export const getSheetnames = (viz) => {
   if (!viz) return [];

package/src/Views/VisualizationView.jsx

@@ -1,25 +1,37 @@
-import React from 'react';
-import { hasBlocksData } from '@plone/volto/helpers';
+import React, { useState } from 'react';
+import { withRouter } from 'react-router';
 import { Container } from 'semantic-ui-react';
+import { hasBlocksData } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-import { pickMetadata } from '@eeacms/volto-embed/helpers';
 import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
+import {
+  getQuery,
+  getTableauVisualization,
+  getParameters,
+  getFilters,
+} from '@eeacms/volto-tableau/Tableau/helpers';
 
 const VisualizationView = (props) => {
-  const { content = {} } = props;
-  const { tableau_visualization = {} } = content;
-  const { staticParameters = [] } = tableau_visualization;
+  const { location, content } = props;
+
+  const [tableauVisualization] = useState(() =>
+    getTableauVisualization({
+      isBlock: false,
+      content,
+    }),
+  );
+  const [query] = useState(() => {
+    return getQuery({ location });
+  });
 
-  const extraOptions = React.useMemo(() => {
-    const options = {};
-    staticParameters.forEach((parameter) => {
-      if (parameter.field && parameter.value) {
-        options[parameter.field] = parameter.value;
-      }
-    });
-    return options;
-  }, [staticParameters]);
+  const [extraParameters] = useState(() =>
+    getParameters({ tableauVisualization, query }),
+  );
+
+  const [extraFilters] = useState(() =>
+    getFilters({ tableauVisualization, query }),
+  );
 
   return (
     <Container id="page-document">
@@ -28,8 +40,7 @@ const VisualizationView = (props) => {
       ) : (
         <Tableau
           data={{
-            ...tableau_visualization,
-            ...pickMetadata(content),
+            ...tableauVisualization,
             with_notes: false,
             with_sources: false,
             with_more_info: false,
@@ -37,14 +48,15 @@ const VisualizationView = (props) => {
             with_enlarge: true,
             with_download: true,
           }}
-          extraOptions={extraOptions}
           breakpoints={
             config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
           }
+          extraParameters={extraParameters}
+          extraFilters={extraFilters}
         />
       )}
     </Container>
   );
 };
 
-export default VisualizationView;
+export default withRouter(VisualizationView);

package/src/Widgets/CreatableSelectWidget.jsx

@@ -0,0 +1,300 @@
+/**
+ * CreatableSelectWidget component.
+ * @module components/manage/Widgets/CreatableSelectWidget
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { map } from 'lodash';
+import { defineMessages, injectIntl } from 'react-intl';
+import {
+  getVocabFromHint,
+  getVocabFromField,
+  getVocabFromItems,
+} from '@plone/volto/helpers';
+import { FormFieldWrapper } from '@plone/volto/components';
+import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
+import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
+
+import {
+  customSelectStyles,
+  DropdownIndicator,
+  ClearIndicator,
+  Option,
+  selectTheme,
+  MenuList,
+  MultiValueContainer,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+const messages = defineMessages({
+  default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  idTitle: {
+    id: 'Short Name',
+    defaultMessage: 'Short Name',
+  },
+  idDescription: {
+    id: 'Used for programmatic access to the fieldset.',
+    defaultMessage: 'Used for programmatic access to the fieldset.',
+  },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  description: {
+    id: 'Description',
+    defaultMessage: 'Description',
+  },
+  close: {
+    id: 'Close',
+    defaultMessage: 'Close',
+  },
+  choices: {
+    id: 'Choices',
+    defaultMessage: 'Choices',
+  },
+  required: {
+    id: 'Required',
+    defaultMessage: 'Required',
+  },
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  no_value: {
+    id: 'No value',
+    defaultMessage: 'No value',
+  },
+  no_options: {
+    id: 'No options',
+    defaultMessage: 'No options',
+  },
+});
+
+/**
+ * CreatableSelectWidget component class.
+ * @function CreatableSelectWidget
+ * @returns {string} Markup of the component.
+ */
+class CreatableSelectWidget extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    required: PropTypes.bool,
+    error: PropTypes.arrayOf(PropTypes.string),
+    getVocabulary: PropTypes.func.isRequired,
+    getVocabularyTokenTitle: PropTypes.func.isRequired,
+    choices: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    ),
+    items: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    widgetOptions: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+      PropTypes.bool,
+      PropTypes.func,
+      PropTypes.array,
+    ]),
+    onChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
+    onClick: PropTypes.func,
+    onEdit: PropTypes.func,
+    onDelete: PropTypes.func,
+    wrapped: PropTypes.bool,
+    noValueOption: PropTypes.bool,
+    customOptionStyling: PropTypes.any,
+    isMulti: PropTypes.bool,
+    creatable: PropTypes.bool,
+    placeholder: PropTypes.string,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    items: {
+      vocabulary: null,
+    },
+    widgetOptions: {
+      vocabulary: null,
+    },
+    error: [],
+    choices: [],
+    value: null,
+    onChange: () => {},
+    onBlur: () => {},
+    onClick: () => {},
+    onEdit: null,
+    onDelete: null,
+    noValueOption: true,
+    customOptionStyling: null,
+  };
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    if (
+      (!this.props.choices || this.props.choices?.length === 0) &&
+      this.props.vocabBaseUrl
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { id, choices, value, intl, onChange } = this.props;
+    const normalizedValue = normalizeValue(choices, value, intl);
+    // Make sure that both disabled and isDisabled (from the DX layout feat work)
+    const disabled = this.props.disabled || this.props.isDisabled;
+    const Select = this.props.creatable
+      ? this.props.reactSelectCreateable.default
+      : this.props.reactSelect.default;
+
+    let options = this.props.vocabBaseUrl
+      ? this.props.choices
+      : [
+          ...map(choices, (option) => ({
+            value: option[0],
+            label:
+              // Fix "None" on the serializer, to remove when fixed in p.restapi
+              option[1] !== 'None' && option[1] ? option[1] : option[0],
+          })),
+          // Only set "no-value" option if there's no default in the field
+          // TODO: also if this.props.defaultValue?
+          ...(this.props.noValueOption && !this.props.default
+            ? [
+                {
+                  label: this.props.intl.formatMessage(messages.no_value),
+                  value: 'no-value',
+                },
+              ]
+            : []),
+        ];
+
+    const isMulti = this.props.isMulti
+      ? this.props.isMulti
+      : id === 'roles' || id === 'groups' || this.props.type === 'array';
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        <Select
+          id={`field-${id}`}
+          key={choices}
+          name={id}
+          menuShouldScrollIntoView={false}
+          isDisabled={disabled}
+          isSearchable={true}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          isMulti={isMulti}
+          options={options}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            ...(options?.length > 25 && {
+              MenuList,
+            }),
+            MultiValueContainer,
+            DropdownIndicator,
+            ClearIndicator,
+            Option: this.props.customOptionStyling || Option,
+          }}
+          value={normalizedValue}
+          placeholder={
+            this.props.placeholder ??
+            this.props.intl.formatMessage(messages.select)
+          }
+          onChange={(selectedOption) => {
+            if (isMulti) {
+              return onChange(
+                id,
+                selectedOption.map((el) => el.value),
+              );
+            }
+            return onChange(
+              id,
+              selectedOption && selectedOption.value !== 'no-value'
+                ? selectedOption.value
+                : undefined,
+            );
+          }}
+          isClearable
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export const CreatableSelectWidgetComponent = injectIntl(CreatableSelectWidget);
+
+export default compose(
+  injectLazyLibs(['reactSelect', 'reactSelectCreateable']),
+  connect(
+    (state, props) => {
+      const vocabBaseUrl = !props.choices
+        ? getVocabFromHint(props) ||
+          getVocabFromField(props) ||
+          getVocabFromItems(props)
+        : '';
+
+      const vocabState =
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
+
+      // If the schema already has the choices in it, then do not try to get the vocab,
+      // even if there is one
+      if (props.choices) {
+        return {
+          choices: props.choices,
+          lang: state.intl.locale,
+        };
+      } else if (vocabState) {
+        return {
+          vocabBaseUrl,
+          choices: vocabState?.items ?? [],
+          lang: state.intl.locale,
+        };
+        // There is a moment that vocabState is not there yet, so we need to pass the
+        // vocabBaseUrl to the component.
+      } else if (vocabBaseUrl) {
+        return {
+          vocabBaseUrl,
+          lang: state.intl.locale,
+        };
+      }
+      return { lang: state.intl.locale };
+    },
+    { getVocabulary, getVocabularyTokenTitle },
+  ),
+)(CreatableSelectWidgetComponent);

package/src/Widgets/VisualizationViewWidget.jsx

@@ -1,27 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
 import config from '@plone/volto/registry';
-import { pickMetadata } from '@eeacms/volto-embed/helpers';
 import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
+import {
+  getQuery,
+  getTableauVisualization,
+  getParameters,
+  getFilters,
+} from '@eeacms/volto-tableau/Tableau/helpers';
 
 function VisualizationViewWidget(props) {
-  const { staticParameters = [] } = props.value;
+  const { location, content } = props;
 
-  const extraOptions = React.useMemo(() => {
-    const options = {};
-    staticParameters.forEach((parameter) => {
-      if (parameter.field && parameter.value) {
-        options[parameter.field] = parameter.value;
-      }
-    });
-    return options;
-  }, [staticParameters]);
+  const [tableauVisualization] = useState(() =>
+    getTableauVisualization({
+      isBlock: false,
+      content,
+    }),
+  );
+  const [query] = useState(() => {
+    return getQuery({ location });
+  });
+
+  const [extraParameters] = useState(() =>
+    getParameters({ tableauVisualization, query }),
+  );
+
+  const [extraFilters] = useState(() =>
+    getFilters({ tableauVisualization, query }),
+  );
 
   return (
     <Tableau
       data={{
-        ...(props.value || {}),
-        ...pickMetadata(props.content),
+        ...tableauVisualization,
         with_notes: false,
         with_sources: false,
         with_more_info: false,
@@ -29,14 +43,16 @@ function VisualizationViewWidget(props) {
         with_enlarge: true,
         with_download: true,
       }}
-      extraOptions={extraOptions}
       breakpoints={
         config.blocks.blocksConfig?.embed_tableau_visualization?.breakpoints
       }
+      extraParameters={extraParameters}
+      extraFilters={extraFilters}
     />
   );
 }
 
-export default connect((state) => ({ content: state.content.data }))(
-  VisualizationViewWidget,
-);
+export default compose(
+  withRouter,
+  connect((state) => ({ content: state?.content?.data })),
+)(VisualizationViewWidget);

package/src/Widgets/VisualizationViewWidget.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { Provider } from 'react-redux';
+
 import VisualizationViewWidget from './VisualizationViewWidget';
 
 describe('VisualizationViewWidget', () => {