diff --git a/src/ClientApp/src/components/Filter.js b/src/ClientApp/src/components/Filter.js index 33c368e..47f7a6d 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, + setFilterPanelExpanded, } = props; const [filterApplied, setFilterApplied] = useState(false); const [hideReferencedModelResults, setHideReferencedModelResults] = useState(false); @@ -168,6 +171,20 @@ export function Filter(props) { return (
+ + + {filterApplied && ( + + )} + + setFilterPanelExpanded(false)}> + + + {t("model-repositories")} @@ -308,16 +325,6 @@ export function Filter(props) { )} /> - - {filterApplied && ( - - )} - -
); diff --git a/src/ClientApp/src/components/Results.js b/src/ClientApp/src/components/Results.js index 8ab6d85..11de862 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) { {filteredModels.length + " " + t("models-found", { count: filteredModels.length })} - {!hideFilter && ( + {!hideFilter && !filterPanelExpanded && ( )} - {showFilter && !hideFilter && ( + {filterPanelExpanded && !hideFilter && ( )} 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",