Introduces SearchResultDrawer

src/App.tsx

@@ -10,6 +10,7 @@ import Footer from './components/Footer';
 import Header from './components/Header';
 import LayerDetailsModal from './components/LayerDetailsModal';
 import MapToolbar from './components/MapToolbar';
+import SearchResultDrawer from './components/SearchResultDrawer';
 import StylingDrawer from './components/StylingDrawer';
 import ToolMenu from './components/ToolMenu';
 import UploadDataModal from './components/UploadDataModal';
@@ -50,6 +51,7 @@ export const App: React.FC<AppProps> = ({
       <EditFeatureDrawer />
       <LayerDetailsModal />
       <StylingDrawer />
+      <SearchResultDrawer />
     </div>
   );
 };

src/components/EditFeatureDrawer/EditFeatureGeometryToolbar/index.tsx

@@ -43,6 +43,7 @@ import {
 
 import useAppDispatch from '../../../hooks/useAppDispatch';
 import useAppSelector from '../../../hooks/useAppSelector';
+import useGetFitPadding from '../../../hooks/useGetFitPadding';
 
 import {
   setFormDirty
@@ -74,6 +75,7 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
 
   const map = useMap();
   const dispatch = useAppDispatch();
+  const getFitPadding = useGetFitPadding();
 
   const [editLayer, setEditLayer] = useState<OlLayerVector<OlSourceVector>>();
   const [, setRevision] = useState<number>(0);
@@ -124,11 +126,11 @@ export const EditFeatureGeometryToolbar: React.FC<EditFeatureGeometryToolbarProp
 
       if (!isEmptyOlExtent(source.getExtent())) {
         map?.getView().fit(source.getExtent(), {
-          padding: [50, 50, 50, 50]
+          padding: getFitPadding(true)
         });
       }
     }
-  }, [feature, editLayer, gjFormat, map]);
+  }, [feature, editLayer, gjFormat, map, getFitPadding]);
 
   const undoEdit = () => {
 

src/components/MapToolbar/index.tsx

@@ -46,7 +46,8 @@ export const MapToolbar: React.FC = (): JSX.Element => {
 
   const stylingDrawerVisibility = useAppSelector(state => state.stylingDrawerVisibility);
   const editFeatureDrawerOpen = useAppSelector(state => state.editFeatureDrawerOpen);
-  const drawerOpen = stylingDrawerVisibility || editFeatureDrawerOpen;
+  const searchResultDrawerOpen = useAppSelector(state => state.searchResult.drawerVisibility);
+  const drawerOpen = stylingDrawerVisibility || editFeatureDrawerOpen || searchResultDrawerOpen;
   const className = drawerOpen ? 'drawer-open' : '';
 
   const btnTooltipProps = {

src/components/MultiSearch/index.tsx

@@ -24,13 +24,12 @@ import {
 
 import ClientConfiguration from 'clientConfig';
 
-import {
-  getUid
-} from 'ol';
+import { getUid } from 'ol';
 import {
   Extent as OlExtent
 } from 'ol/extent';
 import OlFeature from 'ol/Feature';
+import GeoJSON from 'ol/format/GeoJSON';
 import {
   transformExtent
 } from 'ol/proj';
@@ -45,9 +44,8 @@ import {
 
 import Logger from '@terrestris/base-util/dist/Logger';
 
-import {
-  PermalinkUtil
-} from '@terrestris/ol-util/dist/PermalinkUtil/PermalinkUtil';
+import { PermalinkUtil } from '@terrestris/ol-util';
+
 import SearchResultsPanel, {
   Category as ResultCategory
 } from '@terrestris/react-geo/dist/Panel/SearchResultsPanel/SearchResultsPanel';
@@ -57,6 +55,9 @@ import {
 } from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 
 import './index.less';
+import useAppDispatch from '../../hooks/useAppDispatch';
+import useGetFitPadding from '../../hooks/useGetFitPadding';
+import { setSearchResultState } from '../../store/searchResult';
 
 export type SearchEngineFunction = (value: string, viewBox?: OlExtent) => Promise<ResultCategory[] | undefined>;
 
@@ -85,8 +86,12 @@ export const MultiSearch: React.FC<MultiSearchProps> = ({
   const {
     t
   } = useTranslation();
+
+  const dispatch = useAppDispatch();
   const clickAwayRef = useRef<HTMLDivElement>(null);
 
+  const geoJSONFormat = useMemo(() => new GeoJSON(), []);
+
   const [isGeocoderEnabled, setIsGeocoderEnabled] = useState<boolean>(!!geocoderSearchEngine);
   const [isDataSearchEnabled, setIsDataSearchEnabled] = useState<boolean>(!!dataSearchEngine);
   const [useViewBox, setUseViewBox] = useState<boolean>(ClientConfiguration.search?.defaultUseViewBox ?? true);
@@ -95,6 +100,7 @@ export const MultiSearch: React.FC<MultiSearchProps> = ({
   const [resultsVisible, setResultsVisible] = useState<boolean>(false);
   const [settingsVisible, setSettingsVisible] = useState<boolean>(false);
   const [searchResults, setSearchResults] = useState<ResultCategory[]>([]);
+  const getFitPadding = useGetFitPadding();
 
   useEffect(() => {
     window.addEventListener('mousedown', handleClickAway);
@@ -304,6 +310,14 @@ export const MultiSearch: React.FC<MultiSearchProps> = ({
       if (ClientConfiguration.search?.activateLayerOnClick) {
         activateLayer(item);
       }
+
+      if (ClientConfiguration.search?.searchResultDrawer) {
+        dispatch(setSearchResultState({
+          geoJSONFeature: geoJSONFormat.writeFeatureObject(item.feature),
+          drawerVisibility: true
+        }));
+        setSearchValue('');
+      }
     };
 
     const activateLayer = (item: Item) => {
@@ -322,14 +336,11 @@ export const MultiSearch: React.FC<MultiSearchProps> = ({
 
     const zoomOffsetOnClick = (item: Item) => {
       const extent = item.feature.getGeometry()?.getExtent();
-      const toolMenuElement = document.getElementsByClassName('tool-menu');
-      const toolMenuWidth = toolMenuElement[0]?.clientWidth ?? 0;
-      const padding = [0, 0, 0, toolMenuWidth];
 
       if (extent) {
         map?.getView().fit(extent, {
           size: map.getSize(),
-          padding
+          padding: getFitPadding(ClientConfiguration.search?.searchResultDrawer)
         });
       }
     };

src/components/SearchResultDrawer/index.spec.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import {
+  render,
+  screen,
+  waitFor
+} from '@testing-library/react';
+
+import {
+  Provider
+} from 'react-redux';
+
+import { setDrawerVisibility } from '../../store/searchResult';
+import {
+  store
+} from '../../store/store';
+
+import SearchResultDrawer from '../SearchResultDrawer';
+
+import SearchResultDrawerButton from './index';
+
+const createWrapper = () => {
+  return ({
+    children
+  }: any) => (
+    <Provider store={store}>
+      {children}
+    </Provider>
+  );
+};
+
+describe('SearchResultDrawer', () => {
+  it('can be rendered', () => {
+    const {
+      container
+    } = render(<SearchResultDrawer />, {
+      wrapper: createWrapper()
+    });
+
+    expect(container).toBeVisible();
+  });
+
+  it('renders the correct title', async () => {
+    render(<SearchResultDrawerButton />, {
+      wrapper: createWrapper()
+    });
+
+    store.dispatch(setDrawerVisibility(true));
+    await waitFor(() => {
+      expect(screen.getByText('SearchResultDrawer.title')).toBeInTheDocument();
+    });
+  });
+});

src/components/SearchResultDrawer/index.tsx

@@ -0,0 +1,157 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+
+import {
+  DrawerProps
+} from 'antd';
+
+import OlFeature from 'ol/Feature';
+import GeoJSONParser from 'ol/format/GeoJSON';
+import OlLayerVector from 'ol/layer/Vector';
+import OlSourceVector from 'ol/source/Vector';
+import OlStyleCircle from 'ol/style/Circle';
+import OlStyleFill from 'ol/style/Fill';
+import OlStyleStroke from 'ol/style/Stroke';
+import OlStyle from 'ol/style/Style';
+
+import {
+  useTranslation
+} from 'react-i18next';
+
+import PropertyGrid from '@terrestris/react-geo/dist/Grid/PropertyGrid/PropertyGrid';
+import { useMap } from '@terrestris/react-util/dist/Hooks/useMap/useMap';
+
+import useAppDispatch from '../../hooks/useAppDispatch';
+import useAppSelector from '../../hooks/useAppSelector';
+import {
+  setSearchResultState
+} from '../../store/searchResult';
+import MapDrawer from '../MapDrawer';
+
+export type SearchResultDrawerProps = DrawerProps;
+
+export const SearchResultDrawer: React.FC<SearchResultDrawerProps> = ({
+  ...passThroughProps
+}): JSX.Element => {
+
+  const dispatch = useAppDispatch();
+  const map = useMap();
+  const isSearchResultDrawerVisible = useAppSelector(state => state.searchResult.drawerVisibility);
+  const geoJSONFeature = useAppSelector(state => state.searchResult.geoJSONFeature);
+  const [highlightLayer, setHighlightLayer] = useState<OlLayerVector<OlSourceVector> | null>(null);
+  const olFeature: OlFeature | null = useMemo(() => {
+    if (!geoJSONFeature) {
+      return null;
+    }
+    return new GeoJSONParser().readFeature(geoJSONFeature) as OlFeature;
+  }, [geoJSONFeature]);
+
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+
+    const layer = new OlLayerVector({
+      source: new OlSourceVector(),
+      style: new OlStyle({
+        stroke: new OlStyleStroke({
+          color: 'rgb(255,0,0)',
+          width: 2
+        }),
+        fill: new OlStyleFill({
+          color: 'rgba(255,255,255, 0.5)'
+        }),
+        image: new OlStyleCircle({
+          radius: 10,
+          fill: new OlStyleFill({
+            color: 'rgba(255,255,255, 0.5)'
+          }),
+          stroke: new OlStyleStroke({
+            color: 'rgb(255,0,0)',
+            width: 3
+          })
+        })
+      })
+    });
+
+    setHighlightLayer(layer);
+    map.addLayer(layer);
+  }, [map]);
+
+  const highlightFeature = useCallback((feature?: OlFeature) => {
+    if (!highlightLayer || !highlightLayer.getSource() || !feature) {
+      return;
+    }
+    highlightLayer.getSource()!.clear();
+    highlightLayer.getSource()!.addFeature(feature);
+  }, [highlightLayer]);
+
+  useEffect(() => {
+    if (olFeature && map) {
+      highlightFeature(olFeature);
+    }
+  }, [olFeature, map, highlightFeature]);
+
+  const {
+    t
+  } = useTranslation();
+
+  const onClose = () => {
+    dispatch(setSearchResultState({
+      drawerVisibility: false,
+      geoJSONFeature: null
+    }));
+    highlightLayer?.getSource()!.clear();
+  };
+
+  return (
+    <MapDrawer
+      title={t('SearchResultDrawer.title')}
+      placement="right"
+      onClose={onClose}
+      open={isSearchResultDrawerVisible}
+      maskClosable={false}
+      mask={false}
+      {...passThroughProps}
+    >
+      <div>
+        {olFeature &&<h3>{olFeature.get('title')}</h3>}
+        {
+          olFeature && Object.keys(olFeature.getProperties()).length > 1 &&
+          <PropertyGrid
+            className="property-grid"
+            feature={olFeature}
+            // attributeFilter={attributeFilter}
+            size="small"
+            sticky={true}
+            columns={[{
+              title: t('FeaturePropertyGrid.key'),
+              dataIndex: 'attributeName',
+              key: 'attributeName',
+              width: '50%',
+              ellipsis: true,
+              defaultSortOrder: 'ascend',
+              sorter: (a, b) => a.key.localeCompare(b.key)
+            }, {
+              title: t('FeaturePropertyGrid.value'),
+              dataIndex: 'attributeValue',
+              key: 'attributeValue',
+              width: '50%',
+              ellipsis: true
+            }]}
+            scroll={{
+              scrollToFirstRowOnChange: true,
+              y: 'calc(100% - 90px)'
+            }}
+          />
+        }
+      </div>
+    </MapDrawer>
+  );
+};
+
+export default SearchResultDrawer;

src/components/StylingDrawer/index.tsx

@@ -8,8 +8,6 @@ import {
   useTranslation
 } from 'react-i18next';
 
-import './index.less';
-
 import useAppDispatch from '../../hooks/useAppDispatch';
 import useAppSelector from '../../hooks/useAppSelector';
 import { setStylingDrawerVisibility } from '../../store/stylingDrawerVisibility';
@@ -39,7 +37,6 @@ export const StylingDrawer: React.FC<StylingDrawerProps> = ({
       placement="right"
       onClose={onClose}
       open={isStylingDrawerVisible}
-      rootClassName="color-pick-drawer"
       maskClosable={false}
       mask={false}
       {...passThroughProps}