support multi role on create user and invites

2026-05-05 03:54:22 +00:00 · 2026-03-29 12:11:22 -07:00
parent ee6fb34906
commit 2828dee94c
16 changed files with 629 additions and 416 deletions
--- a/src/components/OrgRolesTagField.tsx
+++ b/src/components/OrgRolesTagField.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Tag, TagInput } from "@app/components/tags/tag-input";
+import { toast } from "@app/hooks/useToast";
+import { useTranslations } from "next-intl";
+import type { Dispatch, SetStateAction } from "react";
+import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
+
+export type RoleTag = {
+    id: string;
+    text: string;
+};
+
+type OrgRolesTagFieldProps<TFieldValues extends FieldValues> = {
+    form: Pick<UseFormReturn<TFieldValues>, "control" | "getValues" | "setValue">;
+    /** Field in the form that holds Tag[] (role tags). Default: `"roles"`. */
+    name?: Path<TFieldValues>;
+    label: string;
+    placeholder: string;
+    allRoleOptions: Tag[];
+    supportsMultipleRolesPerUser: boolean;
+    showMultiRolePaywallMessage: boolean;
+    paywallMessage: string;
+    loading?: boolean;
+    activeTagIndex: number | null;
+    setActiveTagIndex: Dispatch<SetStateAction<number | null>>;
+};
+
+export default function OrgRolesTagField<TFieldValues extends FieldValues>({
+    form,
+    name = "roles" as Path<TFieldValues>,
+    label,
+    placeholder,
+    allRoleOptions,
+    supportsMultipleRolesPerUser,
+    showMultiRolePaywallMessage,
+    paywallMessage,
+    loading = false,
+    activeTagIndex,
+    setActiveTagIndex
+}: OrgRolesTagFieldProps<TFieldValues>) {
+    const t = useTranslations();
+
+    function setRoleTags(updater: Tag[] | ((prev: Tag[]) => Tag[])) {
+        const prev = form.getValues(name) as Tag[];
+        const nextValue =
+            typeof updater === "function" ? updater(prev) : updater;
+        const next = supportsMultipleRolesPerUser
+            ? nextValue
+            : nextValue.length > 1
+              ? [nextValue[nextValue.length - 1]]
+              : nextValue;
+
+        if (
+            !supportsMultipleRolesPerUser &&
+            next.length === 0 &&
+            prev.length > 0
+        ) {
+            form.setValue(name, [prev[prev.length - 1]] as never, {
+                shouldDirty: true
+            });
+            return;
+        }
+
+        if (next.length === 0) {
+            toast({
+                variant: "destructive",
+                title: t("accessRoleErrorAdd"),
+                description: t("accessRoleSelectPlease")
+            });
+            return;
+        }
+
+        form.setValue(name, next as never, { shouldDirty: true });
+    }
+
+    return (
+        <FormField
+            control={form.control}
+            name={name}
+            render={({ field }) => (
+                <FormItem className="flex flex-col items-start">
+                    <FormLabel>{label}</FormLabel>
+                    <FormControl>
+                        <TagInput
+                            {...field}
+                            activeTagIndex={activeTagIndex}
+                            setActiveTagIndex={setActiveTagIndex}
+                            placeholder={placeholder}
+                            size="sm"
+                            tags={field.value}
+                            setTags={setRoleTags}
+                            enableAutocomplete={true}
+                            autocompleteOptions={allRoleOptions}
+                            allowDuplicates={false}
+                            restrictTagsToAutocompleteOptions={true}
+                            sortTags={true}
+                            disabled={loading}
+                        />
+                    </FormControl>
+                    {showMultiRolePaywallMessage && (
+                        <FormDescription>{paywallMessage}</FormDescription>
+                    )}
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    );
+}