Refactors faceted filter apply logic

niemyjski · niemyjski · commit 17eeaf6357fc · 2025-06-29T12:15:15.000-05:00
Removes the apply button from the faceted filter actions and instead applies the filter when the popover closes.

This change simplifies the user experience by automatically applying the filter when the user closes the popover, rather than requiring an additional click.
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-actions.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-actions.svelte
@@ -2,24 +2,18 @@
     import * as Command from '$comp/ui/command';
 
     interface Props {
-        apply: () => void;
         clear: () => void;
         close: () => void;
         remove: () => void;
-        showApply: boolean;
         showClear: boolean;
     }
 
-    let { apply, clear, close, remove, showApply, showClear }: Props = $props();
+    let { clear, close, remove, showClear }: Props = $props();
 </script>
 
 <Command.Root>
     <Command.List>
         <Command.Separator />
-        {#if showApply}
-            <Command.Item class="text-primary justify-center text-center font-bold" onSelect={apply}>Apply filter</Command.Item>
-            <Command.Separator />
-        {/if}
         {#if showClear}
             <Command.Item class="justify-center text-center" onSelect={clear}>Clear filter</Command.Item>
         {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-boolean.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-boolean.svelte
@@ -21,20 +21,26 @@
         updatedValue = value;
     });
 
-    function onApplyFilter() {
+    function onClose() {
         if (updatedValue !== value) {
             changed(updatedValue);
         }
 
         open = false;
     }
 
+    function onOpenChange(isOpen: boolean) {
+        if (!isOpen) {
+            onClose();
+        }
+    }
+
     export function onClearFilter() {
         updatedValue = undefined;
     }
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root bind:open {onOpenChange}>
     <Popover.Trigger>
         <Button class="gap-x-1 px-3" size="lg" variant="outline">
             {title}
@@ -50,13 +56,6 @@
         <div class="flex items-center border-b">
             <Input bind:value={updatedValue} placeholder={title} type="boolean" />
         </div>
-        <FacetedFilter.Actions
-            apply={onApplyFilter}
-            clear={onClearFilter}
-            close={() => (open = false)}
-            {remove}
-            showApply={updatedValue !== value}
-            showClear={updatedValue !== undefined}
-        ></FacetedFilter.Actions>
+        <FacetedFilter.Actions clear={onClearFilter} close={onClose} {remove} showClear={updatedValue !== undefined} />
     </Popover.Content>
 </Popover.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-builder.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-builder.svelte
@@ -91,9 +91,15 @@
     function onClose() {
         open = false;
     }
+
+    function onOpenChange(isOpen: boolean) {
+        if (!isOpen) {
+            onClose();
+        }
+    }
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root bind:open {onOpenChange}>
     <Popover.Trigger>
         <Button class="gap-x-1 px-3" size="lg" variant="outline">
             <Circle class="mr-2 size-4" /> Filter
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-drop-down.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-drop-down.svelte
@@ -32,14 +32,20 @@
         updatedValue = value;
     });
 
-    function onApplyFilter() {
+    function onClose() {
         if (updatedValue !== value) {
             changed(updatedValue);
         }
 
         open = false;
     }
 
+    function onOpenChange(isOpen: boolean) {
+        if (!isOpen) {
+            onClose();
+        }
+    }
+
     export function onValueSelected(currentValue: string) {
         if (updatedValue === currentValue) {
             updatedValue = undefined;
@@ -70,7 +76,7 @@
     }
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root bind:open {onOpenChange}>
     <Popover.Trigger>
         <Button class="gap-x-1 px-3" size="lg" variant="outline">
             {title}
@@ -114,13 +120,6 @@
                     </Command.Group>{/if}
             </Command.List>
         </Command.Root>
-        <FacetedFilter.Actions
-            apply={onApplyFilter}
-            clear={onClearFilter}
-            close={() => (open = false)}
-            {remove}
-            showApply={updatedValue !== value}
-            showClear={!!updatedValue?.trim()}
-        ></FacetedFilter.Actions>
+        <FacetedFilter.Actions clear={onClearFilter} close={onClose} {remove} showClear={!!updatedValue?.trim()} />
     </Popover.Content>
 </Popover.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-keyword.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-keyword.svelte
@@ -21,20 +21,26 @@
         updatedValue = value;
     });
 
