@eeacms/volto-arcgis-block 0.1.53 → 0.1.54

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.54](https://github.com/eea/volto-arcgis-block/compare/0.1.53...0.1.54) - 9 September 2022
+
+#### :hammer_and_wrench: Others
+
+- ESLint fix [rodriama - [`8860f76`](https://github.com/eea/volto-arcgis-block/commit/8860f7649e8dddc2ec999ee1eb2367e810e29017)]
+- ESLint fix [rodriama - [`88aeea7`](https://github.com/eea/volto-arcgis-block/commit/88aeea7a1b3c8b77df43de9217f60553d1d5ed41)]
+- Use cases display page [Jose Asensio - [`6070438`](https://github.com/eea/volto-arcgis-block/commit/6070438872216bfb5450060a7ae20ca368429a20)]
 ### [0.1.53](https://github.com/eea/volto-arcgis-block/compare/0.1.52...0.1.53) - 7 September 2022
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -58,17 +58,19 @@ class InfoWidget extends React.Component {
           </div>
           <div className="use-case-detail-content">
             <div className="use-case-detail-product">
-              {UseCase.Copernicus_Land_Monitoring_Service_products_used}
+              {UseCase.Use_case_topics}
             </div>
             <div className="use-case-detail-title">
               <h3>{UseCase.Use_case_title}</h3>
             </div>
             <div className="use-case-detail-info">
-              <span>{UseCase.Use_case_topics}</span>
               <span>{UseCase.Use_case_submitting_production_year}</span>
               <span>{UseCase.Origin_name}</span>
               <span>{responsibleOrganizationOrPerson}</span>
             </div>
+            <div className="use-case-detail-info">
+              <b>{UseCase.Copernicus_Land_Monitoring_Service_products_used}</b>
+            </div>
             <div className="use-case-detail-description">
               <p>{UseCase.Use_case_summary}</p>
               {UseCase.Links_to_web_sites && (
@@ -186,10 +188,13 @@ class InfoWidget extends React.Component {
           regionFeatures.push(this.features[feature].attributes);
         }
       }
+      let count = [...new Set(regionFeatures.map((item) => item.Use_case_id))]
+        .length;
+
       return (
         <div>
           <div className="use-cases-products-title">
-            <span>{regionFeatures.length} </span>
+            <span>{count} </span>
             use cases
           </div>
           <div className="use-case-button-back">
@@ -220,10 +225,12 @@ class InfoWidget extends React.Component {
           mapViewer.state.selectedUseCases[feature].attributes,
         );
       }
+      let count = [...new Set(regionFeatures.map((item) => item.Use_case_id))]
+        .length;
       return (
         <>
           <div className="use-cases-products-title">
-            <span>{regionFeatures.length} </span>
+            <span>{count} </span>
             use cases
           </div>
           <div className="use-case-button-back">
@@ -248,41 +255,35 @@ class InfoWidget extends React.Component {
   }
 
   /**
-   * Transfrom raw data to ordered data by Service products
+   * Transfrom raw data to ordered data by environmental topics
    */
   proccessDataSummary() {
-    let serviceProducts = this.getDifferentproductUsed(this.features);
-    let elements = [];
+    let topicProducts = this.getDifferentTopicUsed(this.features);
 
-    for (let serviceProduct in serviceProducts) {
-      processedData[serviceProducts[serviceProduct]] = [];
+    for (let topicProduct in topicProducts) {
+      processedData[topicProducts[topicProduct]] = [];
     }
 
     for (let feature in this.features) {
-      elements.push(this.features[feature].attributes);
-    }
+      let topics = this.features[feature].attributes.Use_case_topics.split(',');
 
-    for (let element in elements) {
-      processedData[
-        elements[element].Copernicus_Land_Monitoring_Service_products_used
-      ].push(elements[element]);
+      for (let topic in topics) {
+        processedData[topics[topic]].push(this.features[feature].attributes);
+      }
     }
   }
 
   /**
-   * Creates lateral menu ordered by specified ServiceProduct
+   * Creates lateral menu ordered by specified environmental topic
    * @param {Object} data
-   * @param {String} Copernicus_Land_Monitoring_Service_products_used
+   * @param {String} topic_name
    * @returns lateralMenuDOM
    */
-  getDataSummary(data, Copernicus_Land_Monitoring_Service_products_used) {
+  getDataSummary(data, topic_name) {
     let children = this.getDataBrief(data);
 
     return (
-      <div
-        key={Copernicus_Land_Monitoring_Service_products_used}
-        className="use-cases-dropdown"
-      >
+      <div key={topic_name} className="use-cases-dropdown">
         <div
           className="ccl-expandable__button"
           aria-expanded="false"
@@ -291,7 +292,7 @@ class InfoWidget extends React.Component {
           tabIndex="0"
           role="button"
         >
-          {Copernicus_Land_Monitoring_Service_products_used}
+          {topic_name}
         </div>
         <div className="use-cases-element-container">{children}</div>
       </div>
@@ -322,9 +323,9 @@ class InfoWidget extends React.Component {
   setDOMSummary() {
     this.proccessDataSummary();
     let DOMElements = [];
-    for (let product_use_name in processedData)
+    for (let topic_name in processedData)
       DOMElements.push(
-        this.getDataSummary(processedData[product_use_name], product_use_name),
+        this.getDataSummary(processedData[topic_name], topic_name),
       );
     return <>{DOMElements}</>;
   }
@@ -339,27 +340,23 @@ class InfoWidget extends React.Component {
   }
 
   /**
-   * Returns all different service product names
+   * Returns all different Environmental Topic names
    * @param {Array} features
-   * @returns allServiceProductNames
+   * @returns allTopicNames
    */
-  getDifferentproductUsed(features) {
-    let serviceProducts = [],
-      oldFeatureName = '';
+  getDifferentTopicUsed(features) {
+    let topicProducts = [];
 
     for (let feature in features) {
-      let currentCLMS =
-        features[feature].attributes
-          .Copernicus_Land_Monitoring_Service_products_used;
-      if (
-        currentCLMS !== oldFeatureName &&
-        !serviceProducts.includes(currentCLMS)
-      ) {
-        serviceProducts.push(currentCLMS);
-        oldFeatureName = currentCLMS;
+      let topics = features[feature].attributes.Use_case_topics.split(',');
+
+      for (let topic in topics) {
+        if (!topicProducts.includes(topics[topic])) {
+          topicProducts.push(topics[topic]);
+        }
       }
     }
-    return serviceProducts;
+    return topicProducts.sort();
   }
 
   /**
@@ -406,7 +403,15 @@ class InfoWidget extends React.Component {
         return (
           <>
             <div className="use-cases-products-title">
-              <span>{this.features.length} </span>
+              <span>
+                {
+                  [
+                    ...new Set(
+                      this.features.map((item) => item.attributes.Use_case_id),
+                    ),
+                  ].length
+                }{' '}
+              </span>
               use cases
             </div>
             <div className="use-cases-products-list">

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -353,21 +353,39 @@ class UseCasesMapViewer extends React.Component {
               let region = response.results[0].graphic.attributes.Region;
 
               layerControl.getRegionInfo(region, (data) => {
-                let data_eu = data.features.filter(
-                  (a) => a.attributes.Spatial_coverage === 'EU',
-                ).length;
-                let data_eea = data.features.filter(
-                  (a) => a.attributes.Spatial_coverage === 'EEA',
-                ).length;
-                let data_global = data.features.filter(
-                  (a) => a.attributes.Spatial_coverage === 'GLOBAL',
-                ).length;
-                let data_country = data.features.filter(
-                  (a) =>
-                    a.attributes.Spatial_coverage !== 'EU' &&
-                    a.attributes.Spatial_coverage !== 'EEA' &&
-                    a.attributes.Spatial_coverage !== 'GLOBAL',
-                ).length;
+                let data_eu = [
+                  ...new Set(
+                    data.features
+                      .filter((a) => a.attributes.Spatial_coverage === 'EU')
+                      .map((item) => item.attributes.Use_case_id),
+                  ),
+                ].length;
+                let data_eea = [
+                  ...new Set(
+                    data.features
+                      .filter((a) => a.attributes.Spatial_coverage === 'EEA')
+                      .map((item) => item.attributes.Use_case_id),
+                  ),
+                ].length;
+                let data_global = [
+                  ...new Set(
+                    data.features
+                      .filter((a) => a.attributes.Spatial_coverage === 'GLOBAL')
+                      .map((item) => item.attributes.Use_case_id),
+                  ),
+                ].length;
+                let data_country = [
+                  ...new Set(
+                    data.features
+                      .filter(
+                        (a) =>
+                          a.attributes.Spatial_coverage !== 'EU' &&
+                          a.attributes.Spatial_coverage !== 'EEA' &&
+                          a.attributes.Spatial_coverage !== 'GLOBAL',
+                      )
+                      .map((item) => item.attributes.Use_case_id),
+                  ),
+                ].length;
 
                 let string = '';
                 if (data_eu > 0) {

package/src/components/UseCasesMapViewer/css/ArcgisMap.css

@@ -87,7 +87,7 @@
 }
 
 .use-cases-products-map .esri-legend .esri-legend__service {
-  padding: 1rem;
+  padding: 1rem !important;
   margin-bottom: -1rem;
 }