From 2d0c392e084d3055d67734e87d837780d42b4828 Mon Sep 17 00:00:00 2001
From: Timur Ercan
Date: Fri, 3 Feb 2023 16:33:00 +0100
Subject: [PATCH] icon button an recipients ui
---
apps/web/pages/documents/[id]/recipients.tsx | 93 ++++++++++++++++++--
packages/ui/components/button/Button.tsx | 2 +
packages/ui/components/button/IconButton.tsx | 54 ++++++++++++
packages/ui/components/button/index.ts | 1 +
packages/ui/index.ts | 2 +-
5 files changed, 142 insertions(+), 10 deletions(-)
create mode 100644 packages/ui/components/button/IconButton.tsx
diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx
index f6e761113..b18cd4388 100644
--- a/apps/web/pages/documents/[id]/recipients.tsx
+++ b/apps/web/pages/documents/[id]/recipients.tsx
@@ -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 (
<>
@@ -70,16 +80,81 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
- {props?.document?.Recipient.map((item: any) => (
- -
-
-
- {item.email}
-
(You)
+ {signers.map((item: any, index: number) => (
+
-
+
+
+
+ {
+ 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"
+ />
+
+
+
+ {
+ 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"
+ />
+
+
+ {
+ const signersWithoutIndex = [...signers];
+ signersWithoutIndex.splice(index, 1);
+ setSigners(signersWithoutIndex);
+ console.log("click");
+ // todo save to api
+ }}
+ // className="group-hover:text-neon-dark"
+ >
+
))}
+
CC
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 8a84ec383..14881708b 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -20,6 +20,7 @@ export function Button(props: any) {
color === "primary" ? primaryStyles : secondaryStyles,
props.className
)}
+ hidden={props.hidden}
>
{props.icon ? (
{props.icon ? (
+ {props.icon ? (
+
+ ) : (
+ ""
+ )}
+
+ ) : (
+
+ );
+}
diff --git a/packages/ui/components/button/index.ts b/packages/ui/components/button/index.ts
index 0064dee8f..f5602215e 100644
--- a/packages/ui/components/button/index.ts
+++ b/packages/ui/components/button/index.ts
@@ -1 +1,2 @@
export { Button } from "./Button";
+export { IconButton } from "./IconButton";
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 3115d535d..22983b785 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1,2 +1,2 @@
-export { Button } from "./components/button/index";
+export { Button, IconButton } from "./components/button/index";
export { Breadcrumb } from "./components/breadcrumb/index";