@carlonicora/nextjs-jsonapi 1.66.0 → 1.68.0

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

@@ -2,27 +2,16 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { 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 { EditorSheet, FormCheckbox, FormInput, FormPassword, FormRoles, FormTextarea } from "../../../../components";
 import { useCompanyContext } from "../../../../contexts";
 import { Modules } from "../../../../core";
-import { useI18nRouter, usePageUrlGenerator } from "../../../../hooks";
+import { useI18nRouter } from "../../../../hooks";
 import { Action } from "../../../../permissions";
 import { getRoleId } from "../../../../roles";
-import { Dialog, DialogContent, DialogTrigger, Form } from "../../../../shadcnui";
 import { CompanyInterface } from "../../../company/data/company.interface";
 import { RoleInterface } from "../../../role";
 import { RoleService } from "../../../role/data/role.service";
@@ -32,17 +21,30 @@ import { useCurrentUserContext } from "../../contexts";
 import { UserInput, UserInterface } from "../../data";
 import { UserService } from "../../data/user.service";
 import { UserAvatarEditor } from "./UserAvatarEditor";
-import { UserDeleter } from "./UserDeleter";
 
 type UserEditorProps = {
   user?: UserInterface;
   propagateChanges?: (user: UserInterface) => void;
   adminCreated?: boolean;
-  trigger?: React.ReactNode;
+  trigger?: ReactNode;
   onRevalidate?: (path: string) => Promise<void>;
+  forceShow?: boolean;
+  onClose?: () => void;
+  dialogOpen?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
 };
 
-function UserEditorInternal({ user, propagateChanges, adminCreated, trigger, onRevalidate }: UserEditorProps) {
+function UserEditorInternal({
+  user,
+  propagateChanges,
+  adminCreated,
+  trigger,
+  onRevalidate,
+  forceShow,
+  onClose,
+  dialogOpen,
+  onDialogOpenChange,
+}: UserEditorProps) {
   const {
     company: userCompany,
     hasPermissionToModule,
@@ -51,36 +53,77 @@ function UserEditorInternal({ user, propagateChanges, adminCreated, trigger, onR
     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 t = useTranslations();
   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(`user.fields.name.error`) }),
-    email: z.string().min(1, { message: t(`common.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(),
-  });
+  // Fetch roles when sheet opens
+  const handleDialogOpenChange = useCallback(
+    (open: boolean) => {
+      if (
+        open &&
+        (company || currentUser?.roles.find((role: RoleInterface) => role.id === getRoleId().Administrator)) &&
+        roles.length === 0
+      ) {
+        async function fetchRoles() {
+          const allRoles = await RoleService.findAllRoles({});
+          const availableRoles = allRoles.filter(
+            (role: RoleInterface) =>
+              role.id !== getRoleId().Administrator &&
+              (role.requiredFeature === undefined ||
+                company?.features.some((feature) => feature.id === role.requiredFeature?.id)),
+          );
+          setRoles(availableRoles);
+        }
+        fetchRoles();
+      }
+      onDialogOpenChange?.(open);
+    },
+    [company, currentUser, roles.length, onDialogOpenChange],
+  );
 
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
+  // Generate S3 path when file is selected
+  useEffect(() => {
+    if (file && company) {
+      const id = form.getValues("id");
+      const fileType = file.type;
+      const extension = fileType.split("/").pop() ?? "";
+      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, company]);
+
+  const formSchema = useMemo(
+    () =>
+      z.object({
+        id: z.uuidv4(),
+        name: z.string().min(1, { message: t(`user.fields.name.error`) }),
+        email: z.string().min(1, { message: t(`common.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(),
+      }),
+    [t],
+  );
+
+  const getDefaultValues = useCallback(() => {
+    return {
       id: user?.id || v4(),
       name: user?.name || "",
       title: user?.title || "",
@@ -91,215 +134,172 @@ function UserEditorInternal({ user, propagateChanges, adminCreated, trigger, onR
       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(`user.errors.email_exists`),
-          });
-          errorToast({ title: t(`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,
     };
+  }, [user]);
 
-    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(`common.errors.update`) : t(`common.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);
-    }
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
 
-    if (
-      open &&
-      (company || currentUser?.roles.find((role: RoleInterface) => role.id === getRoleId().Administrator)) &&
-      roles.length === 0
-    )
-      fetchRoles();
-  }, [company, open]);
+  const canChangeRoles =
+    !(currentUser?.id === user?.id && hasRole(getRoleId().Administrator)) &&
+    (hasPermissionToModule({ module: Modules.User, action: Action.Update }) || hasRole(getRoleId().Administrator));
 
-  useEffect(() => {
-    if (file && company) {
-      const id = form.getValues("id");
-      const fileType = file.type;
-      let extension = "";
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t(`entities.users`, { count: 1 })}
+      entityName={user?.name}
+      isEdit={!!user}
+      module={Modules.User}
+      propagateChanges={propagateChanges}
+      size="md"
+      onSubmit={async (values) => {
+        // Check for existing email on create
+        if (!user) {
+          try {
+            const existingUser = await UserService.findByEmail({ email: values.email });
+            if (existingUser) {
+              form.setError("email", {
+                type: "manual",
+                message: t(`user.errors.email_exists`),
+              });
+              throw new Error(t(`user.errors.email_exists`));
+            }
+          } catch (error) {
+            if (error instanceof Error && error.message === t(`user.errors.email_exists`)) {
+              throw error;
+            }
+            // User does not exist, proceed
+          }
+        }
 
-      switch (fileType) {
-        default:
-          extension = file.type.split("/").pop() ?? "";
-          break;
-      }
+        // Upload avatar to S3 if present
+        if (values.avatar && contentType && file) {
+          const s3: S3Interface = await S3Service.getPreSignedUrl({
+            key: values.avatar,
+            contentType: contentType,
+            isPublic: true,
+          });
 
-      const timestamp = new Date().toISOString().replace(/[-:T]/g, "").split(".")[0];
+          const response = await fetch(s3.url, {
+            method: "PUT",
+            headers: s3.headers,
+            body: file,
+          });
 
-      const fileUrl = `companies/${company.id}/users/${id}/${id}.${timestamp}.${extension}`;
-      form.setValue("avatar", fileUrl);
+          if (!response.ok) {
+            throw new Error(`S3 upload failed: ${response.status}`);
+          }
+        }
 
-      setContentType(fileType);
-    } else {
-      setContentType(null);
-    }
-  }, [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,
+        };
 
-  const canChangeRoles =
-    !(currentUser?.id === user?.id && hasRole(getRoleId().Administrator)) &&
-    (hasPermissionToModule({ module: Modules.User, action: Action.Update }) || hasRole(getRoleId().Administrator));
+        const updatedUser = user
+          ? ((await UserService.update(payload)) as UserInterface)
+          : ((await UserService.create(payload)) as UserInterface);
 
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      {trigger ? <DialogTrigger>{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(`entities.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(`user.fields.name.label`)}
-                  placeholder={t(`user.fields.name.placeholder`)}
-                />
-                <FormInput
-                  form={form}
-                  id="email"
-                  name={t(`common.fields.email.label`)}
-                  placeholder={t(`common.fields.email.placeholder`)}
-                />
-                <FormInput
-                  form={form}
-                  id="phone"
-                  name={t(`user.fields.phone.label`)}
-                  placeholder={t(`user.fields.phone.placeholder`)}
-                />
-                <FormPassword
-                  form={form}
-                  id="password"
-                  name={t(`user.fields.password.label`)}
-                  placeholder={t(`user.fields.password.placeholder`)}
-                />
-                <FormInput
-                  form={form}
-                  id="title"
-                  name={t(`user.fields.title.label`)}
-                  placeholder={t(`user.fields.title.placeholder`)}
-                />
-                <FormTextarea
-                  form={form}
-                  id="bio"
-                  name={t(`user.fields.bio.label`)}
-                  placeholder={t(`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(`entities.roles`, { count: 2 })} roles={roles} />
-                  )}
-                  {!user && (
-                    <div className="flex flex-col gap-y-4">
-                      <div className="text-sm font-semibold">{t(`user.send_activation_email`)}</div>
-                      <FormCheckbox form={form} id="sendInvitationEmail" name={t(`user.send_activation_email`)} />
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
+        if (currentUser?.id === updatedUser.id) setUser(updatedUser);
 
-            <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} />
+        return updatedUser;
+      }}
+      onRevalidate={onRevalidate}
+      onNavigate={(url) => router.push(url)}
+      onReset={() => {
+        setFile(null);
+        setContentType(null);
+        setResetImage(false);
+        setRoles([]);
+        return getDefaultValues();
+      }}
+      onClose={onClose}
+      trigger={trigger}
+      forceShow={forceShow}
+      dialogOpen={dialogOpen}
+      onDialogOpenChange={handleDialogOpenChange}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        <div className="flex w-full gap-x-4">
+          <div className="flex w-40 flex-col gap-y-4">
+            <UserAvatarEditor
+              user={user}
+              file={file}
+              setFile={setFile}
+              resetImage={resetImage}
+              setResetImage={setResetImage}
+            />
+          </div>
+          <div className="flex w-full flex-col justify-start gap-y-4">
+            <FormInput
+              form={form}
+              id="name"
+              name={t(`user.fields.name.label`)}
+              placeholder={t(`user.fields.name.placeholder`)}
+              isRequired
+            />
+            <FormInput
+              form={form}
+              id="email"
+              name={t(`common.fields.email.label`)}
+              placeholder={t(`common.fields.email.placeholder`)}
+              isRequired
+            />
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <FormInput
+                form={form}
+                id="phone"
+                name={t(`user.fields.phone.label`)}
+                placeholder={t(`user.fields.phone.placeholder`)}
+              />
+              <FormPassword
+                form={form}
+                id="password"
+                name={t(`user.fields.password.label`)}
+                placeholder={t(`user.fields.password.placeholder`)}
+              />
             </div>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
+            <FormInput
+              form={form}
+              id="title"
+              name={t(`user.fields.title.label`)}
+              placeholder={t(`user.fields.title.placeholder`)}
+            />
+            <FormTextarea
+              form={form}
+              id="bio"
+              name={t(`user.fields.bio.label`)}
+              placeholder={t(`user.fields.bio.placeholder`)}
+              className="min-h-40"
+            />
+            {canChangeRoles && (
+              <div className="flex flex-col gap-y-4">
+                <FormRoles form={form} id="roleIds" name={t(`entities.roles`, { count: 2 })} roles={roles} />
+                {!user && (
+                  <>
+                    <div className="text-sm font-semibold">{t(`user.send_activation_email`)}</div>
+                    <FormCheckbox form={form} id="sendInvitationEmail" name={t(`user.send_activation_email`)} />
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </EditorSheet>
   );
 }
 

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

@@ -12,9 +12,10 @@ import { UserEditor } from "../forms";
 
 type CompanyUsersListProps = {
   isDeleted?: boolean;
+  fullWidth?: boolean;
 };
 
-export function CompanyUsersList({ isDeleted }: CompanyUsersListProps) {
+export function CompanyUsersList({ isDeleted, fullWidth }: CompanyUsersListProps) {
   const { company } = useCurrentUserContext<UserInterface>();
   const t = useTranslations();
 
@@ -39,6 +40,7 @@ export function CompanyUsersList({ isDeleted }: CompanyUsersListProps) {
       fields={[UserFields.name, UserFields.email]}
       tableGeneratorType={Modules.User}
       functions={functions}
+      fullWidth={fullWidth}
       title={t(`entities.users`, { count: 2 })}
     />
   );

package/src/features/user/contexts/UserContext.tsx

@@ -36,14 +36,9 @@ export const UserProvider = ({ children, dehydratedUser }: UserProviderProps) =>
     const response: BreadcrumbItemData[] = [];
 
     if (hasPermissionToModule({ module: Modules.User, action: Action.Update })) {
-      response.push({
-        name: t(`common.settings`, { item: "settings" }),
-        href: generateUrl({ page: `/settings` }),
-      });
-
       response.push({
         name: t(`entities.users`, { count: 2 }),
-        href: generateUrl({ page: `/settings`, id: Modules.User.pageUrl }),
+        href: generateUrl({ page: Modules.User }),
       });
     }
 

package/src/features/user/data/user.service.ts

@@ -225,6 +225,24 @@ export class UserService extends AbstractService {
     });
   }
 
+  static async patch(params: { id: string } & Partial<Omit<UserInput, "id">>): Promise<UserInterface> {
+    return this.callApi({
+      type: Modules.User,
+      method: HttpMethod.PATCH,
+      endpoint: new EndpointCreator({ endpoint: Modules.User, id: params.id }).generate(),
+      input: params,
+    });
+  }
+
+  static async patchAvatar(params: { id: string; avatar: string }): Promise<UserInterface> {
+    return this.callApi({
+      type: Modules.User,
+      method: HttpMethod.PATCH,
+      endpoint: new EndpointCreator({ endpoint: Modules.User, id: params.id, childEndpoint: "avatar" }).generate(),
+      input: params,
+    });
+  }
+
   static async patchRate(params: UserInput): Promise<UserInterface> {
     return this.callApi({
       type: Modules.User,

package/src/features/user/data/user.ts

@@ -126,15 +126,14 @@ export class User extends AbstractApiData implements UserInterface, SearchResult
       data: {
         type: Modules.User.name,
         id: data.id,
-        attributes: {
-          name: data.name,
-        },
+        attributes: {},
         meta: {},
         relationships: {},
       },
       included: [],
     };
 
+    if (data.name !== undefined) response.data.attributes.name = data.name;
     if (data.email !== undefined) response.data.attributes.email = data.email;
     if (data.title !== undefined) response.data.attributes.title = data.title;
     if (data.bio !== undefined) response.data.attributes.bio = data.bio;
@@ -142,7 +141,7 @@ export class User extends AbstractApiData implements UserInterface, SearchResult
     if (data.password !== undefined) response.data.attributes.password = data.password;
     if (data.sendInvitationEmail) response.data.attributes.sendInvitationEmail = true;
     if (data.adminCreated) response.data.attributes.adminCreated = true;
-    if (data.avatar) response.data.attributes.avatar = data.avatar;
+    if (data.avatar !== undefined) response.data.attributes.avatar = data.avatar;
     if (data.rate !== undefined) response.data.attributes.rate = data.rate;
 
     if (data.roleIds) {