qwc2 2026.7.29 → 2026.7.30

package/components/IdentifyViewer.js

@@ -25,7 +25,6 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import htmlReactParser, { domToReact } from 'html-react-parser';
 /**
  * Copyright 2016-2024 Sourcepole AG
  * All rights reserved.
@@ -33,6 +32,7 @@ import htmlReactParser, { domToReact } from 'html-react-parser';
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import htmlReactParser, { domToReact } from 'html-react-parser';
 import React from 'react';
 import { connect } from 'react-redux';
 import axios from 'axios';
@@ -52,8 +52,11 @@ import LayerUtils from '../utils/LayerUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import MapUtils from '../utils/MapUtils';
 import MiscUtils, { ToggleSet } from '../utils/MiscUtils';
+import { registerPermalinkDataStoreHook, unregisterPermalinkDataStoreHook } from '../utils/PermaLinkUtils';
 import VectorLayerUtils from '../utils/VectorLayerUtils';
 import Icon from './Icon';
+import ButtonBar from './widgets/ButtonBar';
+import FeaturesTable from './widgets/FeaturesTable';
 import NavBar from './widgets/NavBar';
 import Spinner from './widgets/Spinner';
 import ToggleSwitch from './widgets/ToggleSwitch';
@@ -353,7 +356,16 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       compareEnabled: false,
       multiViewEnabled: false,
       currentPage: 0,
-      pageSize: 1
+      pageSize: 1,
+      tableSelection: {}
+    });
+    _defineProperty(_this, "storeIdentifyResults", function () {
+      return new Promise(function (resolve) {
+        return resolve({
+          identifyResults: _this.state.resultTree,
+          currentResultDisplayMode: _this.props.resultDisplayMode
+        });
+      });
     });
     _defineProperty(_this, "getCurrentResultFeature", function () {
       var _this$state$resultTre, _this$state$resultTre2, _this$state$resultTre3, _this$state$currentRe;
@@ -377,7 +389,7 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "setHighlightedFeatures", function (features) {
-      if (!features && _this.props.highlightAllResults) {
+      if (isEmpty(features) && _this.props.highlightAllResults) {
         var resultTree = _this.state.selectedLayer !== '' ? _defineProperty({}, _this.state.selectedLayer, _this.state.resultTree[_this.state.selectedLayer]) : _this.state.resultTree;
         features = Object.values(resultTree).flat();
       }
@@ -671,7 +683,7 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
           });
         } else {
           rows = properties.map(function (attrib) {
-            if (_this.props.theme.skipEmptyFeatureAttributes && (feature.properties[attrib] === "" || feature.properties[attrib] === null || feature.properties[attrib] === "NULL")) {
+            if ((_this.props.theme.skipEmptyFeatureAttributes || _this.props.skipEmptyFeatureAttributes) && (feature.properties[attrib] === "" || feature.properties[attrib] === null || feature.properties[attrib] === "NULL")) {
               return null;
             }
             return /*#__PURE__*/React.createElement("tr", {
@@ -789,6 +801,101 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
         };
       });
     });
