@carlonicora/nextjs-jsonapi 1.0.4 → 1.0.5

package/src/features/user/components/forms/UserMultiSelect.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useWatch } from "react-hook-form";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever, useDebounce } from "../../../../hooks";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  MultiSelect,
+} from "../../../../shadcnui";
+import { useCurrentUserContext } from "../../contexts";
+import { UserInterface, UserService } from "../../data";
+
+// Type for user objects in the form
+type UserSelectType = {
+  id: string;
+  name: string;
+  avatar?: string;
+};
+
+type UserMultiSelectProps = {
+  id: string;
+  form: any;
+  currentUser?: UserInterface;
+  label?: string;
+  placeholder?: string;
+  onChange?: (users?: UserInterface[]) => void;
+  maxCount?: number;
+  isRequired?: boolean;
+};
+
+function UserAvatarIcon({ className, url, name }: { className?: string; url?: string; name?: string }) {
+  return (
+    <Avatar className={`${className || "h-4 w-4"}`}>
+      <AvatarImage src={url} />
+      <AvatarFallback>
+        {name
+          ? name
+              .split(" ")
+              .map((n: string) => n.charAt(0).toUpperCase())
+              .join("")
+          : "U"}
+      </AvatarFallback>
+    </Avatar>
+  );
+}
+
+export function UserMultiSelect({
+  id,
+  form,
+  currentUser,
+  label,
+  placeholder,
+  onChange,
+  maxCount = 3,
+  isRequired = false,
+}: UserMultiSelectProps) {
+  const { company } = useCurrentUserContext<UserInterface>();
+
+  const searchTermRef = useRef<string>("");
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+  const [userOptions, setUserOptions] = useState<any[]>([]);
+
+  // Get the current selected users from the form
+  const selectedUsers: UserSelectType[] = useWatch({ control: form.control, name: id }) || [];
+
+  const data: DataListRetriever<UserInterface> = useDataListRetriever({
+    ready: !!company,
+    retriever: (params) => {
+      return UserService.findAllUsers(params);
+    },
+    retrieverParams: { companyId: company?.id },
+    module: Modules.User,
+  }) as DataListRetriever<UserInterface>;
+
+  useEffect(() => {
+    if (company) data.setReady(true);
+  }, [company]);
+
+  const search = useCallback(
+    async (searchedTerm: string) => {
+      try {
+        if (searchedTerm === searchTermRef.current) return;
+        setIsSearching(true);
+        searchTermRef.current = searchedTerm;
+        await data.search(searchedTerm);
+      } finally {
+        setIsSearching(false);
+      }
+    },
+    [searchTermRef, data],
+  );
+
+  const updateSearchTerm = useDebounce(search, 500);
+
+  useEffect(() => {
+    setIsSearching(true);
+    updateSearchTerm(searchTerm);
+  }, [updateSearchTerm, searchTerm]);
+
+  // Update userOptions when data changes or when initial selected users are available
+  useEffect(() => {
+    if (data.data && data.data.length > 0) {
+      const users = data.data as UserInterface[];
+      const filteredUsers = users.filter((user) => user.id !== currentUser?.id);
+
+      const options = filteredUsers.map((user) => ({
+        label: user.name,
+        value: user.id,
+        icon: ({ className }: { className?: string }) => (
+          <UserAvatarIcon className={className} url={user.avatar} name={user.name} />
+        ),
+        userData: user,
+      }));
+
+      setUserOptions(options);
+    }
+  }, [data.data, currentUser]);
+
+  // Add options for any already selected users that aren't in search results
+  useEffect(() => {
+    if (selectedUsers.length > 0) {
+      // Create a map of existing option IDs for quick lookup
+      const existingOptionIds = new Set(userOptions.map((option) => option.value));
+
+      // Find selected users that don't have an option yet
+      const missingOptions = selectedUsers
+        .filter((user) => !existingOptionIds.has(user.id))
+        .map((user) => ({
+          label: user.name,
+          value: user.id,
+          icon: ({ className }: { className?: string }) => (
+            <UserAvatarIcon className={className} url={user.avatar} name={user.name} />
+          ),
+          userData: user,
+        }));
+
+      // Add missing options if there are any
+      if (missingOptions.length > 0) {
+        setUserOptions((prev) => [...prev, ...missingOptions]);
+      }
+    }
+  }, [selectedUsers, userOptions]);
+
+  const handleValueChange = (selectedIds: string[]) => {
+    // Map selected IDs to user objects for the form
+    const updatedSelectedUsers = selectedIds.map((id) => {
+      // First check if user is already in the selected users (preserve existing data)
+      const existingUser = selectedUsers.find((user) => user.id === id);
+      if (existingUser) {
+        return existingUser;
+      }
+
+      // Otherwise, get user data from the options
+      const option = userOptions.find((option) => option.value === id);
+      if (option?.userData) {
+        return {
+          id: option.userData.id,
+          name: option.userData.name,
+          avatar: option.userData.avatar,
+        };
+      }
+
+      // Fallback to just the ID if no data is available
+      return { id, name: id };
+    });
+
+    form.setValue(id, updatedSelectedUsers);
+
+    if (onChange) {
+      const fullSelectedUsers = selectedIds
+        .map((id) => userOptions.find((option) => option.value === id)?.userData)
+        .filter(Boolean) as UserInterface[];
+      onChange(fullSelectedUsers);
+    }
+  };
+
+  // Extract just the IDs for the MultiSelect component
+  const selectedUserIds = selectedUsers.map((user: UserSelectType) => user.id);
+
+  return (
+    <div className="flex w-full flex-col">
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => (
+          <FormItem className={`${label ? "mb-5" : "mb-1"}`}>
+            {label && (
+              <FormLabel className="flex items-center">
+                {label}
+                {isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
+              </FormLabel>
+            )}
+            <FormControl>
+              <MultiSelect
+                options={userOptions}
+                onValueChange={handleValueChange}
+                defaultValue={selectedUserIds}
+                placeholder={placeholder}
+                maxCount={maxCount}
+                animation={0}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

package/src/features/user/components/forms/UserReactivator.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { UserCheckIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { errorToast } from "../../../../components";
+import { Modules } from "../../../../core";
+import { Action } from "../../../../permissions";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../../shadcnui";
+import { useCurrentUserContext } from "../../contexts";
+import { UserInterface, UserService } from "../../data";
+
+type UserReactivatorProps = {
+  user: UserInterface;
+  propagateChanges: (user: UserInterface) => void;
+};
+
+function UserReactivatorInterface({ user, propagateChanges }: UserReactivatorProps) {
+  const [open, setOpen] = useState<boolean>(false);
+  const t = useTranslations();
+
+  const reactivateUser = async () => {
+    try {
+      const updatedUser = (await UserService.reactivate({ userId: user.id })) as UserInterface;
+
+      setOpen(false);
+      propagateChanges(updatedUser);
+    } catch (error) {
+      errorToast({ title: t(`generic.errors.error`), error: error });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm">
+          <UserCheckIcon className="mr-3 h-3.5 w-3.5" />
+          {t(`foundations.user.buttons.reactivate`)}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className={`flex max-h-[70vh] max-w-3xl flex-col overflow-y-auto`}>
+        <DialogHeader>
+          <DialogTitle>{t(`foundations.user.reactivate.title`)}</DialogTitle>
+          <DialogDescription>{t(`foundations.user.reactivate.subtitle`)}</DialogDescription>
+        </DialogHeader>
+        {t(`foundations.user.reactivate.description`, { name: user.name })}
+        <div className="flex justify-end">
+          <Button className="mr-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
+            {t(`generic.buttons.cancel`)}
+          </Button>
+          <Button
+            type="submit"
+            onClick={(e) => {
+              e.preventDefault();
+              reactivateUser();
+            }}
+          >
+            {t(`foundations.user.buttons.reactivate`)}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function UserReactivator(props: UserReactivatorProps) {
+  const { hasPermissionToModule } = useCurrentUserContext<UserInterface>();
+  if (!hasPermissionToModule({ module: Modules.User, action: Action.Update, data: props.user })) return null;
+
+  return <UserReactivatorInterface {...props} />;
+}

package/src/features/user/components/forms/UserResentInvitationEmail.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { MailIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { toast } from "sonner";
+import { errorToast } from "../../../../components";
+import { Modules } from "../../../../core";
+import { Action } from "../../../../permissions";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../../../shadcnui";
+import { useCurrentUserContext } from "../../contexts";
+import { UserInterface, UserService } from "../../data";
+
+type UserResentInvitationEmailProps = {
+  user: UserInterface;
+};
+
+function UserResentInvitationEmailInternal({ user }: UserResentInvitationEmailProps) {
+  const [open, setOpen] = useState<boolean>(false);
+  const t = useTranslations();
+
+  const sendInvitationEmail = async () => {
+    try {
+      await UserService.sendInvitation({ userId: user.id, companyId: user.company!.id });
+
+      setOpen(false);
+      toast.message(t(`foundations.user.resend_activation.email_sent`), {
+        description: t(`foundations.user.resend_activation.email_sent_description`, { email: user.email }),
+      });
+    } catch (error) {
+      errorToast({ title: t(`generic.errors.error`), error: error });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DialogTrigger asChild>
+            <Button size="sm" variant={`ghost`} className="text-muted-foreground">
+              <MailIcon />
+            </Button>
+          </DialogTrigger>
+        </TooltipTrigger>
+        <TooltipContent>{t(`foundations.user.buttons.resend_activation`)}</TooltipContent>
+      </Tooltip>
+      <DialogContent className={`flex max-h-[70vh] max-w-3xl flex-col overflow-y-auto`}>
+        <DialogHeader>
+          <DialogTitle>{t(`foundations.user.resend_activation.title`)}</DialogTitle>
+          <DialogDescription>{t(`foundations.user.resend_activation.subtitle`)}</DialogDescription>
+        </DialogHeader>
+        {t(`foundations.user.resend_activation.description`, { email: user.email })}
+        <div className="flex justify-end">
+          <Button className="mr-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
+            {t(`generic.buttons.cancel`)}
+          </Button>
+          <Button
+            type="submit"
+            onClick={(e) => {
+              e.preventDefault();
+              sendInvitationEmail();
+            }}
+          >
+            {t(`foundations.user.buttons.resend_activation`)}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function UserResentInvitationEmail(props: UserResentInvitationEmailProps) {
+  const { hasPermissionToModule } = useCurrentUserContext<UserInterface>();
+  if (!hasPermissionToModule({ module: Modules.User, action: Action.Update, data: props.user })) return null;
+
+  return <UserResentInvitationEmailInternal {...props} />;
+}

package/src/features/user/components/forms/UserSelector.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { CircleX, RefreshCwIcon, SearchIcon, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever, useDebounce } from "../../../../hooks";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Command,
+  CommandItem,
+  CommandList,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../../../shadcnui";
+import { UserInterface, UserService } from "../../data";
+import { UserAvatar } from "../widgets";
+
+type UserSelectorProps = {
+  id: string;
+  form: any;
+  label?: string;
+  placeholder?: string;
+  onChange?: (user?: UserInterface) => void;
+  isRequired?: boolean;
+};
+
+export function UserSelector({ id, form, label, placeholder, onChange, isRequired = false }: UserSelectorProps) {
+  const t = useTranslations();
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  const searchTermRef = useRef<string>("");
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+
+  const data: DataListRetriever<UserInterface> = useDataListRetriever({
+    retriever: (params) => {
+      return UserService.findMany(params);
+    },
+    retrieverParams: {},
+    module: Modules.User,
+  });
+
+  const search = useCallback(
+    async (searchedTerm: string) => {
+      try {
+        if (searchedTerm === searchTermRef.current) return;
+        setIsSearching(true);
+        searchTermRef.current = searchedTerm;
+        await data.search(searchedTerm);
+      } finally {
+        setIsSearching(false);
+      }
+    },
+    [searchTermRef, data],
+  );
+
+  const updateSearchTerm = useDebounce(search, 500);
+
+  useEffect(() => {
+    setIsSearching(true);
+    updateSearchTerm(searchTerm);
+  }, [updateSearchTerm, searchTerm]);
+
+  const setUser = (user?: UserInterface) => {
+    if (onChange) onChange(user);
+    if (!user) {
+      form.setValue(id, undefined);
+      setOpen(false);
+      return;
+    }
+
+    form.setValue(id, { id: user.id, name: user.name, avatar: user.avatar });
+    setOpen(false);
+
+    setTimeout(() => {
+      setOpen(false);
+    }, 0);
+  };
+
+  return (
+    <div className="flex w-full flex-col">
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => (
+          <FormItem className={`${label ? "mb-5" : "mb-1"}`}>
+            {label && (
+              <FormLabel className="flex items-center">
+                {label}
+                {isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
+              </FormLabel>
+            )}
+            <FormControl>
+              <Popover open={open} onOpenChange={setOpen} modal={true}>
+                <div className="flex w-full flex-row items-center justify-between">
+                  <PopoverTrigger className="w-full">
+                    <div className="flex w-full flex-row items-center justify-start rounded-md">
+                      {field.value ? (
+                        <>
+                          <div className="flex w-full flex-row items-center justify-start rounded-md border p-2">
+                            <div className="*:ring-border *:ring-1">
+                              <Avatar className={`mr-2 h-6 w-6`}>
+                                <AvatarImage src={field.value?.avatar} />
+                                <AvatarFallback>
+                                  {field.value?.name
+                                    ? field.value?.name.split(" ").map((name: string) => name.charAt(0).toUpperCase())
+                                    : "X"}
+                                </AvatarFallback>
+                              </Avatar>
+                            </div>
+                            <span className="">{field.value?.name ?? ""}</span>
+                          </div>
+                        </>
+                      ) : (
+                        <div className="text-muted-foreground mr-7 flex h-10 w-full flex-row items-center justify-start rounded-md border p-2 text-sm">
+                          {placeholder ?? t(`generic.search.placeholder`, { type: t(`types.users`, { count: 1 }) })}
+                        </div>
+                      )}
+                    </div>
+                  </PopoverTrigger>
+                  {field.value && (
+                    <CircleX
+                      className="text-muted hover:text-destructive ml-2 h-6 w-6 cursor-pointer"
+                      onClick={() => setUser()}
+                    />
+                  )}
+                </div>
+                <PopoverContent>
+                  <Command shouldFilter={false}>
+                    <div className="relative mb-2 w-full">
+                      <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+                      <Input
+                        placeholder={t(`generic.search.placeholder`, { type: t(`types.users`, { count: 1 }) })}
+                        type="text"
+                        className="w-full pr-8 pl-8"
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        value={searchTerm}
+                      />
+                      {isSearching ? (
+                        <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+                      ) : searchTermRef.current ? (
+                        <XIcon
+                          className={`absolute top-2.5 right-2.5 h-4 w-4 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
+                          onClick={() => {
+                            setSearchTerm("");
+                            search("");
+                          }}
+                        />
+                      ) : (
+                        <></>
+                      )}
+                    </div>
+                    <CommandList>
+                      {data.data &&
+                        data.data.length > 0 &&
+                        (data.data as UserInterface[]).map((user: UserInterface) => (
+                          <CommandItem className="cursor-pointer" key={user.id} onSelect={() => setUser(user)}>
+                            <UserAvatar user={user} className={`mr-2 h-4 w-4`} />
+                            <span className="">{user.name}</span>
+                          </CommandItem>
+                        ))}
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

package/src/features/user/components/forms/index.ts

@@ -0,0 +1,8 @@
+export * from "./RoleUserAdd";
+export * from "./UserAvatarEditor";
+export * from "./UserDeleter";
+export * from "./UserEditor";
+export * from "./UserMultiSelect";
+export * from "./UserReactivator";
+export * from "./UserResentInvitationEmail";
+export * from "./UserSelector";

package/src/features/user/components/index.ts

@@ -1,2 +1,5 @@
+export * from "./containers";
+export * from "./details";
+export * from "./forms";
 export * from "./lists";
 export * from "./widgets";

package/src/features/user/components/lists/AdminUsersList.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ContentListTable } from "../../../../components";
+import { useCompanyContext } from "../../../../contexts";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { CompanyInterface } from "../../../company";
+import { UserFields, UserInterface, UserService } from "../../data";
+import { UserEditor } from "../forms";
+
+type AdminUsersListProps = {
+  company: CompanyInterface;
+};
+
+function AdminUsersListInternal({ company }: AdminUsersListProps) {
+  const t = useTranslations();
+
+  const data: DataListRetriever<UserInterface> = useDataListRetriever({
+    retriever: (params) => UserService.findManyForAmin(params),
+    retrieverParams: { companyId: company.id },
+    module: Modules.User,
+  });
+
+  return (
+    <ContentListTable
+      title={t(`types.users`, { count: 2 })}
+      data={data}
+      fields={[UserFields.name, UserFields.email, UserFields.createdAt]}
+      tableGeneratorType={Modules.User}
+      functions={<UserEditor propagateChanges={data.refresh} adminCreated />}
+    />
+  );
+}
+
+export function AdminUsersList() {
+  const { company } = useCompanyContext();
+  if (!company) return null;
+
+  return <AdminUsersListInternal company={company} />;
+}

package/src/features/user/components/lists/CompanyUsersList.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ReactNode, useEffect } from "react";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { useCurrentUserContext } from "../../contexts";
+import { UserFields, UserInterface, UserService } from "../../data";
+import { UserEditor } from "../forms";
+
+type CompanyUsersListProps = {
+  isDeleted?: boolean;
+};
+
+export function CompanyUsersList({ isDeleted }: CompanyUsersListProps) {
+  const { company } = useCurrentUserContext<UserInterface>();
+  const t = useTranslations();
+
+  const data: DataListRetriever<UserInterface> = useDataListRetriever({
+    ready: !!company,
+    retriever: (params) => UserService.findAllUsers(params),
+    retrieverParams: { companyId: company?.id, isDeleted: isDeleted },
+    module: Modules.User,
+  }) as DataListRetriever<UserInterface>;
+
+  useEffect(() => {
+    if (company) data.setReady(true);
+  }, [company]);
+
+  const functions: ReactNode[] = [
+    isDeleted ? undefined : <UserEditor key="create-user" propagateChanges={data.refresh} />,
+  ];
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[UserFields.name, UserFields.email]}
+      tableGeneratorType={Modules.User}
+      functions={functions}
+      title={t(`types.users`, { count: 2 })}
+    />
+  );
+}