@eeacms/volto-arcgis-block 0.1.286 → 0.1.287

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.287](https://github.com/eea/volto-arcgis-block/compare/0.1.286...0.1.287) - 13 June 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-270731 (Feat): Prepackage option added [Urkorue - [`13c5f1b`](https://github.com/eea/volto-arcgis-block/commit/13c5f1ba0d214de14c0a9feffdb18cc18d972b10)]
 ### [0.1.286](https://github.com/eea/volto-arcgis-block/compare/0.1.285...0.1.286) - 11 June 2024
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -48,6 +48,7 @@ class AreaWidget extends React.Component {
     this.generateFeatureCollection = this.generateFeatureCollection.bind(this);
     this.addFeatureCollectionToMap = this.addFeatureCollectionToMap.bind(this);
     this.checkFeatureCount = this.checkFeatureCount.bind(this);
+    this.prepackage = false;
   }
 
   loader() {
@@ -200,11 +201,25 @@ class AreaWidget extends React.Component {
     if (id === 'nuts1' || id === 'nuts2' || id === 'nuts3') {
       document.getElementById('download_area_select_nuts').checked = true;
     }
-    if (id === 'nuts0' || id === 'area') {
+    if (id === 'nuts0' || id === 'area' || id === 'prepackage') {
       document.getElementById('download_area_select_nuts1').checked = false;
       document.getElementById('download_area_select_nuts2').checked = false;
       document.getElementById('download_area_select_nuts3').checked = false;
     }
+    this.props.prepackageHandler(
+      document.querySelector('#download_prepackage').checked,
+    );
+    if (document.querySelector('#download_prepackage').checked) {
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'download',
+      });
+    } else {
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'area',
+      });
+    }
   }
   nuts0handler(e) {
     this.loadNutsService(e.target.value, [0]);
@@ -835,87 +850,66 @@ class AreaWidget extends React.Component {
     document.querySelector('.esri-attribution__powered-by').style.display =
       'none';
   }
-  //   areaSearch() {
-  //     let searchText = document.querySelector('#area-searchtext').value;
-  //     if (searchText.length === 2) {
-  //       this.loadNutsService('nuts0', [0]);
-  //       this.loadCountriesService('nuts0');
-  //       document.getElementById('download_area_select_nuts0').checked = true;
-  //       this.nutsRadioButton('nuts0');
-  //     } else if (searchText.length === 3) {
-  //       this.loadNutsService('nuts1', [1, 2]);
-  //       document.getElementById('download_area_select_nuts1').checked = true;
-  //       this.nutsRadioButton('nuts1');
-  //     } else if (searchText.length === 4) {
-  //       this.loadNutsService('nuts2', [3, 4, 5]);
-  //       document.getElementById('download_area_select_nuts2').checked = true;
-  //       this.nutsRadioButton('nuts2');
-  //     } else if (searchText.length === 5) {
-  //       this.loadNutsService('nuts3', [6, 7, 8]);
-  //       document.getElementById('download_area_select_nuts3').checked = true;
-  //       this.nutsRadioButton('nuts3');
-  //     }
-  //     let found = false;
-  //     let count = this.nutsGroupLayer.layers.items.length;
-  //     const queryParams = this.nutsGroupLayer.layers.items[0].createQuery();
-  // // set a geometry for filtering features by a region of interest
-  //     //queryParams.geometry = extentForRegionOfInterest;
-  // // Add to the layer's current definitionExpression
-  // //   queryParams =
-  // // ({
-  // //   geometry: point,
-  // //   // distance and units will be null if basic query selected
-  // //   distance: 0.5,
-  // //   units: "miles",
-  // //   spatialRelationship: "intersects",
-  // //   returnGeometry: false,
-  // //   outFields: ["*"],
-  // //})
-  //     // queryParams.where = `(NUTS_ID = '${searchText}')`;//"NUTS_ID = "+ searchText;
-  //      queryParams.outSpatialReference = this.props.view.spatialReference;
-
-  //     // const query = new Query();
-  //     // query.definitionExpression = "NUTS_ID = "+ searchText;
-  //     // query.outSpatialReference = { wkid: 102100 };
-  //     // query.returnGeometry = true;
-  //     // query.outFields = [ "CITY_NAME" ];
-  //     document.querySelector('.no-result-message').style.display = 'none';
-  //     this.nutsGroupLayer.layers.items.forEach((item) => {
-  //       count = count-1;
-  //       item.queryFeatures(queryParams).then((response) => {
-  //         response.features.forEach((feature) => {
-  //           if (feature.attributes.NUTS_ID === searchText) {
-  //             found = true;
-  //             this.props.updateArea(feature);
-  //             let symbol = new SimpleFillSymbol(
-  //               'solid',
-  //               new SimpleLineSymbol('solid', new Color([232, 104, 80]), 2),
-  //               new Color([232, 104, 80, 0.25]),
-  //             );
-  //             let highlight = new Graphic(feature.geometry, symbol);
-  //             this.props.view.graphics.removeAll();
-  //             this.props.view.graphics.add(highlight);
-  //             this.setState({
-  //               showInfoPopup: true,
-  //               infoPopupType: 'download',
-  //             });
-  //             // if (this.props.download) {
-  //             //   document.querySelector(
-  //             //     '.drawRectanglePopup-block',
-  //             //   ).style.display = 'none';
-  //             // }
-  //           }
-  //         });
-  //         if (
-  //           !found && count==0
-  //         ) {
-  //           document.querySelector('.no-result-message').style.display = 'block';
-  //         } else if (found) {
-  //           document.querySelector('.no-result-message').style.display = 'none';
-  //         }
-  //       });
-  //     });
-  //   }
+  areaSearch() {
+    let searchText = document.querySelector('#area-searchtext').value;
+    if (searchText.length <= 2) {
+      this.loadNutsService('nuts0', [0]);
+      this.loadCountriesService('nuts0');
+      document.getElementById('download_area_select_nuts0').checked = true;
+      this.nutsRadioButton('nuts0');
+    } else if (searchText.length === 3) {
+      this.loadNutsService('nuts1', [1, 2]);
+      document.getElementById('download_area_select_nuts1').checked = true;
+      this.nutsRadioButton('nuts1');
+    } else if (searchText.length === 4) {
+      this.loadNutsService('nuts2', [3, 4, 5]);
+      document.getElementById('download_area_select_nuts2').checked = true;
+      this.nutsRadioButton('nuts2');
+    } else if (searchText.length === 5) {
+      this.loadNutsService('nuts3', [6, 7, 8]);
+      document.getElementById('download_area_select_nuts3').checked = true;
+      this.nutsRadioButton('nuts3');
+    }
+    let found = false;
+    let count = this.nutsGroupLayer.layers.items.length;
+    const queryParams = this.nutsGroupLayer.layers.items[0].createQuery();
+    queryParams.where = `(NUTS_ID = '${searchText}')`;
+    queryParams.outSpatialReference = this.props.view.spatialReference;
+    document.querySelector('.no-result-message').style.display = 'none';
+    this.nutsGroupLayer.layers.items.forEach((item) => {
+      item.queryFeatures(queryParams).then((response) => {
+        count = count - 1;
+        response.features.forEach((feature) => {
+          if (feature.attributes.NUTS_ID === searchText) {
+            found = true;
+            this.props.updateArea(feature);
+            let symbol = new SimpleFillSymbol(
+              'solid',
+              new SimpleLineSymbol('solid', new Color([232, 104, 80]), 2),
+              new Color([232, 104, 80, 0.25]),
+            );
+            let highlight = new Graphic(feature.geometry, symbol);
+            this.props.view.graphics.removeAll();
+            this.props.view.graphics.add(highlight);
+            this.setState({
+              showInfoPopup: true,
+              infoPopupType: 'download',
+            });
+          }
+        });
+        if (!found && count === 0) {
+          document.querySelector('.no-result-message').style.display = 'block';
+        } else if (found) {
+          document.querySelector('.no-result-message').style.display = 'none';
+        }
+      });
+    });
+  }
+
+  prepackageButton(event) {
+    this.clearWidget();
+    this.nutsRadioButton(event.target.value);
+  }
 
   /**
    * This method is executed after the rener method is executed
@@ -1071,135 +1065,165 @@ class AreaWidget extends React.Component {
             )}
             <div className="right-panel-content">
               <div className="area-panel">
-                <div className="area-header">Select by country or region</div>
-                {/* <input
-                  type="text"
-                  maxLength="6"
-                  id="area-searchtext"
-                  placeholder="Search"
-                />
-                <button
-                  aria-label="Search"
-                  class="esri-button area-searchbutton"
-                  onClick={this.areaSearch.bind(this)}
-                  onKeyDown={(e) => {
-                    if (
-                      !e.altKey &&
-                      e.code !== 'Tab' &&
-                      !e.ctrlKey &&
-                      e.code !== 'Delete' &&
-                      !e.shiftKey &&
-                      !e.code.startsWith('F')
-                    ) {
-                      this.areaSearch.bind(this);
-                    }
-                  }}
-                >
-                  <span class="ccl-icon-zoom"></span>
-                </button>
-                <div className="no-result-message">No result found</div> */}
-                <div className="ccl-form">
+                <div className="ccl-form ccl-form-head">
                   <fieldset className="ccl-fieldset">
                     <div className="ccl-form-group">
                       <input
                         type="radio"
