Update

eea · Sep 7, 2021 · 1bc3998 · 1bc3998
1 parent 2921178
commit 1bc3998
Show file tree

Hide file tree

Showing 15 changed files with 4,907 additions and 265 deletions.
diff --git a/docker-image.txt b/docker-image.txt
@@ -1 +1 @@
-eeacms/eprtr-frontend:1.4.5
+eeacms/eprtr-frontend
diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
@@ -15,15 +15,15 @@ import { isArray } from 'lodash';
 import { getEncodedQueryString } from '~/utils';
 // VOLTO
 import { Icon as VoltoIcon, Toast } from '@plone/volto/components';
-import PrivacyProtection from './PrivacyProtection';
+import PrivacyProtection from '../PrivacyProtection';
 // VOLTO-DATABLOCKS
 import { setQueryParam } from '@eeacms/volto-datablocks/actions';
 // SEMANTIC REACT UI
 import { Grid, Header } from 'semantic-ui-react';
 // SVGs
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navigationSVG from '@plone/volto/icons/navigation.svg';
-import mapPlaceholder from '~/components/manage/Blocks/DiscodataOpenlayersMapBlock/map_placeholder.png';
+import mapPlaceholder from '~/components/manage/Blocks/PrivacyProtection/map_placeholder.png';
 // STYLES
 import 'ol/ol.css';
 import './style.css';
@@ -1432,11 +1432,6 @@ const OpenlayersMapView = (props) => {
             setPrepareMapRender(true);
           }}
           data={{ dataprotection }}
-          style={{
-            backgroundImage: `url(${mapPlaceholder})`,
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: 'cover',
-          }}
         >
           {view}
         </PrivacyProtection>

diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/style.css
@@ -370,44 +370,3 @@ p.mb-1,
 p.mb-1:first-child {
   margin-bottom: 1rem;
 }
