Add placeholder in case of errors

eea · Jan 10, 2023 · 1af2d0d · 1af2d0d
1 parent f9a8fc5
commit 1af2d0d
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 5 deletions.
diff --git a/src/Blocks/EmbedEEATableauBlock/Edit.jsx b/src/Blocks/EmbedEEATableauBlock/Edit.jsx
@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 
 const Edit = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { data, block, onChangeBlock, id } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
 
   React.useEffect(() => {
@@ -20,9 +20,14 @@ const Edit = (props) => {
     }
   }, [block, data, onChangeBlock]);
 
+  React.useEffect(() => {
+    props.getContent(data.vis_url, null, id);
+    //    eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.vis_url]);
+
   return (
     <>
-      <View data={data} mode="edit" />
+      <View data={data} id={id} mode="edit" />
       <SidebarPortal selected={props.selected}>
         <BlockDataForm
           block={block}

diff --git a/src/Blocks/EmbedEEATableauBlock/View.jsx b/src/Blocks/EmbedEEATableauBlock/View.jsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import TableauView from '../../TableauBlock/View';
 import { Sources } from '../../Sources';
+import { getContent } from '@plone/volto/actions';
+
+import { connect } from 'react-redux';
+import { compose } from 'redux';
 
 const View = (props) => {
   const { data } = props || {};
@@ -11,7 +15,8 @@ const View = (props) => {
     if (vis_url) {
       props.getContent(vis_url, null);
     }
-  }, [vis_url, props]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vis_url]);
 
   return (
     <>
@@ -22,4 +27,16 @@ const View = (props) => {
   );
 };
 
-export default View;
+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);
diff --git a/src/TableauBlock/View.jsx b/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) => {

diff --git a/src/Views/VisualizationView.jsx b/src/Views/VisualizationView.jsx
@@ -2,12 +2,34 @@ 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,

diff --git a/src/Widgets/VisualizationWidget.jsx b/src/Widgets/VisualizationWidget.jsx
@@ -1,5 +1,6 @@
 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';
@@ -15,8 +16,10 @@ const VisualizationWidget = (props) => {
   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);
@@ -31,6 +34,22 @@ const VisualizationWidget = (props) => {
     setIntValue(val);
   };
 
+  const TableauNotDisplayed = () => {
+    return (
+      <div className="tableau-block not_displayed_tableau">
+        <div className="tableau-info">
+          {!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(() => {
@@ -88,8 +107,14 @@ const VisualizationWidget = (props) => {
                 />
               </Grid.Column>
               <Grid.Column mobile={12} tablet={12} computer={7}>
-                <div className="webmap-container">
+                {!intValue.general.url || tableauError ? (
+                  <TableauNotDisplayed />
+                ) : (
+                  ''
+                )}
+                <div className="tableau-container">
                   <TableauView
+                    setTableauError={setTableauError}
                     data={{
                       ...intValue.general,
                       ...intValue.options,
@@ -114,7 +139,10 @@ const VisualizationWidget = (props) => {
           </Modal.Actions>
         </Modal>
       )}
+      {!intValue.general.url || tableauError ? <TableauNotDisplayed /> : ''}
+
       <TableauView
+        setTableauError={setTableauError}
         data={{ ...value.general, ...value.options, ...value.extraOptions }}
       />
     </FormFieldWrapper>

diff --git a/src/less/tableau.less b/src/less/tableau.less
@@ -49,4 +49,20 @@
   }
 }
 
+.not_displayed_tableau {
+  background-color: #ebebeb;
+  height: 100%;
+  width: 100%;
+  min-width: 633px;
+  min-height: 200px;
+}
+
+.tableau-block {
+  .tableau-info {
+    p.tableau-error {
+      padding: 10px;
+    }
+  }
+}
+
 .loadAddonOverrides();