Polishing Data View

Fixed bug for results when searching for 1 Fixed bug where no-results message is cut off One filterbar for all three data views Signed-off-by: Celine Pöhl <[email protected]>
amosproj · May 28, 2024 · 242c42c · 242c42c
1 parent 688f8c7
commit 242c42c
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 46 deletions.
diff --git a/frontend/src/components/DataView/DataPanel.tsx b/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 * as React from 'react';
 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 "./DataPanel.css";
-import { Tooltip } from "@mui/material";
+import { Tooltip, TextField } from "@mui/material";
+import { GridToolbarQuickFilter, GridToolbar } from "@mui/x-data-grid";
 
 // Returns a button if the "button" value is set to 1
 const renderDetailsButton = (params: GridRenderCellParams) => {
@@ -76,33 +73,49 @@ 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: any) {
+  return (
+    <GridToolbar {...props} />
+  );
+}
+
 // All DataGrid options explained https://mui.com/x/api/data-grid/data-grid/
-function DataPanel({
-  filterPanelId,
+export default function DataPanel({
   listTitle,
 }: {
-  filterPanelId: number;
   listTitle: string;
 }) {
-  const filterPanelIdString = `filter-panel-${filterPanelId}`;
+  const [filterValue, setFilterValue] = React.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} />
+      <Grid item>
+          <Box id="filter-panel" >
+          <TextField
+            label="Filter"
+            variant="outlined"
+            size="small"
+            value={filterValue}
+            onChange={handleFilterChange}
+            fullWidth
+          />
+          </Box>
         </Grid>
+      <Grid container spacing={2} className="data-panel-grid">
         <Grid item style={{ width: "100%" }}>
           <DataGrid
             disableColumnMenu
             columnHeaderHeight={0}
             rows={rows}
             columns={columns}
             slots={{
-              toolbar: (slotProps) => (
-                <FilterBar {...slotProps} filterPanelId={filterPanelId} />
-              ), // Pass props here
+              toolbar: MyCustomToolbar,
             }}
             slotProps={{
               toolbar: {
@@ -121,19 +134,113 @@ function DataPanel({
               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>
+          <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 },
+              },
+            }}
+            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>
+    <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]}
-            //autoPageSize
             density="compact"
             disableRowSelectionOnClick
+            autoHeight
           />
         </Grid>
       </Grid>
     </div>
+    </>
   );
 }
 
-export default DataPanel;
diff --git a/frontend/src/components/DataView/DataView.tsx b/frontend/src/components/DataView/DataView.tsx
@@ -1,5 +1,6 @@
 import DataPanel from "./DataPanel";
 import "./DataView.css";
+import FilterBar from "./FilterBar";
 
 import Button from "@mui/material/Button";
 import TabPanel from "@mui/lab/TabPanel/TabPanel";
@@ -31,6 +32,7 @@ function DataView() {
     setIfOpenedDialog(!ifOpenedDialog);
   };
 
+
   return (
     <div className="dataview-container">
       <TabContext value="1">
@@ -67,9 +69,9 @@ function DataView() {
         <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>

diff --git a/frontend/src/components/DataView/FilterBar.tsx b/frontend/src/components/DataView/FilterBar.tsx