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

chore: refactor stacked avatars into component

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-06-25 14:23:18 +00:00
parent 2e8e39c5a9
commit dbcf7771b9
4 changed files with 72 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,8 @@ import Link from 'next/link';
import { Clock, File, FileCheck } from 'lucide-react';
import { initials } from '@documenso/lib/client-only/recipient-initials';
import { type } from '@documenso/lib/client-only/recipient-type';
import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
import { getStats } from '@documenso/lib/server-only/document/get-stats';
@ -22,68 +24,13 @@ import {
} from '@documenso/ui/primitives/tooltip';
import { StackAvatar } from '~/components/(dashboard)/avatar';
import { StackAvatars } from '~/components/(dashboard)/avatar/stack-avatars';
import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
import { DocumentStatus } from '~/components/formatter/document-status';
import { LocaleDate } from '~/components/formatter/locale-date';
import { UploadDocument } from './upload-document';
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 initials =
recipient.name
?.split(' ')
.map((name: string) => name.slice(0, 1).toUpperCase())
.slice(0, 2)
.join('') ?? 'UK';
const lastItemText =
index === itemsToRender.length - 1 && remainingItems > 0
? `+${remainingItems + 1}`
: undefined;
const type =
recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED'
? 'completed'
: recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED'
? 'waiting'
: 'unsigned';
return (
<StackAvatar
key={recipient.id}
first={first}
zIndex={String(zIndex - index * 10)}
type={index === 4 ? 'unsigned' : type}
fallbackText={lastItemText ? lastItemText : initials}
/>
);
});
};
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();
@ -156,7 +103,7 @@ export default async function DashboardPage() {
<TooltipProvider>
<Tooltip>
<TooltipTrigger className="flex cursor-pointer">
{renderStackAvatars(document.Recipient)}
<StackAvatars recipients={document.Recipient} />
</TooltipTrigger>
<TooltipContent>
<div className="flex flex-col gap-y-5 p-1">
@ -168,7 +115,12 @@ export default async function DashboardPage() {
key={recipient.id}
className="my-1 flex items-center gap-2"
>
{renderAvatar(recipient)}
<StackAvatar
first={true}
key={recipient.id}
type={type(recipient)}
fallbackText={initials(recipient.name)}
/>
<span className="text-sm text-gray-500">
{recipient.email}
</span>
@ -185,7 +137,12 @@ export default async function DashboardPage() {
key={recipient.id}
className="my-1 flex items-center gap-2"
>
{renderAvatar(recipient)}
<StackAvatar
first={true}
key={recipient.id}
type={type(recipient)}
fallbackText={initials(recipient.name)}
/>
<span className="text-sm text-gray-500">
{recipient.email}
</span>
@ -202,7 +159,12 @@ export default async function DashboardPage() {
key={recipient.id}
className="my-1 flex items-center gap-2"
>
{renderAvatar(recipient)}
<StackAvatar
first={true}
key={recipient.id}
type={type(recipient)}
fallbackText={initials(recipient.name)}
/>
<span className="text-sm text-gray-500">
{recipient.email}
</span>

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 { type } from '@documenso/lib/client-only/recipient-type';
import { Recipient } from '@documenso/prisma/client';
import { StackAvatar } from '.';
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' : type(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';

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

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