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

recipient layout idea

Browse Source
This commit is contained in:
Timur Ercan
2023-01-31 16:16:22 +01:00
parent 2306bc2d65
commit 54cc70008a
1 changed files with 120 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
apps/web/pages/documents/[id]/recipients.tsx
View File

@ -15,21 +15,120 @@ import {
TrashIcon,
UserPlusIcon,
} from "@heroicons/react/20/solid";
import { classNames } from "@documenso/lib";
import { classNames, NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
import {
PaperAirplaneIcon,
UserGroupIcon,
UserIcon,
UsersIcon,
} from "@heroicons/react/24/outline";
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
import { getUserFromToken } from "@documenso/lib/server";
const RecipientsPage: NextPageWithLayout = () => {
const RecipientsPage: NextPageWithLayout = (props: any) => {
const title: string =
`"` + props?.document?.title + `"` + "Recipients | Documenso";
return (
<>
<Head>
<title>Documenttitle - Recipients | Documenso</title>
<title>{title}</title>
</Head>
-todo add signers ui -todo add breadcrumps -todo who will sign this
dropdown
{/* -todo add signers ui -todo add breadcrumps -todo who will sign this
dropdown */}
<div className="mt-10">
<div>
<nav className="sm:hidden" aria-label="Back">
<a
href="#"
className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700"
>
<ChevronLeftIcon
className="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-gray-400"
aria-hidden="true"
/>
Back
</a>
</nav>
<nav className="hidden sm:flex" aria-label="Breadcrumb">
<ol role="list" className="flex items-center space-x-4">
<li>
<div className="flex">
<a
href="/documents"
className="text-sm font-medium text-gray-500 hover:text-gray-700"
>
Documents
</a>
</div>
</li>
<li>
<div className="flex items-center">
<ChevronRightIcon
className="h-5 w-5 flex-shrink-0 text-gray-400"
aria-hidden="true"
/>
<a
href={
NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id
}
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
>
"{props.document.title}"
</a>
</div>
</li>
<li>
<div className="flex items-center">
<ChevronRightIcon
className="h-5 w-5 flex-shrink-0 text-gray-400"
aria-hidden="true"
/>
<a
href={
NEXT_PUBLIC_WEBAPP_URL +
"/documents/" +
props.document.id +
"/recipients"
}
aria-current="page"
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
>
Recipients
</a>
</div>
</li>
</ol>
</nav>
</div>
<div className="mt-2 md:flex md:items-center md:justify-between">
<div className="min-w-0 flex-1">
<h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
{props.document.title}
</h2>
</div>
<div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
<button
type="button"
className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
Save and Close
</button>
<button
type="button"
disabled={(props?.document?.Recipient?.length || 0) === 0}
onClick={() =>
confirm(
`Send document out to ${props?.document?.recipient?.length} recipients?`
)
}
className="ml-3 inline-flex items-center rounded-md border border-transparent bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm bg-grey hover:bg-neon-dark focus:outline-none focus:ring-2 focus:neon-dark focus:ring-offset-2"
>
<PaperAirplaneIcon className="inline text-white w-4 mr-1"></PaperAirplaneIcon>
Send
</button>
</div>
</div>
</div>
</>
);
};
@ -39,9 +138,23 @@ RecipientsPage.getLayout = function getLayout(page: ReactElement) {
};
export async function getServerSideProps(context: any) {
// todo get current document
const user = await getUserFromToken(context.req, context.res);
if (!user) return;
const { id: documentId } = context.query;
const document = await prisma.document.findFirstOrThrow({
where: {
id: +documentId,
},
include: {
Recipient: true,
},
});
return {
props: {},
props: {
document: document,
},
};
}