@carlonicora/nextjs-jsonapi 1.0.3 → 1.0.5

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { Link } from "../../../../shadcnui";
+import { ContentInterface } from "../../../content";
+import { UserInterface } from "../../data";
+import { UserAvatar } from "../widgets";
+
+type ContributorsListProps = {
+  content: ContentInterface;
+};
+
+export function ContributorsList({ content }: ContributorsListProps) {
+  const generateUrl = usePageUrlGenerator();
+
+  return (
+    <div className="flex flex-row items-center">
+      <Link
+        key={content.author.id}
+        href={generateUrl({ page: Modules.User, id: content.author.id })}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <UserAvatar user={content.author} className="mr-1 h-6 w-6" />
+      </Link>
+      <div className="flex flex-row-reverse justify-end -space-x-1 space-x-reverse">
+        {content.editors
+          .filter((editor: UserInterface) => editor.id !== content.author.id)
+          .map((editor: UserInterface) => (
+            <Link
+              key={editor.id}
+              href={generateUrl({ page: Modules.User, id: editor.id })}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <UserAvatar user={editor} className="h-5 w-5" />
+            </Link>
+          ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { UserFields, UserInterface, UserService } from "../../data";
+
+type RelevantUsersListProps = {
+  id: string;
+};
+
+export function RelevantUsersList({ id }: RelevantUsersListProps) {
+  const t = useTranslations();
+
+  const data: DataListRetriever<UserInterface> = useDataListRetriever({
+    module: Modules.User,
+    retriever: (params) => UserService.findRelevant(params),
+    retrieverParams: { id: id },
+  }) as DataListRetriever<UserInterface>;
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[UserFields.name, UserFields.email, UserFields.relevance]}
+      tableGeneratorType={Modules.User}
+      title={t(`generic.relevant_users`)}
+    />
+  );
+}

package/src/features/user/components/lists/RoleUsersList.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 { RoleInterface } from "../../../role";
+import { UserFields, UserInterface, UserService } from "../../data";
+
+type RoleUsersListProps = {
+  role: RoleInterface;
+};
+
+export function RoleUsersList({ role }: RoleUsersListProps) {
+  const t = useTranslations();
+
+  const data: DataListRetriever<UserInterface> = useDataListRetriever({
+    retriever: (params) => UserService.findAllUsersByRole(params),
+    retrieverParams: { roleId: role.id },
+    module: Modules.User,
+  }) as DataListRetriever<UserInterface>;
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[UserFields.name, UserFields.email]}
+      tableGeneratorType={Modules.User}
+      title={t(`types.users`, { count: 2 })}
+    />
+  );
+}

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

@@ -0,0 +1,53 @@
+"use client";
+
+import React from "react";
+import { DataListRetriever } from "../../../../hooks";
+import { CommandItem } from "../../../../shadcnui";
+import { UserInterface } from "../../data";
+import { UserAvatar } from "../widgets";
+
+type UserListInAddProps = {
+  data: DataListRetriever<UserInterface>;
+  existingUsers: UserInterface[] | null;
+  setSelectedUser: (user: UserInterface) => void;
+  setLevelOpen?: (open: boolean) => void;
+};
+
+export function UserListInAdd({ data, existingUsers, setSelectedUser, setLevelOpen }: UserListInAddProps) {
+  return (
+    <>
+      {data.data !== undefined &&
+        (data.data as UserInterface[])
+          .filter(
+            (user: UserInterface) =>
+              existingUsers && !existingUsers.find((existingUser: UserInterface) => existingUser.id === user.id),
+          )
+          .map((user: UserInterface) => {
+            return (
+              <React.Fragment key={user.id}>
+                <CommandItem
+                  className="cursor-pointer"
+                  key={user.id}
+                  onClick={(e) => {
+                    setSelectedUser(user);
+                    setLevelOpen?.(true);
+                  }}
+                  onSelect={(e) => {
+                    setSelectedUser(user);
+                    setLevelOpen?.(true);
+                  }}
+                >
+                  <div className="flex w-full flex-row items-center justify-between px-4 py-1">
+                    <UserAvatar user={user} />
+                    <div className="ml-5 flex w-full flex-col">
+                      <div className="text-sm font-medium">{user.name}</div>
+                      <div className="text-xs font-normal">{user.email}</div>
+                    </div>
+                  </div>
+                </CommandItem>
+              </React.Fragment>
+            );
+          })}
+    </>
+  );
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ReactElement } from "react";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever } from "../../../../hooks";
+import { UserFields, UserInterface } from "../../data";
+
+type UsersListProps = {
+  data: DataListRetriever<UserInterface>;
+  optionComponents?: ReactElement<any>[];
+  removeFunction?: (user: UserInterface) => Promise<void>;
+  hideOptions?: boolean;
+  showRelevance?: boolean;
+  restrictToJoinRequests?: boolean;
+};
+
+export function UsersList({ data, optionComponents, removeFunction, hideOptions, showRelevance }: UsersListProps) {
+  const t = useTranslations();
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[UserFields.name, UserFields.email]}
+      tableGeneratorType={Modules.User}
+      title={t(`types.users`, { count: 2 })}
+    />
+  );
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ContentListTable } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { UserFields, UserInterface, UserService } from "../../data";
+
+type UsersListByContentIdsProps = {
+  contentIds: string[];
+};
+
+export function UsersListByContentIds({ contentIds }: UsersListByContentIdsProps) {
+  const t = useTranslations();
+
+  const data: DataListRetriever<UserInterface> = useDataListRetriever({
+    module: Modules.User,
+    retriever: (params) => UserService.findManyByContentIds(params),
+    retrieverParams: { contentIds: contentIds },
+  });
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[UserFields.name, UserFields.email]}
+      tableGeneratorType={Modules.User}
+      title={t(`generic.relevant_users`)}
+    />
+  );
+}

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