-                        id="download_area_select_nuts0"
-                        name="downloadAreaSelect"
-                        value="nuts0"
-                        className="ccl-checkbox cl-required ccl-form-check-input"
-                        defaultChecked
-                        onClick={this.nuts0handler.bind(this)}
-                      ></input>
-                      <label
-                        className="ccl-form-radio-label"
-                        htmlFor="download_area_select_nuts0"
-                      >
-                        <span>By country</span>
-                      </label>
-                    </div>
-                    <div className="ccl-form-group">
-                      <input
-                        type="radio"
-                        id="download_area_select_nuts"
+                        id="download_prepackage"
                         name="downloadAreaSelect"
-                        value="nuts"
-                        className="ccl-checkbox cl-required ccl-form-check-input"
-                        onClick={this.nutsRadioButtonGeneral.bind(this)}
+                        value="prepackage"
+                        className="ccl-checkbox ccl-required ccl-form-check-input"
+                        onClick={this.prepackageButton.bind(this)}
                       ></input>
                       <label
                         className="ccl-form-radio-label"
-                        htmlFor="download_area_select_nuts"
+                        htmlFor="download_prepackage"
                       >
-                        <span>By NUTS</span>
-                        <a
-                          href={
-                            'https://land.copernicus.eu/en/faq/map-viewer/what-are-nuts'
-                          }
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          onClick={(e) => e.stopPropagation()}
-                          onKeyDown={(e) => e.stopPropagation()}
-                        >
-                          <span className="map-menu-icon nuts-menu-icon">
-                            <FontAwesomeIcon icon={['fa', 'info-circle']} />
-                          </span>
-                        </a>
+                        <span>
+                          For fast download check out the pre-packaged data
+                          collection
+                        </span>
                       </label>
                     </div>
