Added close to filters, only apply change on apply, open filters on add.

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/components/faceted-filter/faceted-filter-actions.svelte

@@ -19,5 +19,6 @@
             <Command.Item class="justify-center text-center" onSelect={() => dispatch('clear')}>Clear filter</Command.Item>
         {/if}
         <Command.Item class="justify-center text-center" onSelect={() => dispatch('remove')}>Remove filter</Command.Item>
+        <Command.Item class="justify-center text-center" onSelect={() => dispatch('close')}>Close</Command.Item>
     </Command.List>
 </Command.Root>

src/Exceptionless.Web/ClientApp/src/lib/components/faceted-filter/faceted-filter-builder.svelte

@@ -23,11 +23,16 @@
     });
 
     function onFacetSelected(facet: FacetedFilter) {
+        $facets.forEach((f) => f.open.set(false));
+
         if (visible.includes(facet.filter.key)) {
             toast.error(`Only one ${facet.title} filter can be applied at a time.`);
         } else {
             visible = [...visible, facet.filter.key];
         }
+
+        open = false;
+        facet.open.set(true);
     }
 
     function onChanged({ detail }: CustomEvent<IFilter>) {
@@ -57,6 +62,10 @@
         $facets.forEach((facet) => facet.filter.reset());
         dispatch('remove');
     }
+
+    function onClose() {
+        open = false;
+    }
 </script>
 
 <Popover.Root bind:open>
@@ -75,17 +84,22 @@
                         <Command.Item value={facet.filter.key} onSelect={() => onFacetSelected(facet)}>{facet.title}</Command.Item>
                     {/each}
                 </Command.Group>
