Implement result list component (#11, #275)

Co-authored-by: Christoph Maskos <Christoph.Maskos@it.nrw.de>
Co-authored-by: Senait <s.alema@conterra.de>
Co-authored-by: m.eisenblaetter <m.eisenblaetter@conterra.de>
Co-authored-by: Michael Beckemeyer <m.beckemeyer@conterra.de>
Co-authored-by: Matheisen, Alexander <alexander.matheisen@it.nrw.de>
Co-authored-by: Panayot Nenov <Panayot.Nenov@it.nrw.de>
Co-authored-by: panayot-nenov <32521582+panayot-nenov@users.noreply.github.com>
Co-authored-by: Bierett, Danilo <danilo.bierett@it.nrw.de>

.changeset/cold-otters-flash.md

@@ -0,0 +1,5 @@
+---
+"@open-pioneer/selection": patch
+---
+
+`VectorLayerSelectionSource`: Use a UUID as a fallback if a found feature has no id.

.changeset/selfish-buckets-hide.md

@@ -0,0 +1,5 @@
+---
+"@open-pioneer/selection": patch
+---
+
+Fix import of internal module of another package.

.changeset/silly-dogs-fail.md

@@ -0,0 +1,5 @@
+---
+"@open-pioneer/result-list": minor
+---
+
+Initial release

.changeset/wet-books-chew.md

@@ -0,0 +1,5 @@
+---
+"@open-pioneer/map": patch
+---
+
+Remove duplicate viewPadding application.

package.json

@@ -74,7 +74,7 @@
         "@open-pioneer/http": "^2.1.2",
         "@open-pioneer/integration": "^2.0.3",
         "@open-pioneer/runtime": "^2.1.0",
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "framer-motion": "^10.17.4",
         "ol": "^8.2.0",
         "react": "^18.2.0",

src/index.html

@@ -69,6 +69,11 @@ <h2>Test applications</h2>
                 <br />
                 Test app for the basemap switcher.
             </li>
+            <li>
+                <a href="./samples/test-result-list/">Result List</a>
+                <br />
+                Test app for the result list.
+            </li>
             <li>
                 <a href="./samples/test-toc/">TOC + Health Check</a>
                 <br />

src/packages/authentication/package.json

@@ -16,7 +16,7 @@
     },
     "devDependencies": {
         "openlayers-base-packages": "workspace:*",
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "@testing-library/react": "^14.1.2"
     },
     "publishConfig": {

src/packages/basemap-switcher/package.json

@@ -17,7 +17,7 @@
         "react-icons": "^4.12.0"
     },
     "devDependencies": {
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "@open-pioneer/map-test-utils": "workspace:^",
         "openlayers-base-packages": "workspace:*"
     },

src/packages/coordinate-viewer/package.json

@@ -16,7 +16,7 @@
         "proj4": "^2.9.0"
     },
     "devDependencies": {
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "@open-pioneer/map-test-utils": "workspace:^",
         "openlayers-base-packages": "workspace:*"
     },

src/packages/geolocation/package.json

@@ -18,7 +18,7 @@
         "react-icons": "^4.12.0"
     },
     "devDependencies": {
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "@open-pioneer/map-test-utils": "workspace:^",
         "openlayers-base-packages": "workspace:*"
     },

src/packages/legend/package.json

@@ -17,7 +17,7 @@
         "classnames": "^2.3.2"
     },
     "devDependencies": {
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "@open-pioneer/map-test-utils": "workspace:^",
         "openlayers-base-packages": "workspace:*"
     },

src/packages/local-storage/package.json

@@ -11,7 +11,7 @@
         "@open-pioneer/runtime": "^2.1.0"
     },
     "devDependencies": {
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "openlayers-base-packages": "workspace:*"
     },
     "publishConfig": {

src/packages/map-navigation/package.json

@@ -17,7 +17,7 @@
         "react-icons": "^4.12.0"
     },
     "devDependencies": {
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "@open-pioneer/map-test-utils": "workspace:^",
         "openlayers-base-packages": "workspace:*"
     },

src/packages/map-test-utils/package.json

@@ -8,7 +8,7 @@
     },
     "peerDependencies": {
         "@open-pioneer/map": "workspace:^",
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "@testing-library/react": "^14.1.2",
         "ol": "^8.2.0"
     },

