@eeacms/volto-arcgis-block 0.1.108 → 0.1.110

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.110](https://github.com/eea/volto-arcgis-block/compare/0.1.109...0.1.110) - 28 February 2023
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [Amanda Rodriguez - [`5c523ea`](https://github.com/eea/volto-arcgis-block/commit/5c523eaa749576db2080f7d6dba08c46b32ace32)]
+- ES Lint fix [Amanda Rodriguez - [`bacaca5`](https://github.com/eea/volto-arcgis-block/commit/bacaca5eee7e9d7e03ccb8c8b5f4aa40be0d122e)]
+- CLMS-1758 [Amanda Rodriguez - [`0d43bc6`](https://github.com/eea/volto-arcgis-block/commit/0d43bc6e64ece410eeda3dbfb2ba4245ea4d2dc8)]
+- CLMS-1827 [Amanda Rodriguez - [`1b589c7`](https://github.com/eea/volto-arcgis-block/commit/1b589c7661392692fa534f8c9061b9f11e7c4328)]
+### [0.1.109](https://github.com/eea/volto-arcgis-block/compare/0.1.108...0.1.109) - 28 February 2023
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #306 from eea/develop [Unai Bolivar - [`0772fe3`](https://github.com/eea/volto-arcgis-block/commit/0772fe31cacc0c5e2cbeb369775c98535ec2b64b)]
+- CLMS 1581 & CLMS 1771 pushing both tickets [ujbolivar - [`dd1a580`](https://github.com/eea/volto-arcgis-block/commit/dd1a580d32faff6754121dd49415030920543c72)]
+- CLMS-1771 FIX: Area widget opened by default if user is logged in and downloadTag exists [ujbolivar - [`f629491`](https://github.com/eea/volto-arcgis-block/commit/f629491531dec0dd09234b41184413b3d2e54768)]
+- CLMS-1581 FIX: Hotspot widget stays open after applying filters, and unchecking one hotspotlayer even though another hotspot layer is still checked [ujbolivar - [`e5b18d6`](https://github.com/eea/volto-arcgis-block/commit/e5b18d6477e6bc0dcc7f048835d7ce97483bc9d4)]
 ### [0.1.108](https://github.com/eea/volto-arcgis-block/compare/0.1.107...0.1.108) - 27 February 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.108",
+  "version": "0.1.110",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",
@@ -42,7 +42,8 @@
     "@fortawesome/react-fontawesome": "0.1.14",
     "@eeacms/volto-clms-utils": "*",
     "highcharts": "^9.3.2",
-    "highcharts-react-official": "^3.1.0"
+    "highcharts-react-official": "^3.1.0",
+    "react-datepicker": "4.10.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/components/MapViewer/AreaWidget.jsx

@@ -288,15 +288,14 @@ class AreaWidget extends React.Component {
       ? this.container !== null && this.props.view.ui.add(this.container)
       : this.props.view.ui.add(this.container.current, 'top-right');
 
-    var z = document.createElement('div'); // is a node
-    z.className = 'drawRectanglePopup-block';
-    z.innerHTML =
+    var popup = document.createElement('div');
+    popup.className = 'drawRectanglePopup-block';
+    popup.innerHTML =
       '<div class="drawRectanglePopup-content">' +
       '<span class="drawRectanglePopup-icon"><span class="esri-icon-cursor-marquee"></span></span>' +
       '<div class="drawRectanglePopup-text">Select an area of interest to download a dataset</div>' +
       '</div>';
-
-    this.props.download && this.props.view.ui.add(z, 'top-right');
+    this.props.download && this.props.view.ui.add(popup, 'top-right');
   }
 
   /**

package/src/components/MapViewer/HotspotWidget.jsx

@@ -167,6 +167,8 @@ class HotspotWidget extends React.Component {
         this.props.map.add(this.esriLayer_lc);
         this.props.selectedLayers['lc_filter'] = this.esriLayer_lc;
         this.props.selectedLayers['lc_filter'].visible = true;
+        //set sessionStorage value to keep the widget open
+        sessionStorage.setItem('hotspotFilterApplied', 'true');
       }
     }
   }
@@ -484,10 +486,6 @@ class HotspotWidget extends React.Component {
     );
   }
 
-  /**
-   *  This method is executed before the render method is executed
-   */
-
   /**
    * This method is executed after the rener method is executed
    */

package/src/components/MapViewer/MenuWidget.jsx

@@ -124,6 +124,12 @@ export const AddCartItem = ({
     dataset = cartData[0].Products[0].Datasets[0];
   }
 
+  const setDownloadTag = (val) => {
+    if (!sessionStorage.key('downloadButtonClicked'))
+      sessionStorage.setItem('downloadButtonClicked', 'true');
+    else sessionStorage.setItem('downloadButtonClicked', val);
+  };
+
   return (
     <>
       {download ? (
@@ -132,22 +138,26 @@ export const AddCartItem = ({
             id="map_download_add"
             className="ccl-button ccl-button-green"
             onClick={(e) => {
-              if (dataset.IsTimeSeries && !checkTimeData(dataset)) {
-                document.getElementById('active_label').click();
-                if (!document.querySelector('.timeslider-container')) {
-                  let layerId = document.querySelector(
-                    '[datasetid="' +
-                      dataset.DatasetId +
-                      '"] .map-menu-layer input:checked',
-                  ).id;
-                  document
-                    .querySelector(
-                      "[layer-id='" + layerId + "'] .active-layer-time",
-                    )
-                    .click(e);
+              if (!document.querySelector('.map-menu-layer input:checked')) {
+                document.getElementById('products_label').click();
+              } else {
+                if (dataset.IsTimeSeries && !checkTimeData(dataset)) {
+                  document.getElementById('active_label').click();
+                  if (!document.querySelector('.timeslider-container')) {
+                    let layerId = document.querySelector(
+                      '[datasetid="' +
+                        dataset.DatasetId +
+                        '"] .map-menu-layer input:checked',
+                    ).id;
+                    document
+                      .querySelector(
+                        "[layer-id='" + layerId + "'] .active-layer-time",
+                      )
+                      .click(e);
+                  }
+                } else if (areaData) {
+                  checkArea(e);
                 }
-              } else if (areaData) {
-                checkArea(e);
               }
             }}
           >
@@ -245,6 +255,7 @@ export const AddCartItem = ({
             <span
               className={'map-menu-icon map-menu-icon-login'}
               onClick={() => {
+                setDownloadTag(true);
                 document.querySelector('.header-login-link').click();
               }}
               onKeyDown={() => {
@@ -459,12 +470,13 @@ class MenuWidget extends React.Component {
       }
 
       let authToken = this.getAuthToken();
-      let timeSliderTag = this.getTimeSliderTag();
+      let timeSliderTag = sessionStorage.getItem('timeSliderTag');
+      let downloadTag = sessionStorage.getItem('downloadButtonClicked');
       let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
 
       // "Active on map" section and the time slider opened by default if user is logged in and timeSliderTag is true
-
-      if (checkedLayers) {
+      if (checkedLayers && !this.props.download) {
+        // "Active on map" section and the time slider opened by default if user is logged in and timeSliderTag is true
         if (authToken && timeSliderTag) {
           for (let i = 0; i < checkedLayers.length; i++) {
             let layerid = checkedLayers[i];
@@ -491,6 +503,30 @@ class MenuWidget extends React.Component {
             }
           }
         }
+        // "Area widget" opened by default if user is logged in and downloadTag is true
+        else if (authToken && downloadTag) {
+          for (let i = 0; i < checkedLayers.length; i++) {
+            let layerid = checkedLayers[i];
+            if (
+              layerid &&
+              !this.layers[layerid].isTimeSeries &&
+              !this.container.current
+                .querySelector('.esri-widget')
+                .classList.contains('esri-icon-drag-horizontal')
+            ) {
+              //open area widget
+              let event = new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: false,
+              });
+              document
+                .querySelector('.map-menu-icon-login.logged')
+                .dispatchEvent(event);
+              break;
+            }
+          }
+        }
       }
       // CLMS-1389
       // "Active on map" section and the time slider opened by default if download and timeseries == true
@@ -571,14 +607,6 @@ class MenuWidget extends React.Component {
     return tokenResult;
   }
 
-  getTimeSliderTag() {
-    let tagResult = true;
-    if (!sessionStorage.key('timeSliderTag')) {
-      tagResult = false;
-    }
-    return tagResult;
-  }
-
   /**
    * Close opacity panel if user clicks outside
    */
@@ -1114,6 +1142,23 @@ class MenuWidget extends React.Component {
                   )}
                 </label>
                 <div className="map-menu-icons">
+                  {!this.props.download && dataset.IsTimeSeries && (
+                    <Popup
+                      trigger={
+                        <span
+                          className="map-menu-icon"
+                          onClick={() => this.checkTimeLayer(dataset)}
+                          onKeyDown={() => this.checkTimeLayer(dataset)}
+                          tabIndex="0"
+                          role="button"
+                        >
+                          <FontAwesomeIcon icon={['far', 'clock']} />
+                        </span>
+                      }
+                      content={'Show time slider'}
+                      {...popupSettings}
+                    />
+                  )}
                   {!this.props.download && (
                     <a
                       href={dataset.DatasetURL}
@@ -1456,6 +1501,8 @@ class MenuWidget extends React.Component {
         this.map.reorder(nuts, this.map.layers.items.length + 1);
       }
     } else {
+      sessionStorage.removeItem('downloadButtonClicked');
+      sessionStorage.removeItem('timeSliderTag');
       this.deleteCheckedLayer(elem.id);
       this.deleteFilteredLayer();
       this.layers[elem.id].opacity = 1;
@@ -1468,7 +1515,6 @@ class MenuWidget extends React.Component {
       delete this.timeLayers[elem.id];
     }
     this.updateCheckDataset(parentId);
-    //!this.props.download && this.toggleHotspotWidget();
     this.toggleHotspotWidget();
     this.layersReorder();
     this.checkInfoWidget();
@@ -1495,17 +1541,24 @@ class MenuWidget extends React.Component {
     if (this.props.download) {
       checkedLayers = Object.keys(this.activeLayersJSON);
     }
-    checkedLayers.forEach((key) => {
-      // if key includes all_present_lc_a_pol or all_lcc_a_pol and if the activeWidget is not the hotspot widget, click on the hotspot button, else close the active widget and set the hotspot container to display to none
-      if (
-        key.includes('all_present_lc_a_pol') ||
-        key.includes('all_lcc_a_pol')
-      ) {
-        if (!this.props.mapViewer.activeWidget) {
-          hotspotButton.click();
+    if (
+      checkedLayers.length === 0 &&
+      sessionStorage.getItem('hotspotFilterApplied')
+    ) {
+      sessionStorage.removeItem('hotspotFilterApplied');
+    }
+    if (checkedLayers) {
+      checkedLayers.forEach((key) => {
+        if (
+          key.includes('all_present_lc_a_pol') ||
+          key.includes('all_lcc_a_pol')
+        ) {
+          if (!this.props.mapViewer.activeWidget) {
+            hotspotButton.click();
+          }
         }
-      }
-    });
+      });
+    }
   }
   /**
    * Hide or show a legend image in the legend widget for a WMTS or a TMS layer
@@ -2084,11 +2137,13 @@ class MenuWidget extends React.Component {
         layers.push(layer);
       }
     });
-    if (layers.length === 0 && document.querySelector('.info-container')) {
-      this.props.mapViewer.closeActiveWidget();
-      document.querySelector('.info-container').style.display = 'none';
-    } else if (layers.length > 0) {
-      document.querySelector('.info-container').style.display = 'flex';
+    if (!sessionStorage.getItem('hotspotFilterApplied')) {
+      if (layers.length === 0 && document.querySelector('.info-container')) {
+        this.props.mapViewer.closeActiveWidget();
+        document.querySelector('.info-container').style.display = 'none';
+      } else if (layers.length > 0) {
+        document.querySelector('.info-container').style.display = 'flex';
+      }
     }
     this.renderHotspot();
     /**/
@@ -2533,12 +2588,32 @@ class MenuWidget extends React.Component {
           time={time}
           logged={isLoggedIn}
           fromDownload={fromDownload}
+          area={this.props.area}
         />,
         document.querySelector('.esri-ui-bottom-right'),
       );
     }
   }
 
+  checkTimeLayer(dataset) {
+    let id = dataset.DatasetId;
+    let checkbox = document
+      .querySelector('[datasetid="' + id + '"]')
+      .querySelector('.map-dataset-checkbox input');
+    if (!checkbox.checked) {
+      checkbox.click();
+    }
+    document.getElementById('active_label').click();
+    if (!document.querySelector('.timeslider-container')) {
+      let layerId = document
+        .querySelector('[datasetid="' + id + '"] input')
+        .getAttribute('defcheck');
+      setTimeout(() => {
+        this.showTimeSlider(document.getElementById(layerId), false);
+      }, 100);
+    }
+  }
+
   /**
    * This method renders the component
    * @returns jsx

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -1,6 +1,8 @@
 import React, { createRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { loadModules } from 'esri-loader';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 var TimeSlider;
 var TimeExtent;
 var esriRequest;
@@ -24,8 +26,7 @@ class TimesliderWidget extends React.Component {
       timeSelectedValuesC: [], //To compare time slider stored values with new selected values
       showDatePanel: false,
       lockDatePanel: true,
-      showCalendar:
-        this.props.fromDownload || this.props.download ? true : false,
+      showCalendar: this.props.fromDownload ? true : false,
       dateStart: this.props.time.start ? new Date(this.props.time.start) : null,
       dateEnd: this.props.time.end ? new Date(this.props.time.end) : null,
       periodicity: null,
@@ -200,7 +201,7 @@ class TimesliderWidget extends React.Component {
       loop: false,
       labelFormatFunction: (value, type, element, layout) => {
         if (!this.TimesliderWidget.fullTimeExtent) {
-          element.innerText = 'loading...';
+          element.innerText = 'Loading...';
           return;
         }
         if (value) {
@@ -481,44 +482,60 @@ class TimesliderWidget extends React.Component {
   showCalendar() {
     if (this.state.showCalendar) {
       this.setState({ showCalendar: false });
+      if (
+        document.querySelector('.drawRectanglePopup-block') &&
+        !this.props.area
+      ) {
+        document.querySelector('.drawRectanglePopup-block').style.display =
+          'block';
+      }
     } else {
       this.setState({ showCalendar: true });
+      if (document.querySelector('.drawRectanglePopup-block')) {
+        document.querySelector('.drawRectanglePopup-block').style.display =
+          'none';
+      }
     }
   }
 
   applyDate() {
-    let start = document.querySelector('#date_start').valueAsDate;
-    start = start
-      ? new Date(start)
-      : this.TimesliderWidget.fullTimeExtent.start;
-    let end = document.querySelector('#date_end').valueAsDate;
-    end = end ? new Date(end) : this.TimesliderWidget.fullTimeExtent.end;
+    let start = this.state.inputStart;
+    start = start ? start : this.TimesliderWidget.fullTimeExtent.start;
+    let end = this.state.inputEnd;
+    end = end ? end : this.TimesliderWidget.fullTimeExtent.end;
     this.props.time.elem.setAttribute('time-start', new Date(start).getTime());
     this.props.time.elem.setAttribute('time-end', new Date(end).getTime());
     this.setState({
       dateStart: start,
       dateEnd: end,
-      showCalendar: false,
     });
-    if (this.props.fromDownload) {
-      this.props.time.elem.querySelector('.active-layer-time').click();
-      document.getElementById('products_label').click();
-      if (
-        this.props.mapViewer.activeWidget &&
-        !this.props.mapViewer.activeWidget.container.current.classList.contains(
-          'area-container',
-        )
-      ) {
-        document.getElementById('map_area_button').click();
+    this.showCalendar();
+    if (this.props.download) {
+      if (this.props.fromDownload) {
+        this.props.time.elem.querySelector('.active-layer-time').click();
+        document.getElementById('download_label').click();
+      }
+    } else {
+      if (this.props.fromDownload) {
+        this.props.time.elem.querySelector('.active-layer-time').click();
+        document.getElementById('products_label').click();
+        if (
+          !this.props.mapViewer.activeWidget ||
+          !this.props.mapViewer.activeWidget.container.current.classList.contains(
+            'area-container',
+          )
+        ) {
+          document.getElementById('map_area_button').click();
+        }
       }
     }
   }
 
-  handleInputChange(e) {
-    if (e.currentTarget.id === 'date_start') {
-      this.setState({ inputStart: e.currentTarget.value });
-    } else if (e.currentTarget.id === 'date_end') {
-      this.setState({ inputEnd: e.currentTarget.value });
+  handleInputChange(e, input) {
+    if (input === 'date_start') {
+      this.setState({ inputStart: this.formatDate(e) });
+    } else if (input === 'date_end') {
+      this.setState({ inputEnd: this.formatDate(e) });
     }
   }
 
@@ -576,8 +593,11 @@ class TimesliderWidget extends React.Component {
                   <FontAwesomeIcon icon={['fas', 'calendar']} />
                   {this.state.dateStart && this.state.dateEnd ? (
                     <>
-                      {this.state.dateStart.toLocaleDateString('en-gb')} -{' '}
-                      {this.state.dateEnd.toLocaleDateString('en-gb')}{' '}
+                      {new Date(this.state.dateStart).toLocaleDateString(
+                        'en-gb',
+                      )}{' '}
+                      -{' '}
+                      {new Date(this.state.dateEnd).toLocaleDateString('en-gb')}{' '}
                     </>
                   ) : (
                     <>Select temporal interval to download</>
@@ -604,12 +624,8 @@ class TimesliderWidget extends React.Component {
                   id="timeslider_calendar_close"
                   role="button"
                   tabIndex="0"
-                  onClick={() => {
-                    this.setState({ showCalendar: false });
-                  }}
-                  onKeyDown={() => {
-                    this.setState({ showCalendar: false });
-                  }}
+                  onClick={() => this.showCalendar()}
+                  onKeyDown={() => this.showCalendar()}
                 ></div>
               </div>
               <div className="timeslider-calendar-panel">
@@ -620,32 +636,46 @@ class TimesliderWidget extends React.Component {
                 )}
                 <div className="timeslider-calendar-row">
                   <label htmlFor="start">From</label>
-                  <input
-                    type="date"
+                  <DatePicker
                     id="date_start"
-                    min={timeStart}
-                    max={
-                      Date.parse(inputEnd) < Date.parse(timeEnd)
-                        ? inputEnd
-                        : timeEnd
+                    minDate={new Date(timeStart)}
+                    maxDate={
+                      new Date(
+                        Date.parse(inputEnd) < Date.parse(timeEnd)
+                          ? inputEnd
+                          : timeEnd,
+                      )
                     }
-                    value={inputStart}
-                    onChange={(e) => this.handleInputChange(e)}
+                    selected={new Date(inputStart)}
+                    onChange={(e) => this.handleInputChange(e, 'date_start')}
+                    includeDates={this.TimesliderWidget.stops.dates}
+                    dateFormat="dd/MM/yyyy"
+                    calendarStartDay={1}
+                    showMonthDropdown
+                    showYearDropdown
+                    dropdownMode="select"
                   />
                 </div>
                 <div className="timeslider-calendar-row">
                   <label htmlFor="start">To</label>
-                  <input
-                    type="date"
+                  <DatePicker
                     id="date_end"
-                    min={
-                      Date.parse(inputStart) > Date.parse(timeStart)
-                        ? inputStart
-                        : timeStart
+                    minDate={
+                      new Date(
+                        Date.parse(inputStart) > Date.parse(timeStart)
+                          ? inputStart
+                          : timeStart,
+                      )
                     }
-                    max={timeEnd}
-                    value={inputEnd}
-                    onChange={(e) => this.handleInputChange(e)}
+                    maxDate={new Date(timeEnd)}
+                    selected={new Date(inputEnd)}
+                    onChange={(e) => this.handleInputChange(e, 'date_end')}
+                    includeDates={this.TimesliderWidget.stops.dates}
+                    dateFormat="dd/MM/yyyy"
+                    calendarStartDay={1}
+                    showMonthDropdown
+                    showYearDropdown
+                    dropdownMode="select"
                   />
                 </div>
                 <button

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

@@ -926,8 +926,12 @@
   flex: 1;
 }
 
-.timeslider-calendar-row input {
+.timeslider-calendar-row .react-datepicker-wrapper {
   flex: 3;
+}
+
+.timeslider-calendar-row .react-datepicker-wrapper input {
+  width: 100%;
   padding: 0.5rem;
   border: 1px solid #dadada;
 }
@@ -938,6 +942,48 @@
   font-size: 0.875rem;
 }
 
+.react-datepicker__header {
+  background-color: #a0b128 !important;
+}
+
+.react-datepicker__header select {
+  border: none;
+}
+
+.react-datepicker__navigation {
+  width: auto !important;
+}
+
+.react-datepicker__navigation--previous {
+  margin-left: 0.5rem;
+}
+
+.react-datepicker__navigation--next {
+  margin-right: 0.5rem;
+}
+
+.react-datepicker__navigation-icon::before {
+  border-color: white !important;
+}
+
+.react-datepicker__header__dropdown {
+  margin-top: 0.25rem;
+}
+
+.react-datepicker__day--selected {
+  background-color: #a0b128 !important;
+  color: white !important;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background-color: #a0b12833 !important;
+}
+
+.react-datepicker__current-month,
+.react-datepicker__day-name {
+  color: white !important;
+}
+
 /* Scale */
 .esri-scale-bar {
   z-index: 0;