@eeacms/volto-tableau 1.3.0 → 3.0.0

package/src/Blocks/EmbedEEATableauBlock/Edit.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { SidebarPortal } from '@plone/volto/components';
+import { getContent } from '@plone/volto/actions';
+import View from './View';
+import Schema from './schema';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+const Edit = (props) => {
+  const { data, block, onChangeBlock, id } = props;
+  const schema = React.useMemo(() => Schema(props), [props]);
+
+  React.useEffect(() => {
+    if (!Object.hasOwn(data, 'show_sources')) {
+      onChangeBlock(block, {
+        ...data,
+        show_sources: true,
+      });
+    }
+  }, [block, data, onChangeBlock]);
+
+  return (
+    <>
+      <View data={data} id={id} />
+      <SidebarPortal selected={props.selected}>
+        <BlockDataForm
+          block={block}
+          title={schema.title}
+          schema={schema}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      block_data: state.content.data,
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(Edit);

package/src/Blocks/EmbedEEATableauBlock/View.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import ConnectedTableau from '../../ConnectedTableau/ConnectedTableau';
+
+import { getContent } from '@plone/volto/actions';
+
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+const View = (props) => {
+  const { data } = props || {};
+  const { vis_url = '' } = data;
+  const show_sources = data?.show_sources ?? false;
+
+  React.useEffect(() => {
+    if (vis_url) {
+      props.getContent(vis_url, null, props.id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vis_url]);
+
+  return (
+    <>
+      {data?.vis_url ? (
+        <>
+          <ConnectedTableau {...props.tableau_visualization} id={props.id} />
+          {show_sources &&
+          data.tableauSources &&
+          props.tableau_visualization ? (
+            ''
+          ) : show_sources ? (
+            <div>Data provenance is not set in the visualization</div>
+          ) : (
+            ''
+          )}
+        </>
+      ) : (
+        <div>Please select a visualization from block editor.</div>
+      )}
+    </>
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+      tableau_visualization:
+        state.content.subrequests?.[props.id]?.data?.tableau_visualization_data,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(View);

package/src/Blocks/EmbedEEATableauBlock/schema.js

@@ -0,0 +1,31 @@
+const Schema = (props) => {
+  return {
+    title: 'Embed EEA Tableau',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['vis_url', 'height', 'show_sources'],
+      },
+    ],
+    properties: {
+      vis_url: {
+        widget: 'object_by_path',
+        title: 'Visualization',
+      },
+      height: {
+        title: 'Height',
+        type: 'number',
+        default: 450,
+      },
+      show_sources: {
+        title: 'Toggle sources',
+        type: 'boolean',
+      },
+    },
+
+    required: ['vis_url'],
+  };
+};
+
+export default Schema;

package/src/ConnectedTableau/ConnectedTableau.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Tableau from '@eeacms/volto-tableau/Tableau/View';
+
+const ConnectedTableau = (props) => {
+  const [error, setError] = React.useState(null);
+  const [loaded, setLoaded] = React.useState(null);
+  return (
+    <div className="tableau-block">
+      <Tableau
+        error={error}
+        loaded={loaded}
+        setError={setError}
+        setLoaded={setLoaded}
+        data={{ ...props?.general, ...props?.options, ...props?.extraOptions }}
+        url={props?.general?.url}
+      />
+    </div>
+  );
+};
+
+export default ConnectedTableau;

package/src/Tableau/View.jsx

@@ -5,7 +5,7 @@ import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
 import { setTableauApi } from '@eeacms/volto-tableau/actions';
 import cx from 'classnames';
-import { isMyScriptLoaded, loadTableauScript } from '../helpers';
+import { loadTableauScript } from '../helpers';
 
 const Tableau = (props) => {
   const ref = React.useRef(null);
@@ -36,7 +36,7 @@ const Tableau = (props) => {
   const url = props.url || defaultUrl;
 
   //load tableau from script tag
-  const tableau = isMyScriptLoaded(version) && __CLIENT__ ? window.tableau : '';
+  const tableau = loadTableauScript(() => {}, version);
 
   const onFilterChange = (filter) => {
     const newFilters = { ...filters.current };
@@ -186,6 +186,7 @@ const Tableau = (props) => {
     tableau,
     toolbarPosition,
     url,
+    version,
   ]);
 
   React.useEffect(() => {
@@ -205,6 +206,19 @@ const Tableau = (props) => {
   return (
     <div id="tableau-wrap">
       <div id="tableau-outer">
+        {data && Object.keys(data).length > 0 ? (
+          <>
+            {loaded ? (
+              ''
+            ) : (
+              <div className="tableau-loader">
+                <span>Loading Tableau v{version}</span>
+              </div>
+            )}
+          </>
+        ) : (
+          <div>No data present in that visualization.</div>
+        )}
         <div
           className={cx('tableau', version, {
             'tableau-scale': autoScale,

package/src/TableauBlock/View.jsx

@@ -47,6 +47,11 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, []);
 
+  React.useEffect(() => {
+    if (props.setTableauError) props.setTableauError(error);
+    /* eslint-disable-next-line */
+  }, [error]);
+
   React.useEffect(() => {
     const newExtraFilters = { ...extraFilters };
     urlParameters.forEach((element) => {

package/src/Views/VisualizationView.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import TableauView from '../TableauBlock/View';
+
+const VisualizationView = (props) => {
+  const [tableauError, setTableauError] = React.useState('');
+  const { content = {} } = props;
+  const { tableau_visualization_data = {} } = content;
+
+  const TableauNotDisplayed = () => {
+    return (
+      <div className="tableau-block not_displayed_tableau">
+        <div className="tableau-info">
+          {!tableau_visualization_data.general?.url ? (
+            <p className="tableau-error">URL required</p>
+          ) : tableauError ? (
+            <p className="tableau-error">{tableauError}</p>
+          ) : (
+            ''
+          )}
+        </div>
+      </div>
+    );
+  };
+  return (
+    <div>
+      {!tableau_visualization_data.general?.url || tableauError ? (
+        <TableauNotDisplayed />
+      ) : (
+        ''
+      )}
+      <TableauView
+        setTableauError={setTableauError}
+        data={{
+          ...tableau_visualization_data.general,
+          ...tableau_visualization_data.options,
+          ...tableau_visualization_data.extraOptions,
+        }}
+      />
+    </div>
+  );
+};
+
+export default VisualizationView;

package/src/Views/index.js

@@ -0,0 +1,3 @@
+import VisualizationView from './VisualizationView';
+
+export { VisualizationView };

package/src/Widgets/VisualizationWidget.jsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { Modal, Button, Grid } from 'semantic-ui-react';
+import '@eeacms/volto-tableau/less/tableau.less';
+import config from '@plone/volto/registry';
+
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+
+import TableauView from '../TableauBlock/View';
+import Schema from './schema';
+
+const VisualizationWidget = (props) => {
+  const [open, setOpen] = React.useState(false);
+  const { onChange = {}, id } = props;
+
+  const block = React.useMemo(() => props.block, [props.block]);
+  const value = React.useMemo(() => props.value, [props.value]);
+
+  const [intValue, setIntValue] = React.useState(value);
+  const [tableauError, setTableauError] = React.useState('');
+
+  const dataForm = { tableau_data: intValue };
+
+  const handleApplyChanges = () => {
+    onChange(id, intValue);
+    setOpen(false);
+  };
+
+  const handleClose = () => {
+    setIntValue(value);
+    setOpen(false);
+  };
+
+  const handleChangeField = (val) => {
+    setIntValue(val);
+  };
+
+  const TableauNotDisplayed = () => {
+    return (
+      <div className="tableau-block not_displayed_tableau">
+        <div className="tableau-info">
+          {intValue && intValue.general && !intValue.general.url ? (
+            <p className="tableau-error">URL required</p>
+          ) : tableauError ? (
+            <p className="tableau-error">{tableauError}</p>
+          ) : (
+            ''
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  let schema = Schema(config);
+
+  React.useEffect(() => {
+    if (!intValue?.options) {
+      setIntValue({
+        ...intValue,
+        options: {
+          autoScale: false,
+          hideTabs: false,
+          hideToolbar: false,
+          toolbarPosition: 'Top',
+        },
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [intValue]);
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div className="wrapper">
+        <Button
+          floated="right"
+          size="tiny"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen(true);
+          }}
+        >
+          Open Tableau Editor
+        </Button>
+      </div>
+
+      {open && (
+        <Modal
+          id="tableau-editor-modal"
+          style={{ width: '95% !important' }}
+          open={true}
+        >
+          <Modal.Content scrolling>
+            <Grid stackable reversed="mobile vertically tablet vertically">
+              <Grid.Column
+                mobile={12}
+                tablet={12}
+                computer={5}
+                className="tableau-editor-column"
+              >
+                <InlineForm
+                  block={block}
+                  schema={schema}
+                  onChangeField={(id, value) => {
+                    handleChangeField(value);
+                  }}
+                  formData={dataForm}
+                />
+              </Grid.Column>
+              <Grid.Column mobile={12} tablet={12} computer={7}>
+                {(intValue && intValue.general && !intValue.general.url) ||
+                tableauError ? (
+                  <TableauNotDisplayed />
+                ) : (
+                  ''
+                )}
+                <div className="tableau-container">
+                  <TableauView
+                    setTableauError={setTableauError}
+                    data={{
+                      ...intValue?.general,
+                      ...intValue?.options,
+                      ...intValue?.extraOptions,
+                    }}
+                  />
+                </div>
+              </Grid.Column>
+            </Grid>
+          </Modal.Content>
+          <Modal.Actions>
+            <Grid>
+              <Grid.Row>
+                <div className="map-edit-actions-container">
+                  <Button onClick={handleClose}>Close</Button>
+                  <Button color="green" onClick={handleApplyChanges}>
+                    Apply changes
+                  </Button>
+                </div>
+              </Grid.Row>
+            </Grid>
+          </Modal.Actions>
+        </Modal>
+      )}
+      {(intValue && intValue.general && !intValue.general.url) ||
+      tableauError ? (
+        <TableauNotDisplayed />
+      ) : (
+        ''
+      )}
+
+      <TableauView
+        setTableauError={setTableauError}
+        data={{ ...value?.general, ...value?.options, ...value?.extraOptions }}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+export default VisualizationWidget;

package/src/Widgets/index.js

@@ -0,0 +1,3 @@
+import VisualizationWidget from './VisualizationWidget';
+
+export { VisualizationWidget };

package/src/Widgets/schema.js

@@ -0,0 +1,176 @@
+const generalSchema = {
+  title: 'General',
+
+  fieldsets: [
+    {
+      id: 'general',
+      title: 'General',
+      fields: ['url'],
+    },
+  ],
+
+  properties: {
+    url: {
+      title: 'Url',
+      type: 'textarea',
+    },
+  },
+  required: ['url'],
+};
+
+const optionsSchema = {
+  title: 'Options',
+
+  fieldsets: [
+    {
+      id: 'options',
+      title: 'Options',
+      fields: [
+        'sheetname',
+        'hideTabs',
+        'hideToolbar',
+        'autoScale',
+        'toolbarPosition',
+      ],
+    },
+  ],
+
+  properties: {
+    sheetname: {
+      title: 'Sheetname',
+      type: 'text',
+    },
+    hideTabs: {
+      title: 'Hide tabs',
+      type: 'boolean',
+      default: false,
+    },
+    hideToolbar: {
+      title: 'Hide toolbar',
+      type: 'boolean',
+      default: false,
+    },
+    autoScale: {
+      title: 'Auto scale',
+      type: 'boolean',
+      default: false,
+      description: 'Scale down tableau according to width',
+    },
+    toolbarPosition: {
+      title: 'Toolbar position',
+      type: 'array',
+      choices: [
+        ['Top', 'Top'],
+        ['Bottom', 'Bottom'],
+      ],
+      default: 'Top',
+    },
+  },
+  required: [],
+};
+
+const urlParametersSchema = {
+  title: 'Parameter',
+  fieldsets: [
+    { id: 'default', title: 'Default', fields: ['field', 'urlParam'] },
+  ],
+  properties: {
+    field: {
+      title: 'Tableau fieldname',
+      type: 'text',
+    },
+    urlParam: {
+      title: 'URL param',
+      type: 'text',
+    },
+  },
+  required: [],
+};
+
+const breakpointUrlSchema = (config) => {
+  const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints;
+
+  return {
+    title: 'URL',
+    fieldsets: [{ id: 'default', title: 'Default', fields: ['device', 'url'] }],
+    properties: {
+      device: {
+        title: 'Device',
+        type: 'array',
+        choices: Object.keys(breakpoints).map((breakpoint) => [
+          breakpoint,
+          breakpoint,
+        ]),
+      },
+      url: {
+        title: 'Url',
+        widget: 'textarea',
+      },
+    },
+    required: [],
+  };
+};
+
+const extraOptionsSchema = (config) => {
+  return {
+    title: 'Extra Options',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Extra Options Data',
+        fields: ['urlParameters', 'breakpointUrls'],
+      },
+    ],
+
+    properties: {
+      urlParameters: {
+        title: 'URL parameters',
+        widget: 'object_list',
+        schema: urlParametersSchema,
+        description: 'Set a list of url parameters to filter the tableau',
+      },
+      breakpointUrls: {
+        title: 'Breakpoint urls',
+        widget: 'object_list',
+        schema: breakpointUrlSchema(config),
+        description: 'Set different vizualization for specific breakpoint',
+      },
+    },
+    required: [],
+  };
+};
+
+export default (config) => {
+  return {
+    title: 'Tableau Editor',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Tableau Editor Sections',
+        fields: ['tableau_data'],
+      },
+    ],
+    properties: {
+      tableau_data: {
+        title: 'Panels',
+        widget: 'object_types_widget',
+        schemas: [
+          {
+            id: 'general',
+            schema: generalSchema,
+          },
+          {
+            id: 'options',
+            schema: optionsSchema,
+          },
+          {
+            id: 'extraOptions',
+            schema: extraOptionsSchema(config),
+          },
+        ],
+      },
+    },
+    required: [],
+  };
+};

package/src/Widgets/style.less

@@ -0,0 +1,8 @@
+.sidebar-container-enter-done {
+  z-index: 1001 !important;
+}
+
+.field-provider-data-action-button {
+  border: 1px solid #c7d5d8;
+  cursor: pointer;
+}

package/src/helpers.js

@@ -1,5 +1,5 @@
 const loadTableauScript = (callback, version) => {
-  const existingScript = document.getElementById(`tableauJS`);
+  const existingScript = __CLIENT__ && document.getElementById(`tableauJS`);
   //replace script loaded on each version change
   if (existingScript) {
     existingScript.setAttribute(
@@ -7,7 +7,7 @@ const loadTableauScript = (callback, version) => {
       `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`,
     );
   }
-  if (!existingScript) {
+  if (!existingScript && __CLIENT__) {
     const script = document.createElement('script');
     script.src = `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`;
     script.id = `tableauJS`;
@@ -18,14 +18,21 @@ const loadTableauScript = (callback, version) => {
   }
   //callback, if needed
   if (existingScript && callback) callback();
+
+  const tableau = isMyScriptLoaded(version) && __CLIENT__ ? window.tableau : '';
+  return tableau;
 };
 
-const isMyScriptLoaded = (id) => {
+const isMyScriptLoaded = (version) => {
   //check for loaded Tableau script in dom scripts
   var scripts = document.getElementsByTagName('script');
   for (var i = scripts.length; i--; ) {
     // eslint-disable-next-line eqeqeq
-    if (scripts[i].id == `tableauJS`) return true;
+    if (
+      scripts[i].src ===
+      `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`
+    )
+      return true;
   }
   return false;
 };

package/src/index.js

@@ -1,6 +1,10 @@
 import sliderSVG from '@plone/volto/icons/slider.svg';
 import TableauEdit from './TableauBlock/Edit';
 import TableauView from './TableauBlock/View';
+import EmbedTableauView from './Blocks/EmbedEEATableauBlock/View';
+import EmbedTableauEdit from './Blocks/EmbedEEATableauBlock/Edit';
+import { VisualizationView } from './Views';
+import { VisualizationWidget } from './Widgets';
 
 import tableauStore from './store';
 
@@ -44,6 +48,31 @@ const applyConfig = (config) => {
     },
   };
 
+  config.blocks.blocksConfig.embed_eea_tableau_block = {
+    id: 'embed_eea_tableau_block',
+    title: 'Embed EEA Tableau',
+    icon: sliderSVG,
+    group: 'common',
+    edit: EmbedTableauEdit,
+    view: EmbedTableauView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    breakpoints: {
+      desktop: [Infinity, 982],
+      tablet: [981, 768],
+      mobile: [767, 0],
+    },
+  };
+
+  config.views.contentTypesViews.tableau_visualization = VisualizationView;
+  config.widgets.id.tableau_visualization_data = VisualizationWidget;
+
   return config;
 };