@greatapps/common 1.1.258 → 1.1.260

package/src/components/layouts/UsersSelectorPopover.tsx

@@ -1,238 +1,238 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { IconPlus, IconSettings, IconUser, IconUsers } from '@tabler/icons-react';
-import { UserAvatar } from "../ui/data-display/UserAvatar";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
-import { Button } from "../ui/buttons/Button";
-import {
-  Command,
-  CommandEmpty,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "../ui/overlay/Command";
-import { Checkbox } from "../ui/form/Checkbox";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-import { cn } from "../../infra/utils/clsx";
-import { useListProjectUsers } from "../../modules/projects/hooks/list-project-users.hook";
-import { useListAllAccountUsers } from "../../modules/projects/hooks/list-all-account-users.hook";
-import { useAddProjectUser } from "../../modules/projects/hooks/add-project-user.hook";
-import { useRemoveProjectUser } from "../../modules/projects/hooks/remove-project-user.hook";
-import { useWhitelabelUrls } from "../../providers/whitelabel.provider";
-
-export interface UsersSelectorPopoverProps {
-  projectId?: number;
-  side?: "top" | "bottom" | "left" | "right";
-  align?: "start" | "center" | "end";
-  contentClassName?: string;
-}
-
-function UserItemSkeleton() {
-  return (
-    <div className="flex items-center justify-between px-2 py-1.5 gap-2">
-      <div className="flex items-center gap-2 flex-1">
-        <div className="skeleton size-8 rounded-full shrink-0" />
-        <div className="skeleton h-3.5 w-28 rounded" />
-      </div>
-      <div className="skeleton size-4 rounded shrink-0" />
-    </div>
-  );
-}
-
-export function UsersSelectorPopover({
-  projectId,
-  side,
-  align,
-  contentClassName,
-}: UsersSelectorPopoverProps) {
-  const { accountsUrl } = useWhitelabelUrls();
-  const [open, setOpen] = useState(false);
-  const [hoveredId, setHoveredId] = useState<number | null>(null);
-  const [searchInput, setSearchInput] = useState("");
-  const [search, setSearch] = useState("");
-
-  const id = projectId ?? 0;
-
-  useEffect(() => {
-    const timer = setTimeout(() => setSearch(searchInput), 300);
-    return () => clearTimeout(timer);
-  }, [searchInput]);
-
-  const accountUsers = useListAllAccountUsers(search, id || undefined);
-  const projectUsers = useListProjectUsers(id, "");
-  const addMutation = useAddProjectUser(id);
-  const removeMutation = useRemoveProjectUser(id);
-
-  const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];
-  const isLoading = accountUsers.isLoading;
-  const isFetchingMore = accountUsers.isFetchingNextPage;
-  const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;
-
-  const toggleUser = (userId: number, inProject: boolean, removable: boolean) => {
-    if (inProject) {
-      if (!removable) return;
-      removeMutation.mutate(userId);
-    } else {
-      addMutation.mutate(userId);
-    }
-  };
-
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const target = e.currentTarget;
-    const nearBottom =
-      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
-    if (!nearBottom) return;
-    if (accountUsers.hasNextPage && !accountUsers.isFetchingNextPage) {
-      accountUsers.fetchNextPage();
-    }
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger className="cursor-pointer">
-        <div className="flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950">
-          <span className="paragraph-small-semibold">{totalInProject}</span>
-          <IconUser size={16} />
-        </div>
-      </PopoverTrigger>
-
-      <PopoverContent
-        className={cn(
-          "absolute right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200",
-          contentClassName,
-        )}
-        side={side}
-        align={align}
-        sideOffset={8}
-      >
-        <div className="flex flex-col p-3 gap-2">
-          <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">Usuários</span>
-            <div className="flex items-center gap-1.5">
-              <Button
-                variant="secondary"
-                className="h-8 paragraph-small-semibold text-gray-950"
-                onClick={() => {
-                  window.location.href = `${accountsUrl}/my-teams?createNew=true`;
-                }}
-              >
-                <IconPlus size={16} />
-                Adicionar
-              </Button>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="secondary"
-                    className="p-0 size-8"
-                    onClick={() => {
-                      window.location.href = `${accountsUrl}/my-teams`;
-                    }}
-                  >
-                    <IconSettings size={18} />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent className="z-[1002]">
-                  Visualizar todos usuários
-                </TooltipContent>
-              </Tooltip>
-            </div>
-          </div>
-
-          <Command shouldFilter={false} className="gap-2" value="">
-            <CommandInput
-              placeholder="Busque aqui"
-              value={searchInput}
-              onValueChange={setSearchInput}
-            />
-            <CommandList
-              className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]"
-              onScroll={handleScroll}
-            >
-              {isLoading ? (
-                <>
-                  <UserItemSkeleton />
-                  <UserItemSkeleton />
-                  <UserItemSkeleton />
-                </>
-              ) : allUsers.length === 0 ? (
-                <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
-                  <IconUsers size={28} className="text-gray-300" />
-                  <span className="paragraph-small-medium text-center text-gray-500">
-                    Nenhum usuário encontrado.
-                  </span>
-                </div>
-              ) : (
-                <>
-                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
-                  {allUsers.map((user) => {
-                    const inProject = user.in_project ?? false;
-                    const removable =
-                      inProject &&
-                      user.profile !== "owner" &&
-                      user.profile !== "admin";
-                    const interactive = !inProject || removable;
-
-                    return (
-                      <CommandItem
-                        key={user.id}
-                        value={user.name || String(user.id)}
-                        autoFocus={false}
-                        onPointerEnter={() => setHoveredId(user.id)}
-                        onPointerLeave={() => setHoveredId(null)}
-                        onFocus={() => setHoveredId(user.id)}
-                        onBlur={() => setHoveredId(null)}
-                        onSelect={() => toggleUser(user.id, inProject, removable)}
-                        className={interactive ? "cursor-pointer" : "cursor-default"}
-                      >
-                        <div className="flex items-center justify-between w-full">
-                          <div className="flex items-center gap-2 min-w-0">
-                            <UserAvatar
-                              photo={user.photo}
-                              name={user.name ?? undefined}
-                              size={32}
-                            />
-                            <span className="truncate">{user.name}</span>
-                          </div>
-                          <Tooltip open={interactive && hoveredId === user.id}>
-                            <TooltipTrigger
-                              onClick={(e) => e.stopPropagation()}
-                              onPointerDown={(e) => e.stopPropagation()}
-                            >
-                              <Checkbox
-                                checked={inProject}
-                                disabled={!interactive}
-                                onCheckedChange={() =>
-                                  toggleUser(user.id, inProject, removable)
-                                }
-                                className={cn(
-                                  interactive && hoveredId === user.id
-                                    ? "border-gray-950"
-                                    : "",
-                                  "disabled:opacity-10",
-                                )}
-                              />
-                            </TooltipTrigger>
-                            <TooltipContent className="z-[1002]">
-                              {inProject ? "Remover do projeto" : "Adicionar ao projeto"}
-                            </TooltipContent>
-                          </Tooltip>
-                        </div>
-                      </CommandItem>
-                    );
-                  })}
-                  {isFetchingMore && (
-                    <>
-                      <UserItemSkeleton />
-                      <UserItemSkeleton />
-                    </>
-                  )}
-                </>
-              )}
-            </CommandList>
-          </Command>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
+"use client";
+
+import { useEffect, useState } from "react";
+import { IconPlus, IconSettings, IconUser, IconUsers } from '@tabler/icons-react';
+import { UserAvatar } from "../ui/data-display/UserAvatar";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
+import { Button } from "../ui/buttons/Button";
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../ui/overlay/Command";
+import { Checkbox } from "../ui/form/Checkbox";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { cn } from "../../infra/utils/clsx";
+import { useListProjectUsers } from "../../modules/projects/hooks/list-project-users.hook";
+import { useListAllAccountUsers } from "../../modules/projects/hooks/list-all-account-users.hook";
+import { useAddProjectUser } from "../../modules/projects/hooks/add-project-user.hook";
+import { useRemoveProjectUser } from "../../modules/projects/hooks/remove-project-user.hook";
+import { useWhitelabelUrls } from "../../providers/whitelabel.provider";
+
+export interface UsersSelectorPopoverProps {
+  projectId?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  contentClassName?: string;
+}
+
+function UserItemSkeleton() {
+  return (
+    <div className="flex items-center justify-between px-2 py-1.5 gap-2">
+      <div className="flex items-center gap-2 flex-1">
+        <div className="skeleton size-8 rounded-full shrink-0" />
+        <div className="skeleton h-3.5 w-28 rounded" />
+      </div>
+      <div className="skeleton size-4 rounded shrink-0" />
+    </div>
+  );
+}
+
+export function UsersSelectorPopover({
+  projectId,
+  side,
+  align,
+  contentClassName,
+}: UsersSelectorPopoverProps) {
+  const { accountsUrl } = useWhitelabelUrls();
+  const [open, setOpen] = useState(false);
+  const [hoveredId, setHoveredId] = useState<number | null>(null);
+  const [searchInput, setSearchInput] = useState("");
+  const [search, setSearch] = useState("");
+
+  const id = projectId ?? 0;
+
+  useEffect(() => {
+    const timer = setTimeout(() => setSearch(searchInput), 300);
+    return () => clearTimeout(timer);
+  }, [searchInput]);
+
+  const accountUsers = useListAllAccountUsers(search, id || undefined);
+  const projectUsers = useListProjectUsers(id, "");
+  const addMutation = useAddProjectUser(id);
+  const removeMutation = useRemoveProjectUser(id);
+
+  const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];
+  const isLoading = accountUsers.isLoading;
+  const isFetchingMore = accountUsers.isFetchingNextPage;
+  const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;
+
+  const toggleUser = (userId: number, inProject: boolean, removable: boolean) => {
+    if (inProject) {
+      if (!removable) return;
+      removeMutation.mutate(userId);
+    } else {
+      addMutation.mutate(userId);
+    }
+  };
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.currentTarget;
+    const nearBottom =
+      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
+    if (!nearBottom) return;
+    if (accountUsers.hasNextPage && !accountUsers.isFetchingNextPage) {
+      accountUsers.fetchNextPage();
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger className="cursor-pointer">
+        <div className="flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950">
+          <span className="paragraph-small-semibold">{totalInProject}</span>
+          <IconUser size={16} />
+        </div>
+      </PopoverTrigger>
+
+      <PopoverContent
+        className={cn(
+          "absolute right-0 md:right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200",
+          contentClassName,
+        )}
+        side={side}
+        align={align}
+        sideOffset={8}
+      >
+        <div className="flex flex-col p-3 gap-2">
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-semibold">Usuários</span>
+            <div className="flex items-center gap-1.5">
+              <Button
+                variant="secondary"
+                className="h-8 paragraph-small-semibold text-gray-950"
+                onClick={() => {
+                  window.location.href = `${accountsUrl}/my-teams?createNew=true`;
+                }}
+              >
+                <IconPlus size={16} />
+                Adicionar
+              </Button>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    className="p-0 size-8"
+                    onClick={() => {
+                      window.location.href = `${accountsUrl}/my-teams`;
+                    }}
+                  >
+                    <IconSettings size={18} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="z-[1002]">
+                  Visualizar todos usuários
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+
+          <Command shouldFilter={false} className="gap-2" value="">
+            <CommandInput
+              placeholder="Busque aqui"
+              value={searchInput}
+              onValueChange={setSearchInput}
+            />
+            <CommandList
+              className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]"
+              onScroll={handleScroll}
+            >
+              {isLoading ? (
+                <>
+                  <UserItemSkeleton />
+                  <UserItemSkeleton />
+                  <UserItemSkeleton />
+                </>
+              ) : allUsers.length === 0 ? (
+                <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
+                  <IconUsers size={28} className="text-gray-300" />
+                  <span className="paragraph-small-medium text-center text-gray-500">
+                    Nenhum usuário encontrado.
+                  </span>
+                </div>
+              ) : (
+                <>
+                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+                  {allUsers.map((user) => {
+                    const inProject = user.in_project ?? false;
+                    const removable =
+                      inProject &&
+                      user.profile !== "owner" &&
+                      user.profile !== "admin";
+                    const interactive = !inProject || removable;
+
+                    return (
+                      <CommandItem
+                        key={user.id}
+                        value={user.name || String(user.id)}
+                        autoFocus={false}
+                        onPointerEnter={() => setHoveredId(user.id)}
+                        onPointerLeave={() => setHoveredId(null)}
+                        onFocus={() => setHoveredId(user.id)}
+                        onBlur={() => setHoveredId(null)}
+                        onSelect={() => toggleUser(user.id, inProject, removable)}
+                        className={interactive ? "cursor-pointer" : "cursor-default"}
+                      >
+                        <div className="flex items-center justify-between w-full">
+                          <div className="flex items-center gap-2 min-w-0">
+                            <UserAvatar
+                              photo={user.photo}
+                              name={user.name ?? undefined}
+                              size={32}
+                            />
+                            <span className="truncate">{user.name}</span>
+                          </div>
+                          <Tooltip open={interactive && hoveredId === user.id}>
+                            <TooltipTrigger
+                              onClick={(e) => e.stopPropagation()}
+                              onPointerDown={(e) => e.stopPropagation()}
+                            >
+                              <Checkbox
+                                checked={inProject}
+                                disabled={!interactive}
+                                onCheckedChange={() =>
+                                  toggleUser(user.id, inProject, removable)
+                                }
+                                className={cn(
+                                  interactive && hoveredId === user.id
+                                    ? "border-gray-950"
+                                    : "",
+                                  "disabled:opacity-10",
+                                )}
+                              />
+                            </TooltipTrigger>
+                            <TooltipContent className="z-[1002]">
+                              {inProject ? "Remover do projeto" : "Adicionar ao projeto"}
+                            </TooltipContent>
+                          </Tooltip>
+                        </div>
+                      </CommandItem>
+                    );
+                  })}
+                  {isFetchingMore && (
+                    <>
+                      <UserItemSkeleton />
+                      <UserItemSkeleton />
+                    </>
+                  )}
+                </>
+              )}
+            </CommandList>
+          </Command>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}