Improvments on site blocks

jsconfig.json

@@ -19,6 +19,9 @@
             "@eeacms/volto-grid-block": [
                 "addons/volto-grid-block/src"
             ],
+            "@eeacms/volto-tableau": [
+                "addons/volto-tableau/src"
+            ],
             "@eeacms/volto-tabs-block": [
                 "addons/volto-tabs-block/src"
             ]

mrs.developer.json

@@ -38,6 +38,13 @@
     "package": "@eeacms/volto-grid-block",
     "develop": true
   },
+  "volto-tableau": {
+    "url": "https://github.com/eea/volto-tableau.git",
+    "path": "src",
+    "package": "@eeacms/volto-tableau",
+    "branch": "master",
+    "develop": true
+  },
   "volto-tabs-block": {
     "url": "https://github.com/eea/volto-tabs-block.git",
     "path": "src",

package.json

@@ -45,6 +45,7 @@
     "volto-datablocks",
     "volto-embed",
     "volto-addons",
+    "@eeacms/volto-tableau",
     "@eeacms/volto-block-style",
     "@eeacms/volto-tabs-block"
   ],
@@ -66,6 +67,7 @@
     "react-iframe": "^1.8.0",
     "react-tooltip": "^4.2.9",
     "react-visibility-sensor": "^5.1.1",
