@eeacms/volto-arcgis-block 0.1.326 → 0.1.328

package/CHANGELOG.md

@@ -4,7 +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.326](https://github.com/eea/volto-arcgis-block/compare/0.1.325...0.1.326) - 7 January 2025
+### [0.1.328](https://github.com/eea/volto-arcgis-block/compare/0.1.327...0.1.328) - 9 January 2025
+
+### [0.1.327](https://github.com/eea/volto-arcgis-block/compare/0.1.326...0.1.327) - 8 January 2025
+
+### [0.1.326](https://github.com/eea/volto-arcgis-block/compare/0.1.325...0.1.326) - 8 January 2025
 
 ### [0.1.325](https://github.com/eea/volto-arcgis-block/compare/0.1.324...0.1.325) - 20 December 2024
 

package/package.json

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

package/src/components/MapViewer/MenuWidget.jsx

@@ -4220,7 +4220,7 @@ class MenuWidget extends React.Component {
     for (let index = 0; index < this.compCfg.length; index++) {
       let componentFound = false;
       if (
-        index.toString() === componentFilter ||
+        this.compCfg[index].ComponentPosition.toString() === componentFilter ||
         componentFilter === 'default'
       ) {
         for (let j = 0; j < this.compCfg[index].Products.length; j++) {
@@ -4437,25 +4437,59 @@ class MenuWidget extends React.Component {
                 </span>
               )}
             </div>
-            <div className="search-panel">
-              <div className="menu-searchpanel">
-                <div class="search-input menu-search-input">
-                  <input
-                    type="text"
-                    id="menu-searchtext"
-                    maxlength="200"
-                    placeholder="Search products and datasets"
-                    onChange={() => this.openClearButton()}
-                    onKeyDown={(e) => {
-                      if (e.code === 'Enter') {
-                        this.menuSearch();
-                      }
-                    }}
-                  />
-                  <div class="search-input-actions">
+            <div
+              className="panels"
+              id="paneles"
+              onScroll={() => this.storePanelScroll()}
+            >
+              <div className="search-panel">
+                <div className="menu-searchpanel">
+                  <div class="search-input menu-search-input">
+                    <input
+                      type="text"
+                      id="menu-searchtext"
+                      maxlength="200"
+                      placeholder="Search products and datasets"
+                      onChange={() => this.openClearButton()}
+                      onKeyDown={(e) => {
+                        if (e.code === 'Enter') {
+                          this.menuSearch();
+                        }
+                      }}
+                    />
+                    <div class="search-input-actions">
+                      <button
+                        class="ui basic icon button search-input-clear-icon-button clearsearch"
+                        onClick={() => this.clearMenuText()}
+                        onKeyDown={(e) => {
+                          if (
+                            !e.altKey &&
+                            e.code !== 'Tab' &&
+                            !e.ctrlKey &&
+                            e.code !== 'Delete' &&
+                            !e.shiftKey &&
+                            !e.code.startsWith('F')
+                          ) {
+                            this.clearMenuText();
+                          }
+                        }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 26 26"
+                          class="icon"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            d="M27.899 9.515L26.485 8.101 18 16.586 9.514 8.101 8.1 9.515 16.586 18 8.1 26.486 9.514 27.9 18 19.414 26.485 27.9 27.899 26.486 19.414 18z"
+                          ></path>
+                        </svg>
+                      </button>
+                    </div>
                     <button
-                      class="ui basic icon button search-input-clear-icon-button clearsearch"
-                      onClick={() => this.clearMenuText()}
+                      aria-label="Search"
+                      class="button menu-search-button"
+                      onClick={() => this.menuSearch()}
                       onKeyDown={(e) => {
                         if (
                           !e.altKey &&
@@ -4465,63 +4499,57 @@ class MenuWidget extends React.Component {
                           !e.shiftKey &&
                           !e.code.startsWith('F')
                         ) {
-                          this.clearMenuText();
+                          this.menuSearch();
                         }
                       }}
                     >
+                      <span class="ccl-icon-zoom search-menu-icon"></span>
+                    </button>
+                  </div>
+                  <div class="filters-element filter-logo filters-header">
+                    <div class="filters-title">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 26 26"
-                        class="icon"
+                        viewBox="0 0 36 36"
+                        class="icon ui"
                       >
                         <path
                           fill-rule="evenodd"
-                          d="M27.899 9.515L26.485 8.101 18 16.586 9.514 8.101 8.1 9.515 16.586 18 8.1 26.486 9.514 27.9 18 19.414 26.485 27.9 27.899 26.486 19.414 18z"
+                          d="M5.0916,5.0002 L14.9996,19.3132 L14.9996,34.0002 L20.9996,29.5002 L20.9996,19.3132 L30.9086,5.0002 L5.0916,5.0002 Z M17.0006,18.6872 L8.9086,7.0002 L27.0916,7.0002 L19.0006,18.6872 L19.0006,28.5002 L17.0006,30.0002 L17.0006,18.6872 Z"
                         ></path>
                       </svg>
-                    </button>
-                  </div>
-                  <button
-                    aria-label="Search"
-                    class="button menu-search-button"
-                    onClick={() => this.menuSearch()}
-                    onKeyDown={(e) => {
-                      if (
-                        !e.altKey &&
-                        e.code !== 'Tab' &&
-                        !e.ctrlKey &&
-                        e.code !== 'Delete' &&
-                        !e.shiftKey &&
-                        !e.code.startsWith('F')
-                      ) {
-                        this.menuSearch();
-                      }
-                    }}
-                  >
-                    <span class="ccl-icon-zoom search-menu-icon"></span>
-                  </button>
-                </div>
-                <div class="filters-element filter-logo filters-header">
-                  <div class="filters-title">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 36 36"
-                      class="icon ui"
-                    >
-                      <path
-                        fill-rule="evenodd"
-                        d="M5.0916,5.0002 L14.9996,19.3132 L14.9996,34.0002 L20.9996,29.5002 L20.9996,19.3132 L30.9086,5.0002 L5.0916,5.0002 Z M17.0006,18.6872 L8.9086,7.0002 L27.0916,7.0002 L19.0006,18.6872 L19.0006,28.5002 L17.0006,30.0002 L17.0006,18.6872 Z"
-                      ></path>
-                    </svg>
-                    <span class="filters-title-bold">Filters</span>
+                      <span class="filters-title-bold">Filters</span>
+                      <div
+                        className="clear-filters"
+                        tabIndex="0"
+                        role="button"
+                        onClick={() => {
+                          this.clearFilters();
+                          this.menuSearch();
+                        }}
+                        onKeyDown={(e) => {
+                          if (
+                            !e.altKey &&
+                            e.code !== 'Tab' &&
+                            !e.ctrlKey &&
+                            e.code !== 'Delete' &&
+                            !e.shiftKey &&
+                            !e.code.startsWith('F')
+                          ) {
+                            this.clearFilters();
+                            this.menuSearch();
+                          }
+                        }}
+                      >
+                        Clear filters
+                      </div>
+                    </div>
+
                     <div
-                      className="clear-filters"
-                      tabIndex="0"
+                      className="dropdown-icon close-filters-icon"
                       role="button"
-                      onClick={() => {
-                        this.clearFilters();
-                        this.menuSearch();
-                      }}
+                      tabIndex="0"
+                      onClick={() => this.closeFilters()}
                       onKeyDown={(e) => {
                         if (
                           !e.altKey &&
@@ -4531,77 +4559,49 @@ class MenuWidget extends React.Component {
                           !e.shiftKey &&
                           !e.code.startsWith('F')
                         ) {
-                          this.clearFilters();
-                          this.menuSearch();
+                          this.closeFilters();
                         }
                       }}
                     >
-                      Clear filters
+                      <FontAwesomeIcon icon={['fas', this.state.filterArrow]} />
                     </div>
                   </div>
-
-                  <div
-                    className="dropdown-icon close-filters-icon"
-                    role="button"
-                    tabIndex="0"
-                    onClick={() => this.closeFilters()}
-                    onKeyDown={(e) => {
-                      if (
-                        !e.altKey &&
-                        e.code !== 'Tab' &&
-                        !e.ctrlKey &&
-                        e.code !== 'Delete' &&
-                        !e.shiftKey &&
-                        !e.code.startsWith('F')
-                      ) {
-                        this.closeFilters();
-                      }
-                    }}
-                  >
-                    <FontAwesomeIcon icon={['fas', this.state.filterArrow]} />
+                  <div className="filters-panel">
+                    <span className="menu-filter">
+                      Component
+                      <select
+                        id="select-component"
+                        class="esri-select filter-select"
+                        onBlur={() => {}}
+                        onChange={() => {
+                          this.loadProductFilters();
+                          this.menuSearch();
+                        }}
+                      ></select>
+                    </span>
+                    <span className="menu-filter">
+                      Product groups
+                      <select
+                        id="select-product"
+                        class="esri-select filter-select"
+                        onBlur={() => {}}
+                        onChange={() => {
+                          this.loadFamilyFilters();
+                          this.menuSearch();
+                        }}
+                      ></select>
+                    </span>
+                    <span className="menu-filter menu-family-filter">
+                      Family
+                      <select
+                        id="select-family"
+                        class="esri-select filter-select"
+                      ></select>
+                    </span>
                   </div>
                 </div>
-                <div className="filters-panel">
-                  <span className="menu-filter">
-                    Component
-                    <select
-                      id="select-component"
-                      class="esri-select filter-select"
-                      onBlur={() => {}}
-                      onChange={() => {
-                        this.loadProductFilters();
-                        this.menuSearch();
-                      }}
-                    ></select>
-                  </span>
-                  <span className="menu-filter">
-                    Product groups
-                    <select
-                      id="select-product"
-                      class="esri-select filter-select"
-                      onBlur={() => {}}
-                      onChange={() => {
-                        this.loadFamilyFilters();
-                        this.menuSearch();
-                      }}
-                    ></select>
-                  </span>
-                  <span className="menu-filter menu-family-filter">
-                    Family
-                    <select
-                      id="select-family"
-                      class="esri-select filter-select"
-                    ></select>
-                  </span>
-                </div>
               </div>
-            </div>
-            <div className="no-filter-result-message">No data available</div>
-            <div
-              className="panels"
-              id="paneles"
-              onScroll={() => this.storePanelScroll()}
-            >
+              <div className="no-filter-result-message">No data available</div>
               <div
                 className={
                   !this.props.download ? 'panel panel-selected' : 'panel'

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

@@ -1638,13 +1638,13 @@ div.map-container.popup-block {
 }
 
 .filter-select {
-  max-width: 19rem;
+  max-width: 18rem;
   height: 1.5rem !important;
 }
 
 .clear-filters {
   display: none;
-  margin-left: 16rem;
+  margin-left: 15rem;
   font-size: small;
   text-decoration: underline;
 }
@@ -1652,7 +1652,7 @@ div.map-container.popup-block {
 .clearsearch.search-input-clear-icon-button.button {
   position: absolute;
   top: 4.3rem;
-  left: 23rem;
+  left: 22.5rem;
   display: none;
 }