-                    <div className="nuts-form">
+                  </fieldset>
+                </div>
+                <div className="area-header">
+                  Area selection options for custom download:
+                </div>
+                <div className="area-header2">
+                  Select by country or region on the map:
+                  <div className="ccl-form">
+                    <fieldset className="ccl-fieldset">
                       <div className="ccl-form-group">
                         <input
                           type="radio"
-                          id="download_area_select_nuts1"
-                          name="downloadAreaSelectNuts"
-                          value="nuts1"
-                          className="ccl-checkbox ccl-required ccl-form-check-input"
-                          onClick={this.nuts1handler.bind(this)}
+                          id="download_area_select_nuts0"
+                          name="downloadAreaSelect"
+                          value="nuts0"
+                          className="ccl-checkbox cl-required ccl-form-check-input"
+                          defaultChecked
+                          onClick={this.nuts0handler.bind(this)}
                         ></input>
                         <label
                           className="ccl-form-radio-label"
-                          htmlFor="download_area_select_nuts1"
+                          htmlFor="download_area_select_nuts0"
                         >
-                          <span>NUTS 1 (major socio-economic regions)</span>
+                          <span>View countries</span>
                         </label>
                       </div>
                       <div className="ccl-form-group">
                         <input
                           type="radio"
-                          id="download_area_select_nuts2"
-                          name="downloadAreaSelectNuts"
-                          value="nuts2"
-                          className="ccl-checkbox ccl-required ccl-form-check-input"
-                          onClick={this.nuts2handler.bind(this)}
+                          id="download_area_select_nuts"
+                          name="downloadAreaSelect"
+                          value="nuts"
+                          className="ccl-checkbox cl-required ccl-form-check-input"
+                          onClick={this.nutsRadioButtonGeneral.bind(this)}
                         ></input>
                         <label
                           className="ccl-form-radio-label"
