feat: Filter workflows by tag + update existing filter UI

frontend/src/features/crawl-workflows/index.ts

@@ -6,4 +6,7 @@ import("./new-workflow-dialog");
 import("./queue-exclusion-form");
 import("./queue-exclusion-table");
 import("./workflow-editor");
+import("./workflow-filter");
 import("./workflow-list");
+import("./workflow-schedule-filter");
+import("./workflow-tag-filter");

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

@@ -0,0 +1,81 @@
+import { localized } from "@lit/localize";
+import type { SlDropdown } from "@shoelace-style/shoelace";
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { TailwindElement } from "@/classes/TailwindElement";
+
+/**
+ * @slot
+ * @slot dropdown-header
+ * @slot dropdown-content
+ */
+@customElement("btrix-workflow-filter")
+@localized()
+export class WorkflowFilter extends TailwindElement {
+  @property({ type: Boolean })
+  checked?: boolean;
+
+  @property({ type: Boolean })
+  select?: boolean;
+
+  @property({ type: Boolean })
+  stayOpenOnChange?: boolean;
+
+  @query("sl-dropdown")
+  private readonly dropdown?: SlDropdown | null;
+
+  render() {
+    if (this.select) {
+      return html`
+        <sl-dropdown
+          distance="4"
+          hoist
+          ?stayOpenOnSelect=${this.stayOpenOnChange}
+          @sl-change=${() => {
+            if (!this.stayOpenOnChange) {
+              void this.dropdown?.hide();
+            }
+          }}
+        >
+          ${this.renderButton()}
+
+          <div
+            class="flex max-h-[var(--auto-size-available-height)] max-w-[var(--auto-size-available-width)] flex-col overflow-hidden rounded border bg-white"
+          >
+            <header
+              class="flex-shrink-0 flex-grow-0 overflow-hidden rounded-t bg-white"
+            >
+              <slot name="dropdown-header"></slot>
+            </header>
+            <slot name="dropdown-content"></slot>
+          </div>
+        </sl-dropdown>
+      `;
+    }
+
+    return this.renderButton();
+  }
+
+  private renderButton() {
+    return html`
+      <sl-button
+        slot=${ifDefined(this.select ? "trigger" : undefined)}
+        role="checkbox"
+        aria-checked=${this.checked ? "true" : "false"}
+        size="small"
+        ?caret=${this.select}
+        outline
+        pill
+      >
+        <sl-icon
+          class="size-4 text-base"
+          slot="prefix"
+          name=${this.checked ? "check2-circle" : "plus-circle-dotted"}
+        ></sl-icon>
+        <slot></slot>
+      </sl-button>
+    `;
+  }
+}

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

@@ -0,0 +1,126 @@
+import { localized, msg } from "@lit/localize";
+import type { SlChangeEvent, SlRadioGroup } from "@shoelace-style/shoelace";
+import { html, nothing, type PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { BtrixElement } from "@/classes/BtrixElement";
+import type { BtrixChangeEvent } from "@/events/btrix-change";
+
+export type BtrixChangeWorkflowScheduleFilterEvent = BtrixChangeEvent<
+  undefined | boolean
+>;
+
+enum ScheduleType {
+  Scheduled = "Scheduled",
+  None = "None",
+  Any = "Any",
+}
+
+/**
+ * @fires btrix-change
+ */
+@customElement("btrix-workflow-schedule-filter")
+@localized()
+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;
+    }
+  }
+
+  render() {
+    const radio = (label: string, value: string) => html`
+      <sl-radio
+        class="!mt-0 w-full part-[base]:w-full part-[base]:rounded part-[base]:p-2 part-[base]:hover:bg-primary-50"
+        value=${value}
+        >${label}</sl-radio
+      >
+    `;
+
+    return html`
+      <btrix-workflow-filter
+        ?checked=${this.schedule !== undefined}
+        select
+        @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`<strong class="font-semibold"
+              >${this.schedule ? msg("Scheduled") : msg("No Schedule")}</strong
+            >`}
+
+        <div
+          slot="dropdown-header"
+          class="flex items-center justify-between py-1"
+        >
+          <sl-menu-label class="part-[base]:px-4" id="schedule-list-label">
+            ${msg("Filter by Schedule Type")}
+          </sl-menu-label>
+          ${this.schedule !== undefined
+            ? html`<sl-button
+                variant="text"
+                size="small"
+                @click=${() => {
+                  this.dispatchEvent(
+                    new CustomEvent<BtrixChangeEvent["detail"]>(
+                      "btrix-change",
+                      {
+                        detail: {
+                          value: undefined,
+                        },
+                      },
+                    ),
+                  );
+                }}
+                >${msg("Clear Filter")}</sl-button
+              >`
+            : nothing}
+        </div>
+
+        <div slot="dropdown-content" class="p-1">
+          <sl-radio-group
+            @sl-change=${(e: SlChangeEvent) => {
+              const { value } = e.target as SlRadioGroup;
+
+              switch (value as ScheduleType) {
+                case ScheduleType.Scheduled:
+                  this.#schedule = true;
+                  break;
+                case ScheduleType.None:
+                  this.#schedule = false;
+                  break;
+                default:
+                  this.#schedule = undefined;
+                  break;
+              }
+            }}
+            value=${this.schedule === undefined
+              ? ScheduleType.Any
+              : this.schedule
+                ? ScheduleType.Scheduled
+                : ScheduleType.None}
+          >
+            ${radio(msg("Scheduled"), ScheduleType.Scheduled)}
+            ${radio(msg("No Schedule"), ScheduleType.None)}
+          </sl-radio-group>
+        </div>
+      </btrix-workflow-filter>
+    `;
+  }
+}