Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-10 04:22:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: add tooltip on hover on stacked avatars

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-06-23 20:19:25 +00:00
parent f22baca569
commit 2e8e39c5a9
2 changed files with 124 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
apps/web/src/app/(dashboard)/dashboard/page.tsx
View File

@ -14,6 +14,12 @@ import {
TableHeader,
TableRow,
} from '@documenso/ui/primitives/table';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@documenso/ui/primitives/tooltip';
import { StackAvatar } from '~/components/(dashboard)/avatar';
import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
@ -60,6 +66,24 @@ const renderStackAvatars = (recipients: Recipient[]) => {
});
};
const renderAvatar = (recipient: Recipient) => {
const initials =
recipient.name
?.split(' ')
.map((name: string) => name.slice(0, 1).toUpperCase())
.slice(0, 2)
.join('') ?? 'UK';
const type =
recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED'
? 'completed'
: recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED'
? 'waiting'
: 'unsigned';
return <StackAvatar first={true} key={recipient.id} type={type} fallbackText={initials} />;
};
export default async function DashboardPage() {
const session = await getRequiredServerComponentSession();
@ -100,30 +124,107 @@ export default async function DashboardPage() {
</TableRow>
</TableHeader>
<TableBody>
{results.data.map((document) => (
<TableRow key={document.id}>
<TableCell className="font-medium">{document.id}</TableCell>
<TableCell>
<Link
href={`/documents/${document.id}`}
className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
>
{document.title}
</Link>
</TableCell>
{results.data.map((document) => {
const waitingRecipients = document.Recipient.filter(
(recipient) =>
recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED',
);
<TableCell className="flex cursor-pointer">
{renderStackAvatars(document.Recipient)}
</TableCell>
const completedRecipients = document.Recipient.filter(
(recipient) =>
recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED',
);
<TableCell>
<DocumentStatus status={document.status} />
</TableCell>
<TableCell className="text-right">
<LocaleDate date={document.created} />
</TableCell>
</TableRow>
))}
const uncompletedRecipients = document.Recipient.filter(
(recipient) =>
recipient.sendStatus === 'NOT_SENT' && recipient.signingStatus === 'NOT_SIGNED',
);
return (
<TableRow key={document.id}>
<TableCell className="font-medium">{document.id}</TableCell>
<TableCell>
<Link
href={`/documents/${document.id}`}
className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
>
{document.title}
</Link>
</TableCell>
<TableCell>
<TooltipProvider>
<Tooltip>
<TooltipTrigger className="flex cursor-pointer">
{renderStackAvatars(document.Recipient)}
</TooltipTrigger>
<TooltipContent>
<div className="flex flex-col gap-y-5 p-1">
{completedRecipients.length > 0 && (
<div>
<h1 className="text-base font-medium">Completed</h1>
{completedRecipients.map((recipient: Recipient) => (
<div
key={recipient.id}
className="my-1 flex items-center gap-2"
>
{renderAvatar(recipient)}
<span className="text-sm text-gray-500">
{recipient.email}
</span>
</div>
))}
</div>
)}
{waitingRecipients.length > 0 && (
<div>
<h1 className="text-base font-medium">Waiting</h1>
{waitingRecipients.map((recipient: Recipient) => (
<div
key={recipient.id}
className="my-1 flex items-center gap-2"
>
{renderAvatar(recipient)}
<span className="text-sm text-gray-500">
{recipient.email}
</span>
</div>
))}
</div>
)}
{uncompletedRecipients.length > 0 && (
<div>
<h1 className="text-base font-medium">Uncompleted</h1>
{uncompletedRecipients.map((recipient: Recipient) => (
<div
key={recipient.id}
className="my-1 flex items-center gap-2"
>
{renderAvatar(recipient)}
<span className="text-sm text-gray-500">
{recipient.email}
</span>
</div>
))}
</div>
)}
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</TableCell>
<TableCell>
<DocumentStatus status={document.status} />
</TableCell>
<TableCell className="text-right">
<LocaleDate date={document.created} />
</TableCell>
</TableRow>
);
})}
{results.data.length === 0 && (
<TableRow>
<TableCell colSpan={4} className="h-24 text-center">

2
apps/web/src/components/(dashboard)/avatar/index.tsx
View File

@ -11,7 +11,7 @@ export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarPr
let classes = '';
switch (type) {
case 'unsigned':
classes = 'bg-dawn-400 text-dawn-900';
classes = 'bg-dawn-200 text-dawn-900';
break;
case 'waiting':
classes = 'bg-water text-water-700';