+    _defineProperty(_this, "renderResultsTable", function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "identify-results-tables"
+      }, Object.entries(_this.state.resultTree).map(function (_ref16) {
+        var _ref17 = _slicedToArray(_ref16, 2),
+          layerid = _ref17[0],
+          features = _ref17[1];
+        if (features.length === 0 || _this.state.selectedLayer && layerid !== _this.state.selectedLayer) {
+          return null;
+        }
+        var fields = {};
+        features.map(function (feature) {
+          Object.entries(feature.properties).map(function (_ref18) {
+            var _ref19 = _slicedToArray(_ref18, 2),
+              attr = _ref19[0],
+              value = _ref19[1];
+            if (!(attr in fields)) {
+              fields[attr] = {
+                id: attr,
+                name: attr
+              };
+            }
+          });
+        });
+        var haveSel = !isEmpty(_this.state.tableSelection[layerid]);
+        var buttons = [{
+          key: "Export",
+          icon: "export"
+        }, {
+          key: "Delete",
+          icon: haveSel ? "trash_checked" : "trash"
+        }];
+        return /*#__PURE__*/React.createElement("div", {
+          className: "identify-results-table-container",
+          key: layerid
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "identify-results-table-titlebar"
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: _this.state.collapsedLayers.has(layerid) ? "expand" : "collapse",
+          onClick: function onClick() {
+            return _this.setState(function (state) {
+              return {
+                collapsedLayers: state.collapsedLayers.toggle(layerid)
+              };
+            });
+          }
+        }), /*#__PURE__*/React.createElement("span", null, features[0].layertitle, " (", features.length, ")"), /*#__PURE__*/React.createElement(ButtonBar, {
+          buttons: buttons,
+          onClick: function onClick(action) {
+            return _this.tableAction(layerid, action);
+          }
+        })), !_this.state.collapsedLayers.has(layerid) ? /*#__PURE__*/React.createElement(FeaturesTable, {
+          allowSelectAll: true,
+          features: features,
+          fields: Object.values(fields),
+          hideIdColumn: true,
+          highlightFeatures: _this.setHighlightedFeatures,
+          selectionChanged: function selectionChanged(sel) {
+            return _this.setState(function (state) {
+              return {
+                tableSelection: _objectSpread(_objectSpread({}, state.tableSelection), {}, _defineProperty({}, layerid, sel))
+              };
+            });
+          }
+        }) : null);
+      }));
+    });
+    _defineProperty(_this, "tableAction", function (layerid, action) {
+      if (action === "Export") {
+        var features = isEmpty(_this.state.tableSelection[layerid]) ? _this.state.resultTree[layerid] : Object.values(_this.state.tableSelection[layerid]);
+        _this["export"]({
+          layerid: features
+        });
+      } else if (action === "Delete") {
+        _this.setState(function (state) {
+          var tableSelection = state.tableSelection;
+          var selection = state.tableSelection[layerid];
+          var newLayerResults = !isEmpty(selection) ? state.resultTree[layerid].filter(function (f) {
+            return !(f.id in selection);
+          }) : [];
+          var newResultTree = _objectSpread({}, state.resultTree);
+          if (isEmpty(newLayerResults)) {
+            delete newResultTree[layerid];
+            tableSelection = _objectSpread({}, tableSelection);
+            delete tableSelection[layerid];
+          } else {
+            newResultTree[layerid] = newLayerResults;
+          }
+          return {
+            resultTree: newResultTree,
+            tableSelection: tableSelection
+          };
+        });
+      }
+    });
     _defineProperty(_this, "initBody", function (el) {
       if (el) {
         // HACK to trigger an additional repaint, since Safari/Chrome on iOS render the element cut off the first time
@@ -856,7 +963,7 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       var haveSettings = Object.values(enabledSettings).find(Boolean) !== undefined;
       return /*#__PURE__*/React.createElement("div", {
         className: "identify-toolbar"
-      }, haveSettings ? toggleButton("settingsMenu", "cog", false) : null, _this.state.settingsMenu ? _this.renderSettingsMenu(enabledSettings) : null, _this.props.enableCompare ? toggleButton("compareEnabled", "compare", _this.state.selectedResults.size() < 2, LocaleUtils.tr("identify.compare")) : null, /*#__PURE__*/React.createElement("span", {
+      }, haveSettings ? toggleButton("settingsMenu", "cog", false) : null, _this.state.settingsMenu ? _this.renderSettingsMenu(enabledSettings) : null, _this.props.enableCompare && _this.props.resultDisplayMode !== "table" ? toggleButton("compareEnabled", "compare", _this.state.selectedResults.size() < 2, LocaleUtils.tr("identify.compare")) : null, /*#__PURE__*/React.createElement("span", {
         className: "identify-toolbar-spacer"
       }), infoLabel, /*#__PURE__*/React.createElement("span", {
         className: "identify-toolbar-spacer"
@@ -951,10 +1058,10 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("option", {
         disabled: true,
         value: ""
-      }, LocaleUtils.tr("identify.selectreport")), Object.entries(_this.state.reports).map(function (_ref17) {
-        var _ref18 = _slicedToArray(_ref17, 2),
-          layername = _ref18[0],
-          reports = _ref18[1];
+      }, LocaleUtils.tr("identify.selectreport")), Object.entries(_this.state.reports).map(function (_ref21) {
+        var _ref22 = _slicedToArray(_ref21, 2),
+          layername = _ref22[0],
+          reports = _ref22[1];
         return reports.map(function (report, idx) {
           return /*#__PURE__*/React.createElement("option", {
             key: layername + "::" + idx,
@@ -1210,6 +1317,7 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
     _this.bodyEl = null;
     _this.state.exportFormat = !Array.isArray(props.enableExport) ? 'geojson' : props.enableExport[0];
     _this.state.multiViewEnabled = props.resultMultiDisplay;
+    registerPermalinkDataStoreHook("identifyresultstate", _this.storeIdentifyResults);
     return _this;
   }
   _inherits(IdentifyViewer, _React$Component);
@@ -1250,6 +1358,7 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.props.removeLayer("__identifyviewerhighlight");
+      unregisterPermalinkDataStoreHook("identifyresultstate");
     }
   }, {
     key: "render",
@@ -1257,10 +1366,10 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
       var body = null;
       var resultTree = this.state.selectedLayer !== '' ? _defineProperty({}, this.state.selectedLayer, this.state.resultTree[this.state.selectedLayer]) : this.state.resultTree;
-      var flatResults = Object.entries(resultTree).map(function (_ref21) {
-        var _ref22 = _slicedToArray(_ref21, 2),
-          layerid = _ref22[0],
-          features = _ref22[1];
+      var flatResults = Object.entries(resultTree).map(function (_ref25) {
+        var _ref26 = _slicedToArray(_ref25, 2),
+          layerid = _ref26[0],
+          features = _ref26[1];
         return features.map(function (feature) {
           return [layerid, feature];
         });
@@ -1288,10 +1397,10 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       } else if (this.props.resultDisplayMode === 'flat') {
         body = /*#__PURE__*/React.createElement("div", {
           className: "identify-flat-results-list"
-        }, Object.entries(resultTree).map(function (_ref23) {
-          var _ref24 = _slicedToArray(_ref23, 2),
-            layerid = _ref24[0],
-            features = _ref24[1];
+        }, Object.entries(resultTree).map(function (_ref27) {
+          var _ref28 = _slicedToArray(_ref27, 2),
+            layerid = _ref28[0],
+            features = _ref28[1];
           return features.map(function (feature) {
             return _this2.renderResultAttributes(layerid, feature, 'identify-result-frame');
           });
@@ -1305,10 +1414,10 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
           body = /*#__PURE__*/React.createElement("div", {
             className: "identify-compare-results",
             style: _style
-          }, results.map(function (_ref25) {
-            var _ref26 = _slicedToArray(_ref25, 2),
-              layerid = _ref26[0],
-              feature = _ref26[1];
+          }, results.map(function (_ref29) {
+            var _ref30 = _slicedToArray(_ref29, 2),
+              layerid = _ref30[0],
+              feature = _ref30[1];
             return _this2.renderResultAttributes(layerid, feature, 'identify-result-frame');
           }));
         } else if (this.state.currentPage < flatResults.length) {
@@ -1319,6 +1428,8 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
             className: "identify-flat-results-list"
           }, this.renderResultAttributes(layerid, feature, 'identify-result-frame'));
         }
+      } else if (this.props.resultDisplayMode === 'table') {
+        body = this.renderResultsTable();
       }
       return /*#__PURE__*/React.createElement("div", {
         className: "identify-body",
@@ -1353,6 +1464,7 @@ _defineProperty(IdentifyViewer, "propTypes", {
   setActiveLayerInfo: PropTypes.func,
   showLayerSelector: PropTypes.bool,
   showLayerTitles: PropTypes.bool,
+  skipEmptyFeatureAttributes: PropTypes.bool,
   theme: PropTypes.object,
   zoomToPoint: PropTypes.func
 });

package/components/style/IdentifyViewer.css

@@ -219,3 +219,32 @@ div.identify-body td.identify-attr-spacer {
     height: 2px;
     background-color: var(--list-section-bg-color);
 }
+
+div.identify-body div.identify-results-tables {
+    flex: 1 1 auto;
+    overflow-y: auto;
+}
+
+div.identify-results-table-container {
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 0.5em;
+}
+
+div.identify-results-table-titlebar {
+    display: flex;
+    align-items: center;
+    padding: 0.25em;
+    gap: 1em;
+}
+
+div.identify-results-table-titlebar > span:nth-child(2) {
+    flex: 1 1 auto;
+    font-weight: bold;
+    font-size: 110%;
+}
+
+div.identify-results-table-container > div.featurestable-frame {
+    max-height: 15em;
+    margin: 0.25em;
+}

package/components/style/ResizeableWindow.css

@@ -47,6 +47,10 @@ div.resizeable-window-minimized {
     min-height: 2.5em!important;
 }
 
+div.resizeable-window-minimized div.resizeable-window-body {
+    padding: 0;
+}
+
 div.resizeable-window-docked-left {
     transform: none!important;
     left: 0!important;