Customize TableauBlock from volto-tableau

src/components/index.js

@@ -32,6 +32,7 @@ import installPollutantIndex from './manage/Blocks/PollutantIndex';
 /*---  Custom connected blocks  ---*/
 import installCustomConnectedList from './manage/Blocks/List';
 import installCustomConnectedSelect from './manage/Blocks/Select';
+import installCustomTableau from './manage/Blocks/TableauBlock';
 /*---  App extras  ---*/
 import installAppExtras from './theme/AppExtras';
 
@@ -48,10 +49,11 @@ const installCustomViews = (config) => {
 };
 
 const installCustomConnectedBlocks = (config) => {
-  return [installCustomConnectedList, installCustomConnectedSelect].reduce(
-    (acc, apply) => apply(acc),
-    config,
-  );
+  return [
+    installCustomConnectedList,
+    installCustomConnectedSelect,
+    installCustomTableau,
+  ].reduce((acc, apply) => apply(acc), config);
 };
 
 const installEprtrSpecificBlocks = (config) => {

src/components/manage/Blocks/FiltersBlock/schema.js

@@ -13,7 +13,7 @@ const providerSchema = {
     },
     url: {
       title: 'Provider url',
-      widget: 'object_by_path',
+      widget: 'url',
     },
   },
   required: [],

src/components/manage/Blocks/IndustryDataTable/schema.js

