@greatapps/common 1.1.187 → 1.1.190

package/src/components/layouts/UsersSelectorPopover.tsx

@@ -1,294 +1,261 @@
-"use client";
-
-"use client";
-
-import { useEffect, useState } from "react";
-import { Plus, Settings, User, Users } from "lucide-react";
-import { UserAvatar } from "../ui/data-display/UserAvatar";
-import { useQueryClient, useMutation } from "@tanstack/react-query";
-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,
-  LIST_PROJECT_USERS_BASE_KEY,
-} from "../../modules/projects/hooks/list-project-users.hook";
-import {
-  useListAvailableUsers,
-  LIST_AVAILABLE_USERS_BASE_KEY,
-} from "../../modules/projects/hooks/list-available-users.hook";
-import { addProjectUserAction } from "../../modules/projects/actions/add-project-user.action";
-import { removeProjectUserAction } from "../../modules/projects/actions/remove-project-user.action";
-
-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>
-  );
-}
-
-const GAPPS_URL = process.env.NEXT_PUBLIC_GREAT_APPS ?? "";
-
-export function UsersSelectorPopover({
-  projectId,
-  side,
-  align,
-  contentClassName,
-}: UsersSelectorPopoverProps) {
-  const queryClient = useQueryClient();
-  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 projectUsers = useListProjectUsers(id, search);
-  const availableUsers = useListAvailableUsers(id, search);
-
-  const inProject = projectUsers.data?.pages.flatMap((p) => p.data) ?? [];
-  const notInProject = availableUsers.data?.pages.flatMap((p) => p.data) ?? [];
-  const isLoading = projectUsers.isLoading || availableUsers.isLoading;
-  const isFetchingMore =
-    projectUsers.isFetchingNextPage || availableUsers.isFetchingNextPage;
-  const totalInProject = projectUsers.data?.pages[0]?.total ?? inProject.length;
-
-  const invalidate = () => {
-    queryClient.invalidateQueries({
-      queryKey: LIST_PROJECT_USERS_BASE_KEY(id),
-    });
-    queryClient.invalidateQueries({
-      queryKey: LIST_AVAILABLE_USERS_BASE_KEY(id),
-    });
-  };
-
-  const addMutation = useMutation({
-    mutationFn: (userId: number) =>
-      addProjectUserAction({ projectId: id, users: [userId] }),
-    onSuccess: invalidate,
-  });
-
-  const removeMutation = useMutation({
-    mutationFn: (userId: number) =>
-      removeProjectUserAction({ projectId: id, users: [userId] }),
-    onSuccess: invalidate,
-  });
-
-  const allUsers = [
-    ...inProject.map((u) => ({
-      id: u.id_user,
-      name: u.name,
-      photo: u.photo ?? null,
-      checked: true as const,
-      removable: u.profile !== "owner" && u.profile !== "admin",
-    })),
-    ...notInProject.map((u) => ({
-      id: u.id,
-      name: u.name,
-      photo: u.photo ?? null,
-      checked: false as const,
-      removable: true,
-    })),
-  ];
-
-  const toggleUser = (id: number, checked: boolean, removable: boolean) => {
-    if (checked) {
-      if (!removable) return;
-      removeMutation.mutate(id);
-    } else {
-      addMutation.mutate(id);
-    }
-  };
-
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const target = e.currentTarget;
-    const nearBottom =
-      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
-    if (!nearBottom) return;
-    if (projectUsers.hasNextPage && !projectUsers.isFetchingNextPage) {
-      projectUsers.fetchNextPage();
-    } else if (
-      availableUsers.hasNextPage &&
-      !availableUsers.isFetchingNextPage
-    ) {
-      availableUsers.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>
-          <User 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 = `${GAPPS_URL}/my-teams?createNew=true`;
-                }}
-              >
-                <Plus size={16} />
-                Adicionar
-              </Button>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="secondary"
-                    className="p-0 size-8"
-                    onClick={() => {
-                      window.location.href = `${GAPPS_URL}/my-teams`;
-                    }}
-                  >
-                    <Settings 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">
-                  <Users size={28} className="text-gray-300" />
-                  <span className="paragraph-small-medium text-center text-gray-500">
-                    Nenhum usuário neste projeto.
-                    <br />
-                    Adicione um usuário para começar.
-                  </span>
-                </div>
-              ) : (
-                <>
-                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
-                  {allUsers.map((user) => (
-                    <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, user.checked, user.removable)
-                      }
-                      className={
-                        user.removable ? "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={user.removable && hoveredId === user.id}>
-                          <TooltipTrigger
-                            onClick={(e) => e.stopPropagation()}
-                            onPointerDown={(e) => e.stopPropagation()}
-                          >
-                            <Checkbox
-                              checked={user.checked}
-                              disabled={!user.removable}
-                              onCheckedChange={() =>
-                                toggleUser(
-                                  user.id,
-                                  user.checked,
-                                  user.removable,
-                                )
-                              }
-                              className={cn(
-                                user.removable && hoveredId === user.id
-                                  ? "border-gray-950"
-                                  : "",
-                                "disabled:opacity-10",
-                              )}
-                            />
-                          </TooltipTrigger>
-                          <TooltipContent className="z-[1002]">
-                            {user.checked
-                              ? "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 { Plus, Settings, User, Users } from "lucide-react";
+import { UserAvatar } from "../ui/data-display/UserAvatar";
+import { useQueryClient, useMutation } from "@tanstack/react-query";
+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,
+  LIST_PROJECT_USERS_BASE_KEY,
+} from "../../modules/projects/hooks/list-project-users.hook";
+import {
+  useListAllAccountUsers,
+  LIST_ALL_ACCOUNT_USERS_BASE_KEY,
+} from "../../modules/projects/hooks/list-all-account-users.hook";
+import { removeProjectUserAction } from "../../modules/projects/actions/remove-project-user.action";
+import { addProjectUserAction } from "../../modules/projects/actions/add-project-user.action";
+
+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>
+  );
+}
+
+const GAPPS_URL = process.env.NEXT_PUBLIC_GREAT_APPS ?? "";
+
+export function UsersSelectorPopover({
+  projectId,
+  side,
+  align,
+  contentClassName,
+}: UsersSelectorPopoverProps) {
+  const queryClient = useQueryClient();
+  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 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 invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(id) });
+    queryClient.invalidateQueries({ queryKey: LIST_ALL_ACCOUNT_USERS_BASE_KEY() });
+  };
+
+  const removeMutation = useMutation({
+    mutationFn: (userId: number) =>
+      removeProjectUserAction({ projectId: id, users: [userId] }),
+    onSuccess: invalidate,
+  });
+
+  const addMutation = useMutation({
+    mutationFn: (userId: number) =>
+      addProjectUserAction({ projectId: id, users: [userId] }),
+    onSuccess: invalidate,
+  });
+
+  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>
+          <User 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 = `${GAPPS_URL}/my-teams?createNew=true`;
+                }}
+              >
+                <Plus size={16} />
+                Adicionar
+              </Button>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    className="p-0 size-8"
+                    onClick={() => {
+                      window.location.href = `${GAPPS_URL}/my-teams`;
+                    }}
+                  >
+                    <Settings 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">
+                  <Users 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>
+  );
+}

