@eeacms/volto-arcgis-block 0.1.87 → 0.1.89

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.89](https://github.com/eea/volto-arcgis-block/compare/0.1.88...0.1.89) - 19 January 2023
+
+### [0.1.88](https://github.com/eea/volto-arcgis-block/compare/0.1.87...0.1.88) - 17 January 2023
+
+#### :hammer_and_wrench: Others
+
+- lint [masanchez85 - [`047ec22`](https://github.com/eea/volto-arcgis-block/commit/047ec22ce5a4f69283c37030a4d0f7794f9f089e)]
+- Code fixes [masanchez85 - [`01c9eda`](https://github.com/eea/volto-arcgis-block/commit/01c9eda63016c26eba1b9f7bfc7760b7bea92199)]
 ### [0.1.87](https://github.com/eea/volto-arcgis-block/compare/0.1.86...0.1.87) - 12 January 2023
 
 ### [0.1.86](https://github.com/eea/volto-arcgis-block/compare/0.1.85...0.1.86) - 11 January 2023

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -1,5 +1,6 @@
 import React, { createRef } from 'react';
 import { loadModules } from 'esri-loader';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 var Graphic,
   Extent,
@@ -22,7 +23,10 @@ class AreaWidget extends React.Component {
       : createRef();
     //Initially, we set the state of the component to
     //not be showing the basemap panel
-    this.state = { showMapMenu: false };
+    this.state = {
+      showMapMenu: false,
+      showInfoPopup: false,
+    };
     this.menuClass =
       'esri-icon-cursor-marquee esri-widget--button esri-widget esri-interactive';
     // Enable defaultPopup option to charge popup and highlifght feature
@@ -164,6 +168,9 @@ class AreaWidget extends React.Component {
       if (e.action === 'start') {
         if (extentGraphic) this.props.view.graphics.remove(extentGraphic);
         origin = this.props.view.toMap(e);
+        this.setState({
+          showInfoPopup: true,
+        });
       } else if (e.action === 'update') {
         if (extentGraphic) this.props.view.graphics.remove(extentGraphic);
         let p = this.props.view.toMap(e);
@@ -184,7 +191,9 @@ class AreaWidget extends React.Component {
         this.props.view.graphics.add(extentGraphic);
       }
     });
-    this.setState({ ShowGraphics: drawGraphics });
+    this.setState({
+      ShowGraphics: drawGraphics,
+    });
   }
   clearWidget() {
     this.props.mapViewer.view.popup.close();
@@ -196,6 +205,9 @@ class AreaWidget extends React.Component {
     this.nutsGroupLayer.removeAll();
     this.props.view.graphics.removeAll();
     this.props.updateArea();
+    this.setState({
+      showInfoPopup: false,
+    });
   }
   /**
    * This method is executed after the rener method is executed
@@ -389,6 +401,21 @@ class AreaWidget extends React.Component {
               </div>
             </div>
           </div>
+          {this.state.showInfoPopup && (
+            <div className="map-container">
+              <div className="drawRectanglePopup-block">
+                <div className="drawRectanglePopup-content">
+                  <span className="drawRectanglePopup-icon">
+                    <FontAwesomeIcon icon={['fas', 'download']} />
+                  </span>
+                  <div className="drawRectanglePopup-text">
+                    Click on the download icon of the "Menu of products" to
+                    download the dataset
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </>
     );

package/src/components/MapViewer/MenuWidget.jsx

@@ -34,7 +34,6 @@ export const AddCartItem = ({
   const [message, setMessage] = useState(0);
   const [showMessage] = useState(false);
   const [modal, setModal] = useState(false);
-  const [loginUrl] = React.useState('');
 
   const checkArea = (e) => {
     let check = document.querySelector('.area-panel input:checked').value;
@@ -257,7 +256,7 @@ export const AddCartItem = ({
                   <br></br>
                   <li>
                     <p>
-                      If you would want to download the full dataset, click{' '}
+                      If you want to download the full dataset, click{' '}
                       <UniversalLink
                         openLinkInNewTab
                         href="https://clms-prod.eea.europa.eu/en/how-to-guides/how-to-download-spatial-data/how-to-download-m2m"
@@ -362,88 +361,17 @@ export const AddCartItem = ({
       ) : (
         // If isLoggedIn == false and user clicks download
         <>
-          <Modal
-            size="tiny"
-            onClose={() => closeModal()}
-            onOpen={() => showModal()}
-            open={modal}
-            className="modal-clms-container"
-          >
-            <div className="modal-close modal-clms-close">
-              <span
-                className="ccl-icon-close"
-                aria-label="Close"
-                onClick={(e) => closeModal(e)}
-                onKeyDown={(e) => closeModal(e)}
-                tabIndex="0"
-                role="button"
-              ></span>
-            </div>
-            <Modal.Content>
-              <div className="content">
-                <div className="modal-login-title">
-                  This website uses EU Login for user authentication.
-                </div>
-                <div className="modal-login-text">
-                  <p>
-                    {' '}
-                    EU Login, the European Commission Authentication Service,
-                    enables you to access various web applications centrally
-                    using the same e-mail and password. You can read more{' '}
-                    <UniversalLink
-                      openLinkInNewTab
-                      href="https://ecas.ec.europa.eu/cas/about.html"
-                    >
-                      here
-                    </UniversalLink>
-                    .
-                  </p>
-                  <p>
-                    {' '}
-                    If you have EU Login account, please click 'Login using EU
-                    Login'.
-                  </p>
-                  <p>
-                    If you don't have EU Login account, please follow this{' '}
-                    <UniversalLink
-                      openLinkInNewTab
-                      href="https://ecas.ec.europa.eu/cas/eim/external/register.cgi"
-                    >
-                      link
-                    </UniversalLink>{' '}
-                    to create it.
-                  </p>
-                  <p>
-                    If you have other questions, please contact our
-                    <UniversalLink openLinkInNewTab href="/en/service-desk">
-                      {' '}
-                      Service desk
-                    </UniversalLink>
-                    .
-                  </p>
-                </div>
-              </div>
-            </Modal.Content>
-            <Modal.Actions>
-              <div className="modal-buttons">
-                <a
-                  href={loginUrl || '#'}
-                  className="ccl-button ccl-button-green"
-                >
-                  Login using EU Login
-                </a>
-              </div>
-            </Modal.Actions>
-          </Modal>
           <Popup
             trigger={
               <span
                 className={'map-menu-icon map-menu-icon-login'}
                 onClick={(e) => {
-                  showModal(e);
+                  //showModal(e);
+                  document.querySelector('.header-login-link').click();
                 }}
                 onKeyDown={(e) => {
-                  showModal(e);
+                  //showModal(e);
+                  document.querySelector('.header-login-link').click();
                 }}
                 tabIndex="0"
                 role="button"

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

@@ -1123,3 +1123,35 @@ input[type='range']::-ms-track {
   color: #a0b128 !important;
   content: '\e800';
 }
+
+/*Draw rectangle popup*/
+
+.drawRectanglePopup-content {
+  /*margin-right: calc(100vw - 250px);
+  margin-top: -8rem;*/
+  position: absolute;
+  display: flex;
+  width: 19rem;
+  height: 60px;
+  justify-content: space-between;
+  padding: 0.6rem 0.8rem 0.8rem 0.8rem;
+  background-color: white;
+  transform: translate(-34vw, -214%);
+}
+
+.drawRectanglePopup-content .drawRectanglePopup-icon {
+  margin-top: 0.6rem;
+  margin-right: 0.6rem;
+  color: #a0b128;
+  font-size: 1rem;
+  text-decoration: none;
+}
+
+/*.drawRectanglePopup-icon .svg{
+  margin-top: 0.6rem;
+}*/
+
+.drawRectanglePopup-text {
+  font-family: 'Lato', sans-serif;
+  font-size: 0.875rem;
+}