+            </Command.List>
+        </Command.Root>
+        <Command.Root>
+            <Command.List>
+                <Command.Separator />
                 {#if visible.length > 0}
-                    <Command.Separator />
                     <Command.Item class="justify-center text-center" onSelect={onRemoveAll}>Clear filters</Command.Item>
                 {/if}
+                <Command.Item class="justify-center text-center" onSelect={onClose}>Close</Command.Item>
             </Command.List>
         </Command.Root>
     </Popover.Content>
 </Popover.Root>
 
 {#each $facets as facet (facet.filter.key)}
     {#if visible.includes(facet.filter.key)}
-        <svelte:component this={facet.component} filter={facet.filter} title={facet.title} on:changed={onChanged} on:remove={onRemove} />
+        <svelte:component this={facet.component} filter={facet.filter} title={facet.title} open={facet.open} on:changed={onChanged} on:remove={onRemove} />
     {/if}
 {/each}

src/Exceptionless.Web/ClientApp/src/lib/components/faceted-filter/index.ts

@@ -1,5 +1,7 @@
-import type { IFilter } from '$comp/filters/filters';
 import type { ComponentType } from 'svelte';
+import type { Writable } from 'svelte/store';
+
+import type { IFilter } from '$comp/filters/filters';
 
 import Root from './faceted-filter-builder.svelte';
 import Actions from './faceted-filter-actions.svelte';
@@ -8,7 +10,7 @@ import BadgeLoading from './faceted-filter-badge-loading.svelte';
 import BadgeValue from './faceted-filter-badge-value.svelte';
 import BadgeValues from './faceted-filter-badge-values.svelte';
 
-export type FacetedFilter = { title: string; component: ComponentType; filter: IFilter };
+export type FacetedFilter = { title: string; component: ComponentType; filter: IFilter; open: Writable<boolean> };
 
 export {
     Root,

src/Exceptionless.Web/ClientApp/src/lib/components/filters/facets/BooleanFacetedFilter.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
+    import type { Writable } from 'svelte/store';
 
     import { BooleanFilter } from '$comp/filters/filters';
     import BooleanFacetedFilter from './base/BooleanFacetedFilter.svelte';
 
     const dispatch = createEventDispatcher();
     export let filter: BooleanFilter;
     export let title: string;
+    export let open: Writable<boolean>;
 
     function onChanged() {
         dispatch('changed', filter);
@@ -17,4 +19,4 @@
     }
 </script>
 
-<BooleanFacetedFilter {title} bind:value={filter.value} on:changed={onChanged} on:remove={onRemove}></BooleanFacetedFilter>
+<BooleanFacetedFilter {open} {title} bind:value={filter.value} on:changed={onChanged} on:remove={onRemove}></BooleanFacetedFilter>

src/Exceptionless.Web/ClientApp/src/lib/components/filters/facets/DateFacetedFilter.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
+    import type { Writable } from 'svelte/store';
 
     import { DateFilter } from '$comp/filters/filters';
     import DropDownFacetedFilter from './base/DropDownFacetedFilter.svelte';
 
     const dispatch = createEventDispatcher();
     export let filter: DateFilter;
     export let title: string = 'Date Range';
+    export let open: Writable<boolean>;
 
     const options = [
         { value: 'last hour', label: 'Last Hour' },
@@ -44,4 +46,4 @@
     }
 </script>
 
-<DropDownFacetedFilter {title} bind:value {options} on:changed={onChanged} on:remove={onRemove}></DropDownFacetedFilter>
+<DropDownFacetedFilter {open} {title} bind:value {options} on:changed={onChanged} on:remove={onRemove}></DropDownFacetedFilter>

src/Exceptionless.Web/ClientApp/src/lib/components/filters/facets/KeywordFacetedFilter.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
+    import type { Writable } from 'svelte/store';
 
     import { KeywordFilter } from '$comp/filters/filters';
     import KeywordFacetedFilter from './base/KeywordFacetedFilter.svelte';
 
     const dispatch = createEventDispatcher();
     export let filter: KeywordFilter;
     export let title: string = 'Keyword';
+    export let open: Writable<boolean>;
 
     function onChanged() {
         dispatch('changed', filter);
@@ -17,4 +19,4 @@
     }
 </script>
 
-<KeywordFacetedFilter {title} bind:value={filter.value} on:changed={onChanged} on:remove={onRemove}></KeywordFacetedFilter>
+<KeywordFacetedFilter {open} {title} bind:value={filter.value} on:changed={onChanged} on:remove={onRemove}></KeywordFacetedFilter>

src/Exceptionless.Web/ClientApp/src/lib/components/filters/facets/NumberFacetedFilter.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
+    import type { Writable } from 'svelte/store';
 
     import { NumberFilter } from '$comp/filters/filters';
     import NumberFacetedFilter from './base/NumberFacetedFilter.svelte';
 
     const dispatch = createEventDispatcher();
     export let filter: NumberFilter;
     export let title: string;
+    export let open: Writable<boolean>;
 
     function onChanged() {
         dispatch('changed', filter);
@@ -17,4 +19,4 @@
     }
 </script>
 
-<NumberFacetedFilter {title} bind:value={filter.value} on:changed={onChanged} on:remove={onRemove}></NumberFacetedFilter>
+<NumberFacetedFilter {open} {title} bind:value={filter.value} on:changed={onChanged} on:remove={onRemove}></NumberFacetedFilter>

src/Exceptionless.Web/ClientApp/src/lib/components/filters/facets/OrganizationFacetedFilter.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
-    import { derived } from 'svelte/store';
+    import { derived, type Writable } from 'svelte/store';
 
     import { getOrganizationQuery } from '$api/organizationsApi';
     import { OrganizationFilter } from '$comp/filters/filters';
@@ -9,6 +9,7 @@
     const dispatch = createEventDispatcher();
     export let filter: OrganizationFilter;
     export let title: string = 'Status';
+    export let open: Writable<boolean>;
 
     const response = getOrganizationQuery();
     const options = derived(response, ($response) => {
@@ -41,5 +42,13 @@
     }
 </script>
 
-<DropDownFacetedFilter {title} bind:value={filter.value} options={$options} loading={$response.isLoading} on:changed={onChanged} on:remove={onRemove}
+<DropDownFacetedFilter
+    {open}
+    {title}
+    bind:value={filter.value}
+    options={$options}
+    loading={$response.isLoading}
+    noOptionsText="No organizations found."
+    on:changed={onChanged}
+    on:remove={onRemove}
 ></DropDownFacetedFilter>

src/Exceptionless.Web/ClientApp/src/lib/components/filters/facets/ProjectFacetedFilter.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
-    import { derived, writable } from 'svelte/store';
+    import { derived, writable, type Writable } from 'svelte/store';
 
     import { getProjectsByOrganizationIdQuery } from '$api/projectsApi';
     import { ProjectFilter } from '$comp/filters/filters';
@@ -9,6 +9,7 @@
     const dispatch = createEventDispatcher();
     export let filter: ProjectFilter;
     export let title: string = 'Status';
+    export let open: Writable<boolean>;
 
     const organizationId = writable<string | null>(filter.organization ?? null);
     $: organizationId.set(filter.organization ?? null);
@@ -44,5 +45,13 @@
     }
 </script>
 
-<MultiselectFacetedFilter {title} bind:values={filter.value} options={$options} loading={$response.isLoading} on:changed={onChanged} on:remove={onRemove}
+<MultiselectFacetedFilter
+    {open}
+    {title}
+    bind:values={filter.value}
+    options={$options}
+    loading={$response.isLoading}
+    noOptionsText="No projects found."
+    on:changed={onChanged}
+    on:remove={onRemove}
 ></MultiselectFacetedFilter>

src/Exceptionless.Web/ClientApp/src/lib/components/filters/facets/ReferenceFacetedFilter.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
+    import type { Writable } from 'svelte/store';
 
     import { ReferenceFilter } from '$comp/filters/filters';
     import StringFacetedFilter from './base/StringFacetedFilter.svelte';
 
     const dispatch = createEventDispatcher();
     export let filter: ReferenceFilter;
     export let title: string = 'Reference';
+    export let open: Writable<boolean>;
 
     function onChanged() {
         dispatch('changed', filter);
@@ -17,4 +19,4 @@
     }
 </script>
 
-<StringFacetedFilter {title} bind:value={filter.value} on:changed={onChanged} on:remove={onRemove}></StringFacetedFilter>
+<StringFacetedFilter {open} {title} bind:value={filter.value} on:changed={onChanged} on:remove={onRemove}></StringFacetedFilter>