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

feat: web i18n (#1286)

Browse Source
This commit is contained in:
David Nguyen
2024-08-27 20:34:39 +09:00
committed by GitHub
parent 0829311214
commit 75c8772a02
294 changed files with 14846 additions and 2229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web/src/app/(dashboard)/documents/[id]/document-page-view-button.tsx
View File

@ -2,6 +2,8 @@
import Link from 'next/link';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { CheckCircle, Download, EyeIcon, Pencil } from 'lucide-react';
import { useSession } from 'next-auth/react';
import { match } from 'ts-pattern';
@ -26,6 +28,7 @@ export type DocumentPageViewButtonProps = {
export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButtonProps) => {
const { data: session } = useSession();
const { toast } = useToast();
const { _ } = useLingui();
if (!session) {
return null;
@ -57,8 +60,8 @@ export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButto
await downloadPDF({ documentData, fileName: documentWithData.title });
} catch (err) {
toast({
title: 'Something went wrong',
description: 'An error occurred while downloading your document.',
title: _(msg`Something went wrong`),
description: _(msg`An error occurred while downloading your document.`),
variant: 'destructive',
});
}
@ -77,19 +80,19 @@ export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButto
.with(RecipientRole.SIGNER, () => (
<>
<Pencil className="-ml-1 mr-2 h-4 w-4" />
Sign
<Trans>Sign</Trans>
</>
))
.with(RecipientRole.APPROVER, () => (
<>
<CheckCircle className="-ml-1 mr-2 h-4 w-4" />
Approve
<Trans>Approve</Trans>
</>
))
.otherwise(() => (
<>
<EyeIcon className="-ml-1 mr-2 h-4 w-4" />
View
<Trans>View</Trans>
</>
))}
</Link>
@ -97,13 +100,15 @@ export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButto
))
.with({ isComplete: false }, () => (
<Button className="w-full" asChild>
<Link href={`${documentsPath}/${document.id}/edit`}>Edit</Link>
<Link href={`${documentsPath}/${document.id}/edit`}>
<Trans>Edit</Trans>
</Link>
</Button>
))
.with({ isComplete: true }, () => (
<Button className="w-full" onClick={onDownloadClick}>
<Download className="-ml-1 mr-2 inline h-4 w-4" />
Download
<Trans>Download</Trans>
</Button>
))
.otherwise(() => null);

27
apps/web/src/app/(dashboard)/documents/[id]/document-page-view-dropdown.tsx
View File

@ -4,6 +4,8 @@ import { useState } from 'react';
import Link from 'next/link';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import {
Copy,
Download,
@ -47,6 +49,7 @@ export type DocumentPageViewDropdownProps = {
export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDropdownProps) => {
const { data: session } = useSession();
const { toast } = useToast();
const { _ } = useLingui();
const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@ -82,8 +85,8 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
await downloadPDF({ documentData, fileName: document.title });
} catch (err) {
toast({
title: 'Something went wrong',
description: 'An error occurred while downloading your document.',
title: _(msg`Something went wrong`),
description: _(msg`An error occurred while downloading your document.`),
variant: 'destructive',
});
}
@ -98,13 +101,15 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
</DropdownMenuTrigger>
<DropdownMenuContent className="w-52" align="end" forceMount>
<DropdownMenuLabel>Action</DropdownMenuLabel>
<DropdownMenuLabel>
<Trans>Action</Trans>
</DropdownMenuLabel>
{(isOwner || isCurrentTeamDocument) && !isComplete && (
<DropdownMenuItem asChild>
<Link href={`${documentsPath}/${document.id}/edit`}>
<Edit className="mr-2 h-4 w-4" />
Edit
<Trans>Edit</Trans>
</Link>
</DropdownMenuItem>
)}
@ -112,20 +117,20 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
{isComplete && (
<DropdownMenuItem onClick={onDownloadClick}>
<Download className="mr-2 h-4 w-4" />
Download
<Trans>Download</Trans>
</DropdownMenuItem>
)}
<DropdownMenuItem asChild>
<Link href={`${documentsPath}/${document.id}/logs`}>
<ScrollTextIcon className="mr-2 h-4 w-4" />
Audit Log
<Trans>Audit Log</Trans>
</Link>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
<Copy className="mr-2 h-4 w-4" />
Duplicate
<Trans>Duplicate</Trans>
</DropdownMenuItem>
<DropdownMenuItem
@ -133,10 +138,12 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
disabled={Boolean(!canManageDocument && team?.teamEmail) || isDeleted}
>
<Trash2 className="mr-2 h-4 w-4" />
Delete
<Trans>Delete</Trans>
</DropdownMenuItem>
<DropdownMenuLabel>Share</DropdownMenuLabel>
<DropdownMenuLabel>
<Trans>Share</Trans>
</DropdownMenuLabel>
<ResendDocumentActionItem
document={document}
@ -151,7 +158,7 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
<DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
<div className="flex items-center">
{loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
Share Signing Card
<Trans>Share Signing Card</Trans>
</div>
</DropdownMenuItem>
)}