src/packages/map/api/BaseFeature.ts

@@ -5,7 +5,7 @@ import { Geometry } from "ol/geom";
 import { Style } from "ol/style";
 
 /**
- * Base interface for all feature objects with geometry and / or attributs information.
+ * Base interface for all feature objects with geometry and / or attribute information.
  */
 export interface BaseFeature {
     /**

src/packages/map/ui/MapContainer.tsx

@@ -100,16 +100,6 @@ export function MapContainer(props: MapContainerProps) {
         }
     }, [modelState, mapModel, mapId]);
 
-    useEffect(() => {
-        const mapView = mapModel?.olMap.getView();
-        if (viewPadding && mapView) {
-            const center = mapView.getCenter();
-            const { top = 0, right = 0, bottom = 0, left = 0 } = viewPadding;
-            mapView.padding = [top, right, bottom, left];
-            mapView.animate({ center, duration: 300 });
-        }
-    }, [viewPadding, mapModel]);
-
     const mapContainerStyle: React.CSSProperties = {
         height: "100%"
     };

src/packages/measurement/package.json

@@ -16,7 +16,7 @@
         "classnames": "^2.3.2"
     },
     "devDependencies": {
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "@open-pioneer/map-test-utils": "workspace:^",
         "openlayers-base-packages": "workspace:*"
     },

src/packages/notifier/package.json

@@ -17,7 +17,7 @@
         "react": "^18.2.0"
     },
     "devDependencies": {
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "openlayers-base-packages": "workspace:*"
     },
     "publishConfig": {

src/packages/ogc-features/package.json

@@ -19,7 +19,7 @@
         }
     },
     "devDependencies": {
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "@open-pioneer/map-test-utils": "workspace:^",
         "openlayers-base-packages": "workspace:*"
     },

src/packages/overview-map/package.json

@@ -16,7 +16,7 @@
         "react": "^18.2.0"
     },
     "devDependencies": {
-        "@open-pioneer/test-utils": "^1.0.2",
+        "@open-pioneer/test-utils": "^1.1.1",
         "@open-pioneer/map-test-utils": "workspace:^",
         "openlayers-base-packages": "workspace:*"
     },

src/packages/react-utils/package.json

@@ -16,7 +16,7 @@
     "devDependencies": {
         "openlayers-base-packages": "workspace:*",
         "@testing-library/react": "^14.1.2",
-        "@open-pioneer/test-utils": "^1.0.2"
+        "@open-pioneer/test-utils": "^1.1.1"
     },
     "publishConfig": {
         "directory": "dist",

src/packages/result-list/CHANGELOG.md

@@ -0,0 +1 @@
+# @open-pioneer/result-list

src/packages/result-list/DataTable/ColumnResizer.tsx

@@ -0,0 +1,25 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { chakra } from "@open-pioneer/chakra-integration";
+import classNames from "classnames";
+
+export function ColumnResizer(props: {
+    onDoubleClick: React.MouseEventHandler<HTMLElement>;
+    onMouseDown: React.MouseEventHandler<HTMLElement>;
+    onTouchStart: React.TouchEventHandler<HTMLElement>;
+    isResizing: boolean;
+}): JSX.Element {
+    const { onDoubleClick, onMouseDown, onTouchStart, isResizing } = props;
+    return (
+        <chakra.span
+            className={classNames(
+                "result-list-resizer",
+                isResizing && "result-list-resizer--is-resizing"
+            )}
+            onDoubleClick={onDoubleClick}
+            onMouseDown={onMouseDown}
+            onTouchStart={onTouchStart}
+            onClick={(e) => e.stopPropagation()}
+        />
+    );
+}

src/packages/result-list/DataTable/ColumnSortIndicator.tsx

@@ -0,0 +1,14 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { TriangleDownIcon, TriangleUpIcon } from "@chakra-ui/icons";
+import { chakra } from "@open-pioneer/chakra-integration";
+import { SortDirection } from "@tanstack/react-table";
+
+export function ColumnSortIndicator(props: { isSorted: false | SortDirection }): JSX.Element {
+    const { isSorted } = props;
+    return (
+        <chakra.span ml="4" className="result-list-sort-indicator">
+            {isSorted ? isSorted === "desc" ? <TriangleDownIcon /> : <TriangleUpIcon /> : null}
+        </chakra.span>
+    );
+}