diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue index cffb6aae40e4..f33bdb70960c 100644 --- a/client/src/components/Common/FilterMenu.vue +++ b/client/src/components/Common/FilterMenu.vue @@ -54,8 +54,8 @@ interface Props { searchError?: BackendFilterError; /** Whether the advanced menu is currently expanded */ showAdvanced?: boolean; - /** Whether to use a popover for the menu options */ - isPopover?: boolean; + /** What view to use for the menu */ + view?: "dropdown" | "popover" | "compact"; } const props = withDefaults(defineProps(), { @@ -66,7 +66,7 @@ const props = withDefaults(defineProps(), { menuType: "linked", showAdvanced: false, searchError: undefined, - isPopover: false, + view: "dropdown", }); const emit = defineEmits<{ @@ -135,6 +135,11 @@ function getValidFilter(filter: string): ValidFilter { */ function onOption(filter: string, value: any) { filters.value[filter] = value; + + // for the compact view, we want to immediately search + if (props.view === "compact") { + onSearch(); + } } function onPopoverShown() { @@ -152,7 +157,11 @@ function onSearch() { emit("on-search", filters.value, newFilterText, newBackendFilter); } else { updateFilterText(newFilterText); - onToggle(); + + // for the compact view, we do not want to close the advanced menu + if (props.view !== "compact") { + onToggle(); + } } } @@ -194,8 +203,10 @@ function updateFilterText(newFilterText: string) {
+ @@ -246,7 +259,7 @@ function updateFilterText(newFilterText: string) { :identifier="identifier" @change="onOption" /> + +
+ + + +
+ -
+
+
diff --git a/client/src/components/Common/FilterMenuBoolean.vue b/client/src/components/Common/FilterMenuBoolean.vue index eb936d14663b..28f55941f0a6 100644 --- a/client/src/components/Common/FilterMenuBoolean.vue +++ b/client/src/components/Common/FilterMenuBoolean.vue @@ -1,5 +1,5 @@