Apply changes from filter chip dropdowns immediately

frontend/src/features/archived-items/archived-item-state-filter.ts

@@ -53,7 +53,7 @@ export class ArchivedItemStateFilter extends BtrixElement {
   private readonly fuse = new Fuse<CrawlState>(finishedCrawlStates);
 
   @state()
-  private get selectedStates() {
+  get selectedStates() {
     return Array.from(this.selected.entries())
       .filter(([_tag, selected]) => selected)
       .map(([tag]) => tag);
@@ -69,6 +69,15 @@ export class ArchivedItemStateFilter extends BtrixElement {
         this.selected = new Map();
       }
     }
+    if (changedProperties.has("selectedStates")) {
+      this.dispatchEvent(
+        new CustomEvent<
+          BtrixChangeEvent<ChangeArchivedItemStateEventDetails>["detail"]
+        >("btrix-change", {
+          detail: { value: this.selectedStates },
+        }),
+      );
+    }
   }
 
   render() {
@@ -87,14 +96,6 @@ export class ArchivedItemStateFilter extends BtrixElement {
         }}
         @sl-after-hide=${() => {
           this.searchString = "";
-
-          this.dispatchEvent(
-            new CustomEvent<
-              BtrixChangeEvent<ChangeArchivedItemStateEventDetails>["detail"]
-            >("btrix-change", {
-              detail: { value: this.selectedStates },
-            }),
-          );
         }}
       >
         ${this.states?.length

frontend/src/features/archived-items/archived-item-tag-filter.ts

@@ -20,6 +20,7 @@ import { repeat } from "lit/directives/repeat.js";
 import { isFocusable } from "tabbable";
 
 import { BtrixElement } from "@/classes/BtrixElement";
+import { type FilterChip } from "@/components/ui/filter-chip";
 import type { BtrixChangeEvent } from "@/events/btrix-change";
 import { type WorkflowTag, type WorkflowTags } from "@/types/workflow";
 import { stopProp } from "@/utils/events";
@@ -57,7 +58,7 @@ export class ArchivedItemTagFilter extends BtrixElement {
   });
 
   @state()
-  private get selectedTags() {
+  get selectedTags() {
     return Array.from(this.selected.entries())
       .filter(([_tag, selected]) => selected)
       .map(([tag]) => tag);
@@ -68,6 +69,9 @@ export class ArchivedItemTagFilter extends BtrixElement {
   @state()
   private type: "and" | "or" = "or";
 
+  @query("btrix-filter-chip")
+  private readonly filterChip?: FilterChip | null;
+
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has("tags")) {
       if (this.tags) {
@@ -76,6 +80,19 @@ export class ArchivedItemTagFilter extends BtrixElement {
         this.selected = new Map();
       }
     }
+    if (changedProperties.has("selectedTags")) {
+      this.dispatchEvent(
+        new CustomEvent<
+          BtrixChangeEvent<ChangeArchivedItemTagEventDetails>["detail"]
+        >("btrix-change", {
+          detail: {
+            value: this.selectedTags.length
+              ? { tags: this.selectedTags, type: this.type }
+              : undefined,
+          },
+        }),
+      );
+    }
   }
 
   private readonly orgTagsTask = new Task(this, {
@@ -105,18 +122,6 @@ export class ArchivedItemTagFilter extends BtrixElement {
         }}
         @sl-after-hide=${() => {
           this.searchString = "";
-
-          this.dispatchEvent(
-            new CustomEvent<
-              BtrixChangeEvent<ChangeArchivedItemTagEventDetails>["detail"]
-            >("btrix-change", {
-              detail: {
-                value: this.selectedTags.length
-                  ? { tags: this.selectedTags, type: this.type }
-                  : undefined,
-              },
-            }),
-          );
         }}
       >
         ${this.tags?.length

frontend/src/features/crawl-workflows/workflow-profile-filter.ts

@@ -57,7 +57,8 @@ export class WorkflowProfileFilter extends BtrixElement {
     keys: ["id", "name", "description", "origins"],
   });
 
-  private selected = new Map<string, boolean>();
+  @state()
+  selected = new Map<string, boolean>();
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has("profiles")) {
@@ -67,6 +68,23 @@ export class WorkflowProfileFilter extends BtrixElement {
         this.selected = new Map();
       }
     }
+    if (changedProperties.has("selected")) {
+      const selectedProfiles = [];
+
+      for (const [profile, value] of this.selected) {
+        if (value) {
+          selectedProfiles.push(profile);
+        }
+      }
+
+      this.dispatchEvent(
+        new CustomEvent<BtrixChangeEvent["detail"]>("btrix-change", {
+          detail: {
+            value: selectedProfiles.length ? selectedProfiles : undefined,
+          },
+        }),
+      );
+    }
   }
 
   private readonly profilesTask = new Task(this, {
@@ -105,22 +123,6 @@ export class WorkflowProfileFilter extends BtrixElement {
         }}
         @sl-after-hide=${() => {
           this.searchString = "";
-
-          const selectedProfiles = [];
-
-          for (const [profile, value] of this.selected) {
-            if (value) {
-              selectedProfiles.push(profile);
-            }
-          }
-
-          this.dispatchEvent(
-            new CustomEvent<BtrixChangeEvent["detail"]>("btrix-change", {
-              detail: {
-                value: selectedProfiles.length ? selectedProfiles : undefined,
-              },
-            }),
-          );
         }}
       >
         ${this.profiles?.length
@@ -160,17 +162,9 @@ export class WorkflowProfileFilter extends BtrixElement {
                       this.checkboxes.forEach((checkbox) => {
                         checkbox.checked = false;
                       });
+                      this.selected = new Map();
 
-                      this.dispatchEvent(
-                        new CustomEvent<BtrixChangeEvent["detail"]>(
-                          "btrix-change",
-                          {
-                            detail: {
-                              value: undefined,
-                            },
-                          },
-                        ),
-                      );
+                      this.requestUpdate("selected");
                     }}
                     >${msg("Clear")}</sl-button
                   >`
@@ -344,6 +338,7 @@ export class WorkflowProfileFilter extends BtrixElement {
           const { checked, value } = e.target as SlCheckbox;
 
           this.selected.set(value, checked);
+          this.requestUpdate("selected");
         }}
       >
         ${repeat(

frontend/src/features/crawl-workflows/workflow-schedule-filter.ts

@@ -1,5 +1,5 @@
 import { localized, msg } from "@lit/localize";
-import type { SlSelectEvent } from "@shoelace-style/shoelace";
+import type { SlChangeEvent, SlRadioGroup } from "@shoelace-style/shoelace";
 import { html, nothing, type PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -25,95 +25,96 @@ export class WorkflowScheduleFilter extends BtrixElement {
   @property({ type: Boolean })
   schedule?: boolean;
 
-  #schedule?: boolean;
-
   protected willUpdate(changedProperties: PropertyValues): void {
     if (changedProperties.has("schedule")) {
-      this.#schedule = this.schedule;
+      this.dispatchEvent(
+        new CustomEvent<BtrixChangeWorkflowScheduleFilterEvent["detail"]>(
+          "btrix-change",
+          {
+            detail: { value: this.schedule },
+          },
+        ),
+      );
     }
   }
 
   render() {
-    const option = (label: string, value: string) => html`
-      <sl-menu-item value=${value}>${label}</sl-menu-item>
-    `;
-
     return html`
       <btrix-filter-chip
         ?checked=${this.schedule !== undefined}
         selectFromDropdown
-        @sl-after-hide=${() => {
-          if (this.#schedule !== this.schedule) {
-            this.dispatchEvent(
-              new CustomEvent<BtrixChangeWorkflowScheduleFilterEvent["detail"]>(
-                "btrix-change",
-                {
-                  detail: { value: this.#schedule },
-                },
-              ),
-            );
-          }
-        }}
       >
         ${this.schedule === undefined
           ? msg("Schedule")
           : html`<span
               >${this.schedule ? msg("Scheduled") : msg("No Schedule")}</span
             >`}
 
-        <sl-menu
+        <div
           slot="dropdown-content"
-          class="pt-0"
-          @sl-select=${(e: SlSelectEvent) => {
-            const { item } = e.detail;
-
-            switch (item.value as ScheduleType) {
-              case ScheduleType.Scheduled:
-                this.#schedule = true;
-                break;
-              case ScheduleType.None:
-                this.#schedule = false;
-                break;
-              default:
-                this.#schedule = undefined;
-                break;
-            }
-          }}
+          class="flex max-h-[var(--auto-size-available-height)] max-w-[var(--auto-size-available-width)] flex-col overflow-hidden rounded border bg-white text-left"
         >
-          <sl-menu-label
-            class="part-[base]:flex part-[base]:items-center part-[base]:justify-between part-[base]:gap-4 part-[base]:px-3"
+          <header
+            class="flex-shrink-0 flex-grow-0 overflow-hidden rounded-t border-b bg-white"
           >
-            <div
-              id="schedule-list-label"
-              class="leading-[var(--sl-input-height-small)]"
+            <sl-menu-label
+              class="part-[base]:flex part-[base]:items-center part-[base]:justify-between part-[base]:gap-4 part-[base]:px-3"
             >
-              ${msg("Filter by Schedule Type")}
-            </div>
-            ${this.schedule !== undefined
-              ? html`<sl-button
-                  variant="text"
-                  size="small"
-                  class="part-[label]:px-0"
-                  @click=${() => {
-                    this.dispatchEvent(
-                      new CustomEvent<BtrixChangeEvent["detail"]>(
-                        "btrix-change",
-                        {
-                          detail: {
-                            value: undefined,
-                          },
-                        },
-                      ),
-                    );
-                  }}
-                  >${msg("Clear")}</sl-button
-                >`
-              : nothing}
-          </sl-menu-label>
+              <div
+                id="schedule-list-label"
+                class="leading-[var(--sl-input-height-small)]"
+              >
+                ${msg("Filter by Schedule Type")}
+              </div>
+              ${this.schedule !== undefined
+                ? html`<sl-button
+                    variant="text"
+                    size="small"
+                    class="part-[label]:px-0"
+                    @click=${() => {
+                      this.schedule = undefined;
+                    }}
+                    >${msg("Clear")}</sl-button
+                  >`
+                : nothing}
+            </sl-menu-label>
+          </header>
 
-          ${option(msg("Scheduled"), ScheduleType.Scheduled)}
-          ${option(msg("No Schedule"), ScheduleType.None)}
-        </sl-menu>
+          <sl-radio-group
+            value=${this.schedule
+              ? ScheduleType.Scheduled
+              : this.schedule === false
+                ? ScheduleType.None
+                : ScheduleType.Any}
+            class="m-1"
+            @sl-change=${(e: SlChangeEvent) => {
+              const target = e.target as SlRadioGroup;
+
+              switch (target.value as ScheduleType) {
+                case ScheduleType.Scheduled:
+                  this.schedule = true;
+                  break;
+                case ScheduleType.None:
+                  this.schedule = false;
+                  break;
+                default:
+                  this.schedule = undefined;
+                  break;
+              }
+            }}
+          >
+            <sl-radio
+              value=${ScheduleType.Scheduled}
+              class="!mt-0 part-[base]:flex part-[base]:rounded part-[base]:p-2 part-[base]:hover:bg-primary-50"
+              >${msg("Scheduled")}</sl-radio
+            >
+            <sl-radio
+              value=${ScheduleType.None}
+              class="!mt-0 part-[base]:flex part-[base]:rounded part-[base]:p-2 part-[base]:hover:bg-primary-50"
+              >${msg("No Schedule")}</sl-radio
+            >
+          </sl-radio-group>
+        </div>
       </btrix-filter-chip>
     `;
   }