@eeacms/volto-arcgis-block - npm Package Compare versions

Comparing version 0.1.11 to 0.1.12

CHANGELOG.md

@@ -7,4 +7,22 @@ ### Changelog
 
+#### [0.1.12](https://github.com/eea/volto-arcgis-block/compare/0.1.11...0.1.12)
+
+- fixing linter errors [`792453a`](https://github.com/eea/volto-arcgis-block/commit/792453a7da5fec397a733b6bcfd1f22a2c0ae562)
+- Fixing linter error [`bd89f34`](https://github.com/eea/volto-arcgis-block/commit/bd89f34bac95770bf742abd94a9b8212b608fcc2)
+- Lint corrections [`ce60e41`](https://github.com/eea/volto-arcgis-block/commit/ce60e41a686d795852b83a797a164f52bb218c52)
+- Changing configuration file by configuration service [`abac8bd`](https://github.com/eea/volto-arcgis-block/commit/abac8bdbb4da66ce471f2b4cd44fde38f71de243)
+- ESLint fix [`db8a2f7`](https://github.com/eea/volto-arcgis-block/commit/db8a2f7448b01fdf1c0ce8045efeb92343f7ae1d)
+- Download viewer [`e492290`](https://github.com/eea/volto-arcgis-block/commit/e492290a0f1d1357867a1b73ca9f6be95d6b8b32)
+- Adapting to new parameter Download of configuration service [`3940501`](https://github.com/eea/volto-arcgis-block/commit/39405013ef3a1ab46761415bab454155fb03653d)
+- last commit 63d6c1e4fef067f4ae373bb960be195814964b18 has been brought back [`9ce3aa9`](https://github.com/eea/volto-arcgis-block/commit/9ce3aa9c9e76949e7a4bf7c3549693706c156170)
+- modify the url passed by the block [`37231c0`](https://github.com/eea/volto-arcgis-block/commit/37231c0ac4df86ea70fe3553bf9d1d7ee1fd757a)
+- launch the action defined [`2bc8ff3`](https://github.com/eea/volto-arcgis-block/commit/2bc8ff3c6466c43947278feda0a9432f499384ef)
+- action and reducer for requesting the url [`12a26d0`](https://github.com/eea/volto-arcgis-block/commit/12a26d051f0faababab741738473c42d66dad652)
+- trying to recover information from configuragion service [`d92bd6e`](https://github.com/eea/volto-arcgis-block/commit/d92bd6ea3320b850ae4394a61a57f8c3024f9bf1)
+
 #### [0.1.11](https://github.com/eea/volto-arcgis-block/compare/0.1.10...0.1.11)
 
+> 15 October 2021
+
+- Develop [`#29`](https://github.com/eea/volto-arcgis-block/pull/29)
 - Add background color to map container [`#28`](https://github.com/eea/volto-arcgis-block/pull/28)
@@ -11,0 +29,0 @@

package.json

 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "volto-arcgis-block: Volto add-on",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/components/Blocks/MapViewer/Edit.jsx

@@ -25,7 +25,3 @@ import React from 'react';
         cfg={config}
-        url={
-          props.properties.parent
-            ? props.properties.parent['@id'] + '/@mapviewer'
-            : null
-        }
+        url={props.properties.parent ? props.properties.parent['@id'] : 'en'}
         customClass={getClassName(data)}
@@ -32,0 +28,0 @@ id={block}

src/components/Blocks/MapViewer/View.jsx

@@ -18,3 +18,3 @@ import React from 'react';
       cfg={config}
-      url={props.properties.parent['@id'] + '/@mapviewer'}
+      url={props.properties.parent['@id']}
       customClass={getClassName(data)}
@@ -21,0 +21,0 @@ id={id}

src/components/MapViewer/AreaWidget.jsx

 import React, { createRef } from 'react';
 //import "@arcgis/core/assets/esri/css/main.css";
 //import "./css/ArcgisMap.css";
+//import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { loadModules } from 'esri-loader';
@@ -16,3 +17,5 @@
     //We create a reference to a DOM element to be mounted
-    this.container = createRef();
+    this.container = this.props.download
+      ? document.querySelector('#download_panel')
+      : createRef();
     //Initially, we set the state of the component to
@@ -149,3 +152,2 @@ //not be showing the basemap panel
     await this.loader();
-    this.props.view.ui.add(this.container.current, 'top-right');
     this.nutsGroupLayer = new GroupLayer({
@@ -156,2 +158,5 @@ title: 'nuts',
     this.props.map.add(this.nutsGroupLayer);
+    this.props.download
+      ? this.props.view.ui.add(this.container)
+      : this.props.view.ui.add(this.container.current, 'top-right');
   }
@@ -166,11 +171,13 @@ /**
         <div ref={this.container} className="area-container">
-          <div
-            className={this.menuClass}
-            id="map_area_button"
-            title="Area"
-            onClick={this.openMenu.bind(this)}
-            onKeyDown={this.openMenu.bind(this)}
-            tabIndex="0"
-            role="button"
-          ></div>
+          {!this.props.download && (
+            <div
+              className={this.menuClass}
+              id="map_area_button"
+              title="Area"
+              onClick={this.openMenu.bind(this)}
+              onKeyDown={this.openMenu.bind(this)}
+              tabIndex="0"
+              role="button"
+            ></div>
+          )}
           <div className="area-panel">
@@ -258,2 +265,36 @@ <div className="ccl-form">
                 </div>
+                {this.props.download && (
+                  <div>
+                    {/* <div class="map-download-resource">
+                      <div class="ccl-form">
+                        <div class="map-download-header">
+                          <label for="download_area_select" class="map-download-header-title">Download resource as</label>
+                          <span class="info-icon" tooltip="Info" direction="up">
+                            <FontAwesomeIcon
+                              className="map-menu-icon"
+                              icon={['fas', 'info-circle']}
+                            />
+                          </span>
+                        </div>
+                        <div class="ccl-select-container">
+                          <div class="ccl-select-container">
+                            <select class="ccl-select" id="download_area_select" name="" >
+                              <option value="option1">GeoTiff</option>
+                              <option value="option2">ESRI Geodatabase</option>
+                              <option value="option3">SQLite Database</option>
+                            </select>
+                          </div>
+                        </div>
+                      </div>
+                    </div> */}
+                    <div class="map-download-buttons">
+                      <button class="ccl-button ccl-button-green">
+                        Add to cart
+                      </button>
+                      <button class="ccl-button ccl-button--default">
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                )}
               </fieldset>
@@ -260,0 +301,0 @@ </div>

src/components/MapViewer/MapViewer.jsx

@@ -12,2 +12,6 @@ import React, { createRef } from 'react';
 import MenuWidget from './MenuWidget';
+import { MapViewerConfig } from '../../actions';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
@@ -22,8 +26,2 @@ var Map, MapView, Zoom;
   constructor(props) {
-    /* --> this is a code to fetch for the URL
-    console.log(props);
-    fetch(props.url)
-    .then(response =>{console.log(response); response.json()})
-    .then(data => console.log(data)); <-- */
-
     super(props);
@@ -86,2 +84,7 @@ //we create a reference to the DOM element that will
 
+    // After launching the MapViewerConfig action
+    // we will have stored the json response here:
+    // this.props.mapviewer_config
+    this.props.MapViewerConfig(this.props.url);
+
     //Once we have created the MapView, we need to ensure that the map div
@@ -92,3 +95,3 @@ //is refreshed in order to show the map on it. To do so, we need to
     //react component to render itself again
-    this.setState({});
+    //this.setState({});
   }
@@ -118,2 +121,3 @@
   renderBasemap() {
+    if (this.props.mapviewer_config.Download) return;
     if (this.view) return <BasemapWidget view={this.view} mapViewer={this} />;
@@ -127,2 +131,3 @@ }
   renderMeasurement() {
+    if (this.props.mapviewer_config.Download) return;
     if (this.view)
@@ -133,2 +138,3 @@ return <MeasurementWidget view={this.view} mapViewer={this} />;
   renderPrint() {
+    if (this.props.mapviewer_config.Download) return;
     if (this.view) return <PrintWidget view={this.view} mapViewer={this} />;
@@ -138,4 +144,12 @@ }
   renderArea() {
+    if (this.props.mapviewer_config.Download) return;
     if (this.view)
-      return <AreaWidget view={this.view} map={this.map} mapViewer={this} />;
+      return (
+        <AreaWidget
+          view={this.view}
+          map={this.map}
+          mapViewer={this}
+          download={this.props.mapviewer_config.Download}
+        />
+      );
   }
@@ -152,3 +166,4 @@
           view={this.view}
-          conf={this.compCfg}
+          conf={this.props.mapviewer_config.Components}
+          download={this.props.mapviewer_config.Download}
           map={this.map}
@@ -184,2 +199,9 @@ mapViewer={this}
 
-export default MapViewer;
+export default compose(
+  connect(
+    (state, props) => ({
+      mapviewer_config: state.mapviewer_config.mapviewer_config,
+    }),
+    { MapViewerConfig },
+  ),
+)(MapViewer);

src/components/MapViewer/MenuWidget.jsx

 import React, { createRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { loadModules, loadCss } from 'esri-loader';
-// import { layer } from '@fortawesome/fontawesome-svg-core';
+import AreaWidget from './AreaWidget';
 var WMSLayer;
@@ -72,3 +72,6 @@
     this.props.view.ui.add(this.container.current, 'top-left');
-
+    if (this.props.download) {
+      document.querySelector('.area-panel').style.display = 'block';
+      document.querySelector('.area-panel input:checked').click();
+    }
     //to watch the component
@@ -718,14 +721,29 @@ this.setState({});
               </span>
-              <span
-                className="tab"
-                id="active_label"
-                role="tab"
-                aria-controls="active_panel"
-                aria-selected="false"
-                onClick={(e) => this.toggleTab(e)}
-                onKeyDown={(e) => this.toggleTab(e)}
-                tabIndex="0"
-              >
-                Active on map
-              </span>
+              {this.props.download ? (
+                <span
+                  className="tab"
+                  id="download_label"
+                  role="tab"
+                  aria-controls="download_panel"
+                  aria-selected="false"
+                  onClick={(e) => this.toggleTab(e)}
+                  onKeyDown={(e) => this.toggleTab(e)}
+                  tabIndex="0"
+                >
+                  Download
+                </span>
+              ) : (
+                <span
+                  className="tab"
+                  id="active_label"
+                  role="tab"
+                  aria-controls="active_panel"
+                  aria-selected="false"
+                  onClick={(e) => this.toggleTab(e)}
+                  onKeyDown={(e) => this.toggleTab(e)}
+                  tabIndex="0"
+                >
+                  Active on map
+                </span>
+              )}
             </div>
@@ -741,15 +759,31 @@ <div className="panels" id="paneles">
               </div>
-              <div
-                className="panel"
-                id="active_panel"
-                role="tabpanel"
-                aria-hidden="true"
-              >
-                <div id="active_layers" className="map-active-layers">
-                  {this.activeLayersAsArray()}
-                  <span className="message" id="nolayers_message">
-                    No layers selected
-                  </span>
+              {this.props.download ? (
+                <div
+                  className="panel"
+                  id="download_panel"
+                  role="tabpanel"
+                  aria-hidden="true"
+                >
+                  <AreaWidget
+                    view={this.props.view}
+                    map={this.props.map}
+                    mapViewer={this.props.mapViewer}
+                    download={this.props.download}
+                  />
                 </div>
-              </div>
+              ) : (
+                <div
+                  className="panel"
+                  id="active_panel"
+                  role="tabpanel"
+                  aria-hidden="true"
+                >
+                  <div id="active_layers" className="map-active-layers">
+                    {this.activeLayersAsArray()}
+                    <span className="message" id="nolayers_message">
+                      No layers selected
+                    </span>
+                  </div>
+                </div>
+              )}
             </div>
@@ -756,0 +790,0 @@ </div>

src/components/MapViewer/PrintWidget.jsx

@@ -93,6 +93,9 @@ import React, { createRef } from 'react';
             optSVGZ && optSVGZ.parentElement.removeChild(optSVGZ);
-            let advanceOptions = document.querySelector(
+            /*let advanceOptions = document.querySelector(
               '.esri-print__advanced-options-button',
+            );*/
+            let fileName = document.querySelector(
+              "[data-input-name='fileName']",
             );
-            observer2.observe(advanceOptions, { attributes: true });
+            fileName.parentElement.setAttribute('style', 'display:none');
           } else {
@@ -104,16 +107,3 @@ this.setLayoutConstraints();
     });
-    observer.observe(mapOnly, { attributes: true });
-
-    var observer2 = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.attributeName === 'aria-expanded') {
-          let currentExpand = mutation.target.getAttribute('aria-expanded');
-          if (currentExpand === 'true') {
-            this.setTextFilters();
-          } else {
-            this.setLayoutConstraints();
-          }
-        }
-      });
-    });
+    mapOnly && observer.observe(mapOnly, { attributes: true });
   }
@@ -143,3 +133,3 @@
     });
-    observer.observe(advanceOptions, { attributes: true });
+    advanceOptions && observer.observe(advanceOptions, { attributes: true });
   }
@@ -146,0 +136,0 @@

src/index.js

@@ -12,3 +12,4 @@ import world from '@plone/volto/icons/world.svg';
 import { USE_CASES_BLOCK } from '@eeacms/volto-arcgis-block/constants';
-
+// CUSTOM REDUCERS IMPORT
+import reducers from './reducers';
 export default (config) => {
@@ -60,3 +61,7 @@ config.blocks.blocksConfig[ARCGIS_BLOCK] = {
   };
+  config.addonReducers = {
+    ...config.addonReducers,
+    ...reducers,
+  };
   return config;
 };

No alert changes

Improved metrics

Total package byte prevSize

10507009

increased by0.07%

Number of package files

59

increased by7.27%

Lines of code

4981

increased by3.92%

No dependency changes