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

icon button an recipients ui

Browse Source
This commit is contained in:
Timur Ercan
2023-02-03 16:33:00 +01:00
parent ffe16cbece
commit 2d0c392e08
5 changed files with 142 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,19 @@
import Head from "next/head";
import { ReactElement } from "react";
import { ReactElement, useState } from "react";
import Layout from "../../../components/layout";
import { NextPageWithLayout } from "../../_app";
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
import { PaperAirplaneIcon, UserCircleIcon } from "@heroicons/react/24/outline";
import {
PaperAirplaneIcon,
TrashIcon,
UserCircleIcon,
UserPlusIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import { getUserFromToken } from "@documenso/lib/server";
import { getDocument } from "@documenso/lib/query";
import { Document as PrismaDocument } from "@prisma/client";
import { Breadcrumb, Button } from "@documenso/ui";
import { Breadcrumb, Button, IconButton } from "@documenso/ui";
const RecipientsPage: NextPageWithLayout = (props: any) => {
const title: string =
@ -31,6 +37,10 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
},
];
const [signers, setSigners] = useState(props?.document?.Recipient);
if (signers.length === 0) setSigners([{ email: "", name: "" }]);
return (
<>
<Head>
@ -70,16 +80,81 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
</p>
</div>
<ul role="list" className="divide-y divide-gray-200">
{props?.document?.Recipient.map((item: any) => (
<li key={item.id} className="px-0 py-4">
<div>
<UserCircleIcon className="inline w-6 mr-2"></UserCircleIcon>
{item.email}
<span> (You)</span>
{signers.map((item: any, index: number) => (
<li
key={index}
className="px-0 py-4 w-full hover:bg-green-50 border-0 group"
>
<div id="container" className="flex w-full">
<div className="w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon">
<label
htmlFor="name"
className="block text-xs font-medium text-gray-900"
>
Name
</label>
<input
type="email"
name="name"
value={item.name}
onChange={(e) => {
const updatedSigners = [...signers];
updatedSigners[index].name = e.target.value;
setSigners(updatedSigners);
}}
id="name"
className="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 sm:text-sm outline-none bg-inherit"
placeholder="John Dorian"
/>
</div>
<div className="ml-3 w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon">
<label
htmlFor="name"
className="block text-xs font-medium text-gray-900"
>
Email
</label>
<input
type="email"
name="name"
value={item.email}
onChange={(e) => {
const updatedSigners = [...signers];
updatedSigners[index].email = e.target.value;
setSigners(updatedSigners);
}}
id="name"
className="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 sm:text-sm outline-none bg-inherit"
placeholder="john.dorian@loremipsum.com"
/>
</div>
<div className="ml-auto flex">
<IconButton
icon={XMarkIcon}
disabled={!signers[0].name && !signers[0].email}
onClick={() => {
const signersWithoutIndex = [...signers];
signersWithoutIndex.splice(index, 1);
setSigners(signersWithoutIndex);
console.log("click");
// todo save to api
}}
// className="group-hover:text-neon-dark"
></IconButton>
</div>
</div>
</li>
))}
</ul>
<Button
icon={UserPlusIcon}
className="mt-3"
onClick={() => {
setSigners(signers.concat({ email: "", name: "" }));
}}
>
Add Signer
</Button>
<div className="border-b border-gray-200 pb-5 mt-6">
<h3 className="text-lg font-medium leading-6 text-gray-900">CC</h3>
<p className="mt-2 max-w-4xl text-sm text-gray-500">