diff --git a/CHANGELOG.md b/CHANGELOG.md index c9eac8e..9f1831b 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/Jenkinsfile b/Jenkinsfile index 38c7e9c..353a441 100644 --- a/Jenkinsfile +++ b/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 { } } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 43158aa..aae43ad 100644 --- a/package.json +++ b/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", diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupMap.jsx b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupMap.jsx index b35db07..1d88dff 100644 --- a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupMap.jsx +++ b/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 ( -
+
{selectedData.length > 0 ? ( - - {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 ; - })} + { + 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} + > + + + + ) : (

No data available for map.

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/View.jsx b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/View.jsx index f8321e1..a7c66e4 100644 --- a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/View.jsx +++ b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/View.jsx @@ -137,6 +137,7 @@ const View = (props) => { }; /* eslint-disable-next-line */ }, []); + return (
{ - {selectedColumns.map((colDef, j) => ( - - - - ))} + + + ))} ) : null} - {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 ( - - - - - {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 ( + - + - ))} - - ); - })} + {selectedColumns && + selectedColumns.length > 0 && + selectedColumns.map((colDef, j) => ( + + + + ))} + + ); + }) + ) : ( +

+ Select columns data from DATA SOURCE tab. +

+ )} {!items.length ? ( @@ -243,7 +257,9 @@ const View = (props) => { '' )} - {Math.ceil(items.length / row_size) > 1 ? ( + {selectedColumns && + selectedColumns.length > 0 && + Math.ceil(items.length / row_size) > 1 ? (