mirror of
https://github.com/documenso/documenso.git
synced 2025-11-13 16:23:06 +10:00
document fetail page header
This commit is contained in:
Timur Ercan
@ -9,6 +9,18 @@ import prisma from "@documenso/prisma";
|
||||
import { getUserFromToken } from "@documenso/lib/server";
|
||||
import Logo from "../../../components/logo";
|
||||
import Link from "next/link";
|
||||
import { DocumentStatus } from "@prisma/client";
|
||||
import {
|
||||
BriefcaseIcon,
|
||||
CalendarIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
CurrencyDollarIcon,
|
||||
InformationCircleIcon,
|
||||
MapPinIcon,
|
||||
PaperAirplaneIcon,
|
||||
UsersIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
const PDFViewer = dynamic(() => import("../../../components/pdf-viewer"), {
|
||||
ssr: false,
|
||||
@ -18,27 +30,104 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-fit p-4">
|
||||
<div className="mx-auto w-auto text-left">
|
||||
<div className="mt-4">
|
||||
<div>
|
||||
<div>
|
||||
<h3 className="font-medium leading-tight text-3xl mt-0 mb-2 text-neon">
|
||||
{props.document.title}
|
||||
</h3>
|
||||
<Link
|
||||
type="a"
|
||||
href={
|
||||
NEXT_PUBLIC_WEBAPP_URL +
|
||||
"/documents/" +
|
||||
props.document.id +
|
||||
"/recipients"
|
||||
}
|
||||
className="inline-flex items-center justify-center rounded-md border border-transparent bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
|
||||
>
|
||||
Add Signers
|
||||
</Link>
|
||||
<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>
|
||||
</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 className="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
|
||||
<div className="mt-2 flex items-center text-sm text-gray-500">
|
||||
<UsersIcon
|
||||
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{props?.document?.Recipient?.length} Recipients
|
||||
</div>
|
||||
<div className="mt-2 flex items-center text-sm text-gray-500">
|
||||
<InformationCircleIcon
|
||||
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{formatDocumentStatus(props.document.status)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
|
||||
<Link
|
||||
type="a"
|
||||
href={
|
||||
NEXT_PUBLIC_WEBAPP_URL +
|
||||
"/documents/" +
|
||||
props.document.id +
|
||||
"/recipients"
|
||||
}
|
||||
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"
|
||||
>
|
||||
Edit Recipients
|
||||
</Link>
|
||||
<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>
|
||||
<div className="">
|
||||
<div className="mx-auto w-fit p-4">
|
||||
<PDFViewer
|
||||
pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}`}
|
||||
/>
|
||||
@ -47,6 +136,19 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
|
||||
);
|
||||
};
|
||||
|
||||
function formatDocumentStatus(status: DocumentStatus) {
|
||||
switch (status) {
|
||||
case DocumentStatus.DRAFT:
|
||||
return "Draft";
|
||||
|
||||
case DocumentStatus.PENDING:
|
||||
return "Pending";
|
||||
|
||||
case DocumentStatus.COMPLETED:
|
||||
return "Completed";
|
||||
}
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context: any) {
|
||||
const user = await getUserFromToken(context.req, context.res);
|
||||
if (!user) return;
|
||||
@ -56,6 +158,9 @@ export async function getServerSideProps(context: any) {
|
||||
where: {
|
||||
id: +documentId,
|
||||
},
|
||||
include: {
|
||||
Recipient: true,
|
||||
},
|
||||
});
|
||||
|
||||
// todo optimize querys
|
||||
|
||||
Reference in New Issue
Block a user