Polishing search PopUp

frontend/src/components/DataView/DataPanel.css

@@ -20,3 +20,10 @@
 .MuiGrid-item {
   padding: 1rem !important;
 }
+
+.search-box-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.3rem;
+}

frontend/src/components/DataView/DataPanel.tsx

@@ -2,21 +2,18 @@
   This component displays a mui DataGrid with a Filterbar.
   Depending on the value of the "button" column, a map icon with the hover "open as map" is shown
 
-  • mui DataGrid https://mui.com/x/api/data-grid/data-grid/
-    Installation: https://mui.com/x/react-data-grid/getting-started/
-    Quick filter outside of the grid https://mui.com/x/react-data-grid/filtering-recipes/#quick-filter-outside-of-the-grid
+  Quick filter outside of the grid https://mui.com/x/react-data-grid/filtering-recipes/#quick-filter-outside-of-the-grid
 
-  ! If you use this component you have to pass a unique ID to it. This is needed so the filterbar is assigned to the correct Data Grid
 */
-
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
-import FilterBar from "./FilterBar";
-import { MapTrifold } from "@phosphor-icons/react";
+import { Funnel, MapTrifold } from "@phosphor-icons/react";
 import "./DataPanel.css";
-import { Tooltip } from "@mui/material";
+import { Tooltip, TextField } from "@mui/material";
+import { GridToolbar, GridToolbarProps } from "@mui/x-data-grid";
+import { useState, Fragment } from "react";
 
 // Returns a button if the "button" value is set to 1
 const renderDetailsButton = (params: GridRenderCellParams) => {
@@ -45,7 +42,13 @@ const columns: GridColDef[] = [
     renderCell: renderDetailsButton,
   },
   { field: "key", headerName: "key", width: 150 },
-  { field: "value", headerName: "value", type: "number", width: 150, getApplyQuickFilterFn: undefined },
+  {
+    field: "value",
+    headerName: "value",
+    type: "number",
+    width: 150,
+    getApplyQuickFilterFn: undefined,
+  },
 ];
 
 // Data
@@ -76,64 +79,177 @@ const rows = [
   { id: 24, key: "distance to X", value: "400" },
 ];
 
-// Pass a unique filterPanelId so the FilterBar component is located next to the correct Data Grid
+function MyCustomToolbar(props: GridToolbarProps) {
+  return <GridToolbar {...props} />;
+}
+
 // All DataGrid options explained https://mui.com/x/api/data-grid/data-grid/
