Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 00:03:33 +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 Head from "next/head";
import { ReactElement } from "react"; import { ReactElement, useState } from "react";
import Layout from "../../../components/layout"; import Layout from "../../../components/layout";
import { NextPageWithLayout } from "../../_app"; import { NextPageWithLayout } from "../../_app";
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib"; 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 { getUserFromToken } from "@documenso/lib/server";
import { getDocument } from "@documenso/lib/query"; import { getDocument } from "@documenso/lib/query";
import { Document as PrismaDocument } from "@prisma/client"; 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 RecipientsPage: NextPageWithLayout = (props: any) => {
const title: string = 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 ( return (
<> <>
<Head> <Head>
@ -70,16 +80,81 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
</p> </p>
</div> </div>
<ul role="list" className="divide-y divide-gray-200"> <ul role="list" className="divide-y divide-gray-200">
{props?.document?.Recipient.map((item: any) => ( {signers.map((item: any, index: number) => (
<li key={item.id} className="px-0 py-4"> <li
<div> key={index}
<UserCircleIcon className="inline w-6 mr-2"></UserCircleIcon> className="px-0 py-4 w-full hover:bg-green-50 border-0 group"
{item.email} >
<span> (You)</span> <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> </div>
</li> </li>
))} ))}
</ul> </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"> <div className="border-b border-gray-200 pb-5 mt-6">
<h3 className="text-lg font-medium leading-6 text-gray-900">CC</h3> <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"> <p className="mt-2 max-w-4xl text-sm text-gray-500">

2
packages/ui/components/button/Button.tsx
View File

@ -20,6 +20,7 @@ export function Button(props: any) {
color === "primary" ? primaryStyles : secondaryStyles, color === "primary" ? primaryStyles : secondaryStyles,
props.className props.className
)} )}
hidden={props.hidden}
> >
{props.icon ? ( {props.icon ? (
<props.icon <props.icon
@ -41,6 +42,7 @@ export function Button(props: any) {
)} )}
onClick={props.onClick} onClick={props.onClick}
disabled={props.disabled} disabled={props.disabled}
hidden={props.hidden}
> >
{props.icon ? ( {props.icon ? (
<props.icon <props.icon

54
packages/ui/components/button/IconButton.tsx Normal file
View File

@ -0,0 +1,54 @@
import { classNames } from "@documenso/lib";
import Link from "next/link";
import React from "react";
export function IconButton(props: any) {
const isLink = typeof props.href !== "undefined";
const { color = "primary", icon, disabled, onClick } = props;
const baseStyles = "disabled:text-gray-300";
const primaryStyles = "text-neon hover:text-neon-dark";
const secondaryStyles = "text-gray-700 hover:text-neon-dark";
return isLink ? (
<Link
id={props.id}
href={props.href}
className={classNames(
baseStyles,
color === "primary" ? primaryStyles : secondaryStyles,
props.className
)}
hidden={props.hidden}
>
{props.icon ? (
<props.icon
className="inline text-inherit h-6 mr-1"
aria-hidden="true"
></props.icon>
) : (
""
)}
</Link>
) : (
<button
id={props.id}
className={classNames(
baseStyles,
color === "primary" ? primaryStyles : secondaryStyles,
props.className
)}
onClick={props.onClick}
disabled={props.disabled}
hidden={props.hidden}
>
{props.icon ? (
<props.icon
className="inline text-inherit h-6 mr-1"
aria-hidden="true"
></props.icon>
) : (
""
)}
</button>
);
}

1
packages/ui/components/button/index.ts
View File

@ -1 +1,2 @@
export { Button } from "./Button"; export { Button } from "./Button";
export { IconButton } from "./IconButton";

2
packages/ui/index.ts
View File

@ -1,2 +1,2 @@
export { Button } from "./components/button/index"; export { Button, IconButton } from "./components/button/index";
export { Breadcrumb } from "./components/breadcrumb/index"; export { Breadcrumb } from "./components/breadcrumb/index";