@@ -0,0 +1,8 @@
+export * from "./AdminUsersList";
+export * from "./CompanyUsersList";
+export * from "./ContributorsList";
+export * from "./RelevantUsersList";
+export * from "./RoleUsersList";
+export * from "./UserListInAdd";
+export * from "./UsersList";
+export * from "./UsersListByContentIds";

package/src/features/user/components/widgets/UserAvatar.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Link,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../../../shadcnui";
+import { cn } from "../../../../utils";
+import { UserInterface } from "../../data";
+
+type UserAvatarProps = {
+  user: UserInterface;
+  className?: string;
+  showFull?: boolean;
+  showLink?: boolean;
+};
+
+export function UserAvatar({ user, className, showFull, showLink }: UserAvatarProps) {
+  const generateUrl = usePageUrlGenerator();
+
+  const getInitial = (param?: string) => {
+    if (!param) return "";
+    return param[0].toUpperCase();
+  };
+
+  const getInitials = (name: string) => {
+    const words = name.split(" ");
+    const initials =
+      words.length > 1 ? getInitial(words[0][0]) + getInitial(words[words.length - 1][0]) : getInitial(words[0][0]);
+
+    return initials ?? "";
+  };
+
+  const getAvatar = () => {
+    return (
+      <div className="*:ring-border *:ring-1">
+        <Avatar className={`h-6 w-6 ${className}`}>
+          <AvatarImage className="object-cover" src={user?.avatar} />
+          <AvatarFallback>{getInitials(user.name)}</AvatarFallback>
+        </Avatar>
+      </div>
+    );
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        {showLink === false ? (
+          // If showLink is explicitly false, never show a link
+          showFull ? (
+            <div className={cn(`mb-2 flex w-full flex-row items-center justify-start gap-x-2 text-sm`, className)}>
+              {getAvatar()}
+              {user.name}
+            </div>
+          ) : (
+            getAvatar()
+          )
+        ) : showFull ? (
+          <Link
+            href={generateUrl({ page: Modules.User, id: user.id })}
+            className={cn(`mb-2 flex w-full flex-row items-center justify-start gap-x-2 text-sm`, className)}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex w-full flex-row items-center gap-x-2">
+              {getAvatar()}
+              {user.name}
+            </div>
+          </Link>
+        ) : showLink ? (
+          <Link href={generateUrl({ page: Modules.User, id: user.id })} className={className}>
+            {getAvatar()}
+          </Link>
+        ) : (
+          getAvatar()
+        )}
+      </TooltipTrigger>
+      <TooltipContent>{user.name}</TooltipContent>
+    </Tooltip>
+  );
+}