-function DataPanel({
-  filterPanelId,
-  listTitle,
-}: {
-  filterPanelId: number;
-  listTitle: string;
-}) {
-  const filterPanelIdString = `filter-panel-${filterPanelId}`;
+export default function DataPanel({ listTitle }: { listTitle: string }) {
+  const [filterValue, setFilterValue] = useState("");
+
+  const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFilterValue(event.target.value);
+  };
+
   return (
-    <div className="data-panel-container">
-      <div className="data-panel-title">{listTitle}</div>
-      <Grid container spacing={2} className="data-panel-grid">
-        <Grid item>
-          <Box id={filterPanelIdString} />
+    <Fragment>
+      <Grid item>
+        <Box id="filter-panel">
+          <TextField
+            label={
+              <div className="search-box-label">
+                <Funnel size={20} /> Search
+              </div>
+            }
+            variant="outlined"
+            size="small"
+            value={filterValue}
+            onChange={handleFilterChange}
+            fullWidth
+          />
+        </Box>
+      </Grid>
+      <div className="data-panel-container">
+        <div className="data-panel-title">{listTitle}</div>
+        <Grid container spacing={2} className="data-panel-grid">
+          <Grid item style={{ width: "100%" }}>
+            <DataGrid
+              disableColumnMenu
+              columnHeaderHeight={0}
+              rows={rows}
+              columns={columns}
+              slots={{
+                toolbar: MyCustomToolbar,
+              }}
+              slotProps={{
+                toolbar: {
+                  printOptions: { disableToolbarButton: true },
+                  csvOptions: { disableToolbarButton: true },
+                },
+              }}
+              disableDensitySelector
+              disableColumnFilter
+              disableColumnSelector
+              disableColumnSorting
+              initialState={{
+                pagination: {
+                  paginationModel: { page: 0, pageSize: 5 },
+                },
+                filter: {
+                  filterModel: {
+                    items: [],
+                    quickFilterValues: [filterValue],
+                    quickFilterExcludeHiddenColumns: true,
+                  },
+                },
+              }}
+              filterModel={{
+                items: [
+                  { field: "key", operator: "contains", value: filterValue },
+                ],
+              }}
+              pageSizeOptions={[5, 10]}
+              density="compact"
+              disableRowSelectionOnClick
+              autoHeight
+            />
+          </Grid>
         </Grid>
-        <Grid item style={{ width: "100%" }}>
-          <DataGrid
-            disableColumnMenu
-            columnHeaderHeight={0}
-            rows={rows}
-            columns={columns}
-            slots={{
-              toolbar: (slotProps) => (
-                <FilterBar {...slotProps} filterPanelId={filterPanelId} />
-              ), // Pass props here
-            }}
-            slotProps={{
-              toolbar: {
-                printOptions: { disableToolbarButton: true },
-                csvOptions: { disableToolbarButton: true },
-              },
-            }}
-            disableDensitySelector
-            disableColumnFilter
-            disableColumnSelector
-            disableColumnSorting
-            initialState={{
-              pagination: {
-                paginationModel: { page: 0, pageSize: 5 },
-              },
-              filter: {
-                filterModel: {
-                  items: [],
-                  quickFilterExcludeHiddenColumns: true,
+      </div>
+      <div className="data-panel-container">
+        <div className="data-panel-title">General Data</div>
+        <Grid container spacing={2} className="data-panel-grid">
+          <Grid item style={{ width: "100%" }}>
+            <DataGrid
+              disableColumnMenu
+              columnHeaderHeight={0}
+              rows={rows}
+              columns={columns}
+              slots={{
+                toolbar: MyCustomToolbar,
+              }}
+              slotProps={{
+                toolbar: {
+                  printOptions: { disableToolbarButton: true },
+                  csvOptions: { disableToolbarButton: true },
                 },
-              },
-            }}
-            pageSizeOptions={[5, 10]}
-            //autoPageSize
-            density="compact"
-            disableRowSelectionOnClick
-          />
+              }}
+              disableDensitySelector
+              disableColumnFilter
+              disableColumnSelector
+              disableColumnSorting
+              initialState={{
+                pagination: {
+                  paginationModel: { page: 0, pageSize: 5 },
+                },
+                filter: {
+                  filterModel: {
+                    items: [],
+                    quickFilterValues: [filterValue],
+                    quickFilterExcludeHiddenColumns: true,
+                  },
+                },
+              }}
+              filterModel={{
+                items: [
+                  { field: "key", operator: "contains", value: filterValue },
+                ],
+              }}
+              pageSizeOptions={[5, 10]}
+              density="compact"
+              disableRowSelectionOnClick
+              autoHeight
+            />
+          </Grid>
         </Grid>
-      </Grid>
-    </div>
+      </div>
+      <div className="data-panel-container">
+        <div className="data-panel-title">Extra Capabilities</div>
+        <Grid container spacing={2} className="data-panel-grid">
+          <Grid item style={{ width: "100%" }}>
+            <DataGrid
+              disableColumnMenu
+              columnHeaderHeight={0}
+              rows={rows}
+              columns={columns}
+              slots={{
+                toolbar: MyCustomToolbar,
+              }}
+              slotProps={{
+                toolbar: {
+                  printOptions: { disableToolbarButton: true },
+                  csvOptions: { disableToolbarButton: true },
+                },
+              }}
+              disableDensitySelector
+              disableColumnFilter
+              disableColumnSelector
+              disableColumnSorting
+              initialState={{
+                pagination: {
+                  paginationModel: { page: 0, pageSize: 5 },
+                },
+                filter: {
+                  filterModel: {
+                    items: [],
+                    quickFilterValues: [filterValue],
+                    quickFilterExcludeHiddenColumns: true,
+                  },
+                },
+              }}
+              filterModel={{
+                items: [
+                  { field: "key", operator: "contains", value: filterValue },
+                ],
+              }}
+              pageSizeOptions={[5, 10]}
+              density="compact"
+              disableRowSelectionOnClick
+              autoHeight
+            />
+          </Grid>
+        </Grid>
+      </div>
+    </Fragment>
   );
 }
-
-export default DataPanel;

frontend/src/components/DataView/DataView.tsx

@@ -1,6 +1,5 @@
 import DataPanel from "./DataPanel";
 import "./DataView.css";
-
 import Button from "@mui/material/Button";
 import TabPanel from "@mui/lab/TabPanel/TabPanel";
 import TabContext from "@mui/lab/TabContext/TabContext";
@@ -63,13 +62,10 @@ function DataView() {
             ></Tab>
           </TabList>
         </div>
-
         <TabPanel value="1" className="tab dataview-tab">
           <div className="datapanels-container">
             <div className="data-panels-container">
-              <DataPanel listTitle={getCurrentTabTitle()} filterPanelId={1} />
-              <DataPanel listTitle="General Data" filterPanelId={2} />
-              <DataPanel listTitle="Extra Capabilities" filterPanelId={3} />
+              <DataPanel listTitle={getCurrentTabTitle()} />
             </div>
             <Button variant="outlined">Load data</Button>
           </div>

frontend/src/components/PopUp/SearchPopUp.tsx

@@ -45,6 +45,24 @@ const SearchPopUp: React.FC<SearchPopUpProps> = ({
   const [suggestions, setSuggestions] = useState<Array<GeoSearchResult>>([]);
   const { currentMapCache } = useContext(MapContext);
 
+  const provider = new OpenStreetMapProvider({
+    params: {
+      'accept-language': 'de', 
+      countrycodes: 'de', 
+      addressdetails: 1, 
+    },
+  });
+
+  const reset = () => {
+    setSearchText("");
+    setLongitude("");
+    setLatitude("");
+    setSearchMode("single");
+    setSuggestions([]);
+    setLatitudeError(false);
+    setLongitudeError(false);
+  };
+
   const flyToLocation = () => {
     const { mapInstance } = currentMapCache;
     if (mapInstance) {
@@ -59,7 +77,6 @@ const SearchPopUp: React.FC<SearchPopUpProps> = ({
       setSuggestions([]);
       return;
     }
-    const provider = new OpenStreetMapProvider();
     const results = await provider.search({ query: input });
     const transformedResults: GeoSearchResult[] = results.map((result) => ({
       x: result.x,
@@ -70,8 +87,8 @@ const SearchPopUp: React.FC<SearchPopUpProps> = ({
   };
 
   const handleModeSwitch = () => {
+    reset();
     if (searchMode === "single") {
-      setSuggestions([]);
       setSearchMode("coordinates");
     } else {
       setSearchMode("single");
@@ -91,7 +108,7 @@ const SearchPopUp: React.FC<SearchPopUpProps> = ({
         return item.displayName;
       }
 
-      const [latitudeTerm, longitudeTerm] = searchText.split(" ");
+      const [latitudeTerm, longitudeTerm] = [latitude, longitude];
       const regex = new RegExp(
         `^-?${latitudeTerm}[\\S\\d°'\\\\".]*\\s-?${longitudeTerm}[\\S\\d°'\\\\".]*$`
       );
@@ -187,7 +204,10 @@ const SearchPopUp: React.FC<SearchPopUpProps> = ({
   return (
     <PopUp
       title="Locations"
-      onClose={onToggleIfOpenedDialog}
+      onClose={() => {
+        onToggleIfOpenedDialog();
+        reset();
+      }}
       ifOpenedDialog={ifOpenedDialog}
     >
       {searchMode === "single" ? (