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

Merge pull request #217 from documenso/feat/stacked-avatars

Browse Source 
feat: stack avatars
This commit is contained in:
Lucas Smith
2023-07-26 19:58:34 +10:00
committed by GitHub
parent b3fa837967 a5334ca6e6
commit 889ad1c49f
11 changed files with 262 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,7 @@ import {
TableRow,
} from '@documenso/ui/primitives/table';
import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
import { DocumentStatus } from '~/components/formatter/document-status';
import { LocaleDate } from '~/components/formatter/locale-date';
@ -60,12 +61,14 @@ export default async function DashboardPage() {
<TableRow>
<TableHead className="w-[100px]">ID</TableHead>
<TableHead>Title</TableHead>
<TableHead>Reciepient</TableHead>
<TableHead>Status</TableHead>
<TableHead className="text-right">Created</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{results.data.map((document) => (
{results.data.map((document) => {
return (
<TableRow key={document.id}>
<TableCell className="font-medium">{document.id}</TableCell>
<TableCell>
@ -76,6 +79,11 @@ export default async function DashboardPage() {
{document.title}
</Link>
</TableCell>
<TableCell>
<StackAvatarsWithTooltip recipients={document.Recipient} />
</TableCell>
<TableCell>
<DocumentStatus status={document.status} />
</TableCell>
@ -83,7 +91,8 @@ export default async function DashboardPage() {
<LocaleDate date={document.created} />
</TableCell>
</TableRow>
))}
);
})}
{results.data.length === 0 && (
<TableRow>
<TableCell colSpan={4} className="h-24 text-center">

12
apps/web/src/app/(dashboard)/documents/data-table.tsx
View File

@ -8,15 +8,16 @@ import { Loader } from 'lucide-react';
import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
import { FindResultSet } from '@documenso/lib/types/find-result-set';
import { Document } from '@documenso/prisma/client';
import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
import { DataTable } from '@documenso/ui/primitives/data-table';
import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
import { DocumentStatus } from '~/components/formatter/document-status';
import { LocaleDate } from '~/components/formatter/locale-date';
export type DocumentsDataTableProps = {
results: FindResultSet<Document>;
results: FindResultSet<DocumentWithReciepient>;
};
export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
@ -49,6 +50,13 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
</Link>
),
},
{
header: 'Recipient',
accessorKey: 'recipient',
cell: ({ row }) => {
return <StackAvatarsWithTooltip recipients={row.original.Recipient} />;
},
},
{
header: 'Status',
accessorKey: 'status',

51
apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx Normal file
View File

@ -0,0 +1,51 @@
import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
const ZIndexes: { [key: string]: string } = {
'10': 'z-10',
'20': 'z-20',
'30': 'z-30',
'40': 'z-40',
'50': 'z-50',
};
export type StackAvatarProps = {
first?: boolean;
zIndex?: string;
fallbackText?: string;
type: 'unsigned' | 'waiting' | 'completed';
};
export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarProps) => {
let classes = '';
let zIndexClass = '';
const firstClass = first ? '' : '-ml-3';
if (zIndex) {
zIndexClass = ZIndexes[zIndex] ?? '';
}
switch (type) {
case 'unsigned':
classes = 'bg-dawn-200 text-dawn-900';
break;
case 'waiting':
classes = 'bg-water text-water-700';
break;
case 'completed':
classes = 'bg-documenso-200 text-documenso-800';
break;
default:
break;
}
return (
<Avatar
className={`
${zIndexClass}
${firstClass}
h-10 w-10 border-2 border-solid border-white`}
>
<AvatarFallback className={classes}>{fallbackText ?? 'UK'}</AvatarFallback>
</Avatar>
);
};

90
apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx Normal file
View File

@ -0,0 +1,90 @@
import { initials } from '@documenso/lib/client-only/recipient-initials';
import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
import { Recipient } from '@documenso/prisma/client';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@documenso/ui/primitives/tooltip';
import { StackAvatar } from './stack-avatar';
import { StackAvatars } from './stack-avatars';
export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[] }) => {
const waitingRecipients = recipients.filter(
(recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED',
);
const completedRecipients = recipients.filter(
(recipient) => recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED',
);
const uncompletedRecipients = recipients.filter(
(recipient) => recipient.sendStatus === 'NOT_SENT' && recipient.signingStatus === 'NOT_SIGNED',
);
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger className="flex cursor-pointer">
<StackAvatars recipients={recipients} />
</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">
<StackAvatar
first={true}
key={recipient.id}
type={getRecipientType(recipient)}
fallbackText={initials(recipient.name)}
/>
<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">
<StackAvatar
first={true}
key={recipient.id}
type={getRecipientType(recipient)}
fallbackText={initials(recipient.name)}
/>
<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">
<StackAvatar
first={true}
key={recipient.id}
type={getRecipientType(recipient)}
fallbackText={initials(recipient.name)}
/>
<span className="text-sm text-gray-500">{recipient.email}</span>
</div>
))}
</div>
)}
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};

