feat: block filtering in participant form (#315)

* feat: block filtering in participant form

* feat: add translations to attribute input block

additonally, correct "noBlocksFound" translations

* fix: make "no blocks found" a standard message

Author: mejsiejdev

messages/en.json

@@ -31,7 +31,17 @@
     "captchaInProgress": "CAPTCHA verification...",
     "captchaFailed": "CAPTCHA error. Try again",
     "emailIsRequiredTooltip": "You must provide an email address to register for this event.",
-    "attributeIsRequiredTooltip": "This field is required."
+    "attributeIsRequiredTooltip": "This field is required.",
+    "searchBlocksLabel": "Search blocks",
+    "searchBlocksPlaceholder": "Search blocks...",
+    "hideFullBlocks": "Hide full",
+    "noBlocksFound": "No matching blocks found.",
+    "noBlockOption": "None",
+    "noBlockOptionDescription": "(opt out or unregister)",
+    "userRegisteredOnBlock": "You are already on this list.",
+    "participants": "Participants",
+    "noParticipants": "No participants",
+    "anonymousParticipant": "Anonymous participant."
   },
   "Auth": {
     "registerTitle": "Organizer registration",

messages/pl.json

@@ -31,7 +31,17 @@
     "captchaInProgress": "Weryfikacja CAPTCHA...",
     "captchaFailed": "Błąd CAPTCHA. Spróbuj ponownie",
     "emailIsRequiredTooltip": "Musisz podać adres e-mail, aby zarejestrować się na to wydarzenie.",
-    "attributeIsRequiredTooltip": "To pole jest wymagane."
+    "attributeIsRequiredTooltip": "To pole jest wymagane.",
+    "searchBlocksLabel": "Wyszukaj bloki",
+    "searchBlocksPlaceholder": "Wyszukaj bloki...",
+    "hideFullBlocks": "Ukryj pełne",
+    "noBlocksFound": "Nie znaleziono pasujących bloków.",
+    "noBlockOption": "Żaden",
+    "noBlockOptionDescription": "(zrezygnuj lub wypisz się)",
+    "userRegisteredOnBlock": "Jesteś już na tej liście.",
+    "participants": "Uczestnicy",
+    "noParticipants": "Brak uczestników.",
+    "anonymousParticipant": "Anonimowy uczestnik."
   },
   "Auth": {
     "registerTitle": "Rejestracja organizatora",

src/components/attribute-blocks-wrapper.tsx

@@ -1,15 +1,37 @@
 "use client";
 
+import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
+import { useTranslations } from "next-intl";
+import { Activity, useState } from "react";
 import type { ControllerRenderProps, FieldValues } from "react-hook-form";
 
+import { cn } from "@/lib/utils";
 import type { Attribute } from "@/types/attributes";
 import type { PublicBlock } from "@/types/blocks";
 import type { PublicParticipant } from "@/types/participant";
 
 import { AttributeInputBlock } from "./attribute-input-block";
+import { Checkbox } from "./ui/checkbox";
+import { Field, FieldError, FieldGroup, FieldLabel } from "./ui/field";
 import { FormControl, FormItem, FormLabel } from "./ui/form";
+import { Input } from "./ui/input";
 import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
 
+function includeBlock(
+  block: PublicBlock,
+  searchText: string,
+  hideFullBlocks: boolean,
+): boolean {
+  const doesBlockIncludeSearchText =
+    searchText === "" ||
+    block.name.toLowerCase().includes(searchText.toLowerCase());
+  const isBlockNotFull =
+    !hideFullBlocks ||
+    block.capacity === null ||
+    (block.meta.participantsInBlockCount ?? 0) < block.capacity;
+  return doesBlockIncludeSearchText && isBlockNotFull;
+}
+
 /**
  * This component wraps all block entries for a block type attribute.
  * It provides an accordion root element for block occupants accordion items.
@@ -26,31 +48,88 @@ export function AttributeBlocksWrapper({
   eventBlocks: PublicBlock[];
   attribute: Attribute;
 }) {
+  const t = useTranslations("Form");
+  const [searchText, setSearchText] = useDebouncedState("", {
+    wait: 200,
+  });
+  const [hideFullBlocks, setHideFullBlocks] = useState(false);
+
+  const filteredBlocks = eventBlocks.filter((block) =>
+    includeBlock(block, searchText, hideFullBlocks),
+  );
   return (
     <div
-      className={`mt-4 ${eventBlocks.length >= 3 ? "flex justify-center" : ""}`}
+      className={cn(
+        "mt-4",
+        eventBlocks.length >= 3 && "flex flex-col items-center justify-center",
+      )}
     >
+      {eventBlocks.length >= 5 && (
+        <FieldGroup className="mb-2 gap-2">
+          <div className="flex w-full flex-col gap-4 md:flex-row">
+            <Field>
+              <Input
+                aria-label={t("searchBlocksLabel")}
+                onChange={(event) => {
+                  setSearchText(event.target.value.trim());
+                }}
+                placeholder={t("searchBlocksPlaceholder")}
+              />
+            </Field>
+            <Field orientation="horizontal" className="w-min">
+              <Checkbox
+                id="hide-full-checkbox"
+                name="hide-full-checkbox"
+                checked={hideFullBlocks}
+                onCheckedChange={(checked) => {
+                  setHideFullBlocks(checked === true);
+                }}
+              />
+              <FieldLabel
+                htmlFor="hide-full-checkbox"
+                className="whitespace-nowrap"
+              >
+                {t("hideFullBlocks")}
+              </FieldLabel>
+            </Field>
+          </div>
+          <Activity mode={filteredBlocks.length === 0 ? "visible" : "hidden"}>
+            <p className="text-muted-foreground text-sm font-normal">
+              {t("noBlocksFound")}
+            </p>
+          </Activity>
+        </FieldGroup>
+      )}
       <RadioGroup
         onValueChange={field.onChange}
         defaultValue={String(field.value)}
-        className={`mt-4 ${eventBlocks.length >= 3 ? "xl:min-w-xl xl:grid-cols-2" : ""}`}
+        className={cn(
+          "mt-4",
+          eventBlocks.length >= 3 && "w-full xl:min-w-xl xl:grid-cols-2",
+        )}
       >
-        <FormItem className="flex flex-col rounded-md border border-slate-500 p-4 [&>button:first-of-type]:m-0">
-          <div className="flex items-center gap-4">
-            <FormControl>
-              <RadioGroupItem value={"null"} />
-            </FormControl>
-            <FormLabel>
-              <p>Żaden</p>
-            </FormLabel>
-          </div>
-          <span className="h-14">(zrezygnuj lub wypisz się)</span>
-        </FormItem>
-        {eventBlocks.map((childBlock) => (
+        <Activity
+          mode={
+            filteredBlocks.length === eventBlocks.length ? "visible" : "hidden"
+          }
+        >
+          <FormItem className="flex flex-col rounded-md border border-slate-500 p-4 [&>button:first-of-type]:m-0">
+            <div className="flex items-center gap-4">
+              <FormControl>
+                <RadioGroupItem value={"null"} />
+              </FormControl>
+              <FormLabel>
+                <p>{t("noBlockOption")}</p>
+              </FormLabel>
+            </div>
+            <span className="h-14">{t("noBlockOptionDescription")}</span>
+          </FormItem>
+        </Activity>
+        {filteredBlocks.map((childBlock) => (
           <AttributeInputBlock
             userData={userData}
             block={childBlock}
-            key={childBlock.name}
+            key={childBlock.id}
             displayedAttributes={attribute.options ?? []}
           />
         ))}

src/components/attribute-input-block.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ChevronRight, Users } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { cn } from "@/lib/utils";
 import type { PublicBlock } from "@/types/blocks";
@@ -29,6 +30,7 @@ export function AttributeInputBlock({
   userData: PublicParticipant;
   displayedAttributes: string[];
 }) {
+  const t = useTranslations("Form");
   const isFull =
     block.capacity !== null && block.meta.participants.length >= block.capacity;
   const isRegistered = userData.attributes.some(
@@ -70,7 +72,7 @@ export function AttributeInputBlock({
       </div>
       {isRegistered ? (
         <p className="text-muted-foreground mb-0 text-sm leading-none whitespace-nowrap">
-          Jesteś już na tej liście
+          {t("userRegisteredOnBlock")}
         </p>
       ) : null}
       <div className="mt-auto">
@@ -79,15 +81,17 @@ export function AttributeInputBlock({
             className="text-primary flex w-full items-center gap-2 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50 [&[data-state=open]>svg]:rotate-90"
             disabled={block.meta.participants.length === 0}
           >
-            Uczestnicy
+            {t("participants")}
             <ChevronRight className="size-4 transition-transform" />
           </PopoverTrigger>
           <PopoverContent
             className="w-[var(--radix-popover-trigger-width)] p-2"
             align="center"
           >
             {block.meta.participants.length === 0 ? (
-              <p className="text-muted-foreground text-sm">Brak uczestników</p>
+              <p className="text-muted-foreground text-sm">
+                {t("noParticipants")}
+              </p>
             ) : (
               <ScrollArea className="[&_[data-slot=scroll-area-viewport]]:max-h-64">
                 <ul className="divide-border/60 -mx-1 space-y-0.5 px-1">
@@ -104,7 +108,7 @@ export function AttributeInputBlock({
                           }`
                         : displayedAttributes.includes("email")
                           ? occupant.email
-                          : "Anonimowy uczestnik"}
+                          : t("anonymousParticipant")}
                     </li>
                   ))}
                 </ul>