Merge Improve UX for filter area

GeoWerkstatt · Oct 18, 2022 · 7a8b5dc · 7a8b5dc
2 parents 7b6ff0d + 77cf753
commit 7a8b5dc
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/src/ClientApp/src/components/Filter.js b/src/ClientApp/src/components/Filter.js
@@ -6,12 +6,14 @@ import {
   Checkbox,
   FormGroup,
   FormControlLabel,
+  IconButton,
   Paper,
   Stack,
   Switch,
   TextField,
   Typography,
 } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 import { useForm, Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import TreeView from "@mui/lab/TreeView";
@@ -27,6 +29,7 @@ export function Filter(props) {
     repositoryTree,
     filterDefaultValues,
     setFilterDefaultValues,
+    setFilterPanelExpanded,
   } = props;
   const [filterApplied, setFilterApplied] = useState(false);
   const [hideReferencedModelResults, setHideReferencedModelResults] = useState(false);
@@ -168,6 +171,20 @@ export function Filter(props) {
   return (
     <Paper sx={{ padding: 3, marginTop: 2, bgcolor: "action.hover" }}>
       <form onSubmit={handleSubmit(onSubmit)} name="search-form">
+        <Stack mb={5} direction="row" alignItems="flex-start" justifyContent="flex-start">
+          <Button type="submit" onClick={() => setFilterApplied(true)} variant="outlined">
+            {t("apply-filter")}
+          </Button>
+          {filterApplied && (
+            <Button type="reset" onClick={resetFilter} variant="text">
+              {t("reset")}
+            </Button>
+          )}
+          <Box sx={{ flexGrow: 1 }}></Box>
+          <IconButton onClick={() => setFilterPanelExpanded(false)}>
+            <CloseIcon />
+          </IconButton>
+        </Stack>
         <Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={2}>
           <Box>
             <Typography variant="h6"> {t("model-repositories")}</Typography>
@@ -308,16 +325,6 @@ export function Filter(props) {
             )}
           />
         </Box>
-        <Stack mt={5} direction="row" alignItems="flex-end" justifyContent="flex-end">
-          {filterApplied && (
-            <Button type="reset" onClick={resetFilter} variant="text">
-              {t("reset")}
-            </Button>
-          )}
-          <Button type="submit" onClick={() => setFilterApplied(true)} variant="outlined">
-            {t("apply-filter")}
-          </Button>
-        </Stack>
       </form>
     </Paper>
   );

diff --git a/src/ClientApp/src/components/Results.js b/src/ClientApp/src/components/Results.js
@@ -20,7 +20,7 @@ export function Results(props) {
   const hideFilter = searchUrl.searchParams.get("hideFilter") === "true";
   const { t } = useTranslation("common");
   const [page, setPage] = useState(1);
-  const [showFilter, setShowFilter] = useState(false);
+  const [filterPanelExpanded, setFilterPanelExpanded] = useState(false);
   const [filteredModels, setFilteredModels] = useState(models);
 
   const modelsPerPage = 10;
@@ -30,18 +30,18 @@ export function Results(props) {
   };
 
   const toggleFilter = () => {
-    setShowFilter(!showFilter);
+    setFilterPanelExpanded(!filterPanelExpanded);
     setFilteredModels(models);
   };
 
   useEffect(() => {
     setFilteredModels(models);
-    setShowFilter(false);
+    setFilterPanelExpanded(false);
   }, [models]);
 
   useEffect(() => {
     if (filterDefaultValues) {
-      setShowFilter(true);
+      setFilterPanelExpanded(true);
     }
   }, [filterDefaultValues]);
 
@@ -51,13 +51,13 @@ export function Results(props) {
         <Typography variant="h4" mt={6} ml={1}>
           {filteredModels.length + " " + t("models-found", { count: filteredModels.length })}
         </Typography>
-        {!hideFilter && (
+        {!hideFilter && !filterPanelExpanded && (
           <Button variant="outlined" startIcon={<FilterAltIcon />} onClick={toggleFilter}>
             {t("filter")}
           </Button>
         )}
       </Stack>
-      {showFilter && !hideFilter && (
+      {filterPanelExpanded && !hideFilter && (
         <Filter
           models={models}
           filteredModels={filteredModels}
@@ -66,6 +66,7 @@ export function Results(props) {
           setPage={setPage}
           filterDefaultValues={filterDefaultValues ?? null}
           setFilterDefaultValues={setFilterDefaultValues}
+          setFilterPanelExpanded={setFilterPanelExpanded}
         ></Filter>
       )}
       <Box sx={{ width: "100%", bgcolor: "background.paper", marginBottom: 8 }}>

diff --git a/src/ClientApp/src/translations/de/common.json b/src/ClientApp/src/translations/de/common.json
@@ -3,7 +3,7 @@
   "reset-search": "Suche zurücksetzen",
   "models-found_one": "Modell gefunden",
   "models-found_other": "Modelle gefunden",
-  "filter": "Filtern",
+  "filter": "Filter",
   "search": "Suchen",
   "schema-language": "Schemasprache",
   "model-repository": "Modellablage",