feat(filters): Add new tag filtering modes AND, EXACT & NOT (@TristanMarion)

backend/__tests__/api/controllers/user.spec.ts

@@ -1917,6 +1917,7 @@ describe("user controller test", () => {
       tags: {
         none: false,
       },
+      tagsFilterMode: "or",
       language: {
         english: true,
       },
@@ -1981,6 +1982,7 @@ describe("user controller test", () => {
           '"numbers" Required',
           '"date" Required',
           '"tags" Required',
+          '"tagsFilterMode" Required',
           '"language" Required',
           '"funbox" Required',
         ],

frontend/src/html/pages/account.html

@@ -496,6 +496,16 @@
           <div class="title">
             <i class="fas fa-tag"></i>
             tags
+            <span
+              class="tagsFilterModeToggle"
+              data-balloon-pos="right"
+              data-balloon-length="xlarge"
+              data-balloon-break
+              aria-label="Tag filter mode:&#10;- OR (any selected tag must match)&#10;- AND (all selected tags must match)&#10;- EXACT (exactly the selected tags must match)"
+            >
+              <i class="fas fa-filter"></i>
+              <span class="mode-text">OR</span>
+            </span>
           </div>
           <div class="select filterGroup" group="tags"></div>
         </div>

frontend/src/styles/account.scss

@@ -375,6 +375,26 @@
           margin-right: 0.5em;
         }
       }
+
+      &.tags {
+        .title {
+          align-items: baseline;
+
+          .tagsFilterModeToggle {
+            margin-left: 0.5rem;
+            cursor: pointer;
+            opacity: 0.5;
+            transition: 0.125s;
+            display: flex;
+            align-items: center;
+            font-size: 0.8em;
+
+            &:hover {
+              opacity: 1;
+            }
+          }
+        }
+      }
     }
 
     &.presetFilterButtons {

frontend/src/ts/constants/default-result-filters.ts

@@ -58,6 +58,7 @@ const object: ResultFilters = {
   tags: {
     none: true,
   },
+  tagsFilterMode: "or",
   language: {},
   funbox: {
     none: true,

frontend/src/ts/elements/account/result-filters.ts

@@ -33,6 +33,8 @@ export function mergeWithDefaultFilters(
         merged[groupKey] = id;
       } else if (groupKey === "name") {
         merged[groupKey] = filters[groupKey] ?? defaultResultFilters[groupKey];
+      } else if (groupKey === "tagsFilterMode") {
+        merged[groupKey] = filters[groupKey] ?? defaultResultFilters[groupKey];
       } else {
         // @ts-expect-error i cant figure this out
         merged[groupKey] = {
@@ -289,7 +291,7 @@ export function updateActive(): void {
 
   for (const group of Misc.typedKeys(getFilters())) {
     // id and name field do not correspond to any ui elements, no need to update
-    if (group === "_id" || group === "name") {
+    if (group === "_id" || group === "name" || group === "tagsFilterMode") {
       continue;
     }
 
@@ -488,6 +490,19 @@ export function updateActive(): void {
   }, 0);
 }
 
+function updateTagsFilterModeIcon(): void {
+  const toggleElement = $(".pageAccount .tagsFilterModeToggle");
+  const modeTextElement = toggleElement.find(".mode-text");
+
+  if (filters.tagsFilterMode === "and") {
+    modeTextElement.text("AND");
+  } else if (filters.tagsFilterMode === "exact") {
+    modeTextElement.text("EXACT");
+  } else {
+    modeTextElement.text("OR");
+  }
+}
+
 function toggle<G extends ResultFiltersGroup>(
   group: G,
   filter: ResultFiltersGroupItem<G>
@@ -857,7 +872,7 @@ export async function appendButtons(
     html +=
       "<select class='tagsSelect' group='tags' placeholder='select a tag' multiple>";
 
-    html += "<option value='all'>all</option>";
+    html += "<option value='all'>all (and no tag)</option>";
     html += "<option value='none'>no tag</option>";
 
     for (const tag of snapshot.tags) {
@@ -925,6 +940,20 @@ $(".group.presetFilterButtons .filterBtns").on(
   }
 );
 
+$(document).on("click", ".pageAccount .tagsFilterModeToggle", () => {
+  // Cycle between "or" -> "and" -> "exact" -> "or"
+  if (filters.tagsFilterMode === "or") {
+    filters.tagsFilterMode = "and";
+  } else if (filters.tagsFilterMode === "and") {
+    filters.tagsFilterMode = "exact";
+  } else {
+    filters.tagsFilterMode = "or";
+  }
+  save();
+  updateTagsFilterModeIcon();
+  selectChangeCallbackFn();
+});
+
 function verifyResultFiltersStructure(filterIn: ResultFilters): ResultFilters {
   const filter = Misc.deepClone(filterIn);
   Object.entries(defaultResultFilters).forEach((entry) => {
@@ -937,3 +966,7 @@ function verifyResultFiltersStructure(filterIn: ResultFilters): ResultFilters {
   });
   return filter;
 }
+
+export function getTagsFilterMode(): "and" | "or" | "exact" {
+  return filters.tagsFilterMode;
+}

frontend/src/ts/pages/account.ts

@@ -450,18 +450,70 @@ async function fillContent(): Promise<void> {
 
         if (validTags === undefined) return;
 
-        result.tags.forEach((tag) => {
-          //check if i even need to check tags anymore
-          if (!tagHide) return;
-          //check if tag is valid
-          if (validTags?.includes(tag)) {
-            //tag valid, check if filter is on
-            if (ResultFilters.getFilter("tags", tag)) tagHide = false;
+        if (ResultFilters.getTagsFilterMode() === "or") {
+          result.tags.forEach((tag) => {
+            //check if i even need to check tags anymore
+            if (!tagHide) return;
+            //check if tag is valid
+            if (validTags?.includes(tag)) {
+              //tag valid, check if filter is on
+              if (ResultFilters.getFilter("tags", tag)) tagHide = false;
+            } else {
+              //tag not found in valid tags, meaning probably deleted
+              if (ResultFilters.getFilter("tags", "none")) tagHide = false;
+            }
+          });
+        } else if (ResultFilters.getTagsFilterMode() === "and") {
+          // AND mode - show results that match ALL selected tags
+          // First, identify all the enabled tags using validTags
+          const enabledTagIds: string[] = [];
+
+          // Loop through all valid tags to find which ones are enabled in the filter
+          validTags.forEach((tagId) => {
+            if (tagId !== "none" && ResultFilters.getFilter("tags", tagId)) {
+              enabledTagIds.push(tagId);
+            }
+          });
+
+          if (enabledTagIds.length === 0) {
+            // No tag filters enabled, show everything
+            tagHide = false;
           } else {
-            //tag not found in valid tags, meaning probably deleted
-            if (ResultFilters.getFilter("tags", "none")) tagHide = false;
+            // Check if result has ALL the enabled tag filters
+            const resultHasAllTags = enabledTagIds.every((tagId) =>
+              result.tags?.includes(tagId)
+            );
+
+            if (resultHasAllTags) {
+              tagHide = false;
+            }
           }
-        });
+        } else if (ResultFilters.getTagsFilterMode() === "exact") {
+          // EXACT mode - show results where tags exactly match the selected filters
+          // First, identify all the enabled tags
+          const enabledTagIds: string[] = [];
+
+          // Loop through all valid tags to find which ones are enabled in the filter
+          validTags.forEach((tagId) => {
+            if (tagId !== "none" && ResultFilters.getFilter("tags", tagId)) {
+              enabledTagIds.push(tagId);
+            }
+          });
+
+          if (enabledTagIds.length === 0) {
+            // No tag filters enabled, show everything
+            tagHide = false;
+          } else {
+            // Check if result tags exactly match the enabled filters (same number and same tags)
+            const resultHasExactTags =
+              result.tags.length === enabledTagIds.length &&
+              enabledTagIds.every((tagId) => result.tags?.includes(tagId));
+
+            if (resultHasExactTags) {
+              tagHide = false;
+            }
+          }
+        }
       }
 
       if (tagHide) {

packages/contracts/src/schemas/users.ts

@@ -51,6 +51,7 @@ export const ResultFiltersSchema = z.object({
     })
     .strict(),
   tags: z.record(z.string(), z.boolean()),
+  tagsFilterMode: z.enum(["and", "or", "exact"]),
   language: z.record(LanguageSchema, z.boolean()),
   funbox: z.record(z.string(), z.boolean()),
 });