-                          htmlFor="download_area_select_nuts2"
+                          htmlFor="download_area_select_nuts"
                         >
-                          <span>NUTS 2 (basic regions)</span>
+                          <span>View NUTS</span>
+                          <a
+                            href={
+                              'https://land.copernicus.eu/en/faq/map-viewer/what-are-nuts'
+                            }
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            onClick={(e) => e.stopPropagation()}
+                            onKeyDown={(e) => e.stopPropagation()}
+                          >
+                            <span className="map-menu-icon nuts-menu-icon">
+                              <FontAwesomeIcon icon={['fa', 'info-circle']} />
+                            </span>
+                          </a>
                         </label>
                       </div>
-                      <div className="ccl-form-group">
-                        <input
-                          type="radio"
-                          id="download_area_select_nuts3"
-                          name="downloadAreaSelectNuts"
-                          value="nuts3"
-                          className="ccl-radio ccl-required ccl-form-check-input"
-                          onClick={this.nuts3handler.bind(this)}
-                        ></input>
-                        <label
-                          className="ccl-form-radio-label"
-                          htmlFor="download_area_select_nuts3"
-                        >
-                          <span>NUTS 3 (small regions)</span>
-                        </label>
+                      <div className="nuts-form">
+                        <div className="ccl-form-group">
+                          <input
+                            type="radio"
+                            id="download_area_select_nuts1"
+                            name="downloadAreaSelectNuts"
+                            value="nuts1"
+                            className="ccl-checkbox ccl-required ccl-form-check-input"
+                            onClick={this.nuts1handler.bind(this)}
+                          ></input>
+                          <label
+                            className="ccl-form-radio-label"
+                            htmlFor="download_area_select_nuts1"
+                          >
+                            <span>NUTS 1 (major socio-economic regions)</span>
+                          </label>
+                        </div>
+                        <div className="ccl-form-group">
+                          <input
+                            type="radio"
+                            id="download_area_select_nuts2"
+                            name="downloadAreaSelectNuts"
+                            value="nuts2"
+                            className="ccl-checkbox ccl-required ccl-form-check-input"
+                            onClick={this.nuts2handler.bind(this)}
+                          ></input>
+                          <label
+                            className="ccl-form-radio-label"
+                            htmlFor="download_area_select_nuts2"
+                          >
+                            <span>NUTS 2 (basic regions)</span>
+                          </label>
+                        </div>
+                        <div className="ccl-form-group">
+                          <input
+                            type="radio"
+                            id="download_area_select_nuts3"
+                            name="downloadAreaSelectNuts"
+                            value="nuts3"
+                            className="ccl-radio ccl-required ccl-form-check-input"
+                            onClick={this.nuts3handler.bind(this)}
+                          ></input>
+                          <label
+                            className="ccl-form-radio-label"
+                            htmlFor="download_area_select_nuts3"
+                          >
+                            <span>NUTS 3 (small regions)</span>
+                          </label>
+                        </div>
                       </div>