package/src/features/user/components/widgets/UserAvatarList.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { Link } from "../../../../shadcnui";
+import { UserInterface } from "../../data";
+import { UserAvatar } from "./UserAvatar";
+
+type UserAvatarListProps = {
+  users: UserInterface[];
+};
+
+export function UserAvatarList({ users }: UserAvatarListProps) {
+  const generateUrl = usePageUrlGenerator();
+
+  return (
+    <div className="flex flex-row items-center">
+      <div className="flex flex-row-reverse justify-end -space-x-1 space-x-reverse">
+        {users.map((user: UserInterface) => (
+          <Link
+            key={user.id}
+            href={generateUrl({ page: Modules.User, id: user.id })}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <UserAvatar user={user} className="h-5 w-5" />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/features/user/components/widgets/UserSearchPopover.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { RefreshCwIcon, SearchIcon, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode, useEffect, useState } from "react";
+import {
+  Command,
+  CommandItem,
+  CommandList,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../../../shadcnui";
+import { useUserSearch } from "../../hooks";
+import { UserAvatar } from "./UserAvatar";
+
+type UserSearchPopoverProps = {
+  children: ReactNode;
+  onSelect: (userId: string) => void;
+  align?: "start" | "center" | "end";
+  className?: string;
+};
+
+export const UserSearchPopover = ({ children, onSelect, align = "start", className }: UserSearchPopoverProps) => {
+  const t = useTranslations();
+  const [isOpen, setIsOpen] = useState(false);
+  const { users, searchQuery, setSearchQuery, isLoading, loadUsers, clearSearch } = useUserSearch();
+
+  useEffect(() => {
+    if (isOpen && users.length === 0 && !searchQuery) {
+      loadUsers("");
+    }
+  }, [isOpen, users.length, searchQuery, loadUsers]);
+
+  const handleSelectUser = (userId: string) => {
+    onSelect(userId);
+    setIsOpen(false);
+    clearSearch();
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent align={align} onClick={(e) => e.stopPropagation()} className={className ?? "w-80"}>
+        <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) => setSearchQuery(e.target.value)}
+              value={searchQuery}
+              onClick={(e) => e.stopPropagation()}
+            />
+            {isLoading ? (
+              <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+            ) : searchQuery ? (
+              <XIcon
+                className="text-muted-foreground hover:text-foreground absolute top-2.5 right-2.5 h-4 w-4 cursor-pointer"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  clearSearch();
+                }}
+              />
+            ) : null}
+          </div>
+          <CommandList>
+            {users.length > 0 ? (
+              users.map((user) => (
+                <CommandItem key={user.id} className="cursor-pointer" onSelect={() => handleSelectUser(user.id)}>
+                  <UserAvatar user={user} className="mr-2 h-4 w-4" showLink={false} />
+                  <span>{user.name}</span>
+                </CommandItem>
+              ))
+            ) : (
+              <div className="text-muted-foreground py-6 text-center text-sm">
+                {isLoading
+                  ? t(`generic.loading`)
+                  : t(`generic.search.no_results`, { type: t(`types.users`, { count: 1 }) })}
+              </div>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};

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

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

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

@@ -0,0 +1,156 @@
+"use client";
+
+import { getCookie } from "cookies-next";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { usePathname } from "next/navigation";
+import React, { createContext, useContext, useEffect } from "react";
+import { Modules, rehydrate } from "../../../core";
+import { Action, checkPermissions, ModuleWithPermissions } from "../../../permissions";
+import { getRoleId } from "../../../roles";
+import { CompanyInterface } from "../../company";
+import { FeatureInterface } from "../../feature";
+import { RoleInterface } from "../../role";
+import { UserInterface } from "../data";
+
+export interface CurrentUserContextType<T extends UserInterface = UserInterface> {
+  currentUser: T | null;
+  company: CompanyInterface | null;
+  setUser: (user?: T) => void;
+  hasPermissionToModule: <M extends ModuleWithPermissions>(params: {
+    module: M;
+    action: Action;
+    data?: any;
+  }) => boolean;
+  hasPermissionToModules: <M extends ModuleWithPermissions>(params: {
+    modules: M[];
+    action: Action;
+    data?: any;
+  }) => boolean;
+  hasPermissionToPath: (path: string) => boolean;
+  hasAccesToFeature: (featureIdentifier: string) => boolean;
+  matchUrlToModule: (prarms?: { path: string }) => ModuleWithPermissions | undefined;
+  hasRole: (roleId: string) => boolean;
+}
+
+const userAtom = atomWithStorage("user", null);
+
+const CurrentUserContext = createContext<CurrentUserContextType | undefined>(undefined);
+
+export const CurrentUserProvider = ({ children }: { children: React.ReactNode }) => {
+  const path = usePathname();
+
+  const [dehydratedUser, setDehydratedUser] = useAtom(userAtom);
+
+  useEffect(() => {
+    const token = getCookie("token");
+    if (!token && dehydratedUser) setDehydratedUser(null);
+  }, [dehydratedUser, setDehydratedUser]);
+
+  const matchUrlToModule = (params?: { path: string }): ModuleWithPermissions | undefined => {
+    const moduleKeys = Object.getOwnPropertyNames(Modules).filter(
+      (key) => key !== "prototype" && key !== "_factory" && key !== "length" && key !== "name",
+    );
+
+    const matchedModuleKey = moduleKeys.find((key) => {
+      const descriptor = Object.getOwnPropertyDescriptor(Modules, key);
+
+      if (!descriptor?.get) return false;
+
+      const selectedModule = descriptor.get.call(Modules);
+
+      return path.toLowerCase().startsWith(selectedModule.pageUrl?.toLowerCase());
+    });
+
+    if (!matchedModuleKey) return undefined;
+
+    const descriptor = Object.getOwnPropertyDescriptor(Modules, matchedModuleKey);
+    return descriptor?.get?.call(Modules);
+  };
+
+  const currentUser = dehydratedUser ? rehydrate<UserInterface>(Modules.User, dehydratedUser) : null;
+
+  const company = currentUser?.company ?? null;
+
+  const setUser = (user?: UserInterface): void => {
+    if (user) setDehydratedUser(user.dehydrate() as any);
+    else setDehydratedUser(null);
+  };
+
+  const hasRole = (roleId: string): boolean => {
+    if (!currentUser) return false;
+
+    return !!currentUser.roles?.some((userRole: RoleInterface) => userRole.id === roleId);
+  };
+
+  const hasAccesToFeature = (featureIdentifier: string): boolean => {
+    if (hasRole(getRoleId().Administrator)) return true;
+    if (!company) return false;
+
+    return company.features.some((feature: FeatureInterface) => feature.id === featureIdentifier);
+  };
+
+  function hasPermissionToModule<M extends ModuleWithPermissions>(params: {
+    module: M;
+    action: Action;
+    data?: M extends ModuleWithPermissions ? any : never;
+  }): boolean {
+    if (!currentUser) return false;
+
+    if (!!params.module.feature && !hasAccesToFeature(params.module.feature)) return false;
+
+    return checkPermissions({ module: params.module, action: params.action, data: params.data, user: currentUser });
+  }
+
+  function hasPermissionToModules<M extends ModuleWithPermissions>(params: {
+    modules: M[];
+    action: Action;
+    data?: M extends ModuleWithPermissions ? any : never;
+  }): boolean {
+    if (!currentUser) return false;
+
+    if (!params.modules.every((module) => !module.feature || hasAccesToFeature(module.feature))) return false;
+
+    return params.modules.every((module) =>
+      checkPermissions({ module: module, action: params.action, data: params.data, user: currentUser }),
+    );
+  }
+
+  function hasPermissionToPath(path: string): boolean {
+    if (!currentUser) return false;
+    if (path === "#" || path === "/") return true;
+
+    const selectedModule = matchUrlToModule({ path: path });
+    if (!selectedModule) return true;
+
+    const response = hasPermissionToModule({ module: selectedModule, action: Action.Read });
+
+    return response;
+  }
+
+  return (
+    <CurrentUserContext.Provider
+      value={{
+        currentUser: currentUser,
+        company: company,
+        setUser: setUser,
+        hasPermissionToModule: hasPermissionToModule,
+        hasPermissionToModules: hasPermissionToModules,
+        hasPermissionToPath: hasPermissionToPath,
+        hasAccesToFeature: hasAccesToFeature,
+        matchUrlToModule: matchUrlToModule,
+        hasRole: hasRole,
+      }}
+    >
+      {children}
+    </CurrentUserContext.Provider>
+  );
+};
+
+export function useCurrentUserContext<T extends UserInterface = UserInterface>(): CurrentUserContextType<T> {
+  const context = useContext(CurrentUserContext);
+  if (context === undefined) {
+    throw new Error("useCurrentUserContext must be used within a UserProvider");
+  }
+  return context as unknown as CurrentUserContextType<T>;
+}