22
apps/web/src/app/(dashboard)/documents/[id]/document-page-view-information.tsx
View File

@ -2,6 +2,8 @@
import { useMemo } from 'react';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { DateTime } from 'luxon';
import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
@ -23,6 +25,7 @@ export const DocumentPageViewInformation = ({
const isMounted = useIsMounted();
const { locale } = useLocale();
const { _ } = useLingui();
const documentInformation = useMemo(() => {
let createdValue = DateTime.fromJSDate(document.createdAt).toFormat('MMMM d, yyyy');
@ -38,31 +41,34 @@ export const DocumentPageViewInformation = ({
return [
{
description: 'Uploaded by',
value: userId === document.userId ? 'You' : document.User.name ?? document.User.email,
description: msg`Uploaded by`,
value: userId === document.userId ? _(msg`You`) : document.User.name ?? document.User.email,
},
{
description: 'Created',
description: msg`Created`,
value: createdValue,
},
{
description: 'Last modified',
description: msg`Last modified`,
value: lastModifiedValue,
},
];
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isMounted, document, locale, userId]);
return (
<section className="dark:bg-background text-foreground border-border bg-widget flex flex-col rounded-xl border">
<h1 className="px-4 py-3 font-medium">Information</h1>
<h1 className="px-4 py-3 font-medium">
<Trans>Information</Trans>
</h1>
<ul className="divide-y border-t">
{documentInformation.map((item) => (
{documentInformation.map((item, i) => (
<li
key={item.description}
key={i}
className="flex items-center justify-between px-4 py-2.5 text-sm last:border-b"
>
<span className="text-muted-foreground">{item.description}</span>
<span className="text-muted-foreground">{_(item.description)}</span>
<span>{item.value}</span>
</li>
))}

21
apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx
View File

@ -2,6 +2,8 @@
import { useMemo } from 'react';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { CheckCheckIcon, CheckIcon, Loader, MailOpen } from 'lucide-react';
import { DateTime } from 'luxon';
import { match } from 'ts-pattern';
@ -21,6 +23,8 @@ export const DocumentPageViewRecentActivity = ({
documentId,
userId,
}: DocumentPageViewRecentActivityProps) => {
const { _ } = useLingui();
const {
data,
isLoading,
@ -49,7 +53,9 @@ export const DocumentPageViewRecentActivity = ({
return (
<section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
<div className="flex flex-row items-center justify-between border-b px-4 py-3">
<h1 className="text-foreground font-medium">Recent activity</h1>
<h1 className="text-foreground font-medium">
<Trans>Recent activity</Trans>
</h1>
{/* Can add dropdown menu here for additional options. */}
</div>
@ -62,12 +68,14 @@ export const DocumentPageViewRecentActivity = ({
{isLoadingError && (
<div className="flex h-full flex-col items-center justify-center py-16">
<p className="text-foreground/80 text-sm">Unable to load document history</p>
<p className="text-foreground/80 text-sm">
<Trans>Unable to load document history</Trans>
</p>
<button
onClick={async () => refetch()}
className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
>
Click here to retry
<Trans>Click here to retry</Trans>
</button>
</div>
)}
@ -89,14 +97,16 @@ export const DocumentPageViewRecentActivity = ({
onClick={async () => fetchNextPage()}
className="text-foreground/70 hover:text-muted-foreground text-xs"
>
{isFetchingNextPage ? 'Loading...' : 'Load older activity'}
{isFetchingNextPage ? _(msg`Loading...`) : _(msg`Load older activity`)}
</button>
</li>
)}
{documentAuditLogs.length === 0 && (
<div className="flex items-center justify-center py-4">
<p className="text-muted-foreground/70 text-sm">No recent activity</p>
<p className="text-muted-foreground/70 text-sm">
<Trans>No recent activity</Trans>
</p>
</div>
)}
@ -133,6 +143,7 @@ export const DocumentPageViewRecentActivity = ({
))}
</div>
{/* Todo: Translations. */}
<p
className="text-muted-foreground dark:text-muted-foreground/70 flex-auto truncate py-0.5 text-xs leading-5"
title={`${formatDocumentAuditLogAction(auditLog, userId).prefix} ${

28
apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recipients.tsx
View File

@ -1,5 +1,7 @@
import Link from 'next/link';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { CheckIcon, Clock, MailIcon, MailOpenIcon, PenIcon, PlusIcon } from 'lucide-react';
import { match } from 'ts-pattern';
@ -21,17 +23,21 @@ export const DocumentPageViewRecipients = ({
document,
documentRootPath,
}: DocumentPageViewRecipientsProps) => {
const { _ } = useLingui();
const recipients = document.Recipient;
return (
<section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
<div className="flex flex-row items-center justify-between px-4 py-3">
<h1 className="text-foreground font-medium">Recipients</h1>
<h1 className="text-foreground font-medium">
<Trans>Recipients</Trans>
</h1>
{document.status !== DocumentStatus.COMPLETED && (
<Link
href={`${documentRootPath}/${document.id}/edit?step=signers`}
title="Modify recipients"
title={_(msg`Modify recipients`)}
className="flex flex-row items-center justify-between"
>
{recipients.length === 0 ? (
@ -45,7 +51,9 @@ export const DocumentPageViewRecipients = ({
<ul className="text-muted-foreground divide-y border-t">
{recipients.length === 0 && (
<li className="flex flex-col items-center justify-center py-6 text-sm">No recipients</li>
<li className="flex flex-col items-center justify-center py-6 text-sm">
<Trans>No recipients</Trans>
</li>
)}
{recipients.map((recipient) => (
@ -55,7 +63,7 @@ export const DocumentPageViewRecipients = ({
primaryText={<p className="text-muted-foreground text-sm">{recipient.email}</p>}
secondaryText={
<p className="text-muted-foreground/70 text-xs">
{RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
{_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
</p>
}
/>
@ -67,19 +75,19 @@ export const DocumentPageViewRecipients = ({
.with(RecipientRole.APPROVER, () => (
<>
<CheckIcon className="mr-1 h-3 w-3" />
Approved
<Trans>Approved</Trans>
</>
))
.with(RecipientRole.CC, () =>
document.status === DocumentStatus.COMPLETED ? (
<>
<MailIcon className="mr-1 h-3 w-3" />
Sent
<Trans>Sent</Trans>
</>
) : (
<>
<CheckIcon className="mr-1 h-3 w-3" />
Ready
<Trans>Ready</Trans>
</>
),
)
@ -87,13 +95,13 @@ export const DocumentPageViewRecipients = ({
.with(RecipientRole.SIGNER, () => (
<>
<SignatureIcon className="mr-1 h-3 w-3" />
Signed
<Trans>Signed</Trans>
</>
))
.with(RecipientRole.VIEWER, () => (
<>
<MailOpenIcon className="mr-1 h-3 w-3" />
Viewed
<Trans>Viewed</Trans>
</>
))
.exhaustive()}
@ -104,7 +112,7 @@ export const DocumentPageViewRecipients = ({
recipient.signingStatus === SigningStatus.NOT_SIGNED && (
<Badge variant="secondary">
<Clock className="mr-1 h-3 w-3" />
Pending
<Trans>Pending</Trans>
</Badge>
)}
</li>

43
apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx
View File

@ -1,6 +1,8 @@
import Link from 'next/link';
import { redirect } from 'next/navigation';
import { Plural, Trans } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
import { match } from 'ts-pattern';
@ -42,6 +44,7 @@ export type DocumentPageViewProps = {
export const DocumentPageView = async ({ params, team }: DocumentPageViewProps) => {
const { id } = params;
const { _ } = useLingui();
const documentId = Number(id);
@ -107,7 +110,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
<div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
<Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
<ChevronLeft className="mr-2 inline-block h-5 w-5" />
Documents
<Trans>Documents</Trans>
</Link>
<div className="flex flex-row justify-between truncate">
@ -132,12 +135,18 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
documentStatus={document.status}
position="bottom"
>
<span>{recipients.length} Recipient(s)</span>
<span>
<Trans>{recipients.length} Recipient(s)</Trans>
</span>
</StackAvatarsWithTooltip>
</div>
)}
{document.deletedAt && <Badge variant="destructive">Document deleted</Badge>}
{document.deletedAt && (
<Badge variant="destructive">
<Trans>Document deleted</Trans>
</Badge>
)}
</div>
</div>
@ -146,7 +155,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
<DocumentHistorySheet documentId={document.id} userId={user.id}>
<Button variant="outline">
<Clock9 className="mr-1.5 h-4 w-4" />
Document history
<Trans>Document history</Trans>
</Button>
</DocumentHistorySheet>
</div>
@ -172,7 +181,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
<section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
<div className="flex flex-row items-center justify-between px-4">
<h3 className="text-foreground text-2xl font-semibold">
Document {FRIENDLY_STATUS_MAP[document.status].label.toLowerCase()}
{_(FRIENDLY_STATUS_MAP[document.status].labelExtended)}
</h3>
<DocumentPageViewDropdown document={documentWithRecipients} team={team} />
@ -180,22 +189,24 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
<p className="text-muted-foreground mt-2 px-4 text-sm ">
{match(document.status)
.with(
DocumentStatus.COMPLETED,
() => 'This document has been signed by all recipients',
)
.with(
DocumentStatus.DRAFT,
() => 'This document is currently a draft and has not been sent',
)
.with(DocumentStatus.COMPLETED, () => (
<Trans>This document has been signed by all recipients</Trans>
))
.with(DocumentStatus.DRAFT, () => (
<Trans>This document is currently a draft and has not been sent</Trans>
))
.with(DocumentStatus.PENDING, () => {
const pendingRecipients = recipients.filter(
(recipient) => recipient.signingStatus === 'NOT_SIGNED',
);
return `Waiting on ${pendingRecipients.length} recipient${
pendingRecipients.length > 1 ? 's' : ''
}`;
return (
<Plural
value={pendingRecipients.length}
one="Waiting on 1 recipient"
other="Waiting on # recipients"
/>
);
})
.exhaustive()}
</p>

40
apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
View File

@ -4,6 +4,9 @@ import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import {
DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
SKIP_QUERY_BATCH_META,
@ -45,6 +48,7 @@ export const EditDocumentForm = ({
isDocumentEnterprise,
}: EditDocumentFormProps) => {
const { toast } = useToast();
const { _ } = useLingui();
const router = useRouter();
const searchParams = useSearchParams();
@ -125,23 +129,23 @@ export const EditDocumentForm = ({
const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
settings: {
title: 'General',
description: 'Configure general settings for the document.',
title: msg`General`,
description: msg`Configure general settings for the document.`,
stepIndex: 1,
},
signers: {
title: 'Add Signers',
description: 'Add the people who will sign the document.',
title: msg`Add Signers`,
description: msg`Add the people who will sign the document.`,
stepIndex: 2,
},
fields: {
title: 'Add Fields',
description: 'Add all relevant fields for each recipient.',
title: msg`Add Fields`,
description: msg`Add all relevant fields for each recipient.`,
stepIndex: 3,
},
subject: {
title: 'Add Subject',
description: 'Add the subject and message you wish to send to signers.',
title: msg`Add Subject`,
description: msg`Add the subject and message you wish to send to signers.`,
stepIndex: 4,
},
};
@ -191,8 +195,8 @@ export const EditDocumentForm = ({
console.error(err);
toast({
title: 'Error',
description: 'An error occurred while updating the document settings.',
title: _(msg`Error`),
description: _(msg`An error occurred while updating the document settings.`),
variant: 'destructive',
});
}
@ -218,8 +222,8 @@ export const EditDocumentForm = ({
console.error(err);
toast({
title: 'Error',
description: 'An error occurred while adding signers.',
title: _(msg`Error`),
description: _(msg`An error occurred while adding signers.`),
variant: 'destructive',
});
}
@ -248,8 +252,8 @@ export const EditDocumentForm = ({
console.error(err);
toast({
title: 'Error',
description: 'An error occurred while adding the fields.',
title: _(msg`Error`),
description: _(msg`An error occurred while adding the fields.`),
variant: 'destructive',
});
}
@ -269,8 +273,8 @@ export const EditDocumentForm = ({
});
toast({
title: 'Document sent',
description: 'Your document has been sent successfully.',
title: _(msg`Document sent`),
description: _(msg`Your document has been sent successfully.`),
duration: 5000,
});
@ -279,8 +283,8 @@ export const EditDocumentForm = ({
console.error(err);
toast({
title: 'Error',
description: 'An error occurred while sending the document.',
title: _(msg`Error`),
description: _(msg`An error occurred while sending the document.`),
variant: 'destructive',
});
}

7
apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx
View File

@ -1,6 +1,7 @@
import Link from 'next/link';
import { redirect } from 'next/navigation';
import { Plural, Trans } from '@lingui/macro';
import { ChevronLeft, Users2 } from 'lucide-react';
import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
@ -78,7 +79,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
<div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
<Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
<ChevronLeft className="mr-2 inline-block h-5 w-5" />
Documents
<Trans>Documents</Trans>
</Link>
<h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
@ -97,7 +98,9 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
documentStatus={document.status}
position="bottom"
>
<span>{recipients.length} Recipient(s)</span>
<span>
<Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
</span>
</StackAvatarsWithTooltip>
</div>
)}

4
apps/web/src/app/(dashboard)/documents/[id]/edit/page.tsx
View File

@ -1,3 +1,5 @@
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
import { DocumentEditPageView } from './document-edit-page-view';
export type DocumentPageProps = {
@ -7,5 +9,7 @@ export type DocumentPageProps = {
};
export default function DocumentEditPage({ params }: DocumentPageProps) {
setupI18nSSR();
return <DocumentEditPageView params={params} />;
}

12
apps/web/src/app/(dashboard)/documents/[id]/loading.tsx
View File

@ -1,19 +1,23 @@
import Link from 'next/link';
import { Trans } from '@lingui/macro';
import { ChevronLeft, Loader } from 'lucide-react';
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
import { Skeleton } from '@documenso/ui/primitives/skeleton';
export default function Loading() {
setupI18nSSR();
return (
<div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
<Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
<ChevronLeft className="mr-2 inline-block h-5 w-5" />
Documents
<Trans>Documents</Trans>
</Link>
<h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
Loading Document...
<Trans>Loading Document...</Trans>
</h1>
<div className="flex h-10 items-center">
@ -25,7 +29,9 @@ export default function Loading() {
<div className="flex h-[80vh] max-h-[60rem] flex-col items-center justify-center">
<Loader className="text-documenso h-12 w-12 animate-spin" />
<p className="text-muted-foreground mt-4">Loading document...</p>
<p className="text-muted-foreground mt-4">
<Trans>Loading document...</Trans>
</p>
</div>
</div>

10
apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-data-table.tsx
View File

@ -2,6 +2,8 @@
import { useSearchParams } from 'next/navigation';
import { msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { DateTime } from 'luxon';
import type { DateTimeFormatOptions } from 'luxon';
import { UAParser } from 'ua-parser-js';
@ -27,6 +29,8 @@ const dateFormat: DateTimeFormatOptions = {
};
export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps) => {
const { _ } = useLingui();
const parser = new UAParser();
const searchParams = useSearchParams();
@ -70,12 +74,12 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
<DataTable
columns={[
{
header: 'Time',
header: _(msg`Time`),
accessorKey: 'createdAt',
cell: ({ row }) => <LocaleDate format={dateFormat} date={row.original.createdAt} />,
},
{
header: 'User',
header: _(msg`User`),
accessorKey: 'name',
cell: ({ row }) =>
row.original.name || row.original.email ? (
@ -97,7 +101,7 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
),
},
{
header: 'Action',
header: _(msg`Action`),
accessorKey: 'type',
cell: ({ row }) => (
<span>

27
apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx
View File

@ -1,6 +1,9 @@
import Link from 'next/link';
import { redirect } from 'next/navigation';
import type { MessageDescriptor } from '@lingui/core';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { ChevronLeft } from 'lucide-react';
import { DateTime } from 'luxon';
@ -29,6 +32,8 @@ export type DocumentLogsPageViewProps = {
};
export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageViewProps) => {
const { _ } = useLingui();
const locale = getLocale();
const { id } = params;
@ -60,39 +65,39 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
redirect(documentRootPath);
}
const documentInformation: { description: string; value: string }[] = [
const documentInformation: { description: MessageDescriptor; value: string }[] = [
{
description: 'Document title',
description: msg`Document title`,
value: document.title,
},
{
description: 'Document ID',
description: msg`Document ID`,
value: document.id.toString(),
},
{
description: 'Document status',
value: FRIENDLY_STATUS_MAP[document.status].label,
description: msg`Document status`,
value: _(FRIENDLY_STATUS_MAP[document.status].label),
},
{
description: 'Created by',
description: msg`Created by`,
value: document.User.name
? `${document.User.name} (${document.User.email})`
: document.User.email,
},
{
description: 'Date created',
description: msg`Date created`,
value: DateTime.fromJSDate(document.createdAt)
.setLocale(locale)
.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
},
{
description: 'Last updated',
description: msg`Last updated`,
value: DateTime.fromJSDate(document.updatedAt)
.setLocale(locale)
.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
},
{
description: 'Time zone',
description: msg`Time zone`,
value: document.documentMeta?.timezone ?? 'N/A',
},
];
@ -114,7 +119,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
className="flex items-center text-[#7AC455] hover:opacity-80"
>
<ChevronLeft className="mr-2 inline-block h-5 w-5" />
Document
<Trans>Document</Trans>
</Link>
<div className="flex flex-col justify-between truncate sm:flex-row">
@ -147,7 +152,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
<Card className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2" degrees={45} gradient>
{documentInformation.map((info, i) => (
<div className="text-foreground text-sm" key={i}>
<h3 className="font-semibold">{info.description}</h3>
<h3 className="font-semibold">{_(info.description)}</h3>
<p className="text-muted-foreground">{info.value}</p>
</div>
))}

11
apps/web/src/app/(dashboard)/documents/[id]/logs/download-audit-log-button.tsx
View File

@ -1,5 +1,7 @@
'use client';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { DownloadIcon } from 'lucide-react';
import { trpc } from '@documenso/trpc/react';
@ -19,6 +21,7 @@ export const DownloadAuditLogButton = ({
documentId,
}: DownloadAuditLogButtonProps) => {
const { toast } = useToast();
const { _ } = useLingui();
const { mutateAsync: downloadAuditLogs, isLoading } =
trpc.document.downloadAuditLogs.useMutation();
@ -59,8 +62,10 @@ export const DownloadAuditLogButton = ({
console.error(error);
toast({
title: 'Something went wrong',
description: 'Sorry, we were unable to download the audit logs. Please try again later.',
title: _(msg`Something went wrong`),
description: _(
msg`Sorry, we were unable to download the audit logs. Please try again later.`,
),
variant: 'destructive',
});
}
@ -73,7 +78,7 @@ export const DownloadAuditLogButton = ({
onClick={() => void onDownloadAuditLogsClick()}
>
{!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
Download Audit Logs
<Trans>Download Audit Logs</Trans>
</Button>
);
};

11
apps/web/src/app/(dashboard)/documents/[id]/logs/download-certificate-button.tsx
View File

@ -1,5 +1,7 @@
'use client';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { DownloadIcon } from 'lucide-react';
import { DocumentStatus } from '@documenso/prisma/client';
@ -20,6 +22,7 @@ export const DownloadCertificateButton = ({
documentStatus,
}: DownloadCertificateButtonProps) => {
const { toast } = useToast();
const { _ } = useLingui();
const { mutateAsync: downloadCertificate, isLoading } =
trpc.document.downloadCertificate.useMutation();
@ -60,8 +63,10 @@ export const DownloadCertificateButton = ({
console.error(error);
toast({
title: 'Something went wrong',
description: 'Sorry, we were unable to download the certificate. Please try again later.',
title: _(msg`Something went wrong`),
description: _(
msg`Sorry, we were unable to download the certificate. Please try again later.`,
),
variant: 'destructive',
});
}
@ -76,7 +81,7 @@ export const DownloadCertificateButton = ({
onClick={() => void onDownloadCertificatesClick()}
>
{!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
Download Certificate
<Trans>Download Certificate</Trans>
</Button>
);
};

4
apps/web/src/app/(dashboard)/documents/[id]/logs/page.tsx
View File

@ -1,3 +1,5 @@
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
import { DocumentLogsPageView } from './document-logs-page-view';
export type DocumentsLogsPageProps = {
@ -7,5 +9,7 @@ export type DocumentsLogsPageProps = {
};
export default function DocumentsLogsPage({ params }: DocumentsLogsPageProps) {
setupI18nSSR();
return <DocumentLogsPageView params={params} />;
}

4
apps/web/src/app/(dashboard)/documents/[id]/page.tsx
View File

@ -1,3 +1,5 @@
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
import { DocumentPageView } from './document-page-view';
export type DocumentPageProps = {
@ -7,5 +9,7 @@ export type DocumentPageProps = {
};
export default function DocumentPage({ params }: DocumentPageProps) {
setupI18nSSR();
return <DocumentPageView params={params} />;
}

9
apps/web/src/app/(dashboard)/documents/[id]/sent/page.tsx
View File

@ -1,17 +1,22 @@
import Link from 'next/link';
import { Trans } from '@lingui/macro';
import { ChevronLeft } from 'lucide-react';
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
export default function DocumentSentPage() {
setupI18nSSR();
return (
<div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
<Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
<ChevronLeft className="mr-2 inline-block h-5 w-5" />
Documents
<Trans>Documents</Trans>
</Link>
<h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
Loading Document...
<Trans>Loading Document...</Trans>
</h1>
</div>
);