@eeacms/volto-arcgis-block 0.1.183 → 0.1.184

package/CHANGELOG.md

@@ -4,6 +4,11 @@ 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.184](https://github.com/eea/volto-arcgis-block/compare/0.1.183...0.1.184) - 21 August 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2454 (feat): ESRI Copyright displayed in Area Selection widget when selecting countries [Urkorue - [`e7d060d`](https://github.com/eea/volto-arcgis-block/commit/e7d060dfd8436584e34bc08d67840875b2e3c136)]
 ### [0.1.183](https://github.com/eea/volto-arcgis-block/compare/0.1.182...0.1.183) - 7 August 2023
 
 #### :hammer_and_wrench: Others

package/Jenkinsfile

@@ -198,7 +198,7 @@ pipeline {
         }
       }
     }
-
+/*
     stage('SonarQube compare to master') {
       when {
         allOf {
@@ -223,7 +223,7 @@ pipeline {
         }
       }
     }
-
+*/
     stage('Pull Request') {
       when {
         not {

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -259,6 +259,7 @@ class AreaWidget extends React.Component {
       document.querySelector('.drawRectanglePopup-block').style.display =
         'block';
     }
+    this.props.view.ui._removeComponents(['attribution']);
   }
 
   /**
@@ -272,6 +273,7 @@ class AreaWidget extends React.Component {
     });
     this.props.map.add(this.nutsGroupLayer);
     this.props.view.on('click', (event) => {
+      this.props.view.ui.components = ['attribution'];
       if (
         (this.props.mapViewer.activeWidget === this || this.props.download) &&
         (this.props.mapViewer.activeWidget

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -0,0 +1,152 @@
+import React, { createRef } from 'react';
+//import "@arcgis/core/assets/esri/css/main.css";
+//import "./css/ArcgisMap.css";
+import { loadModules } from 'esri-loader';
+
+export const BOOKMARK_SESSION_KEY = 'bookmark_session';
+
+var Bookmarks;
+class BookmarkWidget extends React.Component {
+  /**
+   * Creator of the Basemap widget class
+   * @param {*} props
+   */
+  constructor(props) {
+    super(props);
+    //We create a reference to a DOM element to be mounted
+    this.container = createRef();
+    //Initially, we set the state of the component to
+    //not be showing the basemap panel
+    this.state = {
+      showMapMenu: false,
+    };
+    this.mapViewer = this.props.mapViewer;
+    this.userID = this.props.userID;
+    this.menuClass =
+      'esri-icon-bookmark esri-widget--button esri-widget esri-interactive';
+  }
+
+  loader() {
+    return loadModules(['esri/widgets/Bookmarks']).then(([_Bookmarks]) => {
+      Bookmarks = _Bookmarks;
+    });
+  }
+  /**
+   * Method that will be invoked when the
+   * button is clicked. It controls the open
+   * and close actions of the component
+   */
+  openMenu() {
+    if (this.state.showMapMenu) {
+      this.props.mapViewer.setActiveWidget();
+      this.container.current.querySelector('.right-panel').style.display =
+        'none';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.remove('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.remove('show-panel');
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: false });
+    } else {
+      this.props.mapViewer.setActiveWidget(this);
+      this.container.current.querySelector('.right-panel').style.display =
+        'flex';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.add('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.add('show-panel');
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: true });
+    }
+  }
+  /**
+   * This method is executed after the rener method is executed
+   */
+
+  async componentDidMount() {
+    await this.loader();
+    this.props.view.ui.add(this.container.current, 'top-right');
+    let sessionBookmarks = {};
+    if (this.userID != null) {
+      sessionBookmarks =
+        JSON.parse(
+          localStorage.getItem(BOOKMARK_SESSION_KEY + '_' + this.userID),
+        ) || {};
+    }
+    this.Bookmarks = new Bookmarks({
+      view: this.props.view,
+      // allows bookmarks to be added, edited, or deleted
+      editingEnabled: true,
+      visibleElements: {
+        time: false, // don't show the time (h:m:s) next to the date
+      },
+      container: document.querySelector('.bookmark-panel'),
+      bookmarks: sessionBookmarks,
+    });
+
+    this.Bookmarks.when(() => {
+      this.Bookmarks.bookmarks.on('change', () => {
+        if (this.userID != null) {
+          localStorage.setItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID,
+            JSON.stringify(this.Bookmarks.bookmarks.items),
+          );
+        }
+      });
+      this.Bookmarks.on('bookmark-edit', () => {
+        if (this.userID != null) {
+          localStorage.setItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID,
+            JSON.stringify(this.Bookmarks.bookmarks.items),
+          );
+        }
+      });
+    });
+  }
+  /**
+   * This method renders the component
+   * @returns jsx
+   */
+  render() {
+    return (
+      <>
+        <div ref={this.container} className="legend-container">
+          <div tooltip="Bookmark" direction="left" type="widget">
+            <div
+              className={this.menuClass}
+              id="legend_button"
+              aria-label="Bookmark"
+              onClick={this.openMenu.bind(this)}
+              onKeyDown={this.openMenu.bind(this)}
+              tabIndex="0"
+              role="button"
+            ></div>
+          </div>
+          <div className="right-panel">
+            <div className="right-panel-header">
+              <span>Bookmark</span>
+              <span
+                className="map-menu-icon esri-icon-close"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={this.openMenu.bind(this)}
+                tabIndex="0"
+                role="button"
+              ></span>
+            </div>
+            <div className="right-panel-content">
+              <div className="bookmark-panel"></div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default BookmarkWidget;

package/src/components/MapViewer/MapViewer.jsx

@@ -18,6 +18,7 @@ import InfoWidget from './InfoWidget';
 import MenuWidget from './MenuWidget';
 import HotspotWidget from './HotspotWidget';
 import PanWidget from './PanWidget';
+import BookmarkWidget from './BookmarkWidget';
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom, intl, Basemap, WebTileLayer, Extent;
 let mapStatus = {};
@@ -55,6 +56,7 @@ class MapViewer extends React.Component {
     this.activeLayersArray = {};
     this.props.mapviewer_config.loading = true;
     this.cfgUrls = this.props.cfg.Urls;
+    this.userID = null;
   }
 
   activeLayersHandler(newActiveLayers) {
@@ -90,6 +92,7 @@ class MapViewer extends React.Component {
       'esri/Basemap',
       'esri/layers/WebTileLayer',
       'esri/geometry/Extent',
+      'esri/widgets/Bookmarks',
     ]).then(
       ([_Map, _MapView, _Zoom, _intl, _Basemap, _WebTileLayer, _Extent]) => {
         [Map, MapView, Zoom, intl, Basemap, WebTileLayer, Extent] = [
@@ -350,6 +353,10 @@ class MapViewer extends React.Component {
       ); //call conf
   }
 
+  renderBookmark() {
+    if (this.view) return <CheckUserID reference={this} />;
+  }
+
   appLanguage() {
     return intl && <CheckLanguage />;
   }
@@ -383,6 +390,7 @@ class MapViewer extends React.Component {
             {this.renderInfo()}
             {this.renderHotspot()}
             {this.renderMenu()}
+            {this.renderBookmark()}
           </div>
         </div>
       );
@@ -407,6 +415,36 @@ export const CheckLogin = ({ reference }) => {
     </>
   );
 };
+export const CheckUserID = ({ reference }) => {
+  let { user_id, isLoggedIn } = useCartState();
+  if (isLoggedIn) {
+    return (
+      <>
+        {
+          <BookmarkWidget
+            view={reference.view}
+            map={reference.map}
+            mapViewer={reference}
+            userID={user_id}
+          />
+        }
+      </>
+    );
+  } else {
+    return (
+      <>
+        {
+          <BookmarkWidget
+            view={reference.view}
+            map={reference.map}
+            mapViewer={reference}
+            userID={null}
+          />
+        }
+      </>
+    );
+  }
+};
 
 export default compose(
   connect(