package/src/index.ts

@@ -256,6 +256,10 @@ export {
   TooltipProvider,
 } from "./components/ui/overlay/Tooltip";
 
+// Embeds
+export { FrillEmbed } from "./components/embeds/FrillEmbed";
+export { CrispEmbed, openCrispHelpdesk } from "./components/embeds/CrispEmbed";
+
 // Store
 export { useMdSidebarStore } from "./store/useMdSidebarStore";
 export { useModalManager } from "./store/useModalManager";

package/src/modules/projects/actions/list-all-account-users.action.ts

@@ -0,0 +1,9 @@
+'use server';
+
+import { safeServerAction } from '../../../utils/safeServerAction';
+import { projectUsersService } from '../services/project-users.service';
+import type { ListUsersParams } from '../types';
+
+export async function listAllAccountUsersAction(params: ListUsersParams = {}) {
+  return safeServerAction(() => projectUsersService.listAllAccountUsers(params));
+}

package/src/modules/projects/hooks/list-all-account-users.hook.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { listAllAccountUsersAction } from '../actions/list-all-account-users.action';
+import { withAction } from '../../../utils/withAction';
+
+const PAGE_SIZE = 20;
+
+export const LIST_ALL_ACCOUNT_USERS_BASE_KEY = () => ['account-users', 'all'];
+export const LIST_ALL_ACCOUNT_USERS_QUERY_KEY = (search: string = '', projectId?: number) => [
+  ...LIST_ALL_ACCOUNT_USERS_BASE_KEY(),
+  search,
+  projectId,
+];
+
+export function useListAllAccountUsers(search: string = '', projectId?: number) {
+  return useInfiniteQuery({
+    queryKey: LIST_ALL_ACCOUNT_USERS_QUERY_KEY(search, projectId),
+    queryFn: ({ pageParam }) =>
+      withAction(() =>
+        listAllAccountUsersAction({
+          search: search || undefined,
+          page: pageParam as number,
+          limit: PAGE_SIZE,
+          inProject: projectId,
+        })
+      )(),
+    getNextPageParam: (lastPage, allPages) => {
+      const loaded = allPages.reduce((sum, p) => sum + p.data.length, 0);
+      return loaded < lastPage.total ? allPages.length + 1 : undefined;
+    },
+    initialPageParam: 1,
+  });
+}