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

feat: add recipients avatars on all tables

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-06-25 15:14:48 +00:00
committed by Mythie
parent 71c689eae8
commit e1d57e6d29
7 changed files with 110 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,12 +2,9 @@ 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';
import { Recipient } from '@documenso/prisma/client';
import {
Table,
TableBody,
@ -16,15 +13,8 @@ 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 { StackAvatars } from '~/components/(dashboard)/avatar/stack-avatars';
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';
@ -78,21 +68,6 @@ export default async function DashboardPage() {
</TableHeader>
<TableBody>
{results.data.map((document) => {
const waitingRecipients = document.Recipient.filter(
(recipient) =>
recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED',
);
const completedRecipients = document.Recipient.filter(
(recipient) =>
recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED',
);
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>
@ -106,82 +81,7 @@ export default async function DashboardPage() {
</TableCell>
<TableCell>
<TooltipProvider>
<Tooltip>
<TooltipTrigger className="flex cursor-pointer">
<StackAvatars recipients={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"
>
<StackAvatar
first={true}
key={recipient.id}
type={type(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={type(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={type(recipient)}
fallbackText={initials(recipient.name)}
/>
<span className="text-sm text-gray-500">
{recipient.email}
</span>
</div>
))}
</div>
)}
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<StackAvatarsWithTooltip recipients={document.Recipient} />
</TableCell>
<TableCell>

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

@ -7,16 +7,17 @@ import Link from 'next/link';
import { Loader } from 'lucide-react';
import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
import { DocumentWithReciepient } from '@documenso/lib/types/document-with-recipient';
import { FindResultSet } from '@documenso/lib/types/find-result-set';
import { Document } from '@documenso/prisma/client';
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',

0
apps/web/src/components/(dashboard)/avatar/index.tsx → apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
View File

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 { type } 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={type(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={type(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={type(recipient)}
fallbackText={initials(recipient.name)}
/>
<span className="text-sm text-gray-500">{recipient.email}</span>
</div>
))}
</div>
)}
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};

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

@ -4,7 +4,7 @@ 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 '.';
import { StackAvatar } from './stack-avatar';
export function StackAvatars({ recipients }: { recipients: Recipient[] }) {
const renderStackAvatars = (recipients: Recipient[]) => {

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

@ -1,6 +1,7 @@
import { prisma } from '@documenso/prisma';
import { Document, DocumentStatus, Prisma, Recipient } from '@documenso/prisma/client';
import { Document, DocumentStatus, Prisma } from '@documenso/prisma/client';
import { DocumentWithReciepient } from '../../types/document-with-recipient';
import { FindResultSet } from '../../types/find-result-set';
export interface FindDocumentsOptions {
@ -15,10 +16,6 @@ export interface FindDocumentsOptions {
};
}
export type DocumentWithReciepient = Document & {
Recipient: Recipient[];
};
export const findDocuments = async ({
userId,
term,

5
packages/lib/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[];
};