-
-.privacy-protection {
-  padding: 0;
-  background: transparent;
-}
-
-.privacy-protection .overlay {
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.35);
-}
-
-.privacy-protection .background {
-  opacity: 0.8;
-}
-
-.privacy-protection .wrapped {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 400px;
-  background: #ffffff;
-  border-radius: 10px;
-  transform: translate(-50%, -50%);
-}
-
-.privacy-protection .wrapped .ui.message {
-  background: #ffffff;
-  border-radius: 10px;
-}
-
-.privacy-protection .wrapped p.discreet {
-  padding: 1.5em 1.5em;
-}
-
-.privacy-protection .privacy-button {
-  display: flex;
-  flex-flow: row;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/src/components/manage/Blocks/IndustryMap/View.jsx b/src/components/manage/Blocks/IndustryMap/View.jsx
@@ -14,7 +14,7 @@ import { Controls, Control } from '@eeacms/volto-openlayers-map/Controls';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
 import { openlayers } from '@eeacms/volto-openlayers-map';
 import { setQueryParam } from '@eeacms/volto-datablocks/actions';
-import PrivacyProtection from '~/components/manage/Blocks/DiscodataOpenlayersMapBlock/PrivacyProtection';
+import PrivacyProtection from '../PrivacyProtection';
 import { getEncodedQueryString } from '~/utils';
 import {
   getSitesUrl,
@@ -25,7 +25,7 @@ import {
 
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navigationSVG from '@plone/volto/icons/navigation.svg';
-import mapPlaceholder from '~/components/manage/Blocks/DiscodataOpenlayersMapBlock/map_placeholder.png';
+import mapPlaceholder from '../PrivacyProtection/map_placeholder.png';
 
 import './style.css';
 
@@ -64,7 +64,7 @@ const View = (props) => {
       'This map is hosted by a third party [Environmental Systems Research Institute, INC: "ESRI"]. By showing th external content you accept the terms and conditions of www.esri.com. This includes their cookie policies, which e have no control over.',
     privacy_cookie_key: 'site-location-map',
     placeholder_image: mapPlaceholder,
-    type: props.data.privacy?.value || 'big',
+    type: 'big',
   };
 
   const db_version =
@@ -401,14 +401,7 @@ const View = (props) => {
   return (
     <div className="industry-map-wrapper">
       <div id="industry-map" className="industry-map">
-        <PrivacyProtection
-          data={{ dataprotection }}
-          style={{
-            backgroundImage: `url(${mapPlaceholder})`,
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: 'cover',
-          }}
-        >
+        <PrivacyProtection data={{ dataprotection }}>
           <Map
             ref={(element) => {
               if (!element || map.current) return;

diff --git a/src/components/manage/Blocks/IndustryMap/style.css b/src/components/manage/Blocks/IndustryMap/style.css
@@ -372,47 +372,6 @@ p.mb-1:first-child {
   margin-bottom: 1rem;
 }
 
-.privacy-protection {
-  padding: 0;
-  background: transparent;
-}
-
-.privacy-protection .overlay {
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.35);
-}
-
-.privacy-protection .background {
-  opacity: 0.8;
-}
-
-.privacy-protection .wrapped {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 400px;
-  background: #ffffff;
-  border-radius: 10px;
-  transform: translate(-50%, -50%);
-}
-
-.privacy-protection .wrapped .ui.message {
-  background: #ffffff;
-  border-radius: 10px;
-}
-
-.privacy-protection .wrapped p.discreet {
-  padding: 1.5em 1.5em;
-}
-
-.privacy-protection .privacy-button {
-  display: flex;
-  flex-flow: row;
-  align-items: center;
-  justify-content: center;
-}
-
 .ol-location {
   right: 0.5rem !important;
   left: unset !important;

diff --git a/src/components/manage/Blocks/List/View.jsx b/src/components/manage/Blocks/List/View.jsx
@@ -23,35 +23,46 @@ const View = (props) => {
   return (
     <>
       {props.mode === 'edit' ? <p>Connected list</p> : ''}
-      <div className="connected-list">
-        {Array(Math.max(0, columns))
-          .fill()
-          .map((_, column) => {
-            const queries = {};
-            data.queries.forEach((query) => {
-              queries[query.paramToSet] = provider_data[query.param][column];
-            });
+      {data.queries?.length && data.value ? (
+        <div className="connected-list">
+          {Array(Math.max(0, columns))
+            .fill()
+            .map((_, column) => {
+              const queries = {};
+              data.queries.forEach((query) => {
+                if (
+                  query.paramToSet &&
+                  query.param &&
+                  provider_data[query.param]
+                ) {
+                  queries[query.paramToSet] =
+                    provider_data[query.param][column];
+                }
+              });
 
-            return (
-              <Link
-                key={`connected-list-${column}`}
-                to={`${data.url || '/'}?${qs.stringify(queries)}`}
-                className={cx(data.className)}
-                style={{
-                  display: 'inline-block',
-                  margin: '5px',
-                }}
-                onClick={() => {
-                  props.setQueryParam({
-                    queryParam: { ...queries },
-                  });
-                }}
-              >
-                {provider_data[data.value][column]}
-              </Link>
-            );
-          })}
-      </div>
+              return (
+                <Link
+                  key={`connected-list-${column}`}
+                  to={`${data.url || '/'}?${qs.stringify(queries)}`}
+                  className={cx(data.className)}
+                  style={{
+                    display: 'inline-block',
+                    margin: '5px',
+                  }}
+                  onClick={() => {
+                    props.setQueryParam({
+                      queryParam: { ...queries },
+                    });
+                  }}
+                >
+                  {provider_data[data.value][column]}
+                </Link>
+              );
+            })}
+        </div>
+      ) : (
+        <p>Please add queries</p>
+      )}
     </>
   );
 };

diff --git a/...aOpenlayersMapBlock/PrivacyProtection.jsx → ...s/PrivacyProtection/PrivacyProtection.jsx b/...aOpenlayersMapBlock/PrivacyProtection.jsx → ...s/PrivacyProtection/PrivacyProtection.jsx
@@ -51,7 +51,14 @@ export default ({ children, data = {}, block, onShow, ...rest }) => {
           {!dataprotection.enabled || show ? (
             children
           ) : (
-            <div className="privacy-protection" {...rest}>
+            <div
+              className="privacy-protection"
+              style={{
+                backgroundImage: `url(${dataprotection.placeholder_image})`,
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: 'cover',
+              }}
+            >
               <div className="overlay">
                 <div className="wrapped">
                   {dataprotection.type === 'big' ? (

diff --git a/src/components/manage/Blocks/PrivacyProtection/index.js b/src/components/manage/Blocks/PrivacyProtection/index.js
@@ -0,0 +1,2 @@
+import PrivacyProtection from './PrivacyProtection';
+export default PrivacyProtection;
diff --git a/...ataOpenlayersMapBlock/map_placeholder.png → ...cks/PrivacyProtection/map_placeholder.png b/...ataOpenlayersMapBlock/map_placeholder.png → ...cks/PrivacyProtection/map_placeholder.png
diff --git a/src/components/manage/Blocks/PrivacyProtection/map_placeholder_small.jpg b/src/components/manage/Blocks/PrivacyProtection/map_placeholder_small.jpg
diff --git a/src/components/manage/Blocks/PrivacyProtection/placeholder_2.jpg:Zone.Identifier b/src/components/manage/Blocks/PrivacyProtection/placeholder_2.jpg:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+LastWriterPackageFamilyName=Microsoft.ScreenSketch_8wekyb3d8bbwe
+ZoneId=3
diff --git a/src/components/manage/Blocks/SiteLocationMap/View.jsx b/src/components/manage/Blocks/SiteLocationMap/View.jsx
@@ -8,13 +8,10 @@ import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
 import { openlayers } from '@eeacms/volto-openlayers-map';
 import { getSiteLocationURL } from './index';
 import qs from 'querystring';
+import PrivacyProtection from '../PrivacyProtection';
+import mapPlaceholder from '../PrivacyProtection/map_placeholder_small.jpg';
 import './style.css';
 
-// SVGs
-import mapPlaceholder from '~/components/manage/Blocks/DiscodataOpenlayersMapBlock/map_placeholder.png';
-// Privacy Protection VOLTO
-import PrivacyProtection from '~/components/manage/Blocks/DiscodataOpenlayersMapBlock/PrivacyProtection';
-
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
@@ -27,7 +24,7 @@ const View = (props) => {
       'This map is hosted by a third party [Environmental Systems Research Institute, INC: "ESRI"]. By showing th external content you accept the terms and conditions of www.esri.com. This includes their cookie policies, which e have no control over.',
     privacy_cookie_key: 'site-location-map',
     placeholder_image: mapPlaceholder,
-    type: props.data.privacy?.value || 'big',
+    type: 'small',
   };
 
   React.useEffect(() => {
@@ -60,7 +57,7 @@ const View = (props) => {
 
   const siteStyle = new style.Style({
     image: new style.Circle({
-      radius: 3,
+      radius: 6,
       fill: new style.Fill({ color: '#00FF00' }),
       stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }),
       zIndex: 0,
@@ -70,14 +67,7 @@ const View = (props) => {
   return (
     <div className="site-location-map-wrapper">
       <Container id="site-location-map" className="site-location-map">
-        <PrivacyProtection
-          data={{ dataprotection }}
-          style={{
-            backgroundImage: `url(${mapPlaceholder})`,
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: 'cover',
-          }}
-        >
+        <PrivacyProtection data={{ dataprotection }}>
           <Map
             view={{
               center: proj.fromLonLat([20, 50]),

diff --git a/src/components/manage/Blocks/SiteLocationMap/style.css b/src/components/manage/Blocks/SiteLocationMap/style.css
@@ -18,44 +18,3 @@ div#view .ui.container > .site-location-map {
   height: 400px;
   min-height: 400px;
 }
-
-.privacy-protection {
-  padding: 0;
-  background: transparent;
-}
-
-.privacy-protection .overlay {
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.35);
-}
-
-.privacy-protection .background {
-  opacity: 0.8;
-}
-
-.privacy-protection .wrapped {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 400px;
-  background: #ffffff;
-  border-radius: 10px;
-  transform: translate(-50%, -50%);
-}
-
-.privacy-protection .wrapped .ui.message {
-  background: #ffffff;
-  border-radius: 10px;
-}
-
-.privacy-protection .wrapped p.discreet {
-  padding: 1.5em 1.5em;
-}
-
-.privacy-protection .privacy-button {
-  display: flex;
-  flex-flow: row;
-  align-items: center;
-  justify-content: center;
-}