@carlonicora/nextjs-jsonapi 1.0.4 → 1.0.6

package/src/features/role/components/containers/RoleContainer.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { RoleUsersList } from "../../../user/components/lists/RoleUsersList";
+import { useRoleContext } from "../../contexts";
+import { RoleDetails } from "../details";
+
+export function RoleContainer() {
+  const { role } = useRoleContext();
+
+  if (!role) return null;
+
+  return (
+    <>
+      <RoleDetails />
+      <RoleUsersList role={role} />
+    </>
+  );
+}

package/src/features/role/components/containers/index.ts

@@ -0,0 +1 @@
+export * from "./RoleContainer";

package/src/features/role/components/details/RoleDetails.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { AttributeElement } from "../../../../components";
+import { Card, CardContent } from "../../../../shadcnui";
+import { useRoleContext } from "../../contexts";
+
+export function RoleDetails() {
+  const { role } = useRoleContext();
+  const t = useTranslations();
+
+  if (!role) return null;
+
+  return (
+    <Card className="w-full">
+      <CardContent className="p-4">
+        <AttributeElement title={t(`foundations.role.fields.description.label`)} value={role.description} />
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1 @@
+export * from "./RoleDetails";

package/src/features/role/components/forms/FormRoles.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import {
+  Checkbox,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../../../shadcnui";
+import { UserInterface } from "../../../user";
+import { useCurrentUserContext } from "../../../user/contexts";
+import { RoleInterface } from "../../data";
+
+type FormRolesProps = {
+  form: any;
+  id: string;
+  name: string;
+  roles: RoleInterface[];
+};
+
+export function FormRoles({ form, id, name, roles }: FormRolesProps) {
+  const t = useTranslations();
+  const { hasAccesToFeature } = useCurrentUserContext<UserInterface>();
+
+  return (
+    <div className="flex w-full flex-col">
+      <FormField
+        control={form.control}
+        name={id}
+        render={({ field }) => (
+          <FormItem className={`${name ? "mb-5" : "mb-1"}`}>
+            <FormControl>
+              <div>
+                <div className="text-sm font-semibold">{name}</div>
+                {roles
+                  .filter((role: RoleInterface) => role.isSelectable)
+                  .sort((a: RoleInterface, b: RoleInterface) => a.name.localeCompare(b.name))
+                  .map((role: RoleInterface) => {
+                    if (role.requiredFeature && !hasAccesToFeature(role.requiredFeature.id)) return null;
+
+                    return (
+                      <div key={role.id}>
+                        <Checkbox
+                          defaultChecked={(field.value as string[]).some((roleId: string) => roleId === role.id)}
+                          onCheckedChange={(checked) => {
+                            if (checked) {
+                              form.setValue(id, [...(field.value as string[]), role.id]);
+                            } else {
+                              form.setValue(
+                                id,
+                                (field.value as string[]).filter((roleId: string) => roleId !== role.id),
+                              );
+                            }
+                          }}
+                        />
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <FormLabel className="ml-3 font-normal">
+                              {t(`foundations.role.roles`, { role: role.id.replaceAll(`-`, ``) })}
+                            </FormLabel>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {t(`foundations.role.roles_descriptions`, { role: role.id.replaceAll(`-`, ``) })}
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                    );
+                  })}
+              </div>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+}

package/src/features/role/components/forms/RemoveUserFromRole.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import { errorToast } from "../../../../components";
+import { getRoleId } from "../../../../roles";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../../shadcnui";
+import { UserInterface, UserService } from "../../../user";
+import { RoleInterface, RoleService } from "../../data";
+
+type RemoveUserFromRoleProps = {
+  user: UserInterface;
+  role: RoleInterface;
+  refresh: () => Promise<void>;
+};
+
+export function RemoveUserFromRole({ role, user, refresh }: RemoveUserFromRoleProps) {
+  const [open, setOpen] = useState<boolean>(false);
+  const [canRemove, setCanRemove] = useState<boolean>(false);
+  const t = useTranslations();
+
+  useEffect(() => {
+    async function checkCompanyAdminDeletability(): Promise<void> {
+      const roleUsers = await UserService.findAllUsersByRole({
+        roleId: role.id,
+      });
+
+      if (roleUsers.length > 1) setCanRemove(true);
+    }
+
+    if (role.id !== getRoleId().CompanyAdministrator) {
+      setCanRemove(true);
+      return;
+    }
+
+    checkCompanyAdminDeletability();
+  }, [role]);
+
+  const remove = async () => {
+    try {
+      await RoleService.removeUserFromRole({
+        roleId: role.id,
+        userId: user.id,
+      });
+
+      setOpen(false);
+      refresh();
+    } catch (error) {
+      errorToast({ title: t(`generic.errors.error`), error: error });
+    }
+  };
+
+  const roleName = t(`foundations.role.roles`, { role: role.id.replaceAll(`-`, ``) });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          setOpen(true);
+        }}
+      >
+        <span className="hover:text-destructive cursor-pointer">{t(`foundations.role.remove_user.title`)}</span>
+      </DialogTrigger>
+      <DialogContent className={`flex max-h-[70vh] max-w-3xl flex-col overflow-y-auto`}>
+        <DialogHeader>
+          <DialogTitle>{t(`foundations.role.remove_user.title`)}</DialogTitle>
+          <DialogDescription>
+            {canRemove
+              ? t(`foundations.role.remove_user.subtitle_allowed`)
+              : t(`foundations.role.remove_user.subtitle_not_allowed`)}
+          </DialogDescription>
+        </DialogHeader>
+        {canRemove ? (
+          <>
+            {t(`foundations.role.remove_user.description_allowed`, { role: roleName, user: 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();
+                  remove();
+                }}
+                variant={"destructive"}
+              >
+                {t(`generic.buttons.confirm_delete`)}
+              </Button>
+            </div>
+          </>
+        ) : (
+          <>{t(`foundations.role.remove_user.description_not_allowed`, { role: roleName, user: user.name })}</>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/role/components/forms/UserRoleAdd.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { PlusCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { useDebounce } from "../../../../hooks";
+import {
+  Button,
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  DialogDescription,
+  DialogTitle,
+} from "../../../../shadcnui";
+import { UserInterface } from "../../../user";
+import { RoleInterface, RoleService } from "../../data";
+
+type UserRoleAddProps = {
+  user: UserInterface;
+  refresh: () => Promise<void>;
+};
+
+export function UserRoleAdd({ user, refresh }: UserRoleAddProps) {
+  const [open, setOpen] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [roles, setRoles] = useState<RoleInterface[]>([]);
+  const t = useTranslations();
+
+  const addUserToRole = async (role: RoleInterface) => {
+    await RoleService.addUserToRole({
+      roleId: role.id,
+      userId: user.id,
+    });
+    setRoles(roles.filter((u) => u.id !== role.id));
+
+    toast.message(
+      t(`generic.association.label`, {
+        source: t(`types.roles`, { count: 1 }),
+        destination: t(`types.users`, { count: 1 }),
+      }),
+      {
+        description: t(`generic.association.success`, {
+          source: t(`types.roles`, { count: 1 }),
+          destination: t(`types.users`, { count: 1 }),
+          source_name: role.name,
+          destination_name: user.name,
+        }),
+      },
+    );
+
+    refresh();
+  };
+
+  const searchRoles = useCallback(
+    async (term: string) => {
+      setRoles(
+        await RoleService.findAllRolesUserNotIn({
+          search: term,
+          userId: user.id,
+        }),
+      );
+    },
+    [searchTerm, user],
+  );
+
+  const updateSearchTerm = useDebounce(searchRoles, 500);
+
+  useEffect(() => {
+    if (open) updateSearchTerm(searchTerm);
+  }, [open, searchTerm]);
+
+  useEffect(() => {
+    if (open) searchRoles("");
+  }, [open]);
+
+  return (
+    <>
+      <Button size="sm" onClick={() => setOpen(true)}>
+        <PlusCircle className="mr-3 h-3.5 w-3.5" />
+        {t(`generic.association.label`, {
+          source: t(`types.roles`, { count: 1 }),
+          destination: t(`types.users`, { count: 1 }),
+        })}
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <DialogTitle>
+          {t(`generic.association.label`, {
+            source: t(`types.roles`, { count: 1 }),
+            destination: t(`types.users`, { count: 1 }),
+          })}
+        </DialogTitle>
+        <DialogDescription>
+          {t(`generic.association.description`, {
+            source: t(`types.roles`, { count: 1 }),
+            destination: t(`types.users`, { count: 1 }),
+            destination_name: user.name,
+          })}
+        </DialogDescription>
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder={t(`generic.search.placeholder`, { type: t(`types.roles`, { count: 1 }) })}
+            value={searchTerm}
+            onValueChange={setSearchTerm}
+            ref={inputRef}
+          />
+          <CommandList className="mt-3 h-auto max-h-96 min-h-96 max-w-full overflow-x-hidden overflow-y-auto">
+            <CommandEmpty>{t(`generic.search.no_results`, { type: t(`types.roles`, { count: 1 }) })}</CommandEmpty>
+            {roles.map((role: RoleInterface) => (
+              <CommandItem
+                className="cursor-pointer"
+                key={role.id}
+                onSelect={() => addUserToRole(role)}
+                onClick={() => addUserToRole(role)}
+              >
+                {t(`foundations.role.roles`, { role: role.id.replaceAll(`-`, ``) })}
+              </CommandItem>
+            ))}
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </>
+  );
+}

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

@@ -0,0 +1,3 @@
+export * from "./FormRoles";
+export * from "./RemoveUserFromRole";
+export * from "./UserRoleAdd";

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

@@ -0,0 +1,4 @@
+export * from "./containers";
+export * from "./details";
+export * from "./forms";
+export * from "./lists";

package/src/features/role/components/lists/RolesList.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { RoleFields, RoleInterface, RoleService } from "../../data";
+import "../../hooks/useRoleTableStructure";
+
+export function RolesList() {
+  const t = useTranslations();
+
+  const data: DataListRetriever<RoleInterface> = useDataListRetriever({
+    retriever: (params) => RoleService.findAllRoles(params),
+    retrieverParams: {},
+    module: Modules.Role,
+  });
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[RoleFields.name, RoleFields.description]}
+      tableGeneratorType={Modules.Role}
+      title={t(`types.roles`, { count: 2 })}
+    />
+  );
+}

package/src/features/role/components/lists/UserRolesList.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { UserInterface } from "../../../user";
+import { RoleFields, RoleInterface, RoleService } from "../../data";
+
+type UserRolesListProps = {
+  user: UserInterface;
+};
+
+export function UserRolesList({ user }: UserRolesListProps) {
+  const t = useTranslations();
+
+  const data: DataListRetriever<RoleInterface> = useDataListRetriever({
+    retriever: (params) => RoleService.findAllRolesByUser(params),
+    retrieverParams: { userId: user.id },
+    module: Modules.Role,
+  });
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[RoleFields.name, RoleFields.description]}
+      tableGeneratorType={Modules.Role}
+      title={t(`types.roles`, { count: 2 })}
+    />
+  );
+}

package/src/features/role/components/lists/index.ts

@@ -0,0 +1,2 @@
+export * from "./RolesList";
+export * from "./UserRolesList";

package/src/features/role/contexts/RoleContext.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { createContext, ReactNode, useContext, useState } from "react";
+import { SharedProvider } from "../../../contexts";
+import { JsonApiHydratedDataInterface, Modules, rehydrate } from "../../../core";
+import { usePageUrlGenerator } from "../../../hooks";
+import { BreadcrumbItemData } from "../../../interfaces";
+import { RoleInterface } from "../data";
+
+interface RoleContextType {
+  role: RoleInterface | undefined;
+  setRole: (value: RoleInterface | undefined) => void;
+}
+
+const RoleContext = createContext<RoleContextType | undefined>(undefined);
+
+type RoleProviderProps = {
+  children: ReactNode;
+  dehydratedRole?: JsonApiHydratedDataInterface;
+};
+
+export const RoleProvider = ({ children, dehydratedRole }: RoleProviderProps) => {
+  const generateUrl = usePageUrlGenerator();
+  const t = useTranslations();
+
+  const [role, setRole] = useState<RoleInterface | undefined>(
+    dehydratedRole ? rehydrate<RoleInterface>(Modules.Role, dehydratedRole) : undefined,
+  );
+
+  const breadcrumb = () => {
+    const response: BreadcrumbItemData[] = [];
+
+    response.push({
+      name: t(`types.roles`, { count: 2 }),
+      href: generateUrl({ page: Modules.Role }),
+    });
+
+    if (role)
+      response.push({
+        name: role.name,
+        href: generateUrl({ page: Modules.Role, id: role.id }),
+      });
+
+    return response;
+  };
+
+  const title = () => {
+    const response: any = {
+      type: t(`types.roles`, { count: role ? 1 : 2 }),
+    };
+
+    const functions: ReactNode[] = [];
+
+    if (role) {
+      response.element = role.name;
+    }
+
+    if (functions.length > 0) response.functions = functions;
+
+    return response;
+  };
+
+  return (
+    <SharedProvider value={{ breadcrumbs: breadcrumb(), title: title() }}>
+      <RoleContext.Provider
+        value={{
+          role: role,
+          setRole: setRole,
+        }}
+      >
+        {children}
+      </RoleContext.Provider>
+    </SharedProvider>
+  );
+};
+
+export const useRoleContext = (): RoleContextType => {
+  const context = useContext(RoleContext);
+  if (context === undefined) {
+    throw new Error("useRoleContext must be used within a RoleProvider");
+  }
+  return context;
+};

package/src/features/role/contexts/index.ts

@@ -0,0 +1 @@
+export * from "./RoleContext";

package/src/features/role/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useRoleTableStructure";

package/src/features/role/hooks/useRoleTableStructure.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ColumnDef, Row } from "@tanstack/react-table";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { cellDate, cellId } from "../../../components";
+import { Modules } from "../../../core";
+import { TableContent, usePageUrlGenerator, UseTableStructureHook } from "../../../hooks";
+import { Link } from "../../../shadcnui";
+import { RoleFields, RoleInterface } from "../data";
+
+export const useRoleTableStructure: UseTableStructureHook<RoleInterface, RoleFields> = (params) => {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+
+  // Memoize tableData to prevent infinite re-renders
+  const tableData = useMemo(() => {
+    return params.data.map((role: RoleInterface) => {
+      const entry: TableContent<RoleInterface> = {
+        jsonApiData: role,
+      };
+      entry[RoleFields.roleId] = role.id;
+      params.fields.forEach((field) => {
+        entry[field] = role[field as keyof RoleInterface];
+      });
+      return entry;
+    });
+  }, [params.data, params.fields]);
+
+  const fieldColumnMap: Partial<Record<RoleFields, () => any>> = {
+    [RoleFields.roleId]: () =>
+      cellId({
+        name: "roleId",
+        checkedIds: params.checkedIds,
+        toggleId: params.toggleId,
+      }),
+    [RoleFields.name]: () => ({
+      id: "name",
+      accessorKey: "name",
+      header: t(`foundations.role.fields.name.label`),
+      cell: ({ row }: { row: Row<TableContent<RoleInterface>> }) => {
+        const role = row.original.jsonApiData as RoleInterface;
+        return <Link href={generateUrl({ page: Modules.Role, id: role.id })}>{row.getValue("name")}</Link>;
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [RoleFields.description]: () => ({
+      id: "description",
+      accessorKey: "description",
+      header: t(`foundations.role.fields.description.label`),
+      cell: ({ row }: { row: Row<TableContent<RoleInterface>> }) => <>{row.getValue("description")}</>,
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [RoleFields.createdAt]: () =>
+      cellDate({
+        name: "createdAt",
+        title: t(`generic.date.create`),
+      }),
+  };
+
+  // Memoize columns to prevent infinite re-renders
+  const columns = useMemo(() => {
+    return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
+      TableContent<RoleInterface>
+    >[];
+  }, [params.fields, fieldColumnMap, t, generateUrl]);
+
+  // Memoize the return object to prevent infinite re-renders
+  return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
+};

package/src/features/s3/index.ts

@@ -1,2 +1,2 @@
-export * from "./data";
 export * from "./s3.module";
+export * from "./data";

package/src/features/user/components/containers/UserContainer.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useUserContext } from "../../contexts";
+import { UserDetails } from "../details";
+
+export function UserContainer() {
+  const { user } = useUserContext();
+  if (!user) return null;
+
+  const t = useTranslations();
+
+  return (
+    <div className="flex w-full gap-x-4">
+      <div className="w-2xl flex h-[calc(100vh-theme(spacing.20))] flex-col justify-between border-r pr-4">
+        <div className="flex h-full overflow-y-auto">
+          <UserDetails user={user} />
+        </div>
+      </div>
+      <div className="flex w-full flex-col gap-y-4"></div>
+    </div>
+  );
+}

package/src/features/user/components/containers/UserIndexContainer.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { PageContentContainer } from "../../../../components";
+import { useUserContext } from "../../contexts";
+import { UserIndexDetails } from "../details";
+
+export function UserIndexContainer() {
+  const { user } = useUserContext();
+  if (!user) return null;
+
+  return <PageContentContainer details={<UserIndexDetails />} />;
+}

package/src/features/user/components/containers/UsersListContainer.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { CompanyUsersList, Tab, TabsContainer } from "../../../../components";
+import { Modules } from "../../../../core";
+import { Action } from "../../../../permissions";
+import { useCurrentUserContext } from "../../contexts";
+import { UserInterface } from "../../data";
+
+function UsersListContainerInternal() {
+  const { hasPermissionToModule } = useCurrentUserContext<UserInterface>();
+  const t = useTranslations();
+
+  if (!hasPermissionToModule({ module: Modules.User, action: Action.Delete })) return <CompanyUsersList />;
+
+  const tabs: Tab[] = [
+    {
+      label: t(`types.users`, { count: 2 }),
+      content: <CompanyUsersList />,
+      modules: [Modules.Company],
+      action: Action.Read,
+    },
+    {
+      label: t(`foundations.user.deleted`),
+      content: <CompanyUsersList isDeleted={true} />,
+      modules: [Modules.Company],
+      action: Action.Update,
+    },
+  ];
+
+  return <TabsContainer tabs={tabs} />;
+}
+
+export function UsersListContainer() {
+  return <UsersListContainerInternal />;
+}