@@ -10,7 +10,7 @@ export default () => ({
   properties: {
     link: {
       title: 'Site details path',
-      widget: 'object_by_path',
+      widget: 'url',
     },
   },
   required: [],

src/components/manage/Blocks/IndustryMap/schema.js

@@ -13,7 +13,7 @@ const providerSchema = {
     },
     url: {
       title: 'Provider url',
-      widget: 'object_by_path',
+      widget: 'url',
     },
   },
   required: [],

src/components/manage/Blocks/List/schema.js

@@ -44,7 +44,7 @@ const getSchema = (props) => {
     properties: {
       url: {
         title: 'Url',
-        widget: 'object_by_path',
+        widget: 'url',
       },
       value: {
         title: 'Value',

src/components/manage/Blocks/NavigationBlock/schema.js

@@ -31,7 +31,7 @@ export default {
   properties: {
     parent: {
       title: 'Parent',
-      widget: 'object_by_path',
+      widget: 'url',
     },
     pages: {
       title: 'Pages',

src/components/manage/Blocks/PollutantIndex/schema.js

@@ -13,7 +13,7 @@ const providerSchema = {
     },
     url: {
       title: 'Provider url',
-      widget: 'object_by_path',
+      widget: 'url',
     },
   },
   required: [],

src/components/manage/Blocks/Select/schema.js

@@ -44,7 +44,7 @@ const getSchema = (props) => {
     properties: {
       url: {
         title: 'Url',
-        widget: 'object_by_path',
+        widget: 'url',
       },
       value: {
         title: 'Value',

src/components/manage/Blocks/SiteStructureSidebar/schema.js

@@ -13,7 +13,7 @@ const getSchema = (props) => {
     properties: {
       pathname: {
         title: 'Parent pathname',
-        widget: 'object_by_path',
+        widget: 'url',
       },
       pages: {
         title: 'Pages',

src/components/manage/Blocks/SiteTableau/schema.js

@@ -85,7 +85,7 @@ export default (config, provider_keys = []) => ({
     },
     provider_url: {
       title: 'Data provider',
-      widget: 'object_by_path',
+      widget: 'url',
     },
     allowedParams: {
       title: 'Allowed params',

src/components/manage/Blocks/TableauBlock/Edit.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import config from '@plone/volto/registry';
+import getSchema from './schema';
+import View from './View';
+
+const Edit = (props) => {
+  const [schema] = React.useState(getSchema(config));
+
+  return (
+    <>
+      <View {...props} mode="edit" />
+
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

src/components/manage/Blocks/TableauBlock/View.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
+import Tableau from '@eeacms/volto-tableau/Tableau/View';
+import config from '@plone/volto/registry';
+import { getLatestTableauVersion } from 'tableau-api-js';
+import qs from 'querystring';
+import '@eeacms/volto-tableau/less/tableau.less';
+
+const getDevice = (config, width) => {
+  const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints;
+  let device = 'default';
+  Object.keys(breakpoints).forEach((breakpoint) => {
+    if (
+      width <= breakpoints[breakpoint][0] &&
+      width >= breakpoints[breakpoint][1]
+    ) {
+      device = breakpoint;
+    }
+  });
+  return device;
+};
+
+const View = (props) => {
+  const [error, setError] = React.useState(null);
+  const [loaded, setLoaded] = React.useState(null);
+  const [mounted, setMounted] = React.useState(false);
+  const [extraFilters, setExtraFilters] = React.useState({});
+  const { data = {}, query = {}, screen = {} } = props;
+  const {
+    breakpointUrls = [],
+    urlParameters = [],
+    title = null,
+    description = null,
+    autoScale = false,
+  } = data;
+  const version =
+    props.data.version ||
+    config.settings.tableauVersion ||
+    getLatestTableauVersion();
+  const device = getDevice(config, screen.page?.width || Infinity);
+  const breakpointUrl = breakpointUrls.filter(
+    (breakpoint) => breakpoint.device === device,
+  )[0]?.url;
+  const url = breakpointUrl || data.url;
+
+  React.useEffect(() => {
+    setMounted(true);
+    /* eslint-disable-next-line */
+  }, []);
+
+  React.useEffect(() => {
+    const newExtraFilters = { ...extraFilters };
+    urlParameters.forEach((element) => {
+      if (element.field && typeof query[element.urlParam] !== 'undefined') {
+        newExtraFilters[element.field] = query[element.urlParam];
+      } else if (newExtraFilters[element.field]) {
+        delete newExtraFilters[element.field];
+      }
+    });
+    setExtraFilters(newExtraFilters);
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(query), JSON.stringify(urlParameters)]);
+
+  return mounted ? (
+    <div className="tableau-block">
+      {props.mode === 'edit' ? (
+        <div className="tableau-info">
+          <h3 className="tableau-version">== Tableau {version} ==</h3>
+          {!props.data.url ? <p className="tableau-error">URL required</p> : ''}
+          {error ? <p className="tableau-error">{error}</p> : ''}
+        </div>
+      ) : (
+        ''
+      )}
+      {loaded && title ? <h3 className="tableau-title">{title}</h3> : ''}
+      {loaded && description ? (
+        <p className="tableau-description">{description}</p>
+      ) : (
+        ''
+      )}
+      <Tableau
+        {...props}
+        canUpdateUrl={!breakpointUrl}
+        extraFilters={extraFilters}
+        extraOptions={{ device: autoScale ? 'desktop' : device }}
+        error={error}
+        loaded={loaded}
+        setError={setError}
+        setLoaded={setLoaded}
+        version={version}
+        url={url}
+      />
+    </div>
+  ) : (
+    ''
+  );
+};
+
+export default compose(
+  connect((state, props) => ({
+    query: {
+      ...(qs.parse(state.router.location?.search?.replace('?', '')) || {}),
+      ...(state.query?.search || {}),
+    },
+    screen: state.screen,
+  })),
+)(withRouter(View));

src/components/manage/Blocks/TableauBlock/index.js

@@ -0,0 +1,28 @@
+import sliderSVG from '@plone/volto/icons/slider.svg';
+import TableauEdit from './Edit';
+import TableauView from './View';
+
+export default (config) => {
+  config.blocks.blocksConfig.tableau_block = {
+    id: 'tableau_block',
+    title: 'Tableau',
+    icon: sliderSVG,
+    group: 'common',
+    edit: TableauEdit,
+    view: TableauView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    breakpoints: {
+      desktop: [Infinity, 982],
+      tablet: [981, 768],
+      mobile: [767, 0],
+    },
+  };
+  return config;
+};