@eeacms/volto-arcgis-block 0.1.109 → 0.1.111

package/CHANGELOG.md

@@ -4,10 +4,24 @@ 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.111](https://github.com/eea/volto-arcgis-block/compare/0.1.110...0.1.111) - 28 February 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1771 FIX: if user selects a time series layer and logs in afterwards, user will be redirected to mapviewer and time slider and date selection widgets will be displayed automatically [ujbolivar - [`65924bb`](https://github.com/eea/volto-arcgis-block/commit/65924bbd330e13d1c8524bc4aed987bdf3ae6167)]
+### [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)]
@@ -437,10 +451,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Merge pull request #148 from eea/develop [KCarpinteroBM - [`24266fb`](https://github.com/eea/volto-arcgis-block/commit/24266fb3a0c1662d22ae0529dc1d5a25c711cf97)]
+- Revert "[JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`f751f69`](https://github.com/eea/volto-arcgis-block/commit/f751f69f652f0340ae55af6a4dab89d6bdc80906)]
 - Revert "Revert "Mapviewer menu and map viewer options persistence"" [Mikel Larreategi - [`ad6e440`](https://github.com/eea/volto-arcgis-block/commit/ad6e440cdc160cffb1e86e1b26e501dbe648476c)]
 - Revert "code coverage removal" [Mikel Larreategi - [`376f2d1`](https://github.com/eea/volto-arcgis-block/commit/376f2d1cd6e4e5110b3b63d5114af1bcfebe094b)]
 - Revert "Update cypress.json" [Mikel Larreategi - [`43d01a0`](https://github.com/eea/volto-arcgis-block/commit/43d01a0a95a58ef5215c6cbf18223ca30a11b9cc)]
 - Revert "Update cypress.json" [Mikel Larreategi - [`054c4ae`](https://github.com/eea/volto-arcgis-block/commit/054c4ae1767e1f26e6ec7e96a0e26a9711f29f04)]
+- Revert "revert [JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`64ab56e`](https://github.com/eea/volto-arcgis-block/commit/64ab56e0f1f8dddc26f26039509a028e34653e64)]
+- revert [JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967 [Mikel Larreategi - [`85ee194`](https://github.com/eea/volto-arcgis-block/commit/85ee1941e029df2b7dc910bf75231c75ffeca8c2)]
 - Update cypress.json [KCarpinteroBM - [`be285ff`](https://github.com/eea/volto-arcgis-block/commit/be285fff0c53e06a0180d5318cce81195eabcf80)]
 - Update cypress.json [KCarpinteroBM - [`a7f2118`](https://github.com/eea/volto-arcgis-block/commit/a7f2118acb7b048b4cef85aa9663c2244a1c9ca0)]
 - linting fix [KCarpinteroBM - [`27e969a`](https://github.com/eea/volto-arcgis-block/commit/27e969a7a411fd4646e0e742ce846efc0d79703e)]
@@ -500,6 +517,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - UX improvements [rodriama - [`151dc4b`](https://github.com/eea/volto-arcgis-block/commit/151dc4b02d0a73fdd66de9d594620ac0fa5f1dbf)]
 - deleted failing tests [KCarpinteroBM - [`ddaa9e6`](https://github.com/eea/volto-arcgis-block/commit/ddaa9e6f06db6960a4c214d3be2420c48b26715d)]
 - cleaning unnecessary files [KCarpinteroBM - [`2c02199`](https://github.com/eea/volto-arcgis-block/commit/2c021990912beb02b603a1de89aecd62e0063769)]
+- Reverting to Automated release 0.1.39 [KCarpinteroBM - [`fb9f317`](https://github.com/eea/volto-arcgis-block/commit/fb9f3176ccdea18fceb329eaac13ced0566ee648)]
 - commands added [KCarpinteroBM - [`049e60b`](https://github.com/eea/volto-arcgis-block/commit/049e60b7d124d1c05abd0b2775b510795f4ed59f)]
 - Mapviewer testing implementation [KCarpinteroBM - [`0103002`](https://github.com/eea/volto-arcgis-block/commit/0103002869eea108e16e3b5ff2e77a725dcc7c4b)]
 ### [0.1.39](https://github.com/eea/volto-arcgis-block/compare/0.1.38...0.1.39) - 24 March 2022
@@ -519,6 +537,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - ESLint fix [rodriama - [`75dae9b`](https://github.com/eea/volto-arcgis-block/commit/75dae9b5bba18ab6d9624f6c99714b4bd2179003)]
 - Remove section title [rodriama - [`ece860e`](https://github.com/eea/volto-arcgis-block/commit/ece860eae3519c7e611abac16e8d53c9a9408b34)]
 - Es-Lint [manuelmartinezbilbomatica - [`39d8d11`](https://github.com/eea/volto-arcgis-block/commit/39d8d11b9096fd603df8510c119d2e12817415d6)]
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`bf9f683`](https://github.com/eea/volto-arcgis-block/commit/bf9f683dd35a9edb4cfd9111affcb8f8edbeae89)]
 - FEAT: Parser Time implemented [manuelmartinezbilbomatica - [`689c99e`](https://github.com/eea/volto-arcgis-block/commit/689c99e55221fee6c7c7fafc4ab95ae7a646d3dd)]
 ### [0.1.38](https://github.com/eea/volto-arcgis-block/compare/0.1.37...0.1.38) - 18 March 2022
 
@@ -613,6 +632,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - ESLint fix [rodriama - [`5fd3772`](https://github.com/eea/volto-arcgis-block/commit/5fd3772f197a3a380067962a5638dbf901a4624e)]
 - Pixel info [rodriama - [`1ccef39`](https://github.com/eea/volto-arcgis-block/commit/1ccef39a9adcc3ee94655c77a5a166b613600a08)]
 - NUTS bug fix [rodriama - [`37fe7f3`](https://github.com/eea/volto-arcgis-block/commit/37fe7f3fad2c005e3b7c234b3b0564d5df92fa8c)]
+- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`ea5af8b`](https://github.com/eea/volto-arcgis-block/commit/ea5af8b02a5f2ee25b9b0be67cf3792bbbe84ed7)]
 ### [0.1.23](https://github.com/eea/volto-arcgis-block/compare/0.1.22...0.1.23) - 17 December 2021
 
 #### :hammer_and_wrench: Others
@@ -857,6 +877,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Trying to delay ArcGIS modules load [gonzalezsd - [`ff16985`](https://github.com/eea/volto-arcgis-block/commit/ff169858e42d30bfcacc423ffc27762bb9ef05a4)]
 - Run bootstrap to fix files [valentinab25 - [`236893f`](https://github.com/eea/volto-arcgis-block/commit/236893f03314eb638b7667f81b1f91491a98ee17)]
 - fix git_name [valentinab25 - [`c7806c3`](https://github.com/eea/volto-arcgis-block/commit/c7806c312964425dc23e5d4c6973de8b81ddaeac)]
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`e3afb51`](https://github.com/eea/volto-arcgis-block/commit/e3afb515dda459ee03e2b5d4b56465d2d4ad1503)]
 - Trying to change imports [gonzalezsd - [`d83d7e2`](https://github.com/eea/volto-arcgis-block/commit/d83d7e2f68da4b2a284735847f93c0763a7e13b6)]
 - default design [bipoza - [`88fbe0b`](https://github.com/eea/volto-arcgis-block/commit/88fbe0b2bc73e732e2993324a567f53902e85506)]
 - cleanup of unused code [bipoza - [`b167677`](https://github.com/eea/volto-arcgis-block/commit/b1676771f637f056cad50cb0bc186f2ea79e8517)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.109",
+  "version": "0.1.111",
   "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/MenuWidget.jsx

@@ -524,6 +524,26 @@ class MenuWidget extends React.Component {
                 .querySelector('.map-menu-icon-login.logged')
                 .dispatchEvent(event);
               break;
+            } else if (
+              layerid &&
+              this.layers[layerid].isTimeSeries &&
+              !this.container.current
+                .querySelector('.esri-widget')
+                .classList.contains('esri-icon-drag-horizontal')
+            ) {
+              // select active on map tab
+              let event = new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: false,
+              });
+              let el = document.getElementById('active_label');
+              el.dispatchEvent(event);
+
+              //open time slider
+              let layerElem = document.getElementById(layerid);
+              this.showTimeSlider(layerElem, true);
+              break;
             }
           }
         }
@@ -1142,6 +1162,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}
@@ -2578,6 +2615,25 @@ class MenuWidget extends React.Component {
     }
   }
 
+  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;
@@ -199,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) {
@@ -497,12 +499,10 @@ class TimesliderWidget extends React.Component {
   }
 
   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({
@@ -531,11 +531,11 @@ class TimesliderWidget extends React.Component {
     }
   }
 
-  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) });
     }
   }
 
@@ -593,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</>
@@ -633,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;