Merge pull request #13 from ElTimuro/DOC-90-signpage

Doc 90 signpage

apps/web/components/editor/editable-field.tsx

@@ -1,10 +1,7 @@
-import { ResizableBox, ResizeCallbackData } from "react-resizable";
+import React, { useState } from "react";
-import React, { SyntheticEvent, useEffect, useState } from "react";
 import Draggable from "react-draggable";
-import { CircleStackIcon, TrashIcon } from "@heroicons/react/24/solid";
 import Logo from "../logo";
 import { IconButton } from "@documenso/ui";
-import toast from "react-hot-toast";
 import { XCircleIcon } from "@heroicons/react/20/solid";
 const stc = require("string-to-color");
 
@@ -20,6 +17,7 @@ type FieldPropsType = {
   };
   onPositionChanged: any;
   onDelete: any;
+  hidden: boolean;
 };
 
 export default function EditableField(props: FieldPropsType) {
@@ -52,6 +50,7 @@ export default function EditableField(props: FieldPropsType) {
       cancel="strong"
     >
       <div
+        hidden={props.hidden}
         ref={nodeRef}
         className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none"
         style={{

apps/web/components/editor/pdf-editor.tsx

@@ -37,7 +37,6 @@ export default function PDFEditor(props: any) {
   function onDeleteHandler(id: any) {
     const field = fields.find((e) => e.id == id);
     const fieldIndex = fields.map((item) => item.id).indexOf(id);
-    console.log(fieldIndex);
     if (fieldIndex > -1) {
       const fieldWithoutRemoved = [...fields];
       const removedField = fieldWithoutRemoved.splice(fieldIndex, 1);

apps/web/components/editor/pdf-viewer.jsx

@@ -71,6 +71,7 @@ export default function PDFViewer(props) {
                       ></ReadOnlyField>
                     ) : (
                       <EditableField
+                        hidden={item.Signature}
                         key={item.id}
                         field={item}
                         className="absolute"

apps/web/pages/documents.tsx

@@ -3,22 +3,20 @@ import Layout from "../components/layout";
 import type { NextPageWithLayout } from "./_app";
 import Head from "next/head";
 import {
+  ArrowDownTrayIcon,
   CheckBadgeIcon,
   CheckIcon,
   DocumentPlusIcon,
   EnvelopeIcon,
-  EyeIcon,
+  PencilSquareIcon,
   PlusIcon,
-  SunIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { uploadDocument } from "@documenso/features";
 import { DocumentStatus } from "@prisma/client";
 import { Tooltip as ReactTooltip } from "react-tooltip";
-import { getDocumentsForUserFromToken } from "@documenso/lib/query";
+import { Button, IconButton } from "@documenso/ui";
-import { Button } from "@documenso/ui";
 
 const DocumentsPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
@@ -44,7 +42,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
   }, []);
 
   function showDocument(documentId: number) {
-    router.push(`/documents/${documentId}`);
+    router.push(`/documents/${documentId}/recipients`);
   }
 
   return (
@@ -227,11 +225,33 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                           </p>
                         </td>
                         <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-                          <Link href={"/documents/" + document.id}>
+                          <div>
-                            <TrashIcon
+                            <IconButton
-                              className="flex-shrink-0 -ml-1 mr-3 h-6 w-6 inline text-neon"
+                              icon={PencilSquareIcon}
-                              aria-hidden="true"
+                              className="mr-2"
-                              onClick={(event) => {
+                              onClick={(event: any) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                router.push("/documents/" + document.id);
+                              }}
+                            >
+                              Edit
+                            </IconButton>
+                            <IconButton
+                              icon={ArrowDownTrayIcon}
+                              className="mr-2"
+                              onClick={(event: any) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                router.push("/api/documents/" + document.id);
+                              }}
+                              download
+                            >
+                              Download
+                            </IconButton>
+                            <IconButton
+                              icon={TrashIcon}
+                              onClick={(event: any) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 if (
@@ -259,9 +279,9 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                     });
                                 }
                               }}
-                            />
+                            ></IconButton>
                             <span className="sr-only">, {document.name}</span>
-                          </Link>
+                          </div>
                         </td>
                       </tr>
                     ))}

apps/web/pages/documents/[id]/index.tsx

@@ -9,7 +9,6 @@ import { DocumentStatus } from "@prisma/client";
 import {
   InformationCircleIcon,
   PaperAirplaneIcon,
-  UserPlusIcon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
 import { getDocument } from "@documenso/lib/query";
@@ -126,7 +125,7 @@ export async function getServerSideProps(context: any) {
 
     return {
       props: {
-        document: document,
+        document: JSON.parse(JSON.stringify(document)),
       },
     };
   } catch (error) {

apps/web/pages/documents/[id]/recipients.tsx

@@ -4,6 +4,7 @@ import Layout from "../../../components/layout";
 import { NextPageWithLayout } from "../../_app";
 import { classNames, NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
 import {
+  ArrowDownTrayIcon,
   CheckBadgeIcon,
   CheckIcon,
   EnvelopeIcon,
@@ -63,13 +64,21 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
             </h2>
           </div>
           <div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
+            <Button
+              icon={ArrowDownTrayIcon}
+              color="secondary"
+              className="mr-2"
+              href={"/api/documents/" + props.document.id}
+            >
+              Download
+            </Button>
             <Button
               icon={PencilSquareIcon}
               color="secondary"
               className="mr-2"
               href={breadcrumbItems[1].href}
             >
-              Customize Document
+              Edit Document
             </Button>
             <Button
               className="min-w-[125px]"
@@ -431,7 +440,7 @@ export async function getServerSideProps(context: any) {
 
   return {
     props: {
-      document: document,
+      document: JSON.parse(JSON.stringify(document)),
     },
   };
 }

packages/lib/query/getDocument.ts

@@ -19,7 +19,7 @@ export const getDocument = async (
     },
     include: {
       Recipient: true,
-      Field: { include: { Recipient: true } },
+      Field: { include: { Recipient: true, Signature: true } },
     },
   });