-    function onApplyFilter() {
+    function onClose() {
         if (updatedValue !== value) {
             changed(updatedValue);
         }
 
         open = false;
     }
 
+    function onOpenChange(isOpen: boolean) {
+        if (!isOpen) {
+            onClose();
+        }
+    }
+
     export function onClearFilter() {
         updatedValue = undefined;
     }
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root bind:open {onOpenChange}>
     <Popover.Trigger>
         <Button class="gap-x-1 px-3" size="lg" variant="outline">
             {title}
@@ -50,13 +56,6 @@
         <div class="flex items-center border-b">
             <Input bind:value={updatedValue} placeholder={title} type="text" />
         </div>
-        <FacetedFilter.Actions
-            apply={onApplyFilter}
-            clear={onClearFilter}
-            close={() => (open = false)}
-            {remove}
-            showApply={updatedValue !== value}
-            showClear={!!updatedValue?.trim()}
-        ></FacetedFilter.Actions>
+        <FacetedFilter.Actions clear={onClearFilter} close={onClose} {remove} showClear={!!updatedValue?.trim()} />
     </Popover.Content>
 </Popover.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-multi-select.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-multi-select.svelte
@@ -39,14 +39,20 @@
 
     const hasChanged = $derived(updatedValues.length !== values.length || updatedValues.some((value) => !values.includes(value)));
 
-    function onApplyFilter() {
+    function onClose() {
         if (hasChanged) {
             changed(updatedValues);
         }
 
         open = false;
     }
 
+    function onOpenChange(isOpen: boolean) {
+        if (!isOpen) {
+            onClose();
+        }
+    }
+
     export function onValueSelected(currentValue: string) {
         updatedValues = updatedValues.includes(currentValue) ? updatedValues.filter((v) => v !== currentValue) : [...updatedValues, currentValue];
     }
@@ -69,7 +75,7 @@
     }
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root bind:open {onOpenChange}>
     <Popover.Trigger>
         <Button class="gap-x-1 px-3" size="lg" variant="outline">
             {title}
@@ -118,13 +124,6 @@
                 {/if}
             </Command.List>
         </Command.Root>
-        <FacetedFilter.Actions
-            apply={onApplyFilter}
-            clear={onClearFilter}
-            close={() => (open = false)}
-            {remove}
-            showApply={hasChanged}
-            showClear={updatedValues.length > 0}
-        ></FacetedFilter.Actions>
+        <FacetedFilter.Actions clear={onClearFilter} close={onClose} {remove} showClear={updatedValues.length > 0} />
     </Popover.Content>
 </Popover.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-number.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-number.svelte
@@ -21,20 +21,26 @@
         updatedValue = value;
     });
 
-    function onApplyFilter() {
+    function onClose() {
         if (updatedValue !== value) {
             changed(updatedValue);
         }
 
         open = false;
     }
 
+    function onOpenChange(isOpen: boolean) {
+        if (!isOpen) {
+            onClose();
+        }
+    }
+
     export function onClearFilter() {
         updatedValue = undefined;
     }
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root bind:open {onOpenChange}>
     <Popover.Trigger>
         <Button class="gap-x-1 px-3" size="lg" variant="outline">
             {title}
@@ -50,13 +56,6 @@
         <div class="flex items-center border-b">
             <Input bind:value={updatedValue} placeholder={title} type="number" />
         </div>
-        <FacetedFilter.Actions
-            apply={onApplyFilter}
-            clear={onClearFilter}
-            close={() => (open = false)}
-            {remove}
-            showApply={updatedValue !== value}
-            showClear={updatedValue !== undefined}
-        ></FacetedFilter.Actions>
+        <FacetedFilter.Actions clear={onClearFilter} close={onClose} {remove} showClear={updatedValue !== undefined} />
     </Popover.Content>
 </Popover.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-string.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-string.svelte
@@ -21,20 +21,26 @@
         updatedValue = value;
     });
 
-    function onApplyFilter() {
+    function onClose() {
         if (updatedValue !== value) {
             changed(updatedValue);
         }
 
         open = false;
     }
 
+    function onOpenChange(isOpen: boolean) {
+        if (!isOpen) {
+            onClose();
+        }
+    }
+
     export function onClearFilter() {
         updatedValue = undefined;
     }
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root bind:open {onOpenChange}>
     <Popover.Trigger>
         <Button class="gap-x-1 px-3" size="lg" variant="outline">
             {title}
@@ -50,13 +56,6 @@
         <div class="flex items-center border-b">
             <Input bind:value={updatedValue} placeholder={title} type="text" />
         </div>
-        <FacetedFilter.Actions
-            apply={onApplyFilter}
-            clear={onClearFilter}
-            close={() => (open = false)}
-            {remove}
-            showApply={updatedValue !== value}
-            showClear={!!updatedValue?.trim()}
-        ></FacetedFilter.Actions>
+        <FacetedFilter.Actions clear={onClearFilter} close={onClose} {remove} showClear={!!updatedValue?.trim()} />
     </Popover.Content>
 </Popover.Root>
