@greatapps/common 1.1.165 → 1.1.166
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -134,7 +134,7 @@ function UsersSelectorPopover({
|
|
|
134
134
|
children: /* @__PURE__ */ jsx(Settings, { size: 18 })
|
|
135
135
|
}
|
|
136
136
|
) }),
|
|
137
|
-
/* @__PURE__ */ jsx(TooltipContent, { children: "Visualizar todos usu\xE1rios" })
|
|
137
|
+
/* @__PURE__ */ jsx(TooltipContent, { className: "z-[1002]", children: "Visualizar todos usu\xE1rios" })
|
|
138
138
|
] })
|
|
139
139
|
] })
|
|
140
140
|
] }),
|
|
@@ -205,7 +205,7 @@ function UsersSelectorPopover({
|
|
|
205
205
|
)
|
|
206
206
|
}
|
|
207
207
|
),
|
|
208
|
-
/* @__PURE__ */ jsx(TooltipContent, { children: user.checked ? "Remover do projeto" : "Adicionar ao projeto" })
|
|
208
|
+
/* @__PURE__ */ jsx(TooltipContent, { className: "z-[1002]", children: user.checked ? "Remover do projeto" : "Adicionar ao projeto" })
|
|
209
209
|
] })
|
|
210
210
|
] })
|
|
211
211
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/UsersSelectorPopover.tsx"],"sourcesContent":["'use client';\r\n\r\n\"use client\"\r\n\r\nimport { useEffect, useState } from 'react';\r\nimport { Plus, Settings, User, Users } from 'lucide-react';\r\nimport { UserAvatar } from '../ui/data-display/UserAvatar';\r\nimport { useQueryClient, useMutation } from '@tanstack/react-query';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/overlay/Popover';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../ui/overlay/Command';\r\nimport { Checkbox } from '../ui/form/Checkbox';\r\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\r\nimport { cn } from '../../infra/utils/clsx';\r\nimport { useListProjectUsers, LIST_PROJECT_USERS_BASE_KEY } from '../../modules/projects/hooks/list-project-users.hook';\r\nimport { useListAvailableUsers, LIST_AVAILABLE_USERS_BASE_KEY } from '../../modules/projects/hooks/list-available-users.hook';\r\nimport { addProjectUserAction } from '../../modules/projects/actions/add-project-user.action';\r\nimport { removeProjectUserAction } from '../../modules/projects/actions/remove-project-user.action';\r\n\r\n\r\nexport interface UsersSelectorPopoverProps {\r\n projectId?: number;\r\n side?: 'top' | 'bottom' | 'left' | 'right';\r\n align?: 'start' | 'center' | 'end';\r\n contentClassName?: string;\r\n}\r\n\r\nfunction UserItemSkeleton() {\r\n return (\r\n <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\r\n <div className=\"flex items-center gap-2 flex-1\">\r\n <div className=\"skeleton size-8 rounded-full shrink-0\" />\r\n <div className=\"skeleton h-3.5 w-28 rounded\" />\r\n </div>\r\n <div className=\"skeleton size-4 rounded shrink-0\" />\r\n </div>\r\n );\r\n}\r\n\r\nconst GAPPS_URL = process.env.NEXT_PUBLIC_GREAT_APPS ?? '';\r\n\r\nexport function UsersSelectorPopover({\r\n projectId,\r\n side,\r\n align,\r\n contentClassName,\r\n}: UsersSelectorPopoverProps) {\r\n const queryClient = useQueryClient();\r\n const [open, setOpen] = useState(false);\r\n const [hoveredId, setHoveredId] = useState<number | null>(null);\r\n const [searchInput, setSearchInput] = useState('');\r\n const [search, setSearch] = useState('');\r\n\r\n const id = projectId ?? 0;\r\n\r\n useEffect(() => {\r\n const timer = setTimeout(() => setSearch(searchInput), 300);\r\n return () => clearTimeout(timer);\r\n }, [searchInput]);\r\n\r\n const projectUsers = useListProjectUsers(id, search);\r\n const availableUsers = useListAvailableUsers(id, search);\r\n\r\n const inProject = projectUsers.data?.pages.flatMap((p) => p.data) ?? [];\r\n const notInProject = availableUsers.data?.pages.flatMap((p) => p.data) ?? [];\r\n const isLoading = projectUsers.isLoading || availableUsers.isLoading;\r\n const isFetchingMore = projectUsers.isFetchingNextPage || availableUsers.isFetchingNextPage;\r\n const totalInProject = projectUsers.data?.pages[0]?.total ?? inProject.length;\r\n\r\n const invalidate = () => {\r\n queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(id) });\r\n queryClient.invalidateQueries({ queryKey: LIST_AVAILABLE_USERS_BASE_KEY(id) });\r\n };\r\n\r\n const addMutation = useMutation({\r\n mutationFn: (userId: number) => addProjectUserAction({ projectId: id, users: [userId] }),\r\n onSuccess: invalidate,\r\n });\r\n\r\n const removeMutation = useMutation({\r\n mutationFn: (userId: number) => removeProjectUserAction({ projectId: id, users: [userId] }),\r\n onSuccess: invalidate,\r\n });\r\n\r\n const allUsers = [\r\n ...inProject.map((u) => ({\r\n id: u.id_user,\r\n name: u.name,\r\n photo: u.photo ?? null,\r\n checked: true as const,\r\n removable: u.profile !== 'owner' && u.profile !== 'admin',\r\n })),\r\n ...notInProject.map((u) => ({\r\n id: u.id,\r\n name: u.name,\r\n photo: u.photo ?? null,\r\n checked: false as const,\r\n removable: true,\r\n })),\r\n ];\r\n\r\n const toggleUser = (id: number, checked: boolean, removable: boolean) => {\r\n if (checked) {\r\n if (!removable) return;\r\n removeMutation.mutate(id);\r\n } else {\r\n addMutation.mutate(id);\r\n }\r\n };\r\n\r\n const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\r\n const target = e.currentTarget;\r\n const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 50;\r\n if (!nearBottom) return;\r\n if (projectUsers.hasNextPage && !projectUsers.isFetchingNextPage) {\r\n projectUsers.fetchNextPage();\r\n } else if (availableUsers.hasNextPage && !availableUsers.isFetchingNextPage) {\r\n availableUsers.fetchNextPage();\r\n }\r\n };\r\n\r\n return (\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger className=\"cursor-pointer\">\r\n <div className=\"flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950\">\r\n <span className=\"paragraph-small-semibold\">{totalInProject}</span>\r\n <User size={16} />\r\n </div>\r\n </PopoverTrigger>\r\n\r\n <PopoverContent\r\n className={cn(\r\n 'absolute right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200',\r\n contentClassName\r\n )}\r\n side={side}\r\n align={align}\r\n sideOffset={8}\r\n >\r\n <div className=\"flex flex-col p-3 gap-2\">\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-small-semibold\">Usuários</span>\r\n <div className=\"flex items-center gap-1.5\">\r\n <Button\r\n variant=\"secondary\"\r\n className=\"h-8 paragraph-small-semibold text-gray-950\"\r\n onClick={() => window.open(`${GAPPS_URL}/my-teams?createNew=true`, '_blank')}\r\n >\r\n <Plus size={16} />\r\n Adicionar\r\n </Button>\r\n <Tooltip>\r\n <TooltipTrigger asChild>\r\n <Button\r\n variant=\"secondary\"\r\n className=\"p-0 size-8\"\r\n onClick={() => window.open(`${GAPPS_URL}/my-teams`, '_blank')}\r\n >\r\n <Settings size={18} />\r\n </Button>\r\n </TooltipTrigger>\r\n <TooltipContent>Visualizar todos usuários</TooltipContent>\r\n </Tooltip>\r\n </div>\r\n </div>\r\n\r\n <Command shouldFilter={false} className=\"gap-2\" value=\"\">\r\n <CommandInput\r\n placeholder=\"Busque aqui\"\r\n value={searchInput}\r\n onValueChange={setSearchInput}\r\n />\r\n <CommandList\r\n className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\"\r\n onScroll={handleScroll}\r\n >\r\n {isLoading ? (\r\n <>\r\n <UserItemSkeleton />\r\n <UserItemSkeleton />\r\n <UserItemSkeleton />\r\n </>\r\n ) : allUsers.length === 0 ? (\r\n <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\r\n <Users size={28} className=\"text-gray-300\" />\r\n <span className=\"paragraph-small-medium text-center text-gray-500\">\r\n Nenhum usuário neste projeto.\r\n <br />\r\n Adicione um usuário para começar.\r\n </span>\r\n </div>\r\n ) : (\r\n <>\r\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n {allUsers.map((user) => (\r\n <CommandItem\r\n key={user.id}\r\n value={user.name || String(user.id)}\r\n autoFocus={false}\r\n onPointerEnter={() => setHoveredId(user.id)}\r\n onPointerLeave={() => setHoveredId(null)}\r\n onFocus={() => setHoveredId(user.id)}\r\n onBlur={() => setHoveredId(null)}\r\n onSelect={() => toggleUser(user.id, user.checked, user.removable)}\r\n className={user.removable ? 'cursor-pointer' : 'cursor-default'}\r\n >\r\n <div className=\"flex items-center justify-between w-full\">\r\n <div className=\"flex items-center gap-2\">\r\n <UserAvatar\r\n photo={user.photo}\r\n name={user.name ?? undefined}\r\n size={32}\r\n />\r\n {user.name}\r\n </div>\r\n <Tooltip open={user.removable && hoveredId === user.id}>\r\n <TooltipTrigger\r\n onClick={(e) => e.stopPropagation()}\r\n onPointerDown={(e) => e.stopPropagation()}\r\n >\r\n <Checkbox\r\n checked={user.checked}\r\n disabled={!user.removable}\r\n onCheckedChange={() => toggleUser(user.id, user.checked, user.removable)}\r\n className={user.removable && hoveredId === user.id ? 'border-gray-950' : ''}\r\n />\r\n </TooltipTrigger>\r\n <TooltipContent>\r\n {user.checked ? 'Remover do projeto' : 'Adicionar ao projeto'}\r\n </TooltipContent>\r\n </Tooltip>\r\n </div>\r\n </CommandItem>\r\n ))}\r\n {isFetchingMore && (\r\n <>\r\n <UserItemSkeleton />\r\n <UserItemSkeleton />\r\n </>\r\n )}\r\n </>\r\n )}\r\n </CommandList>\r\n </Command>\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n}\r\n"],"mappings":"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","names":["id"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/UsersSelectorPopover.tsx"],"sourcesContent":["'use client';\r\n\r\n\"use client\"\r\n\r\nimport { useEffect, useState } from 'react';\r\nimport { Plus, Settings, User, Users } from 'lucide-react';\r\nimport { UserAvatar } from '../ui/data-display/UserAvatar';\r\nimport { useQueryClient, useMutation } from '@tanstack/react-query';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/overlay/Popover';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../ui/overlay/Command';\r\nimport { Checkbox } from '../ui/form/Checkbox';\r\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\r\nimport { cn } from '../../infra/utils/clsx';\r\nimport { useListProjectUsers, LIST_PROJECT_USERS_BASE_KEY } from '../../modules/projects/hooks/list-project-users.hook';\r\nimport { useListAvailableUsers, LIST_AVAILABLE_USERS_BASE_KEY } from '../../modules/projects/hooks/list-available-users.hook';\r\nimport { addProjectUserAction } from '../../modules/projects/actions/add-project-user.action';\r\nimport { removeProjectUserAction } from '../../modules/projects/actions/remove-project-user.action';\r\n\r\n\r\nexport interface UsersSelectorPopoverProps {\r\n projectId?: number;\r\n side?: 'top' | 'bottom' | 'left' | 'right';\r\n align?: 'start' | 'center' | 'end';\r\n contentClassName?: string;\r\n}\r\n\r\nfunction UserItemSkeleton() {\r\n return (\r\n <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\r\n <div className=\"flex items-center gap-2 flex-1\">\r\n <div className=\"skeleton size-8 rounded-full shrink-0\" />\r\n <div className=\"skeleton h-3.5 w-28 rounded\" />\r\n </div>\r\n <div className=\"skeleton size-4 rounded shrink-0\" />\r\n </div>\r\n );\r\n}\r\n\r\nconst GAPPS_URL = process.env.NEXT_PUBLIC_GREAT_APPS ?? '';\r\n\r\nexport function UsersSelectorPopover({\r\n projectId,\r\n side,\r\n align,\r\n contentClassName,\r\n}: UsersSelectorPopoverProps) {\r\n const queryClient = useQueryClient();\r\n const [open, setOpen] = useState(false);\r\n const [hoveredId, setHoveredId] = useState<number | null>(null);\r\n const [searchInput, setSearchInput] = useState('');\r\n const [search, setSearch] = useState('');\r\n\r\n const id = projectId ?? 0;\r\n\r\n useEffect(() => {\r\n const timer = setTimeout(() => setSearch(searchInput), 300);\r\n return () => clearTimeout(timer);\r\n }, [searchInput]);\r\n\r\n const projectUsers = useListProjectUsers(id, search);\r\n const availableUsers = useListAvailableUsers(id, search);\r\n\r\n const inProject = projectUsers.data?.pages.flatMap((p) => p.data) ?? [];\r\n const notInProject = availableUsers.data?.pages.flatMap((p) => p.data) ?? [];\r\n const isLoading = projectUsers.isLoading || availableUsers.isLoading;\r\n const isFetchingMore = projectUsers.isFetchingNextPage || availableUsers.isFetchingNextPage;\r\n const totalInProject = projectUsers.data?.pages[0]?.total ?? inProject.length;\r\n\r\n const invalidate = () => {\r\n queryClient.invalidateQueries({ queryKey: LIST_PROJECT_USERS_BASE_KEY(id) });\r\n queryClient.invalidateQueries({ queryKey: LIST_AVAILABLE_USERS_BASE_KEY(id) });\r\n };\r\n\r\n const addMutation = useMutation({\r\n mutationFn: (userId: number) => addProjectUserAction({ projectId: id, users: [userId] }),\r\n onSuccess: invalidate,\r\n });\r\n\r\n const removeMutation = useMutation({\r\n mutationFn: (userId: number) => removeProjectUserAction({ projectId: id, users: [userId] }),\r\n onSuccess: invalidate,\r\n });\r\n\r\n const allUsers = [\r\n ...inProject.map((u) => ({\r\n id: u.id_user,\r\n name: u.name,\r\n photo: u.photo ?? null,\r\n checked: true as const,\r\n removable: u.profile !== 'owner' && u.profile !== 'admin',\r\n })),\r\n ...notInProject.map((u) => ({\r\n id: u.id,\r\n name: u.name,\r\n photo: u.photo ?? null,\r\n checked: false as const,\r\n removable: true,\r\n })),\r\n ];\r\n\r\n const toggleUser = (id: number, checked: boolean, removable: boolean) => {\r\n if (checked) {\r\n if (!removable) return;\r\n removeMutation.mutate(id);\r\n } else {\r\n addMutation.mutate(id);\r\n }\r\n };\r\n\r\n const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\r\n const target = e.currentTarget;\r\n const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 50;\r\n if (!nearBottom) return;\r\n if (projectUsers.hasNextPage && !projectUsers.isFetchingNextPage) {\r\n projectUsers.fetchNextPage();\r\n } else if (availableUsers.hasNextPage && !availableUsers.isFetchingNextPage) {\r\n availableUsers.fetchNextPage();\r\n }\r\n };\r\n\r\n return (\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger className=\"cursor-pointer\">\r\n <div className=\"flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950\">\r\n <span className=\"paragraph-small-semibold\">{totalInProject}</span>\r\n <User size={16} />\r\n </div>\r\n </PopoverTrigger>\r\n\r\n <PopoverContent\r\n className={cn(\r\n 'absolute right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200',\r\n contentClassName\r\n )}\r\n side={side}\r\n align={align}\r\n sideOffset={8}\r\n >\r\n <div className=\"flex flex-col p-3 gap-2\">\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-small-semibold\">Usuários</span>\r\n <div className=\"flex items-center gap-1.5\">\r\n <Button\r\n variant=\"secondary\"\r\n className=\"h-8 paragraph-small-semibold text-gray-950\"\r\n onClick={() => window.open(`${GAPPS_URL}/my-teams?createNew=true`, '_blank')}\r\n >\r\n <Plus size={16} />\r\n Adicionar\r\n </Button>\r\n <Tooltip>\r\n <TooltipTrigger asChild>\r\n <Button\r\n variant=\"secondary\"\r\n className=\"p-0 size-8\"\r\n onClick={() => window.open(`${GAPPS_URL}/my-teams`, '_blank')}\r\n >\r\n <Settings size={18} />\r\n </Button>\r\n </TooltipTrigger>\r\n <TooltipContent className=\"z-[1002]\">Visualizar todos usuários</TooltipContent>\r\n </Tooltip>\r\n </div>\r\n </div>\r\n\r\n <Command shouldFilter={false} className=\"gap-2\" value=\"\">\r\n <CommandInput\r\n placeholder=\"Busque aqui\"\r\n value={searchInput}\r\n onValueChange={setSearchInput}\r\n />\r\n <CommandList\r\n className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\"\r\n onScroll={handleScroll}\r\n >\r\n {isLoading ? (\r\n <>\r\n <UserItemSkeleton />\r\n <UserItemSkeleton />\r\n <UserItemSkeleton />\r\n </>\r\n ) : allUsers.length === 0 ? (\r\n <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\r\n <Users size={28} className=\"text-gray-300\" />\r\n <span className=\"paragraph-small-medium text-center text-gray-500\">\r\n Nenhum usuário neste projeto.\r\n <br />\r\n Adicione um usuário para começar.\r\n </span>\r\n </div>\r\n ) : (\r\n <>\r\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n {allUsers.map((user) => (\r\n <CommandItem\r\n key={user.id}\r\n value={user.name || String(user.id)}\r\n autoFocus={false}\r\n onPointerEnter={() => setHoveredId(user.id)}\r\n onPointerLeave={() => setHoveredId(null)}\r\n onFocus={() => setHoveredId(user.id)}\r\n onBlur={() => setHoveredId(null)}\r\n onSelect={() => toggleUser(user.id, user.checked, user.removable)}\r\n className={user.removable ? 'cursor-pointer' : 'cursor-default'}\r\n >\r\n <div className=\"flex items-center justify-between w-full\">\r\n <div className=\"flex items-center gap-2\">\r\n <UserAvatar\r\n photo={user.photo}\r\n name={user.name ?? undefined}\r\n size={32}\r\n />\r\n {user.name}\r\n </div>\r\n <Tooltip open={user.removable && hoveredId === user.id}>\r\n <TooltipTrigger\r\n onClick={(e) => e.stopPropagation()}\r\n onPointerDown={(e) => e.stopPropagation()}\r\n >\r\n <Checkbox\r\n checked={user.checked}\r\n disabled={!user.removable}\r\n onCheckedChange={() => toggleUser(user.id, user.checked, user.removable)}\r\n className={user.removable && hoveredId === user.id ? 'border-gray-950' : ''}\r\n />\r\n </TooltipTrigger>\r\n <TooltipContent className=\"z-[1002]\">\r\n {user.checked ? 'Remover do projeto' : 'Adicionar ao projeto'}\r\n </TooltipContent>\r\n </Tooltip>\r\n </div>\r\n </CommandItem>\r\n ))}\r\n {isFetchingMore && (\r\n <>\r\n <UserItemSkeleton />\r\n <UserItemSkeleton />\r\n </>\r\n )}\r\n </>\r\n )}\r\n </CommandList>\r\n </Command>\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n}\r\n"],"mappings":"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","names":["id"]}
|
package/package.json
CHANGED
|
@@ -159,7 +159,7 @@ export function UsersSelectorPopover({
|
|
|
159
159
|
<Settings size={18} />
|
|
160
160
|
</Button>
|
|
161
161
|
</TooltipTrigger>
|
|
162
|
-
<TooltipContent>Visualizar todos usuários</TooltipContent>
|
|
162
|
+
<TooltipContent className="z-[1002]">Visualizar todos usuários</TooltipContent>
|
|
163
163
|
</Tooltip>
|
|
164
164
|
</div>
|
|
165
165
|
</div>
|
|
@@ -225,7 +225,7 @@ export function UsersSelectorPopover({
|
|
|
225
225
|
className={user.removable && hoveredId === user.id ? 'border-gray-950' : ''}
|
|
226
226
|
/>
|
|
227
227
|
</TooltipTrigger>
|
|
228
|
-
<TooltipContent>
|
|
228
|
+
<TooltipContent className="z-[1002]">
|
|
229
229
|
{user.checked ? 'Remover do projeto' : 'Adicionar ao projeto'}
|
|
230
230
|
</TooltipContent>
|
|
231
231
|
</Tooltip>
|