Update

eea · Oct 4, 2020 · 8d68491 · 8d68491
1 parent f10c5e6
commit 8d68491
Show file tree

Hide file tree

Showing 16 changed files with 694 additions and 400 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@eeacms/volto-metadata-block",
     "@eeacms/volto-tabs-block",
     "@eeacms/volto-widget-toggle",
+    "@eeacms/volto-blocks-form",
     "@eeacms/volto-object-widget",
     "@eeacms/volto-grid-block",
     "volto-addons",
@@ -109,12 +110,13 @@
     "node": "^10 || ^12"
   },
   "dependencies": {
+    "@eeacms/volto-blocks-form": "github:eea/volto-blocks-form#0.4.1",
     "@eeacms/volto-metadata-block": "github:eea/volto-metadata-block#1.0.1",
+    "@eeacms/volto-object-widget": "github:eea/volto-object-widget#0.2.1",
     "@eeacms/volto-widget-toggle": "github:eea/volto-widget-toggle#0.1.0",
     "@eeacms/volto-widgets-view": "github:eea/volto-widgets-view#1.0.1",
-    "@eeacms/volto-object-widget": "github:eea/volto-object-widget#0.1.2",
-    "@plone/volto": "github:eea/volto#8.0.0-beta.10",
-    "@tinymce/tinymce-react": "^3.6.0",
+    "@material/react-linear-progress": "^0.15.0",
+    "@plone/volto": "github:eea/volto#8.0.0-beta.11",
     "axios": "^0.20.0",
     "jsonp": "^0.2.1",
     "ol": "^6.4.3",

diff --git a/src/components/manage/Blocks/ArticlesSparql/View.jsx b/src/components/manage/Blocks/ArticlesSparql/View.jsx
@@ -12,6 +12,15 @@ import upSVG from '@plone/volto/icons/up.svg';
 import placeholderImage from './placeholder.png';
 import './style.css';
 
+const secureRequest = (url) => {
+  try {
+    new URL(url);
+    return url.replace('http', 'https');
+  } catch {
+    return url;
+  }
+};
+
 const View = (props) => {
   const [activeItem, setActiveItem] = useState(1);
   const { page = '/', redirectPage = null, preview = false } = props.data || {};
@@ -58,13 +67,13 @@ const View = (props) => {
               >
                 <div className="column-4 sm-12 article hero pa-1">
                   <Image
-                    src={
+                    src={secureRequest(
                       item.image ||
-                      `${
-                        item.resource ? item.resource + '/image_large' : ''
-                      }` ||
-                      placeholderImage
-                    }
+                        `${
+                          item.resource ? item.resource + '/image_large' : ''
+                        }` ||
+                        placeholderImage,
+                    )}
                   />
                 </div>
                 <div className="column-8 sm-12 article pa-1">

diff --git a/src/components/manage/Blocks/DiscodataComponents/Custom/View.jsx b/src/components/manage/Blocks/DiscodataComponents/Custom/View.jsx
@@ -42,12 +42,17 @@ const components = {
       >
         <div>
           <span className="floating-icon" data-tip={'Something'}>
-            <Icon name={infoSVG} size="20" color="#fff" />
+            <Icon
+              className="firefox-icon"
+              name={infoSVG}
+              size="20"
+              color="#fff"
+            />
           </span>
           <p className="lighter">Last report was submitted on:</p>
           <p className="bold">{getDate(packages[0])}</p>
         </div>
-        <div>
+        {/* <div>
           <p className="bold">Reporting year</p>
           <Dropdown
             selection
@@ -70,7 +75,7 @@ const components = {
             options={options}
             value={activeValue}
           />
-        </div>
+        </div> */}
         <div>
           <p className="bold">Publish date</p>
           <p className="lighter">{getDate(packages[1])}</p>

diff --git a/src/components/manage/Blocks/DiscodataComponents/schema.jsx b/src/components/manage/Blocks/DiscodataComponents/schema.jsx
@@ -453,6 +453,8 @@ export const makeListSchema = (props) => {
       title: 'Limit',
       type: 'number',
       minimum: '0',
+      onBlur: () => null,
+      onClick: () => null,
     },
     className: {
       title: 'Class name',

diff --git a/src/components/manage/Blocks/DiscodataComponentsBlock/View.jsx b/src/components/manage/Blocks/DiscodataComponentsBlock/View.jsx
@@ -375,6 +375,7 @@ const renderComponents = {
     );
   },
   eprtrCountryGroupSelector: (props) => {
+    const initialQueryParameters = {};
     const items =
       props.item?.[props.component.value]
         ?.filter((item) => item.countryGroupId)
@@ -390,13 +391,29 @@ const renderComponents = {
         key: 'airPollutionPerCapita',
         value: 'airPollutionPerCapita',
         text: 'Air',
+        labelText: 'air pollution per capita',
       },
       {
         key: 'waterPollutionPerCapita',
         value: 'waterPollutionPerCapita',
         text: 'Water',
+        labelText: 'water pollution per capita',
       },
     ];
+    if (!props.globalQuery.countryGroupId && items?.[0]?.key) {
+      initialQueryParameters.countryGroupId = items[0].key;
+    }
+    if (!props.globalQuery.listFilter && items?.[0]?.key) {
+      initialQueryParameters.listFilter = 'airPollutionPerCapita';
+      initialQueryParameters.listFilterLabel = 'air pollution per capita';
+    }
+    if (Object.keys(initialQueryParameters).length > 0) {
+      props.setQueryParam({
+        queryParam: {
+          ...initialQueryParameters,
+        },
+      });
+    }
     return (
       <div className="custom-selector big red">
         <Header as="h1">Industrial pollution in</Header>
@@ -427,6 +444,9 @@ const renderComponents = {
                     listFilter: data.options.filter((opt) => {
                       return opt.value === data.value;
                     })[0]?.key,
+                    listFilterLabel: data.options.filter((opt) => {
+                      return opt.value === data.value;
+                    })[0]?.labelText,
                   },
                 });
               }}

diff --git a/src/components/manage/Blocks/DiscodataComponentsBlock/style.css b/src/components/manage/Blocks/DiscodataComponentsBlock/style.css
@@ -422,7 +422,6 @@ a.small h1 {
 .link-list li:before {
   content: counter(link-list-counter)".";
   color: #EC776A;
-  font-size: 1.5rem;
 }
 
 .link-list li button {

diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx
@@ -94,6 +94,7 @@ const OpenlayersMapView = (props) => {
   const [loader, setLoader] = useState(false);
   const [mapRendered, setMapRendered] = useState(false);
   const [firstFilteringUpdate, setFirstFilteringUpdate] = useState(false);
+  const selectedSiteRef = useRef(null);
   const selectedSiteCoordinates = useRef(null);
   const regionsSourceWhere = useRef('');
   const firstFilteringDone = useRef(false);
@@ -214,6 +215,8 @@ const OpenlayersMapView = (props) => {
 
   useEffect(() => {
     if (selectedSite && mapRendered) {
+      selectedSiteRef.current = selectedSite;
+      console.log('SET STYLE FOR SELECTED SITE');
       selectedSite.setStyle(
         new Style({
           image: new CircleStyle({
@@ -559,6 +562,7 @@ const OpenlayersMapView = (props) => {
           const item = data.results?.[0];
           selectedSiteCoordinates.current = [item.x, item.y];
           if (item && item.x && item.y) {
+            console.log('REFRESH SOURCE');
             stateRef.current.map.sitesSourceLayer.getSource().refresh();
             stateRef.current.map.element.getView().animate({
               center: selectedSiteCoordinates.current,
@@ -983,12 +987,15 @@ const OpenlayersMapView = (props) => {
             const closestFeature = sitesSource.getClosestFeatureToCoordinate(
               selectedSiteCoordinates.current,
             );
-            closestFeature.setStyle();
+            console.log('SET SELECTED SITE');
             setSelectedSite(closestFeature);
             selectedSiteCoordinates.current = null;
           }
         }
       });
+      sitesSource.on('changefeature', function (e) {
+        console.log('CHANGE');
+      });
       if (hasPopups) {
         if (document && document.documentElement?.clientWidth > 500) {
           map.on('pointermove', function (evt) {

diff --git a/src/components/manage/Blocks/DiscodataTableBlock/View.jsx b/src/components/manage/Blocks/DiscodataTableBlock/View.jsx
@@ -11,6 +11,9 @@ import { Icon } from '@plone/volto/components';
 import DiscodataSqlBuilderView from 'volto-datablocks/DiscodataSqlBuilder/View';
 import { setQueryParam } from 'volto-datablocks/actions';
 import { Dimmer, Loader } from 'semantic-ui-react';
+import LinearProgress from '@material/react-linear-progress';
+
+import '@material/react-linear-progress/dist/linear-progress.css';
 
 const components = {
   object_link_length: (schemaMetadata, itemMetadata, item) => {
@@ -187,7 +190,7 @@ const View = (props) => {
           <React.Fragment>
             <Table className="unstackable">
               {/* ==== TABLE HEADER ==== */}
-              <Table.Header>
+              <Table.Header id="discodata-table-header">
                 <Table.Row>
                   {state.metadata?.fieldsets?.[0]?.fields?.map(
                     (meta) =>
@@ -200,6 +203,13 @@ const View = (props) => {
                   )}
                   <Table.HeaderCell />
                 </Table.Row>
+                {loader && (
+                  <Table.Row>
+                    <Table.HeaderCell colSpan={state.tableHeaders + 1}>
+                      <LinearProgress indeterminate />
+                    </Table.HeaderCell>
+                  </Table.Row>
+                )}
               </Table.Header>
               {/* ==== TABLE BODY ==== */}
               <Table.Body>
@@ -414,7 +424,18 @@ const View = (props) => {
                   >
                     <Pagination
                       activePage={activePage}
-                      onPageChange={(event, pagination) => {
+                      onPageChange={function (event, pagination) {
+                        if (document.querySelector('.filters-container')) {
+                          document
+                            .querySelector('.filters-container')
+                            .scrollIntoView();
+                        } else if (
+                          document.getElementById('discodata-table-header')
+                        ) {
+                          document
+                            .getElementById('discodata-table-header')
+                            .scrollIntoView();
+                        }
                         setState({
                           ...state,
                           pagination: {
@@ -433,13 +454,30 @@ const View = (props) => {
               </Table.Footer>
             </Table>
           </React.Fragment>
+        ) : !loader ? (
+          <div style={{ width: '100%', height: '400px' }}>
+            <h4
+              style={{
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+              }}
+            >
+              No data
+            </h4>
+          </div>
         ) : (
           <div style={{ width: '100%', height: '400px' }} />
         )}
       </DiscodataSqlBuilderView>
-      <Dimmer active={loader} inverted>
-        <Loader inverted>European Environment Agency</Loader>
-      </Dimmer>
+      {!items?.length ? (
+        <Dimmer active={loader} inverted>
+          <Loader inverted>European Environment Agency</Loader>
+        </Dimmer>
+      ) : (
+        ''
+      )}
     </div>
   );
 };