-                    </div>
-                    <br></br>
-                    <div className="rectangle-header">
-                      Draw a rectangle on the map
-                    </div>
+                    </fieldset>
+                  </div>
+                </div>
+                <div className="area-header">Type country or region code:</div>
+                <input
+                  type="text"
+                  maxLength="6"
+                  id="area-searchtext"
+                  placeholder="Search"
+                />
+                <button
+                  aria-label="Search"
+                  class="esri-button area-searchbutton"
+                  onClick={this.areaSearch.bind(this)}
+                  onKeyDown={(e) => {
+                    if (
+                      !e.altKey &&
+                      e.code !== 'Tab' &&
+                      !e.ctrlKey &&
+                      e.code !== 'Delete' &&
+                      !e.shiftKey &&
+                      !e.code.startsWith('F')
+                    ) {
+                      this.areaSearch.bind(this);
+                    }
+                  }}
+                >
+                  <span class="ccl-icon-zoom"></span>
+                </button>
+                <div className="no-result-message">No result found</div>
+                <br></br>
+                <div className="ccl-form">
+                  <fieldset className="ccl-fieldset">
                     <div className="ccl-form-group">
                       <input
                         type="radio"
@@ -1213,9 +1237,8 @@ class AreaWidget extends React.Component {
                         className="ccl-form-radio-label"
                         htmlFor="download_area_select_rectangle"
                       >
-                        <span>
-                          Click and drag your mouse on the map to select your
-                          area of interest
+                        <span className="rectangle-header">
+                          Draw a rectangle on the map
                         </span>
                       </label>
                     </div>

package/src/components/MapViewer/MapViewer.jsx

@@ -66,6 +66,7 @@ class MapViewer extends React.Component {
     this.hotspotDataHandler = this.hotspotDataHandler.bind(this);
     this.mapLayersHandler = this.mapLayersHandler.bind(this);
     this.bookmarkHandler = this.bookmarkHandler.bind(this);
+    this.prepackageHandler = this.prepackageHandler.bind(this);
   }
 
   mapLayersHandler(newLayers) {
@@ -114,6 +115,10 @@ class MapViewer extends React.Component {
     this.mapViewer.setState({ area: shared_value });
   }
 
+  prepackageHandler(prepackage) {
+    this.setState({ prepackageChecked: prepackage });
+  }
+
   loader() {
     return loadModules([
       'esri/WebMap',
@@ -420,6 +425,8 @@ class MapViewer extends React.Component {
           mapLayersHandler={this.mapLayersHandler}
           bookmarkData={this.state.bookmarkData}
           bookmarkHandler={this.bookmarkHandler}
+          prepackageChecked={this.state.prepackageChecked}
+          prepackageHandler={this.prepackageHandler}
         />
       ); //call conf
   }
@@ -490,6 +497,8 @@ export const CheckLogin = ({ reference }) => {
           updateArea={reference.updateArea}
           urls={reference.cfgUrls}
           mapviewer_config={reference.props.mapviewer_config}
+          prepackageChecked={reference.state.prepackageChecked}
+          prepackageHandler={reference.prepackageHandler}
         />
       )}
     </>

package/src/components/MapViewer/MenuWidget.jsx

@@ -27,6 +27,7 @@ export const AddCartItem = ({
   areaData,
   dataset,
   handleOpenPopup,
+  prepackage,
 }) => {
   const { addCartItem, isLoggedIn } = useCartState();
 
@@ -185,7 +186,7 @@ export const AddCartItem = ({
             Add to cart
           </button>
         </div>
-      ) : isLoggedIn ? ( // If isLoggedIn == true and user clicks download
+      ) : isLoggedIn && !prepackage ? ( // If isLoggedIn == true and user clicks download
         <Popup
           trigger={
             <span
@@ -250,6 +251,39 @@ export const AddCartItem = ({
           content="Download"
           {...popupSettings}
         />
+      ) : isLoggedIn && prepackage ? (
+        <Popup
+          trigger={
+            <span
+              className={
+                'map-menu-icon map-menu-icon-login' +
+                (dataset.HasPrepackagedFiles ? ' logged' : '')
+              }
+              onClick={(e) => {
+                if (dataset.HasPrepackagedFiles) {
+                  window.location = dataset.DatasetURL + '#download';
+                }
+              }}
+              onKeyDown={(e) => {}}
+              tabIndex="0"
+              role="button"
+            >
+              <FontAwesomeIcon
+                className={dataset.HasPrepackagedFiles ? '' : ' locked'}
+                icon={['fas', 'download']}
+              />
+              {!dataset.HasPrepackagedFiles && (
+                <FontAwesomeIcon icon={['fas', 'lock']} />
+              )}
+            </span>
+          }
+          content={
+            dataset.HasPrepackagedFiles
+              ? ' Download Prepackage'
+              : 'No Prepackage available'
+          }
+          {...popupSettings}
+        />
       ) : (
         // If isLoggedIn == false and user clicks download
         <Popup
@@ -1464,6 +1498,7 @@ class MenuWidget extends React.Component {
                       areaData={this.props.area}
                       dataset={dataset}
                       handleOpenPopup={this.handleOpenPopup}
+                      prepackage={this.props.prepackageChecked}
                     />
                   ) : (
                     <span
@@ -3965,6 +4000,7 @@ class MenuWidget extends React.Component {
                     download={this.props.download}
                     areaData={this.props.area}
                     handleOpenPopup={this.handleOpenPopup}
+                    prepackage={this.props.prepackageChecked}
                   />
                 </div>
               )}

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

@@ -317,6 +317,10 @@ div.esri-popover
   margin: 0;
 }
 
+.area-panel {
+  padding-top: 13rem;
+}
+
 /* .area-container .area-header { */
 /* margin-bottom: 1rem; */
 /* } */
@@ -326,21 +330,24 @@ div.esri-popover
   font-weight: bold;
 }
 
+.area-header2 {
+  padding-right: 0;
+  margin-left: 1.5rem;
+}
+
 .rectangle-header {
-  padding-top: 1rem;
-  border-width: 2px;
-  border-style: solid none none none;
-  border-color: #a0b128;
-  margin-bottom: 1rem;
   font-weight: bold;
 }
 
 .area-panel .ccl-form {
   padding-bottom: 1rem !important;
+  margin-left: 1rem !important;
+}
+
+.area-panel .ccl-form-head {
   border-width: 2px;
   border-style: none none solid none;
   border-color: #a0b128;
-  margin-left: 1rem !important;
 }
 
 .area-panel .ccl-form:last-child {
@@ -380,9 +387,9 @@ label.ccl-form-radio-label span.nuts-menu-icon {
 }
 
 #area-searchtext {
-  width: 5rem;
-  height: 1.2rem;
-  margin-top: 0.1rem;
+  width: 7rem;
+  height: 1.5rem;
+  margin-bottom: 1rem;
   margin-left: 1rem !important;
 }
 
@@ -391,7 +398,7 @@ label.ccl-form-radio-label span.nuts-menu-icon {
   height: 1.5rem !important;
   min-height: 1.5rem !important;
   margin-top: 0 !important;
-  margin-left: 0.5rem !important;
+  margin-left: 0 !important;
 }
 
 .no-result-message {
@@ -1212,7 +1219,7 @@ label.ccl-form-radio-label span.nuts-menu-icon {
 }
 
 .right-panel-content {
-  overflow: auto;
+  overflow: auto !important;
   height: 100%;
   padding: 1rem;
 }