@eeacms/volto-arcgis-block 0.1.46 → 0.1.49

package/CHANGELOG.md

@@ -4,8 +4,47 @@ 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.1.49](https://github.com/eea/volto-arcgis-block/compare/0.1.48...0.1.49)
+
+- Use cases tooltip bug [`#159`](https://github.com/eea/volto-arcgis-block/pull/159)
+
+#### [0.1.48](https://github.com/eea/volto-arcgis-block/compare/0.1.47...0.1.48)
+
+> 12 July 2022
+
+- mapviewer bugfix [`#158`](https://github.com/eea/volto-arcgis-block/pull/158)
+- mapviewer bugfix [`#157`](https://github.com/eea/volto-arcgis-block/pull/157)
+- Revert "MapViewer persistence implemented" [`#156`](https://github.com/eea/volto-arcgis-block/pull/156)
+- MapViewer persistence implemented [`#154`](https://github.com/eea/volto-arcgis-block/pull/154)
+- Merge pull request #155 from eea/develop [`07c592d`](https://github.com/eea/volto-arcgis-block/commit/07c592dc40d943a0904b67a641c22de2251b0b64)
+- Update cypress.json [`d02b2b8`](https://github.com/eea/volto-arcgis-block/commit/d02b2b8ee74d5059e51ab36ea95a6b0b650d92a0)
+
+#### [0.1.47](https://github.com/eea/volto-arcgis-block/compare/0.1.46...0.1.47)
+
+> 11 July 2022
+
+- Arrow icon [`#153`](https://github.com/eea/volto-arcgis-block/pull/153)
+- Revert all changes [`#152`](https://github.com/eea/volto-arcgis-block/pull/152)
+- code coverage removal [`#150`](https://github.com/eea/volto-arcgis-block/pull/150)
+- Revert "Mapviewer menu and map viewer options persistence" [`#149`](https://github.com/eea/volto-arcgis-block/pull/149)
+- Mapviewer menu and map viewer options persistence [`#147`](https://github.com/eea/volto-arcgis-block/pull/147)
+- Merge pull request #148 from eea/develop [`24266fb`](https://github.com/eea/volto-arcgis-block/commit/24266fb3a0c1662d22ae0529dc1d5a25c711cf97)
+- Revert "Revert "Mapviewer menu and map viewer options persistence"" [`ad6e440`](https://github.com/eea/volto-arcgis-block/commit/ad6e440cdc160cffb1e86e1b26e501dbe648476c)
+- Revert "code coverage removal" [`376f2d1`](https://github.com/eea/volto-arcgis-block/commit/376f2d1cd6e4e5110b3b63d5114af1bcfebe094b)
+- Revert "Update cypress.json" [`43d01a0`](https://github.com/eea/volto-arcgis-block/commit/43d01a0a95a58ef5215c6cbf18223ca30a11b9cc)
+- Revert "Update cypress.json" [`054c4ae`](https://github.com/eea/volto-arcgis-block/commit/054c4ae1767e1f26e6ec7e96a0e26a9711f29f04)
+- Update cypress.json [`be285ff`](https://github.com/eea/volto-arcgis-block/commit/be285fff0c53e06a0180d5318cce81195eabcf80)
+- Update cypress.json [`a7f2118`](https://github.com/eea/volto-arcgis-block/commit/a7f2118acb7b048b4cef85aa9663c2244a1c9ca0)
+- linting fix [`27e969a`](https://github.com/eea/volto-arcgis-block/commit/27e969a7a411fd4646e0e742ce846efc0d79703e)
+- linting fix [`7f6fcc7`](https://github.com/eea/volto-arcgis-block/commit/7f6fcc738b9407c8caf27e999ac2a2f810235284)
+- code cleaning [`3fdf30e`](https://github.com/eea/volto-arcgis-block/commit/3fdf30e6c7dba8689ddd33278886dda90c781c3d)
+- map viewer persistence implemented [`7173c05`](https://github.com/eea/volto-arcgis-block/commit/7173c057aafe2cfad5fb717952a5d686030bef05)
+
 #### [0.1.46](https://github.com/eea/volto-arcgis-block/compare/0.1.45...0.1.46)
 
+> 23 June 2022
+
+- Develop [`#146`](https://github.com/eea/volto-arcgis-block/pull/146)
 - Bugs n improvements [`#145`](https://github.com/eea/volto-arcgis-block/pull/145)
 - Develop [`#144`](https://github.com/eea/volto-arcgis-block/pull/144)
 - ESLint fix [`6ce7032`](https://github.com/eea/volto-arcgis-block/commit/6ce7032bbb204cbca03badc6a770d6d46801ce6c)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.46",
+  "version": "0.1.49",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/MapViewer.jsx

@@ -19,7 +19,7 @@ import MenuWidget from './MenuWidget';
 
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom, intl;
-
+let mapStatus = {};
 const CheckLanguage = () => {
   const { locale } = useIntl();
   intl.setLocale(locale);
@@ -50,6 +50,20 @@ class MapViewer extends React.Component {
     this.state = {};
   }
 
+  setCenterState(centerStatus) {
+    mapStatus.center = centerStatus;
+    sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
+  }
+
+  setZoomState(zoomStatus) {
+    mapStatus.zoom = zoomStatus;
+    sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
+  }
+
+  recoverState() {
+    return JSON.parse(sessionStorage.getItem('mapStatus'));
+  }
+
   updateArea(shared_value) {
     this.mapViewer.setState({ area: shared_value });
   }
@@ -73,17 +87,32 @@ class MapViewer extends React.Component {
   async componentDidMount() {
     loadCss();
     await this.loader();
+
     // this.mapdiv.current is the reference to the current DOM element of
     // this.mapdiv after it was mounted by the render() method
     this.map = new Map({
       basemap: 'topo',
     });
 
+    if (
+      mapStatus === null ||
+      (mapStatus.zoom === null && mapStatus.center === null) ||
+      Object.entries(mapStatus).length === 0
+    ) {
+      mapStatus = {};
+      mapStatus.zoom = this.mapCfg.zoom;
+      mapStatus.center = this.mapCfg.center;
+      this.setCenterState(this.mapCfg.zoom);
+      this.setZoomState(this.mapCfg.center);
+    } else {
+      mapStatus = this.recoverState();
+    }
+
     this.view = new MapView({
       container: this.mapdiv.current,
       map: this.map,
-      center: this.mapCfg.center,
-      zoom: this.mapCfg.zoom,
+      center: mapStatus.center,
+      zoom: mapStatus.zoom,
       constraints: {
         minZoom: this.mapCfg.minZoom,
         maxZoom: this.mapCfg.maxZoom,
@@ -98,6 +127,14 @@ class MapViewer extends React.Component {
     this.view.ui.add(this.zoom, {
       position: 'top-right',
     });
+
+    this.view.watch('center', (newValue, oldValue, property, object) => {
+      this.setCenterState(newValue);
+    });
+
+    this.view.watch('zoom', (newValue, oldValue, property, object) => {
+      this.setZoomState(newValue);
+    });
     this.view.popup.autoOpenEnabled = false;
     // After launching the MapViewerConfig action
     // we will have stored the json response here:
@@ -111,6 +148,10 @@ class MapViewer extends React.Component {
     //this.setState({});
   }
 
+  setWidgetState() {}
+
+  setSaveMapChange() {}
+
   setActiveWidget(widget) {
     if (!widget) {
       this.activeWidget = null;

package/src/components/MapViewer/MenuWidget.jsx

@@ -461,6 +461,7 @@ class MenuWidget extends React.Component {
     //to watch the component
     this.setState({});
     this.openMenu();
+    this.loadLayers();
   }
 
   checkUrl() {
@@ -1021,7 +1022,7 @@ class MenuWidget extends React.Component {
     let group = this.getGroup(elem);
     if (elem.checked) {
       this.map.add(this.layers[elem.id]);
-      this.layers[elem.id].visible = true;
+      this.layers[elem.id].visible = true; //layer id
       this.visibleLayers[elem.id] = ['fas', 'eye'];
       this.timeLayers[elem.id] = ['far', 'clock'];
       if (group) {
@@ -1043,12 +1044,14 @@ class MenuWidget extends React.Component {
           elem,
           Object.keys(this.activeLayersJSON).length,
         );
+        this.saveLayer(elem.id);
       }
       let nuts = this.map.layers.items.find((layer) => layer.title === 'nuts');
       if (nuts) {
         this.map.reorder(nuts, this.map.layers.items.length + 1);
       }
     } else {
+      this.deleteLayer(elem.id);
       this.layers[elem.id].opacity = 1;
       this.map.remove(this.layers[elem.id]);
       delete this.activeLayersJSON[elem.id];
@@ -1097,7 +1100,6 @@ class MenuWidget extends React.Component {
   toggleDataset(value, id, e) {
     let layerdef = e.getAttribute('defcheck');
     let splitdefCheck = layerdef.split(',');
-
     let layerChecks = [];
     let selector = [];
     if (value) {
@@ -1632,6 +1634,63 @@ class MenuWidget extends React.Component {
     });
   }
 
+  /**
+   * Method to save checked layers
+   */
+  saveLayer(layer) {
+    let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
+    if (checkedLayers === null) {
+      checkedLayers = [layer];
+      sessionStorage.setItem('checkedLayers', JSON.stringify(checkedLayers));
+    } else {
+      if (!checkedLayers.includes(layer)) {
+        checkedLayers.push(layer);
+      }
+      sessionStorage.setItem('checkedLayers', JSON.stringify(checkedLayers));
+    }
+  }
+
+  /**
+   * Method to delete checked layers
+   */
+  deleteLayer(layer) {
+    let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
+    for (var i = 0; i < checkedLayers.length; i++) {
+      if (checkedLayers[i] === layer) {
+        checkedLayers.splice(i, 1);
+      }
+    }
+    sessionStorage.setItem('checkedLayers', JSON.stringify(checkedLayers));
+  }
+  /**
+   * Method to load previously checked layers
+   */
+  loadLayers() {
+    let event = new MouseEvent('click', {
+      view: window,
+      bubbles: true,
+      cancelable: false,
+    });
+
+    let layers = JSON.parse(sessionStorage.getItem('checkedLayers'));
+    if (layers) {
+      for (let i = 0; i < layers.length; i++) {
+        let elem = layers[i];
+        let node = document.getElementById(elem);
+        node.dispatchEvent(event);
+        let dropdown = document
+          .getElementById(elem)
+          .closest('.map-menu-dropdown');
+        dropdown
+          .querySelector('.ccl-expandable__button')
+          .setAttribute('aria-expanded', 'true');
+        let scrollPosition = document
+          .getElementById(elem)
+          .closest('.map-menu-product-dropdown').offsetTop;
+        document.querySelector('.panels').scrollTop = scrollPosition;
+      }
+    }
+  }
   /**
    * Method to change between tabs
    */

package/src/components/MapViewer/css/ArcgisMap.css

@@ -411,6 +411,7 @@
 }
 
 .map-menu-dropdown .ccl-expandable__button .dropdown-icon {
+  height: 1.25rem;
   margin-right: 1rem;
   color: black;
 }
@@ -419,16 +420,12 @@
   .ccl-expandable__button[aria-expanded='false']
   .dropdown-icon {
   transform: rotate(0deg);
-  -webkit-transition: transform 0.3s ease-out;
-  transition: transform 0.3s ease-out;
 }
 
 .map-menu-dropdown
   .ccl-expandable__button[aria-expanded='true']
   .dropdown-icon {
   transform: rotate(90deg);
-  -webkit-transition: transform 0.3s ease-out;
-  transition: transform 0.3s ease-out;
 }
 
 .map-menu-dropdown .ccl-expandable__button::after {
@@ -840,6 +837,7 @@
 
 .right-panel-content {
   overflow: auto;
+  height: 100%;
   padding: 1rem;
 }
 

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -382,7 +382,9 @@ class UseCasesMapViewer extends React.Component {
                 if (data_country > 0) {
                   string += `<div>${data_country} Use cases with one or multi-country coverage</div>`;
                 }
-
+                if (data.features.length === 0) {
+                  string += `<div>0 Use cases</div>`;
+                }
                 view.popup.open({
                   location: {
                     latitude: response.results[0].graphic.geometry.latitude,

package/src/components/UseCasesMapViewer/css/ArcgisMap.css

@@ -123,22 +123,16 @@
   font-family: 'ccl-icons';
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
 }
 
 .use-cases-dropdown .ccl-expandable__button[aria-expanded='false']::after {
   content: '\e914';
   transform: rotate(0deg);
-  -webkit-transition: transform 0.3s ease-out;
-  transition: transform 0.3s ease-out;
 }
 
 .use-cases-dropdown .ccl-expandable__button[aria-expanded='true']::after {
   content: '\e914';
   transform: rotate(-180deg);
-  -webkit-transition: transform 0.3s ease-out;
-  transition: transform 0.3s ease-out;
 }
 
 .use-cases-dropdown .ccl-expandable__button::after {