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

ui

Browse Source
This commit is contained in:
Timur Ercan
2023-02-07 12:43:18 +01:00
parent 554c641201
commit 5c589adda8
2 changed files with 85 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web/pages/documents.tsx
View File

@ -4,6 +4,7 @@ import type { NextPageWithLayout } from "./_app";
import Head from "next/head"; import Head from "next/head";
import { import {
CheckBadgeIcon, CheckBadgeIcon,
CheckIcon,
DocumentPlusIcon, DocumentPlusIcon,
EnvelopeIcon, EnvelopeIcon,
EyeIcon, EyeIcon,
@ -151,11 +152,11 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
{item.sendStatus === "SENT" && {item.sendStatus === "SENT" &&
item.readStatus !== "OPENED" ? ( item.readStatus !== "OPENED" ? (
<span id="sent_icon"> <span id="sent_icon">
<EnvelopeIcon className="inline h-5 mr-1"></EnvelopeIcon>
<span <span
id="sent_icon" id="sent_icon"
className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800" className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
> >
<EnvelopeIcon className="inline h-5 mr-1"></EnvelopeIcon>
{item.name {item.name
? item.name + " <" + item.email + ">" ? item.name + " <" + item.email + ">"
: item.email} : item.email}
@ -167,11 +168,12 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
{item.readStatus === "OPENED" && {item.readStatus === "OPENED" &&
item.signingStatus === "NOT_SIGNED" ? ( item.signingStatus === "NOT_SIGNED" ? (
<span id="read_icon"> <span id="read_icon">
<EyeIcon className="inline h-5 mr-1"></EyeIcon>{" "}
<span <span
id="sent_icon" id="sent_icon"
className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800" className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
> >
<CheckIcon className="inline h-5 -mr-2"></CheckIcon>
<CheckIcon className="inline h-5 mr-1"></CheckIcon>
{item.name {item.name
? item.name + " <" + item.email + ">" ? item.name + " <" + item.email + ">"
: item.email} : item.email}
@ -182,8 +184,10 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
)} )}
{item.signingStatus === "SIGNED" ? ( {item.signingStatus === "SIGNED" ? (
<span id="signed_icon"> <span id="signed_icon">
<CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "} <span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
{item.email} <CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "}
{item.email}
</span>
</span> </span>
) : ( ) : (
"" ""

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

@ -2,14 +2,8 @@ import Head from "next/head";
import { ReactElement, useState } 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 { classNames, NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
import { import { CheckBadgeIcon, CheckIcon, PaperAirplaneIcon, UserPlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
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";
@ -84,7 +78,12 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
className="px-0 py-4 w-full hover:bg-green-50 border-0 group" className="px-0 py-4 w-full hover:bg-green-50 border-0 group"
> >
<div id="container" className="flex w-full"> <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"> <div
className={classNames(
"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",
item.sendStatus === "SENT" ? "bg-gray-100" : ""
)}
>
<label <label
htmlFor="name" htmlFor="name"
className="block text-xs font-medium text-gray-900" className="block text-xs font-medium text-gray-900"
@ -95,6 +94,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
type="email" type="email"
name="email" name="email"
value={item.email} value={item.email}
disabled={item.sendStatus === "SENT"}
onChange={(e) => { onChange={(e) => {
const updatedSigners = [...signers]; const updatedSigners = [...signers];
updatedSigners[index].email = e.target.value; updatedSigners[index].email = e.target.value;
@ -111,7 +111,12 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
placeholder="john.dorian@loremipsum.com" placeholder="john.dorian@loremipsum.com"
/> />
</div> </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"> <div
className={classNames(
"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",
item.sendStatus === "SENT" ? "bg-gray-100" : ""
)}
>
<label <label
htmlFor="name" htmlFor="name"
className="block text-xs font-medium text-gray-900" className="block text-xs font-medium text-gray-900"
@ -122,6 +127,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
type="email" type="email"
name="name" name="name"
value={item.name} value={item.name}
disabled={item.sendStatus === "SENT"}
onChange={(e) => { onChange={(e) => {
const updatedSigners = [...signers]; const updatedSigners = [...signers];
updatedSigners[index].name = e.target.value; updatedSigners[index].name = e.target.value;
@ -138,10 +144,66 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
placeholder="John Dorian" placeholder="John Dorian"
/> />
</div> </div>
<div className="ml-auto flex">
<div key={item.id}>
{item.sendStatus === "NOT_SENT" ? (
<span
id="sent_icon"
className="inline-block flex-shrink-0 rounded-full bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-800"
>
Not Sent
</span>
) : (
""
)}
{item.sendStatus === "SENT" &&
item.readStatus !== "OPENED" ? (
<span id="sent_icon">
<span
id="sent_icon"
className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800"
>
<CheckIcon className="inline h-5 mr-1"></CheckIcon>{" "}
Sent
</span>
</span>
) : (
""
)}
{item.readStatus === "OPENED" &&
item.signingStatus === "NOT_SIGNED" ? (
<span id="read_icon">
<span
id="sent_icon"
className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800"
>
<CheckIcon className="inline h-5 -mr-2"></CheckIcon>
<CheckIcon className="inline h-5 mr-1"></CheckIcon>
Seen
</span>
</span>
) : (
""
)}
{item.signingStatus === "SIGNED" ? (
<span id="signed_icon">
<span
id="sent_icon"
className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
>
<CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>
Signed
</span>
</span>
) : (
""
)}
</div>
</div>
<div className="ml-auto flex"> <div className="ml-auto flex">
<IconButton <IconButton
icon={XMarkIcon} icon={XMarkIcon}
disabled={!item.id} disabled={!item.id || item.sendStatus === "SENT"}
onClick={() => { onClick={() => {
const signersWithoutIndex = [...signers]; const signersWithoutIndex = [...signers];
const removedItem = signersWithoutIndex.splice( const removedItem = signersWithoutIndex.splice(
@ -275,6 +337,8 @@ async function send(document: any) {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
method: "POST", method: "POST",
}).finally(() => {
location.reload();
}); });
} }