Merge pull request #64 from eea/develop

Develop

CHANGELOG.md

@@ -4,8 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.2.7](https://github.com/eea/volto-forests-theme/compare/0.2.6...0.2.7)
+
+- Expandable table improvements [`#63`](https://github.com/eea/volto-forests-theme/pull/63)
+- Table markers based on selected lat long from edit [`31181d8`](https://github.com/eea/volto-forests-theme/commit/31181d8d9d0ad5e8c19102517c2d2ce7833259c9)
+- Fix crash on no selected columns [`30f2c17`](https://github.com/eea/volto-forests-theme/commit/30f2c17d4200fb0579a6a90efbf4943597f2156b)
+- Use volto-openlayers & fixes [`6bff44c`](https://github.com/eea/volto-forests-theme/commit/6bff44c737a3d124c399b928cf3339d4d9f53dbc)
+- openlayers markers wip [`08e447e`](https://github.com/eea/volto-forests-theme/commit/08e447e2f5cc495d334864693b4ee8cf261c2eba)
+
 #### [0.2.6](https://github.com/eea/volto-forests-theme/compare/0.2.5...0.2.6)
 
+> 11 April 2022
+
+- Expandable template for SimpleDataTable [`#62`](https://github.com/eea/volto-forests-theme/pull/62)
 - Expandable table template [`#61`](https://github.com/eea/volto-forests-theme/pull/61)
 - BodyClass classes inline [`c79695a`](https://github.com/eea/volto-forests-theme/commit/c79695ad82ba37883eb301a2e13bb61c957782ea)
 - localconfig tests [`b639387`](https://github.com/eea/volto-forests-theme/commit/b6393878d738719cb924ad0b4344f16664d8e66c)

Jenkinsfile

@@ -184,10 +184,10 @@ pipeline {
             unstash "xunit-reports"
             unstash "cypress-coverage"
             def scannerHome = tool 'SonarQubeScanner';
-            def nodeJS = tool 'NodeJS11';
+            def nodeJS = tool 'NodeJS';
             withSonarQubeEnv('Sonarqube') {
               sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
-              sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
+              sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
               sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done'''
             }
           }
@@ -238,4 +238,4 @@ pipeline {
       }
     }
   }
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-forests-theme",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "@eeacms/volto-forests-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -19,19 +19,20 @@
   "addons": [
     "@eeacms/volto-plotlycharts",
     "@eeacms/volto-datablocks",
+    "@eeacms/volto-openlayers-map",
     "@eeacms/volto-addons-forest",
     "@eeacms/volto-matomo"
   ],
   "dependencies": {
-    "@eeacms/volto-plotlycharts": "*",
     "@eeacms/volto-addons-forest": "*",
     "@eeacms/volto-datablocks": "*",
     "@eeacms/volto-matomo": "*",
+    "@eeacms/volto-openlayers-map": "0.1.4",
+    "@eeacms/volto-plotlycharts": "*",
     "react-highlight-words": "^0.16.0",
     "react-image-gallery": "1.2.7",
     "react-lazy-load-image-component": "^1.5.0",
-    "react-stickynode": "^2.1.1",
-    "pigeon-maps": "0.21.0"
+    "react-stickynode": "^2.1.1"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupMap.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import { compose } from 'redux';
 import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
+import { Map } from '@eeacms/volto-openlayers-map/Map';
+import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
+import { openlayers } from '@eeacms/volto-openlayers-map';
 
-import { Map, Marker } from 'pigeon-maps';
+const getLayerBaseURL = () =>
+  'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}';
 
 const getProviderDataLength = (provider_data) => {
   return provider_data
@@ -11,9 +15,14 @@ const getProviderDataLength = (provider_data) => {
 };
 
 const PopupMap = ({ rowData, provider_data, mapData }) => {
-  const [mapCenter, setMapCenter] = React.useState([45, 9]);
+  const [mapRendered, setMapRendered] = React.useState(false);
+  const [mapCenter, setMapCenter] = React.useState([9, 45]);
+  const mapRef = React.useRef();
 
   const [selectedData, setSelectedData] = React.useState([]);
+  const [featuresData, setFeaturesData] = React.useState([]);
+
+  const { proj, source, style } = openlayers;
 
   React.useEffect(() => {
     const { long, lat } = mapData;
@@ -30,13 +39,16 @@ const PopupMap = ({ rowData, provider_data, mapData }) => {
     const centerLong = minLong && maxLong ? (minLong + maxLong) / 2 : '';
 
     if (centerLat && centerLong) {
-      setMapCenter([centerLat, centerLong]);
+      setMapCenter([centerLong, centerLat]);
+      centerToPosition({ longitude: centerLong, latitude: centerLat }, 5);
     }
   }, [selectedData, mapData]);
 
   React.useEffect(() => {
+    const { long, lat } = mapData;
     const provider_data_length = getProviderDataLength(provider_data);
     const newMapData = [];
+    const newFeaturesData = [];
     if (provider_data_length) {
       const keys = Object.keys(provider_data);
       Array(provider_data_length)
@@ -47,11 +59,21 @@ const PopupMap = ({ rowData, provider_data, mapData }) => {
             obj[key] = provider_data[key][i];
           });
           newMapData.push(obj);
+
+          newFeaturesData.push(
+            new openlayers.ol.Feature(
+              new openlayers.geom.Point(
+                openlayers.proj.fromLonLat([obj[long], obj[lat]]),
+              ),
+            ),
+          );
         });
     }
     setSelectedData(newMapData);
+
+    setFeaturesData(newFeaturesData);
     /* eslint-disable-next-line */
-  }, [provider_data]);
+  }, [provider_data, mapData]);
 
   // const countries =
   //   provider_data && provider_data[mapData.country]
@@ -60,19 +82,75 @@ const PopupMap = ({ rowData, provider_data, mapData }) => {
 
   //const uniqueCountries = [...new Set(countries)];
 
+  const centerToPosition = (position, zoom) => {
+    const { proj } = openlayers;
+    return mapRef.current.getView().animate({
+      center: proj.fromLonLat([position.longitude, position.latitude]),
+      duration: 1000,
+      zoom,
+    });
+  };
+
   if (!provider_data) {
     return 'Loading..';
   }
   return (
-    <div>
+    <div className="map-container">
       {selectedData.length > 0 ? (
-        <Map height={400} center={mapCenter} defaultZoom={5}>
-          {selectedData.map((item, i) => {
-            const long = item[mapData.long] ? item[mapData.long] : '';
-            const lat = item[mapData.lat] ? item[mapData.lat] : '';
-            /* const label = item[mapData.label] ? item[mapData.label] : ''; */
-            return <Marker width={30} color={'#00519d'} anchor={[lat, long]} />;
-          })}
+        <Map
+          ref={(data) => {
+            mapRef.current = data?.map;
+            if (data?.mapRendered && !mapRendered) {
+              setMapRendered(true);
+            }
+          }}
+          view={{
+            center: proj.fromLonLat(mapCenter),
+            showFullExtent: true,
+            minZoom: 1,
+            zoom: 2,
+          }}
+          renderer="webgl"
+          // onPointermove={this.onPointermove}
+          // onClick={this.onClick}
+          // onMoveend={this.onMoveend}
+        >
+          <Layers>
+            <Layer.Tile
+              source={
+                new source.XYZ({
+                  url: getLayerBaseURL(),
+                })
+              }
+            />
+            <Layer.Vector
+              source={
+                new source.Vector({
+                  features: featuresData,
+                })
+              }
+              style={
+                new style.Style({
+                  image: new style.Circle({
+                    radius: 6,
+                    fill: new style.Fill({ color: '#058373' }),
+                    stroke: new style.Stroke({ color: 'black', width: 1 }),
+                    zIndex: 0,
+                  }),
+                  text: new style.Text({
+                    font: '12px Calibri,sans-serif',
+                    fill: new style.Fill({ color: '#000' }),
+                    stroke: new style.Stroke({
+                      color: '#fff',
+                      width: 2,
+                    }),
+                  }),
+                })
+              }
+              title="1.Sites"
+              zIndex={1}
+            />
+          </Layers>
         </Map>
       ) : (
         <p>No data available for map.</p>

src/components/manage/Blocks/SimpleDataTable/templates/expandable/View.jsx

@@ -137,6 +137,7 @@ const View = (props) => {
     };
     /* eslint-disable-next-line */
   }, []);
+
   return (
     <div className="smart-table">
       <Search
@@ -172,67 +173,80 @@ const View = (props) => {
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell></Table.HeaderCell>
-              {selectedColumns.map((colDef, j) => (
-                <Table.HeaderCell
-                  key={getNameOfColumn(colDef)}
-                  className={getAlignmentOfColumn(colDef, j)}
-                >
-                  <button
-                    className="sortable-th"
-                    title="Sort by"
-                    onClick={() => {
-                      if (sortBy[0] === colDef.column) {
-                        setSortBy([colDef.column, !sortBy[1]]);
-                      } else {
-                        setSortBy([colDef.column, true]);
-                      }
-                    }}
-                    style={{ display: 'flex' }}
+              {selectedColumns &&
+                selectedColumns.length > 0 &&
+                selectedColumns.map((colDef, j) => (
+                  <Table.HeaderCell
+                    key={getNameOfColumn(colDef)}
+                    className={getAlignmentOfColumn(colDef, j)}
                   >
-                    <span>{getTitleOfColumn(colDef)}</span>
-                    {sortBy[0] === colDef.column ? (
-                      <Icon name={sortBy[1] ? upSVG : downSVG} size="1rem" />
-                    ) : (
-                      <Icon name={upDownSVG} size="1rem" color="grey" />
-                    )}
-                  </button>
-                </Table.HeaderCell>
-              ))}
+                    <button
+                      className="sortable-th"
+                      title="Sort by"
+                      onClick={() => {
+                        if (sortBy[0] === colDef.column) {
+                          setSortBy([colDef.column, !sortBy[1]]);
+                        } else {
+                          setSortBy([colDef.column, true]);
+                        }
+                      }}
+                      style={{ display: 'flex' }}
+                    >
+                      <span>{getTitleOfColumn(colDef)}</span>
+                      {sortBy[0] === colDef.column ? (
+                        <Icon name={sortBy[1] ? upSVG : downSVG} size="1rem" />
+                      ) : (
+                        <Icon name={upDownSVG} size="1rem" color="grey" />
+                      )}
+                    </button>
+                  </Table.HeaderCell>
+                ))}
             </Table.Row>
           </Table.Header>
         ) : null}
         <Table.Body>
-          {Array(
-            Math.max(
-              0,
-              Math.min(row_size, items.length - (activePage - 1) * row_size),
-            ),
-          )
-            .fill()
-            .map((_, i) => {
-              const row_index = i + (activePage - 1) * row_size;
-              const row_data = items[row_index];
-              return (
-                <Table.Row key={row_index}>
-                  <Table.Cell key={`${row_index}-popuprow`} textAlign="center">
-                    <PopupRow rowData={row_data} tableData={data} />
-                  </Table.Cell>
-                  {selectedColumns.map((colDef, j) => (
+          {selectedColumns && selectedColumns.length > 0 ? (
+            Array(
+              Math.max(
+                0,
+                Math.min(row_size, items.length - (activePage - 1) * row_size),
+              ),
+            )
+              .fill()
+              .map((_, i) => {
+                const row_index = i + (activePage - 1) * row_size;
+                const row_data = items[row_index];
+                return (
+                  <Table.Row key={row_index}>
                     <Table.Cell
-                      key={`${row_index}-${getNameOfColumn(colDef)}`}
-                      textAlign={getAlignmentOfColumn(colDef, j)}
+                      key={`${row_index}-popuprow`}
+                      textAlign="center"
                     >
-                      <RenderComponent
-                        {...props}
-                        tableData={items}
-                        colDef={colDef}
-                        row={row_index}
-                      />
+                      <PopupRow rowData={row_data} tableData={data} />
                     </Table.Cell>
-                  ))}
-                </Table.Row>
-              );
-            })}
+                    {selectedColumns &&
+                      selectedColumns.length > 0 &&
+                      selectedColumns.map((colDef, j) => (
+                        <Table.Cell
+                          key={`${row_index}-${getNameOfColumn(colDef)}`}
+                          textAlign={getAlignmentOfColumn(colDef, j)}
+                        >
+                          <RenderComponent
+                            {...props}
+                            tableData={items}
+                            colDef={colDef}
+                            row={row_index}
+                          />
+                        </Table.Cell>
+                      ))}
+                  </Table.Row>
+                );
+              })
+          ) : (
+            <p style={{ textAlign: 'center', padding: '10px 0' }}>
+              Select columns data from <strong>DATA SOURCE</strong> tab.
+            </p>
+          )}
           {!items.length ? (
             <Table.Row>
               <Table.Cell textAlign="center" colSpan="100%">
@@ -243,7 +257,9 @@ const View = (props) => {
             ''
           )}
         </Table.Body>
-        {Math.ceil(items.length / row_size) > 1 ? (
+        {selectedColumns &&
+        selectedColumns.length > 0 &&
+        Math.ceil(items.length / row_size) > 1 ? (
           <Table.Footer>
             <Table.Row>
               <Table.HeaderCell

src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less

@@ -157,3 +157,8 @@
     background-color: #eaf2d3;
   }
 }
+
+.map-container .ol-map {
+  height: 400px;
+  min-height: 400px;
+}