36
apps/web/src/components/(dashboard)/avatar/stack-avatars.tsx Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import { initials } from '@documenso/lib/client-only/recipient-initials';
import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
import { Recipient } from '@documenso/prisma/client';
import { StackAvatar } from './stack-avatar';
export function StackAvatars({ recipients }: { recipients: Recipient[] }) {
const renderStackAvatars = (recipients: Recipient[]) => {
const zIndex = 50;
const itemsToRender = recipients.slice(0, 5);
const remainingItems = recipients.length - itemsToRender.length;
return itemsToRender.map((recipient: Recipient, index: number) => {
const first = index === 0 ? true : false;
const lastItemText =
index === itemsToRender.length - 1 && remainingItems > 0
? `+${remainingItems + 1}`
: undefined;
return (
<StackAvatar
key={recipient.id}
first={first}
zIndex={String(zIndex - index * 10)}
type={lastItemText && index === 4 ? 'unsigned' : getRecipientType(recipient)}
fallbackText={lastItemText ? lastItemText : initials(recipient.name)}
/>
);
});
};
return <>{renderStackAvatars(recipients)}</>;
}

6
packages/lib/client-only/recipient-initials.ts Normal file
View File

@ -0,0 +1,6 @@
export const initials = (text: string) =>
text
?.split(' ')
.map((name: string) => name.slice(0, 1).toUpperCase())
.slice(0, 2)
.join('') ?? 'UK';

13
packages/lib/client-only/recipient-type.ts Normal file
View File

@ -0,0 +1,13 @@
import { Recipient } from '@documenso/prisma/client';
export const getRecipientType = (recipient: Recipient) => {
if (recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED') {
return 'completed';
}
if (recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED') {
return 'waiting';
}
return 'unsigned';
};

6
packages/lib/server-only/document/find-documents.ts
View File

@ -1,5 +1,6 @@
import { prisma } from '@documenso/prisma';
import { Document, DocumentStatus, Prisma } from '@documenso/prisma/client';
import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
import { FindResultSet } from '../../types/find-result-set';
@ -22,7 +23,7 @@ export const findDocuments = async ({
page = 1,
perPage = 10,
orderBy,
}: FindDocumentsOptions): Promise<FindResultSet<Document>> => {
}: FindDocumentsOptions): Promise<FindResultSet<DocumentWithReciepient>> => {
const orderByColumn = orderBy?.column ?? 'created';
const orderByDirection = orderBy?.direction ?? 'desc';
@ -48,6 +49,9 @@ export const findDocuments = async ({
orderBy: {
[orderByColumn]: orderByDirection,
},
include: {
Recipient: true,
},
}),
prisma.document.count({
where: {

5
packages/prisma/types/document-with-recipient.ts Normal file
View File

@ -0,0 +1,5 @@
import { Document, Recipient } from '@documenso/prisma/client';
export type DocumentWithReciepient = Document & {
Recipient: Recipient[];
};

14
packages/tailwind-config/index.cjs
View File

@ -76,6 +76,20 @@ module.exports = {
900: '#52514a',
950: '#2a2925',
},
water: {
DEFAULT: '#d7e4f3',
50: '#f3f6fb',
100: '#e3ebf6',
200: '#d7e4f3',
300: '#abc7e5',
400: '#82abd8',
500: '#658ecc',
600: '#5175bf',
700: '#4764ae',
800: '#3e538f',
900: '#364772',
950: '#252d46',
},
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',