From d8381cb545cb501c2351aaf099e3a835cfbbf577 Mon Sep 17 00:00:00 2001
From: MiraGeowerktstatt <mira.bleuler@geowerkstatt.ch>
Date: Tue, 18 Oct 2022 16:06:10 +0200
Subject: [PATCH 1/2] Improve UX for filter area

---
 src/ClientApp/src/components/Filter.js        | 27 ++++++++++++-------
 src/ClientApp/src/components/Results.js       |  3 ++-
 src/ClientApp/src/translations/de/common.json |  2 +-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/ClientApp/src/components/Filter.js b/src/ClientApp/src/components/Filter.js
index 33c368e..248a687 100644
--- 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,
+    setShowFilter,
   } = 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={() => setShowFilter(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
index f7c447e..4e4b824 100644
--- a/src/ClientApp/src/components/Results.js
+++ b/src/ClientApp/src/components/Results.js
@@ -51,7 +51,7 @@ export function Results(props) {
         <Typography variant="h4" mt={6} ml={1}>
           {filteredModels.length + " " + t("models-found", { count: filteredModels.length })}
         </Typography>
-        {!hideFilter && (
+        {!hideFilter && !showFilter && (
           <Button variant="outlined" startIcon={<FilterAltIcon />} onClick={toggleFilter}>
             {t("filter")}
           </Button>
@@ -66,6 +66,7 @@ export function Results(props) {
           setPage={setPage}
           filterDefaultValues={filterDefaultValues ?? null}
           setFilterDefaultValues={setFilterDefaultValues}
+          setShowFilter={setShowFilter}
         ></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
index eeb5cc5..2f2c097 100644
--- 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",

From 77cf753297edad15daf5cf9a32a5d37d763e0212 Mon Sep 17 00:00:00 2001
From: MiraGeowerktstatt <mira.bleuler@geowerkstatt.ch>
Date: Tue, 18 Oct 2022 17:28:45 +0200
Subject: [PATCH 2/2] Rename showFilter state

---
 src/ClientApp/src/components/Filter.js  |  4 ++--
 src/ClientApp/src/components/Results.js | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/ClientApp/src/components/Filter.js b/src/ClientApp/src/components/Filter.js
index 248a687..47f7a6d 100644
--- a/src/ClientApp/src/components/Filter.js
+++ b/src/ClientApp/src/components/Filter.js
@@ -29,7 +29,7 @@ export function Filter(props) {
     repositoryTree,
     filterDefaultValues,
     setFilterDefaultValues,
-    setShowFilter,
+    setFilterPanelExpanded,
   } = props;
   const [filterApplied, setFilterApplied] = useState(false);
   const [hideReferencedModelResults, setHideReferencedModelResults] = useState(false);
@@ -181,7 +181,7 @@ export function Filter(props) {
             </Button>
           )}
           <Box sx={{ flexGrow: 1 }}></Box>
-          <IconButton onClick={() => setShowFilter(false)}>
+          <IconButton onClick={() => setFilterPanelExpanded(false)}>
             <CloseIcon />
           </IconButton>
         </Stack>
diff --git a/src/ClientApp/src/components/Results.js b/src/ClientApp/src/components/Results.js
index 4e4b824..7a154b5 100644
--- 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 && !showFilter && (
+        {!hideFilter && !filterPanelExpanded && (
           <Button variant="outlined" startIcon={<FilterAltIcon />} onClick={toggleFilter}>
             {t("filter")}
           </Button>
         )}
       </Stack>
-      {showFilter && !hideFilter && (
+      {filterPanelExpanded && !hideFilter && (
         <Filter
           models={models}
           filteredModels={filteredModels}
@@ -66,7 +66,7 @@ export function Results(props) {
           setPage={setPage}
           filterDefaultValues={filterDefaultValues ?? null}
           setFilterDefaultValues={setFilterDefaultValues}
-          setShowFilter={setShowFilter}
+          setFilterPanelExpanded={setFilterPanelExpanded}
         ></Filter>
       )}
       <Box sx={{ width: "100%", bgcolor: "background.paper", marginBottom: 8 }}>