add "any"/"all" toggle to tags filter chip

Author: emma-sg

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

@@ -22,13 +22,17 @@ import { isFocusable } from "tabbable";
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { BtrixChangeEvent } from "@/events/btrix-change";
 import { type WorkflowTag, type WorkflowTags } from "@/types/workflow";
+import { stopProp } from "@/utils/events";
 import { tw } from "@/utils/tailwind";
 
 const MAX_TAGS_IN_LABEL = 5;
 
-export type BtrixChangeWorkflowTagFilterEvent = BtrixChangeEvent<
-  string[] | undefined
->;
+type ChangeWorkflowTagEventDetails =
+  | { tags: string[]; type: "and" | "or" }
+  | undefined;
+
+export type BtrixChangeWorkflowTagFilterEvent =
+  BtrixChangeEvent<ChangeWorkflowTagEventDetails>;
 
 /**
  * @fires btrix-change
@@ -52,8 +56,18 @@ export class WorkflowTagFilter extends BtrixElement {
     keys: ["tag"],
   });
 
+  @state()
+  private get selectedTags() {
+    return Array.from(this.selected.entries())
+      .filter(([_tag, selected]) => selected)
+      .map(([tag]) => tag);
+  }
+
   private selected = new Map<string, boolean>();
 
+  @state()
+  private type: "and" | "or" = "or";
+
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has("tags")) {
       if (this.tags) {
@@ -92,17 +106,17 @@ export class WorkflowTagFilter extends BtrixElement {
         @sl-after-hide=${() => {
           this.searchString = "";
 
-          const selectedTags = [];
-
-          for (const [tag, value] of this.selected) {
-            if (value) {
-              selectedTags.push(tag);
-            }
-          }
+          console.log("after hide");
 
           this.dispatchEvent(
-            new CustomEvent<BtrixChangeEvent["detail"]>("btrix-change", {
-              detail: { value: selectedTags.length ? selectedTags : undefined },
+            new CustomEvent<
+              BtrixChangeEvent<ChangeWorkflowTagEventDetails>["detail"]
+            >("btrix-change", {
+              detail: {
+                value: this.selectedTags.length
+                  ? { tags: this.selectedTags, type: this.type }
+                  : undefined,
+              },
             }),
           );
         }}
@@ -141,23 +155,49 @@ export class WorkflowTagFilter extends BtrixElement {
                         checkbox.checked = false;
                       });
 
+                      this.type = "or";
+
                       this.dispatchEvent(
-                        new CustomEvent<BtrixChangeEvent["detail"]>(
-                          "btrix-change",
-                          {
-                            detail: {
-                              value: undefined,
-                            },
+                        new CustomEvent<
+                          BtrixChangeEvent<ChangeWorkflowTagEventDetails>["detail"]
+                        >("btrix-change", {
+                          detail: {
+                            value: undefined,
                           },
-                        ),
+                        }),
                       );
                     }}
                     >${msg("Clear")}</sl-button
                   >`
                 : nothing}
             </sl-menu-label>
 
-            <div class="px-3">${this.renderSearch()}</div>
+            <div class="flex gap-2 px-3">
+              ${this.renderSearch()}
+              <sl-radio-group
+                size="small"
+                value=${this.type}
+                @sl-change=${(event: SlChangeEvent) => {
+                  this.type = (event.target as HTMLInputElement).value as
+                    | "or"
+                    | "and";
+                }}
+                @sl-after-hide=${stopProp}
+              >
+                <sl-tooltip hoist content=${msg("Any of the selected tags")}>
+                  <sl-radio-button value="or" checked>
+                    <sl-icon name="union" slot="prefix"></sl-icon>
+                    ${msg("Any")}
+                  </sl-radio-button>
+                </sl-tooltip>
+                <sl-tooltip hoist content=${msg("All of the selected tags")}>
+                  <sl-radio-button value="and">
+                    <sl-icon name="intersect" slot="prefix"></sl-icon>
+                    ${msg("All")}
+                  </sl-radio-button>
+                </sl-tooltip>
+              </sl-radio-group>
+            </div>
           </header>
 
           ${this.orgTagsTask.render({
@@ -194,6 +234,7 @@ export class WorkflowTagFilter extends BtrixElement {
             ),
           ]
         : tags,
+      { type: this.type === "and" ? "conjunction" : "disjunction" },
     );
 
     return formatter2.map((part, index, array) =>
@@ -266,6 +307,7 @@ export class WorkflowTagFilter extends BtrixElement {
           const { checked, value } = e.target as SlCheckbox;
 
           this.selected.set(value, checked);
+          this.requestUpdate("selectedTags");
         }}
       >
         ${repeat(

frontend/src/pages/org/workflows-list.ts

@@ -132,6 +132,9 @@ export class WorkflowsList extends BtrixElement {
   @state()
   private filterByTags?: string[];
 
+  @state()
+  private filterByTagsType: "and" | "or" = "or";
+
   @state()
   private filterByProfiles?: string[];
 
@@ -190,6 +193,10 @@ export class WorkflowsList extends BtrixElement {
         this.filterByCurrentUser = value === "true";
       }
 
+      if (key === "tagsType") {
+        this.filterByTagsType = value === "and" ? "and" : "or";
+      }
+
       // Sorting field
       if (key === "sortBy") {
         if (value in sortableFields) {
@@ -210,7 +217,18 @@ export class WorkflowsList extends BtrixElement {
       }
 
       // Ignored params
-      if (["page", "mine", "tags", "sortBy", "sortDir"].includes(key)) continue;
+      if (
+        [
+          "page",
+          "mine",
+          "tags",
+          "tagsType",
+          "profiles",
+          "sortBy",
+          "sortDir",
+        ].includes(key)
+      )
+        continue;
 
       // Convert string bools to filter values
       if (value === "true") {
@@ -249,6 +267,7 @@ export class WorkflowsList extends BtrixElement {
     const resetToFirstPageProps = [
       "filterByCurrentUser",
       "filterByTags",
+      "filterByTagsType",
       "filterByProfiles",
       "filterByScheduled",
       "filterBy",
@@ -289,6 +308,7 @@ export class WorkflowsList extends BtrixElement {
       changedProperties.has("filterBy") ||
       changedProperties.has("filterByCurrentUser") ||
       changedProperties.has("filterByTags") ||
+      changedProperties.has("filterByTagsType") ||
       changedProperties.has("filterByProfiles") ||
       changedProperties.has("orderBy")
     ) {
@@ -308,6 +328,11 @@ export class WorkflowsList extends BtrixElement {
 
           ["tags", this.filterByTags],
 
+          [
+            "tagsType",
+            this.filterByTagsType !== "or" ? this.filterByTagsType : undefined,
+          ],
+
           ["profiles", this.filterByProfiles],
 
           // Sorting fields
@@ -638,7 +663,8 @@ export class WorkflowsList extends BtrixElement {
       <btrix-workflow-tag-filter
         .tags=${this.filterByTags}
         @btrix-change=${(e: BtrixChangeWorkflowTagFilterEvent) => {
-          this.filterByTags = e.detail.value;
+          this.filterByTags = e.detail.value?.tags;
+          this.filterByTagsType = e.detail.value?.type || "or";
         }}
       ></btrix-workflow-tag-filter>
 
@@ -995,6 +1021,7 @@ export class WorkflowsList extends BtrixElement {
           INITIAL_PAGE_SIZE,
         userid: this.filterByCurrentUser ? this.userInfo?.id : undefined,
         tag: this.filterByTags || undefined,
+        tagMatch: this.filterByTagsType,
         profileIds: this.filterByProfiles || undefined,
         sortBy: this.orderBy.field,
         sortDirection: this.orderBy.direction === "desc" ? -1 : 1,