@eeacms/volto-arcgis-block 0.1.267 → 0.1.269

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.269](https://github.com/eea/volto-arcgis-block/compare/0.1.268...0.1.269) - 21 March 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2383-3050 (bug): commented unused var [Unai Bolivar - [`a8e696b`](https://github.com/eea/volto-arcgis-block/commit/a8e696bdf0252c3a8401c822e1b2bf56246dafba)]
+- CLMS-2383-3050 (bug): implemented file upload form cache cleaning, disabled geojson process, centered NUTS icon [Unai Bolivar - [`84c5677`](https://github.com/eea/volto-arcgis-block/commit/84c5677ef8af6568151ae2a9ce1dd0eaff966466)]
+### [0.1.268](https://github.com/eea/volto-arcgis-block/compare/0.1.267...0.1.268) - 21 March 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2383-3050 (bug): allowed file size limit alert corrected. alerts text centered [Unai Bolivar - [`0666ab3`](https://github.com/eea/volto-arcgis-block/commit/0666ab320382db18367bf1076db91e6fe2f6145e)]
+- CLMS-2383-3050 (chore): commented logs [Unai Bolivar - [`f68b1a9`](https://github.com/eea/volto-arcgis-block/commit/f68b1a90d4b77b73446cfd7b45ee310a6eb3dee1)]
+- CLMS-2383-3050 (bug): corrected graphic overlay. corrected add to cart bug. CSV fileu upload disabled [Unai Bolivar - [`4f43430`](https://github.com/eea/volto-arcgis-block/commit/4f434304f4013725b86d302991d826cf861c9c57)]
 ### [0.1.267](https://github.com/eea/volto-arcgis-block/compare/0.1.266...0.1.267) - 20 March 2024
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -212,7 +212,7 @@ class AreaWidget extends React.Component {
         //definitionExpression: 'LEVL_CODE=' + level,
       });
 
-      this.removeFileUploadedLayer();
+      //this.removeFileUploadedLayer();
 
       this.nutsGroupLayer.add(layer);
 
@@ -236,7 +236,7 @@ class AreaWidget extends React.Component {
       popupEnabled: false,
     });
 
-    this.removeFileUploadedLayer();
+    //this.removeFileUploadedLayer();
 
     this.nutsGroupLayer.add(layer);
 
@@ -254,26 +254,28 @@ class AreaWidget extends React.Component {
   };
 
   handleFileUpload = (e) => {
-    //Store the file as Blob
-    let fileBlob = e.target.files[0];
     //Get the file name
     const fileName = e.target.value.toLowerCase();
     //console.log('file name: ', fileName);
 
+    //Get the file size
+    const fileSize = e.target.files[0].size;
     //Get the file from the form
     const file = document.getElementById('uploadForm');
     //console.log('uploaded file from form: ', file);
 
     //List allowed file extensions
-    let fileExtensions = ['zip', 'geojson', 'csv'];
+
+    //let fileExtensions = ['zip', 'geojson'];
 
     // Get the file extension
     let fileExtension = fileName.split('.').pop();
 
     //console.log('file extension: ', fileExtension);
-
     //Check if the file format is not supported
-    if (fileExtensions.indexOf(fileExtension) === -1) {
+
+    // if (fileExtensions.indexOf(fileExtension) === -1) {
+    if (fileExtension !== 'zip') {
       this.setState({
         showInfoPopup: true,
         infoPopupType: 'fileFormat',
@@ -281,65 +283,47 @@ class AreaWidget extends React.Component {
       return;
     }
 
-    //Check if the file size is over the 10mb file size limit
-    if (
-      (file.size > 2000000 && fileExtension === 'zip') ||
-      (file.size > 1000000 && fileExtension === 'geojson') ||
-      (file.size > 1000000 && fileExtension === 'csv')
-    ) {
+    // Check if the file is a geojson or CSV and the file size is over the 10mb file size limit
+    // or file is a shape file and the file size is over the 2mb file size limit
+
+    //if (fileSize > 10485760 && fileExtension === 'geojson') {
+    //  this.setState({
+    //    showInfoPopup: true,
+    //    infoPopupType: 'fileLimit',
+    //  });
+    //  return;
+    //}
+
+    if (fileSize > 2097152 && fileExtension === 'zip') {
       this.setState({
         showInfoPopup: true,
-        infoPopupType: 'fileLimit',
+        infoPopupType: 'shapefileLimit',
       });
       return;
     }
 
-    //Read the file
-    let reader = new FileReader();
-
-    reader.onload = (event) => {
-      switch (fileExtension) {
-        //    case 'zip':
-        //        this.handleShp(event.target.result);
-        //      break;
-        //    case 'geojson':
-        //      let parsedData;
-        //      try {
-        //        parsedData = JSON.parse(event.target.result);
-        //      } catch (e) {
-        //                   console.error('Failed to parse JSON', e);
-        //        return;
-        //      }
-        //      this.handleGeoJson(parsedData);
-        //      break;
-        case 'csv':
-          this.handleCsv(event.target.result);
-          break;
-        default:
-          break;
-      }
-    };
-
     switch (fileExtension) {
       case 'zip':
         this.generateFeatureCollection(fileName, file, 'shapefile');
-        //reader.readAsArrayBuffer(file);
-        break;
-      case 'geojson':
-        this.generateFeatureCollection(fileName, file, 'geojson');
-        //reader.readAsText(file);
-        break;
-      case 'csv':
-        //this.generateFeatureCollection(
-        //  fileName,
-        //  file,
-        //  'csv',
-        //);
-        reader.readAsText(fileBlob);
         break;
+      //case 'geojson':
+      //  this.generateFeatureCollection(fileName, file, 'geojson');
+      //  //reader.readAsText(file);
+      //  break;
+      //case 'csv':
+      //this.generateFeatureCollection(
+      //  fileName,
+      //  file,
+      //  'csv',
+      //);
+      //  reader.readAsText(fileBlob);
+      //  break;
       default:
         break;
     }
+    setTimeout(() => {
+      e.target.value = null;
+    }, 2000);
   };
 
   generateFeatureCollection(fileName, file, inputFormat) {
@@ -384,6 +368,8 @@ class AreaWidget extends React.Component {
             return;
           //Create a feature layer from the feature collection
           this.addFeatureCollectionToMap(response.data.featureCollection);
+          //console.log(data);
+          //this.loadFileUploadService(response.data.featureCollection);
         } else {
           //console.error('Unexpected response structure:', response);
         }
@@ -392,15 +378,24 @@ class AreaWidget extends React.Component {
         //console.error('Failed to generate feature collection:', error);
       });
   }
-
   // add the feature collection to the map and zoom to the feature collection extent
   // if you want to persist the feature collection when you reload browser, you could store the
   // collection in local storage by serializing the layer using featureLayer.toJson()
   // see the 'Feature Collection in Local Storage' sample for an example of how to work with local storage
   addFeatureCollectionToMap(featureCollection) {
+    //console.log('feature collection: ', featureCollection);
     let sourceGraphics = [];
+    const symbol = new SimpleFillSymbol({
+      //type: 'simple-fill',
+      color: [255, 255, 255, 0.5],
+      outline: {
+        color: [0, 0, 0],
+        width: 1,
+      },
+    });
     const layers = featureCollection.layers.map((layer) => {
       const graphics = layer.featureSet.features.map((feature) => {
+        feature.symbol = symbol;
         return Graphic.fromJSON(feature);
       });
       sourceGraphics = sourceGraphics.concat(graphics);
@@ -417,12 +412,43 @@ class AreaWidget extends React.Component {
         //        outFields: ['*'],
         //        popupEnabled: false,
       });
+      //featureLayer.renderer = {
+      //  type: 'simple-fill',
+      //  color: [255, 255, 255, 0.5],
+      //  outline: {
+      //    color: [0, 0, 0],
+      //    width: 1,
+      //  },
+      //}
+      //featureLayer.renderer = {
+      //  type: "simple",  // autocasts as new SimpleRenderer()
+      //  symbol: {
+      //    type: "simple-fill",  // autocasts as new SimpleMarkerSymbol()
+      //    //size: 20,
+      //    color: [255, 255, 255, 0.5],
+      //    outline: {  // autocasts as new SimpleLineSymbol()
+      //      width: 1,
+      //      color: [0, 0, 0]
+      //    }
+      //  }
+      //};
+      //featureLayer.renderer = {
+      //  type: "simple",  // autocasts as new SimpleRenderer()
+      //  symbol: {
+      //    type: "simple-fill",  // autocasts as new SimpleMarkerSymbol()
+      //    size: 20,
+      //    color: "green",
+      //    outline: {  // autocasts as new SimpleLineSymbol()
+      //      width: 4.5,
+      //      color: "blue"
+      //    }
+      //  }
+      //};
       return featureLayer;
     });
-
     //Check for the correct spatial reference
-    //console.log("layer: ", layers);
-    if (this.checkWkid(layers[0]?.spatialReference) === false) return;
+    //console.log('layer: ', layers);
+    //if (this.checkWkid(layers[0]?.spatialReference) === false) return;
 
     let geometry = new Extent(
       featureCollection.layers[0].layerDefinition.extent,
@@ -442,15 +468,14 @@ class AreaWidget extends React.Component {
       this.removeNutsLayers();
 
       //Add uploaded layer to the map and zoom to the extent
-      this.props.map.addMany(layers);
+      //this.props.map.addMany(layers);
+      this.props.view.graphics.addMany(sourceGraphics);
       this.props.view.goTo(sourceGraphics).catch((error) => {
         //console.error('From addFeatureCollectionToMap function', error);
       });
+      //console.log('source graphics: ', sourceGraphics);
       //Send the area to the parent component
-      this.props.updateArea({
-        origin: { x: geometry.extent.xmin, y: geometry.extent.ymin },
-        end: { x: geometry.extent.xmax, y: geometry.extent.ymax },
-      });
+      this.props.updateArea(sourceGraphics[0]);
       //Order the layer in the map
       let index = this.getHighestIndex();
       this.props.map.reorder(this.fileUploadLayer, index + 1);
@@ -597,9 +622,10 @@ class AreaWidget extends React.Component {
 
   removeFileUploadedLayer() {
     if (this.fileUploadLayer !== null) {
-      this.props.map.removeMany(this.fileUploadLayer.layers);
-      //this.props.view.graphics.removeMany(this.fileUploadLayer.sourceGraphics);
-      this.fileUploadLayer = null;
+      //  this.props.map.removeMany(this.fileUploadLayer.layers);
+      //  //this.props.view.graphics.removeMany(this.fileUploadLayer.sourceGraphics);
+      //  this.fileUploadLayer = null;
+      this.clearWidget();
     }
   }
 
@@ -783,7 +809,7 @@ class AreaWidget extends React.Component {
             let graphic = response.results.filter((result) => {
               let layer;
               if (
-                'nuts0 nuts1 nuts2 nuts3 countries'.includes(
+                'nuts0 nuts1 nuts2 nuts3 countries upload'.includes(
                   result.graphic.layer.id,
                 )
               ) {
@@ -1062,9 +1088,7 @@ class AreaWidget extends React.Component {
                   >
                     <div className="field">
                       <label className="file-upload">
-                        <span>
-                          File formats supported: shp(zip), geojson, csv
-                        </span>
+                        <span>File formats supported: shp(zip)</span>
                         <input
                           type="file"
                           name="file"
@@ -1149,7 +1173,19 @@ class AreaWidget extends React.Component {
                         <FontAwesomeIcon icon={['fas', 'info-circle']} />
                       </span>
                       <div className="drawRectanglePopup-text">
-                        Uploading files larger than 10MB is not allowed.
+                        Uploading geojson or csv files larger than 10MB is not
+                        allowed.
+                      </div>
+                    </>
+                  )}
+                  {this.state.infoPopupType === 'shapefileLimit' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        Uploading shapefiles files larger than 2MB is not
+                        allowed.
                       </div>
                     </>
                   )}

package/src/components/MapViewer/MenuWidget.jsx

@@ -31,7 +31,7 @@ export const AddCartItem = ({
   const { addCartItem, isLoggedIn } = useCartState();
 
   const checkArea = (e) => {
-    let check = document.querySelector('.area-panel input:checked').value;
+    let check = document.querySelector('.area-panel input:checked')?.value;
     let area = {};
     if (check === 'area') {
       let graphics = mapViewer.view.graphics;
@@ -77,7 +77,7 @@ export const AddCartItem = ({
   const checkExtent = (e) => {
     let intersection = false;
     let areaExtent = null;
-    let check = document.querySelector('.area-panel input:checked').value;
+    let check = document.querySelector('.area-panel input:checked')?.value;
     if (check === 'area') {
       areaExtent = new Extent({
         xmin: Math.min(areaData.end.x, areaData.origin.x),

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

@@ -349,8 +349,14 @@ div.esri-popover
   margin-left: 2rem;
 }
 
+div.area-container .ccl-form .ccl-form-check-input + .ccl-form-radio-label {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 1.75rem;
+}
+
 label.ccl-form-radio-label span.nuts-menu-icon {
-  margin-left: 9rem;
+  max-width: 30px;
 }
 
 .area-container .esri-button {
@@ -1396,7 +1402,8 @@ input[type='range']::-ms-track {
 }
 
 .drawRectanglePopup-text {
-  flex: auto;
+  align-content: center;
+  /* flex: auto; */
   font-family: 'Lato', sans-serif;
   font-size: 0.875rem;
 }