@carlonicora/nextjs-jsonapi 1.0.3 → 1.0.5

package/src/features/user/components/details/UserDetails.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { ReactElement } from "react";
+import { AttributeElement, ContentTitle } from "../../../../components";
+import { useSharedContext } from "../../../../contexts";
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { Badge, Link } from "../../../../shadcnui";
+import { RoleInterface } from "../../../role";
+import { UserInterface } from "../../data";
+
+type UserDetailsProps = {
+  user: UserInterface;
+};
+
+export function UserDetails({ user }: UserDetailsProps) {
+  const generateUrl = usePageUrlGenerator();
+  const t = useTranslations();
+  const { title } = useSharedContext();
+
+  let roles: ReactElement<any> = <></>;
+
+  if (user.roles && user.roles.length > 0) {
+    roles = (
+      <div className="mb-4 w-full">
+        <div className="flex flex-wrap gap-2">
+          {user.roles.map((role: RoleInterface, index: number) => (
+            <Link key={role.id} href={generateUrl({ page: Modules.Role, id: role.id })}>
+              <Badge className="mr-2" variant={`default`}>
+                {t(`foundations.role.roles`, { role: role.id.replaceAll(`-`, ``) })}
+              </Badge>
+            </Link>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-y-2">
+      {user.avatar && (
+        <div className="relative aspect-auto w-full max-w-md overflow-hidden rounded-lg">
+          <Image
+            src={user.avatar}
+            alt={user.name}
+            width={800}
+            height={600}
+            className="h-auto w-full rounded-lg object-contain"
+          />
+        </div>
+      )}
+      <ContentTitle type={title.type} element={title.element} functions={title.functions} />
+      {user.isDeleted ? (
+        <div>
+          <Badge variant="destructive">{t(`foundations.user.errors.deleted`)}</Badge>
+        </div>
+      ) : (
+        <>
+          {!user.isActivated && (
+            <div>
+              <Badge variant="destructive">{t(`foundations.user.errors.inactive`)}</Badge>
+            </div>
+          )}
+        </>
+      )}
+      {roles}
+      <AttributeElement inline={true} title={t(`foundations.user.fields.title.label`)} value={user.title} />
+      <AttributeElement inline={true} title={t(`generic.fields.email.label`)} value={user.email} />
+      <AttributeElement inline={false} title={t(`foundations.user.fields.bio.label`)} value={user.bio} />
+    </div>
+  );
+}

package/src/features/user/components/details/UserIndexDetails.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Card, CardContent } from "../../../../shadcnui";
+import { useCurrentUserContext, useUserContext } from "../../contexts";
+import { UserInterface } from "../../data";
+import { UserAvatar } from "../widgets";
+
+export function UserIndexDetails() {
+  const { user } = useUserContext();
+  const { currentUser } = useCurrentUserContext<UserInterface>();
+  if (!user || !currentUser) return null;
+
+  return (
+    <div className="flex w-full flex-row gap-x-4">
+      <Card className="min-h-96 w-96 flex-shrink-0 self-start p-2">
+        <CardContent className="flex h-full flex-col gap-y-4 p-2">
+          <div className="flex w-full justify-start gap-x-4">
+            {user.avatar && <UserAvatar user={user} className="h-40 w-40" />}
+            <div className="flex flex-col justify-start gap-y-2">
+              <div className="text-primary text-2xl font-semibold">{user.name}</div>
+              <div className="text-muted-foreground text-xs">{user.bio ?? ""}</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+export * from "./UserDetails";
+export * from "./UserIndexDetails";

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

@@ -0,0 +1,93 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import {
+  CommonAssociationCommandDialog,
+  CommonAssociationTrigger,
+  triggerAssociationToast,
+  UserListInAdd,
+} from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { RoleInterface, RoleService } from "../../../role";
+import { useCurrentUserContext } from "../../contexts";
+import { UserInterface, UserService } from "../../data";
+
+type AddUserToRoleProps = {
+  role: RoleInterface;
+  refresh: () => Promise<void>;
+};
+
+function AddUserToRoleInternal({ role, refresh }: AddUserToRoleProps) {
+  const { company } = useCurrentUserContext<UserInterface>();
+  const [show, setShow] = useState<boolean>(false);
+  const [users, setUsers] = useState<UserInterface[]>([]);
+  const t = useTranslations();
+
+  const [existingUsers, setExistingUsers] = useState<UserInterface[] | null>(null);
+  useEffect(() => {
+    const fetchExistingUsers = async () => {
+      setExistingUsers(await UserService.findMany({ roleId: role.id, fetchAll: true }));
+    };
+    if (show) {
+      setExistingUsers(null);
+      fetchExistingUsers();
+    }
+  }, [show]);
+
+  const addUserToRole = async (user: UserInterface) => {
+    await RoleService.addUserToRole({
+      roleId: role.id,
+      userId: user.id,
+    });
+    setUsers(users.filter((u) => u.id !== user.id));
+
+    triggerAssociationToast({
+      t: t,
+      source: t(`types.users`, { count: 1 }),
+      destination: t(`types.roles`, { count: 1 }),
+      source_name: user.name,
+      destination_name: t(`foundations.role.roles`, { role: role.id.replaceAll(`-`, ``) }),
+    });
+
+    refresh();
+  };
+
+  const data: DataListRetriever<UserInterface> = useDataListRetriever({
+    ready: !!company && show,
+    retriever: (params) => UserService.findAllUsers(params),
+    retrieverParams: { companyId: company?.id },
+    module: Modules.User,
+  }) as DataListRetriever<UserInterface>;
+
+  useEffect(() => {
+    if (!!company && show) {
+      data.setReady(true);
+    }
+  }, [data, company, show]);
+
+  return (
+    <>
+      <CommonAssociationTrigger
+        sourceType={t(`types.users`, { count: 1 })}
+        destinationType={t(`types.roles`, { count: 1 })}
+        onTrigger={() => setShow(true)}
+      />
+      <CommonAssociationCommandDialog
+        show={show}
+        setShow={setShow}
+        data={data}
+        source={t(`types.users`, { count: 1 })}
+        destination={t(`types.roles`, { count: 1 })}
+        destinationName={t(`foundations.role.roles`, { role: role.id.replaceAll(`-`, ``) })}
+      >
+        <UserListInAdd data={data} existingUsers={existingUsers} setSelectedUser={addUserToRole} />
+      </CommonAssociationCommandDialog>
+    </>
+  );
+}
+
+export function AddUserToRole(props: AddUserToRoleProps) {
+  return <AddUserToRoleInternal {...props} />;
+}

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

@@ -0,0 +1,78 @@
+"use client";
+
+import { UploadIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { DropzoneOptions } from "react-dropzone";
+import { FileInput, FileUploader } from "../../../../components";
+import { Button } from "../../../../shadcnui";
+import { UserInterface } from "../../data";
+
+type UserAvatarEditorProps = {
+  user?: UserInterface;
+  file?: File | null;
+  setFile: (file: File | null) => void;
+  resetImage: boolean;
+  setResetImage: (reset: boolean) => void;
+};
+
+export function UserAvatarEditor({ user, file, setFile, resetImage, setResetImage }: UserAvatarEditorProps) {
+  const [files, setFiles] = useState<File[] | null>(null);
+  const t = useTranslations();
+
+  useEffect(() => {
+    if (files && files.length > 0) {
+      setResetImage(false);
+      setFile(files[0]);
+    }
+  }, [files]);
+
+  const dropzone = {
+    multiple: false,
+    maxSize: 100 * 1024 * 1024,
+    preventDropOnDocument: false,
+    accept: {
+      "application/images": [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg"],
+    },
+  } satisfies DropzoneOptions;
+
+  return (
+    <div className="flex w-40 flex-col gap-y-4">
+      <FileUploader
+        value={files}
+        onValueChange={setFiles}
+        dropzoneOptions={dropzone}
+        className="h-40 w-40 rounded-full p-0"
+      >
+        <FileInput className="bg-muted text-muted-foreground flex h-full w-full flex-col items-center justify-center">
+          {!resetImage && (file || user?.avatar) ? (
+            <Image
+              src={file ? URL.createObjectURL(file) : user?.avatar || ""}
+              alt={t(`generic.avatar`)}
+              width={200}
+              height={200}
+            />
+          ) : (
+            <UploadIcon className="my-4 h-8 w-8" />
+          )}
+        </FileInput>
+      </FileUploader>
+      {!resetImage && (file || user?.avatar) && (
+        <Button
+          className=""
+          size={`sm`}
+          variant={`outline`}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setFile(null);
+            setResetImage(true);
+          }}
+        >
+          {t(`generic.buttons.remove`)}
+        </Button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { CommonDeleter } from "../../../../components";
+import { Modules } from "../../../../core";
+import { useI18nRouter, usePageUrlGenerator } from "../../../../hooks";
+import { Action } from "../../../../permissions";
+import { getRoleId } from "../../../../roles";
+import { useCurrentUserContext } from "../../contexts";
+import { UserInterface, UserService } from "../../data";
+
+type UserDeleterProps = {
+  user: UserInterface;
+  companyId?: string;
+  onDeleted?: () => void;
+};
+
+function UserDeleterInternal({ user, onDeleted, companyId }: UserDeleterProps) {
+  const { currentUser, company } = useCurrentUserContext<UserInterface>();
+  const generateUrl = usePageUrlGenerator();
+  const router = useI18nRouter();
+  const t = useTranslations();
+
+  let cId;
+  if (currentUser?.roles.find((role) => role.id === getRoleId().Administrator) && companyId) {
+    cId = companyId;
+  } else {
+    if (!company) return;
+    cId = company.id;
+  }
+
+  return (
+    <CommonDeleter
+      type={`users`}
+      deleteFunction={() =>
+        UserService.delete({ userId: user.id, companyId: cId }).then(() =>
+          onDeleted ? onDeleted() : router.push(generateUrl({ page: Modules.User })),
+        )
+      }
+    />
+  );
+}
+
+export function UserDeleter(props: UserDeleterProps) {
+  const { hasPermissionToModule } = useCurrentUserContext<UserInterface>();
+  if (!hasPermissionToModule({ module: Modules.User, action: Action.Delete, data: props.user })) return null;
+
+  return <UserDeleterInternal {...props} />;
+}

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

@@ -0,0 +1,319 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import {
+  CommonEditorButtons,
+  CommonEditorHeader,
+  CommonEditorTrigger,
+  errorToast,
+  FormCheckbox,
+  FormInput,
+  FormPassword,
+  FormRoles,
+  FormTextarea,
+} from "../../../../components";
+import { useCompanyContext } from "../../../../contexts";
+import { Modules } from "../../../../core";
+import { useI18nRouter, usePageUrlGenerator } from "../../../../hooks";
+import { Action } from "../../../../permissions";
+import { getRoleId } from "../../../../roles";
+import { Dialog, DialogContent, DialogTrigger, Form } from "../../../../shadcnui";
+import { CompanyInterface } from "../../../company";
+import { RoleInterface, RoleService } from "../../../role";
+import { S3Interface, S3Service } from "../../../s3";
+import { useCurrentUserContext } from "../../contexts";
+import { UserInput, UserInterface, UserService } from "../../data";
+import { UserAvatarEditor } from "./UserAvatarEditor";
+import { UserDeleter } from "./UserDeleter";
+
+type UserEditorProps = {
+  user?: UserInterface;
+  propagateChanges?: (user: UserInterface) => void;
+  adminCreated?: boolean;
+  trigger?: React.ReactNode;
+  onRevalidate?: (path: string) => Promise<void>;
+};
+
+function UserEditorInternal({ user, propagateChanges, adminCreated, trigger, onRevalidate }: UserEditorProps) {
+  const {
+    company: userCompany,
+    hasPermissionToModule,
+    hasRole,
+    currentUser,
+    setUser,
+  } = useCurrentUserContext<UserInterface>();
+  const { company: companyFromContext } = useCompanyContext();
+  const generateUrl = usePageUrlGenerator();
+  const router = useI18nRouter();
+  const [open, setOpen] = useState<boolean>(false);
+  const [roles, setRoles] = useState<RoleInterface[]>([]);
+  const [file, setFile] = useState<File | null>(null);
+  const [contentType, setContentType] = useState<string | null>(null);
+  const t = useTranslations();
+  const [resetImage, setResetImage] = useState<boolean>(false);
+  const [company, setCompany] = useState<CompanyInterface | null>(companyFromContext || userCompany);
+
+  useEffect(() => {
+    if (!companyFromContext && userCompany) setCompany(userCompany);
+  }, [company]);
+
+  const formSchema = z.object({
+    id: z.uuidv4(),
+    name: z.string().min(1, { message: t(`foundations.user.fields.name.error`) }),
+    email: z.string().min(1, { message: t(`generic.fields.email.error`) }),
+    password: z.string().optional(),
+    title: z.string().optional(),
+    bio: z.string().optional(),
+    phone: z.string().optional(),
+    roleIds: z.array(z.string()).optional(),
+    sendInvitationEmail: z.boolean().optional(),
+    avatar: z.string().optional(),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      id: user?.id || v4(),
+      name: user?.name || "",
+      title: user?.title || "",
+      bio: user?.bio || "",
+      email: user?.email || "",
+      phone: user?.phone || "",
+      password: "",
+      roleIds: user?.roles.map((role: RoleInterface) => role.id) || [],
+      sendInvitationEmail: false,
+      avatar: user?.avatarUrl || "",
+    },
+  });
+
+  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values: z.infer<typeof formSchema>) => {
+    if (!user) {
+      try {
+        const existingUser = await UserService.findByEmail({ email: values.email });
+        if (existingUser) {
+          form.setError("email", {
+            type: "manual",
+            message: t(`foundations.user.errors.email_exists`),
+          });
+          errorToast({ title: t(`foundations.user.errors.email_exists`), error: "" });
+          return;
+        }
+      } catch (error) {
+        // User does not exist, proceed
+      }
+    }
+
+    if (values.avatar && contentType) {
+      const s3: S3Interface = await S3Service.getPreSignedUrl({
+        key: values.avatar,
+        contentType: contentType,
+        isPublic: true,
+      });
+
+      await fetch(s3.url, {
+        method: "PUT",
+        headers: s3.headers,
+        body: file,
+      });
+    }
+
+    const payload: UserInput = {
+      id: values.id,
+      email: values.email,
+      name: values.name,
+      title: values.title,
+      bio: values.bio,
+      phone: values.phone,
+      password: values.password,
+      avatar: resetImage ? undefined : values.avatar,
+      roleIds: values.roleIds,
+      sendInvitationEmail: values.sendInvitationEmail,
+      companyId: company!.id,
+      adminCreated: adminCreated,
+    };
+
+    try {
+      const updatedUser = user
+        ? ((await UserService.update(payload)) as UserInterface)
+        : ((await UserService.create(payload)) as UserInterface);
+
+      if (currentUser?.id === updatedUser.id) setUser(updatedUser);
+
+      if (onRevalidate) {
+        await onRevalidate(generateUrl({ page: Modules.User, id: updatedUser.id, language: `[locale]` }));
+      }
+      if (propagateChanges) {
+        propagateChanges(updatedUser);
+        setOpen(false);
+      } else {
+        router.push(generateUrl({ page: Modules.User, id: updatedUser.id }));
+      }
+    } catch (error) {
+      errorToast({ title: user ? t(`generic.errors.update`) : t(`generic.errors.create`), error });
+    }
+  };
+
+  useEffect(() => {
+    async function fetchRoles() {
+      const roles = await RoleService.findAllRoles({});
+
+      const availableRoles = roles.filter(
+        (role: RoleInterface) =>
+          role.id !== getRoleId().Administrator &&
+          (role.requiredFeature === undefined ||
+            company?.features.some((feature) => feature.id === role.requiredFeature?.id)),
+      );
+
+      setRoles(availableRoles);
+    }
+
+    if (
+      open &&
+      (company || currentUser?.roles.find((role: RoleInterface) => role.id === getRoleId().Administrator)) &&
+      roles.length === 0
+    )
+      fetchRoles();
+  }, [company, open]);
+
+  useEffect(() => {
+    if (file && company) {
+      const id = form.getValues("id");
+      const fileType = file.type;
+      let extension = "";
+
+      switch (fileType) {
+        default:
+          extension = file.type.split("/").pop() ?? "";
+          break;
+      }
+
+      const timestamp = new Date().toISOString().replace(/[-:T]/g, "").split(".")[0];
+
+      const fileUrl = `companies/${company.id}/users/${id}/${id}.${timestamp}.${extension}`;
+      form.setValue("avatar", fileUrl);
+
+      setContentType(fileType);
+    } else {
+      setContentType(null);
+    }
+  }, [file]);
+
+  const canChangeRoles =
+    !(currentUser?.id === user?.id && hasRole(getRoleId().Administrator)) &&
+    (hasPermissionToModule({ module: Modules.User, action: Action.Update }) || hasRole(getRoleId().Administrator));
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : <CommonEditorTrigger isEdit={!!user} />}
+      <DialogContent
+        className={`flex max-h-[70vh] ${canChangeRoles ? `max-w-[90vw]` : `max-w-3xl`} min-h-3xl max-h-[90vh] flex-col overflow-y-auto`}
+      >
+        <CommonEditorHeader type={t(`types.users`, { count: 1 })} name={user?.name} />
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className={`flex w-full flex-col gap-y-4`}>
+            <div className={`flex flex-row gap-x-4`}>
+              <div className={`flex w-40 flex-col justify-start gap-y-2`}>
+                <UserAvatarEditor
+                  user={user}
+                  file={file}
+                  setFile={setFile}
+                  resetImage={resetImage}
+                  setResetImage={setResetImage}
+                />
+              </div>
+              <div className={`flex w-full flex-col justify-start`}>
+                <FormInput
+                  form={form}
+                  id="name"
+                  name={t(`foundations.user.fields.name.label`)}
+                  placeholder={t(`foundations.user.fields.name.placeholder`)}
+                />
+                <FormInput
+                  form={form}
+                  id="email"
+                  name={t(`generic.fields.email.label`)}
+                  placeholder={t(`generic.fields.email.placeholder`)}
+                />
+                <FormInput
+                  form={form}
+                  id="phone"
+                  name={t(`foundations.user.fields.phone.label`)}
+                  placeholder={t(`foundations.user.fields.phone.placeholder`)}
+                />
+                <FormPassword
+                  form={form}
+                  id="password"
+                  name={t(`foundations.user.fields.password.label`)}
+                  placeholder={t(`foundations.user.fields.password.placeholder`)}
+                />
+                <FormInput
+                  form={form}
+                  id="title"
+                  name={t(`foundations.user.fields.title.label`)}
+                  placeholder={t(`foundations.user.fields.title.placeholder`)}
+                />
+                <FormTextarea
+                  form={form}
+                  id="bio"
+                  name={t(`foundations.user.fields.bio.label`)}
+                  placeholder={t(`foundations.user.fields.bio.placeholder`)}
+                  className="min-h-40"
+                />
+              </div>
+              {canChangeRoles && (
+                <div className="flex w-1/3 flex-col">
+                  {canChangeRoles && (
+                    <FormRoles form={form} id="roleIds" name={t(`types.roles`, { count: 2 })} roles={roles} />
+                  )}
+                  {!user && (
+                    <div className="flex flex-col gap-y-4">
+                      <div className="text-sm font-semibold">{t(`foundations.user.send_activation_email`)}</div>
+                      <FormCheckbox
+                        form={form}
+                        id="sendInvitationEmail"
+                        name={t(`foundations.user.send_activation_email`)}
+                      />
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className="flex justify-end gap-x-4">
+              {user && currentUser?.roles.find((role: RoleInterface) => role.id === getRoleId().Administrator) && (
+                <UserDeleter
+                  companyId={user.company?.id}
+                  user={user}
+                  onDeleted={() => {
+                    setOpen(false);
+                    if (propagateChanges) propagateChanges(user);
+                  }}
+                />
+              )}
+              <CommonEditorButtons form={form} setOpen={setOpen} isEdit={!!user} />
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function UserEditor(props: UserEditorProps) {
+  const { hasPermissionToModule } = useCurrentUserContext<UserInterface>();
+  if (
+    !hasPermissionToModule({
+      module: Modules.User,
+      action: props.user ? Action.Update : Action.Create,
+      data: props.user,
+    })
+  )
+    return null;
+
+  return <UserEditorInternal {...props} />;
+}