+    "tableau-api-js": "github:eea/tableau-api-js#1.1.0",
     "volto-slate": "github:eea/volto-slate#2.4.0"
   },
   "devDependencies": {

src/components/manage/Blocks/DiscodataComponents/Custom/View.jsx

@@ -154,7 +154,7 @@ const ReportingYears = (props) => {
     >
       <div>
         <span className="floating-icon" data-tip={'Something'}>
-          <Icon name={infoSVG} size={20} color="#fff" />
+          <Icon name={infoSVG} size="20px" color="#fff" />
         </span>
         <p className="lighter">Last report was submitted on:</p>
         <p className="bold">{getDate(packages[0])}</p>

src/components/manage/Blocks/DiscodataComponents/Text/View.jsx

@@ -22,7 +22,7 @@ const components = {
       {components.bold(bold, text)}
       {tooltip && tooltipText ? (
         <span data-tip={tooltip && tooltipText ? tooltipText : false}>
-          <Icon name={infoSVG} size={20} color={color} />
+          <Icon name={infoSVG} size="20px" color={color} />
         </span>
       ) : (
         ''

src/components/manage/Blocks/DiscodataOpenlayersMapBlock/PrivacyProtection.jsx

@@ -72,7 +72,7 @@ export default ({ children, data = {}, block, onShow, ...rest }) => {
                         className="floating-icon mr-1"
                         data-tip={dataprotection.privacy_statement}
                       >
-                        <Icon name={infoSVG} size={20} color="#D63D27" />
+                        <Icon name={infoSVG} size="20px" color="#D63D27" />
                       </span>
                     ) : (
                       ''

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

@@ -144,7 +144,7 @@ const OpenlayersMapView = (props) => {
   const siteTerm =
     filterSource !== 'query_params'
       ? props.discodata_query.search.siteTerm || null
-      : props.discodata_query.search[queryParams?.siteName?.param] || null;
+      : props.query.siteName || null;
 
   useEffect(() => {
     if (__CLIENT__ && document) {
@@ -363,7 +363,8 @@ const OpenlayersMapView = (props) => {
         },
         // Reporting year
         reportingYear: {
-          sql: `(Site_reporting_year IN (:options))`,
+          sql: `(Site_reporting_year = :options)`,
+          type: 'multiple',
         },
         // Plant type
         plantTypes: {
@@ -416,13 +417,7 @@ const OpenlayersMapView = (props) => {
           where.sql = null;
         }
       } else {
-        if (id === 'reportingYear' && options) {
-          where.sql = options
-            ? where.sql.replace(/:options/g, options).replace(/'/g, '')
-            : null;
-        } else {
-          where.sql = options ? where.sql.replace(/:options/g, options) : null;
-        }
+        where.sql = options ? where.sql.replace(/:options/g, options) : null;
       }
       if (!where.sql) delete sitesSourceQuery.whereStatements[id];
     });
@@ -1441,7 +1436,7 @@ const OpenlayersMapView = (props) => {
 export default compose(
   connect(
     (state, props) => ({
-      query: state.router.location.search,
+      query: qs.parse(state.router.location.search.replace('?', '')),
       content:
         state.prefetch?.[state.router.location.pathname] || state.content.data,
       discodata_query: state.discodata_query,

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import _uniqueId from 'lodash/uniqueId';
@@ -151,18 +151,17 @@ const Edit = (props) => {
     schema: getSchema({ ...props, providerUrl: config.settings.providerUrl }),
     id: _uniqueId('block_'),
   });
-  // useEffect(() => {
 
-  // }, [discodata_query, flags]);
   return (
     <div>
+      <View {...props} id={state.id} mode="edit" />
+
       <RenderFields
         schema={state.schema}
         {...props}
         title="Iframe"
         noValueKey={true}
       />
-      <View {...props} id={state.id} mode="edit" />
     </div>
   );
 };

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

@@ -204,7 +204,7 @@ const View = ({ content, ...props }) => {
             <div className="header-tooltip">
               <h3 className={cx('blue', titleClassName)}>{title}</h3>
               <span className="floating-icon" data-tip={'This is a tooltip'}>
-                <Icon name={infoSVG} size={20} color="#D63D27" />
+                <Icon name={infoSVG} size="20px" color="#D63D27" />
               </span>
             </div>
           ) : title ? (

src/components/manage/Blocks/SiteBlocks/BatConclusions.jsx

@@ -27,7 +27,7 @@ const View = (props) => {
           content="Number of individual conclusions that indicate which techniques or combinations of techniques are BAT for achieving a specific environmental objective"
           trigger={
             <div className="popup-svg">
-              <Icon name={infoSVG} size={20} color="#D63D27" />
+              <Icon name={infoSVG} size="20px" color="#D63D27" />
             </div>
           }
         />
@@ -86,7 +86,7 @@ const View = (props) => {
                                             ? downSVG
                                             : rightSVG
                                         }
-                                        size={20}
+                                        size="20px"
                                         color="#D63D27"
                                         onClick={() => {
                                           if (

src/components/manage/Blocks/SiteBlocks/CompetentAuthority.jsx

@@ -16,7 +16,7 @@ const CompetentAuthority = (props) => {
           content="Authority, body or bodies responsible for regulating the facility and reporting the associated E-PRTR data, as designated by the reporting country"
           trigger={
             <div className="popup-svg">
-              <Icon name={infoSVG} size={20} color="#ed776a" />
+              <Icon name={infoSVG} size="20px" color="#ed776a" />
             </div>
           }
         />

src/components/manage/Blocks/SiteBlocks/EnvironmentalFacilityDetails/View.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { setQueryParam, deleteQueryParam } from 'volto-datablocks/actions';
 import CompetentAuthority from '../CompetentAuthority';
 import { getDate } from '../helpers';
 import qs from 'querystring';
@@ -19,7 +18,7 @@ const getAllIndexes = (arr, val) => {
 const View = (props) => {
   const [facilities, setFacilities] = React.useState([]);
   const { provider_data = {} } = props;
-  const query = { ...props.query, ...props.discodata_query.search };
+  const query = { ...props.query };
   const siteReportingYear = parseInt(query.siteReportingYear || '');
 
   const competentAuthority = facilities
@@ -74,14 +73,7 @@ const View = (props) => {
 };
 
 export default compose(
-  connect(
-    (state, props) => ({
-      query: qs.parse(state.router.location.search.replace('?', '')),
-      discodata_query: state.discodata_query,
-    }),
-    {
-      setQueryParam,
-      deleteQueryParam,
-    },
-  ),
+  connect((state, props) => ({
+    query: qs.parse(state.router.location.search.replace('?', '')),
+  })),
 )(View);

src/components/manage/Blocks/SiteBlocks/EnvironmentalLcpDetails/View.jsx

@@ -8,7 +8,7 @@ import '../style.css';
 const View = (props) => {
   const [lcp, setLcp] = React.useState({});
   const { provider_data = {} } = props;
-  const query = { ...props.query, ...props.discodata_query.search };
+  const query = { ...props.query };
   const { lcpInspireId = null } = query;
   const siteReportingYear = parseInt(query.siteReportingYear || '');
   const index = provider_data?.euregReportingYear?.indexOf(siteReportingYear);
@@ -72,6 +72,5 @@ const View = (props) => {
 export default compose(
   connect((state, props) => ({
     query: qs.parse(state.router.location.search.replace('?', '')),
-    discodata_query: state.discodata_query,
   })),
 )(View);

src/components/manage/Blocks/SiteBlocks/EnvironmentalSiteDetails/View.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { setQueryParam, deleteQueryParam } from 'volto-datablocks/actions';
 import CompetentAuthority from '../CompetentAuthority';
 import { getDate, getLonLat } from '../helpers';
 import { Grid } from 'semantic-ui-react';
@@ -21,7 +20,7 @@ const View = (props) => {
   const [siteDetails, setSiteDetails] = React.useState({});
   const [facilities, setFacilities] = React.useState([]);
   const { provider_data = {} } = props;
-  const query = { ...props.query, ...props.discodata_query.search };
+  const query = { ...props.query };
   const siteReportingYear = parseInt(query.siteReportingYear || '');
 
   const facilityList = [
@@ -135,14 +134,7 @@ const View = (props) => {
 };
 
 export default compose(
-  connect(
-    (state, props) => ({
-      query: qs.parse(state.router.location.search.replace('?', '')),
-      discodata_query: state.discodata_query,
-    }),
-    {
-      setQueryParam,
-      deleteQueryParam,
-    },
-  ),
+  connect((state, props) => ({
+    query: qs.parse(state.router.location.search.replace('?', '')),
+  })),
 )(View);

src/components/manage/Blocks/SiteBlocks/Header/View.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { Grid, Dropdown } from 'semantic-ui-react';
-import { setQueryParam, deleteQueryParam } from 'volto-datablocks/actions';
 import qs from 'querystring';
 import './style.css';
 
@@ -14,13 +13,14 @@ const getQueryString = (query) => {
 const View = (props) => {
   const [siteHeader, setSiteHeader] = React.useState({});
   const { provider_data = {} } = props;
-  const query = { ...props.query, ...props.discodata_query.search };
+  const query = { ...props.query };
   const siteReportingYear = parseInt(query.siteReportingYear || '');
   const index = provider_data?.euregReportingYear?.indexOf(siteReportingYear);
 
-  const reportingYears = provider_data.euregReportingYear?.length
+  const reportingYears = provider_data?.euregReportingYear?.length
     ? provider_data.euregReportingYear
         .filter((year) => year)
+        .sort()
         .map((year) => ({
           key: year,
           value: year,
@@ -131,11 +131,6 @@ const View = (props) => {
                       ignoreScrollBehavior: true,
                     },
                   });
-                  props.setQueryParam({
-                    queryParam: {
-                      siteReportingYear: data.value,
-                    },
-                  });
                 }}
                 placeholder={'Select'}
                 options={reportingYears}
@@ -153,14 +148,7 @@ const View = (props) => {
 };
 
 export default compose(
-  connect(
-    (state, props) => ({
-      query: qs.parse(state.router.location.search.replace('?', '')),
-      discodata_query: state.discodata_query,
-    }),
-    {
-      setQueryParam,
-      deleteQueryParam,
-    },
-  ),
+  connect((state, props) => ({
+    query: qs.parse(state.router.location.search.replace('?', '')),
+  })),
 )(View);

src/components/manage/Blocks/SiteBlocks/PermitingAuthority.jsx

@@ -24,7 +24,7 @@ const PermitingAuthority = (props) => {
           content="Authority, body or bodies responsible for issuing a permit to a given facility"
           trigger={
             <div className="popup-svg">
-              <Icon name={infoSVG} size={20} color="#D63D27" />
+              <Icon name={infoSVG} size="20px" color="#D63D27" />
             </div>
           }
         />

src/components/manage/Blocks/SiteBlocks/RegulatoryBATConclusions/View.jsx

@@ -18,7 +18,7 @@ const View = (props) => {
   const [batConclusions, setBatConclusions] = React.useState({});
   const [installationsNth, setInstallationsNth] = React.useState({});
   const { provider_data = {} } = props;
-  const query = { ...props.query, ...props.discodata_query.search };
+  const query = { ...props.query };
   const siteReportingYear = parseInt(query.siteReportingYear || '');
 
   React.useEffect(() => {
@@ -87,6 +87,5 @@ const View = (props) => {
 export default compose(
   connect((state, props) => ({
     query: qs.parse(state.router.location.search.replace('?', '')),
-    discodata_query: state.discodata_query,
   })),
 )(View);