Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-20 19:51:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #16 from ElTimuro/doc-43-filter

Browse Source 
Doc-43-filter
This commit is contained in:
Timur Ercan
2023-02-23 18:30:39 +01:00
committed by GitHub
parent 17cfae4b43 b2b963fcc6
commit 585a81a4f6
5 changed files with 331 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/pages/dashboard.tsx
View File

@ -30,19 +30,19 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
name: "Draft", name: "Draft",
stat: "0", stat: "0",
icon: DocumentIcon, icon: DocumentIcon,
link: "/documents?filter=draft", link: "/documents?filter=DRAFT",
}, },
{ {
name: "Waiting for others", name: "Waiting for others",
stat: "0", stat: "0",
icon: UsersIcon, icon: UsersIcon,
link: "/documents?filter=waiting_for_others", link: "/documents?filter=PENDING",
}, },
{ {
name: "Completed", name: "Completed",
stat: "0", stat: "0",
icon: CheckBadgeIcon, icon: CheckBadgeIcon,
link: "/documents?filter=completed", link: "/documents?filter=COMPLETED",
}, },
]; ];

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

@ -16,12 +16,33 @@ import { useRouter } from "next/router";
import { uploadDocument } from "@documenso/features"; import { uploadDocument } from "@documenso/features";
import { DocumentStatus } from "@prisma/client"; import { DocumentStatus } from "@prisma/client";
import { Tooltip as ReactTooltip } from "react-tooltip"; import { Tooltip as ReactTooltip } from "react-tooltip";
import { Button, IconButton } from "@documenso/ui"; import { Button, IconButton, SelectBox } from "@documenso/ui";
import { NextPageContext } from "next";
const DocumentsPage: NextPageWithLayout = (props: any) => { const DocumentsPage: NextPageWithLayout = (props: any) => {
const router = useRouter(); const router = useRouter();
const [documents, setDocuments]: any[] = useState([]); const [documents, setDocuments]: any[] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const statusFilters = [
{ label: "All", value: "ALL" },
{ label: "Draft", value: "DRAFT" },
{ label: "Pending", value: "PENDING" },
{ label: "Completed", value: "COMPLETED" },
];
const createdFilter = [
{ label: "All Time", value: 0 },
{ label: "Last 7 days", value: 7 },
{ label: "Last 30 days", value: 30 },
{ label: "Last 3 months", value: 90 },
{ label: "Last 12 months", value: 66 },
];
const [selectedStatusFilter, setSelectedStatusFilter] = useState(
statusFilters[0]
);
const [selectedCreatedFilter, setSelectedCreatedFilter] = useState(
createdFilter[0]
);
const getDocuments = async () => { const getDocuments = async () => {
if (!documents.length) setLoading(true); if (!documents.length) setLoading(true);
@ -38,13 +59,46 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
}; };
useEffect(() => { useEffect(() => {
getDocuments(); getDocuments().finally(() => {
setSelectedStatusFilter(
statusFilters.filter(
(status) => status.value === props.filter.toUpperCase()
)[0]
);
});
}, []); }, []);
function showDocument(documentId: number) { function showDocument(documentId: number) {
router.push(`/documents/${documentId}/recipients`); router.push(`/documents/${documentId}/recipients`);
} }
function filterDocumentes(documents: []): any {
let filteredDocuments = documents.filter(
(d: any) =>
d.status === selectedStatusFilter.value ||
selectedStatusFilter.value === "ALL"
);
filteredDocuments = filteredDocuments.filter((document: any) =>
wasXDaysAgoOrLess(new Date(document.created), selectedCreatedFilter.value)
);
return filteredDocuments;
}
function wasXDaysAgoOrLess(documentDate: Date, lastXDays: number): boolean {
const millisecondsInDay = 24 * 60 * 60 * 1000; // Number of milliseconds in a day
const today: Date = new Date(); // Today's date
// Calculate the difference between the two dates in days
const diffInDays = Math.floor(
(today.getTime() - documentDate.getTime()) / millisecondsInDay
);
// Check if the difference is letss or equal to lastXDays
return diffInDays <= lastXDays;
}
return ( return (
<> <>
<Head> <Head>
@ -70,7 +124,28 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</Button> </Button>
</div> </div>
</div> </div>
<div className="mt-10 max-w-[1100px]" hidden={!loading}> <div className="mt-3 mb-12">
<div className="w-fit block float-right ml-3 mt-7">
{filterDocumentes(documents).length > 1
? filterDocumentes(documents).length + " Documents"
: "1 Document"}
</div>
<SelectBox
className="w-1/4 block float-right"
label="Created"
options={createdFilter}
value={selectedCreatedFilter}
onChange={setSelectedCreatedFilter}
/>
<SelectBox
className="w-1/4 block float-right ml-3"
label="Status"
options={statusFilters}
value={selectedStatusFilter}
onChange={setSelectedStatusFilter}
/>
</div>
<div className="mt-20 max-w-[1100px]" hidden={!loading}>
<div className="ph-item"> <div className="ph-item">
<div className="ph-col-12"> <div className="ph-col-12">
<div className="ph-picture"></div> <div className="ph-picture"></div>
@ -88,7 +163,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</div> </div>
</div> </div>
<div <div
className="mt-8 flex flex-col" className="mt-28 flex flex-col"
hidden={!documents.length || loading} hidden={!documents.length || loading}
> >
<div <div
@ -127,163 +202,167 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-200 bg-white"> <tbody className="divide-y divide-gray-200 bg-white">
{documents.map((document: any, index: number) => ( {filterDocumentes(documents).map(
<tr (document: any, index: number) => (
key={document.id} <tr
className="hover:bg-gray-100 cursor-pointer" key={document.id}
onClick={(event) => showDocument(document.id)} className="hover:bg-gray-100 cursor-pointer"
> onClick={(event) => showDocument(document.id)}
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> >
{document.title || "#" + document.id} <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
</td> {document.title || "#" + document.id}
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> </td>
{document.Recipient.map((item: any) => ( <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<div key={item.id}> {document.Recipient.map((item: any) => (
{item.sendStatus === "NOT_SENT" ? ( <div key={item.id}>
<span {item.sendStatus === "NOT_SENT" ? (
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"
>
{item.name
? item.name + " <" + item.email + ">"
: item.email}
</span>
) : (
""
)}
{item.sendStatus === "SENT" &&
item.readStatus !== "OPENED" ? (
<span id="sent_icon">
<span <span
id="sent_icon" id="sent_icon"
className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800" className="inline-block flex-shrink-0 rounded-full bg-green-100 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}
</span> </span>
</span> ) : (
) : ( ""
"" )}
)} {item.sendStatus === "SENT" &&
{item.readStatus === "OPENED" && item.readStatus !== "OPENED" ? (
item.signingStatus === "NOT_SIGNED" ? ( <span id="sent_icon">
<span id="read_icon"> <span
<span id="sent_icon"
id="sent_icon" className="inline-block flex-shrink-0 rounded-full bg-yellow-200 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>
<CheckIcon className="inline h-5 -mr-2"></CheckIcon> {item.name
<CheckIcon className="inline h-5 mr-1"></CheckIcon> ? item.name + " <" + item.email + ">"
{item.name : item.email}
? item.name + " <" + item.email + ">" </span>
: item.email}
</span> </span>
</span> ) : (
) : ( ""
"" )}
)} {item.readStatus === "OPENED" &&
{item.signingStatus === "SIGNED" ? ( item.signingStatus === "NOT_SIGNED" ? (
<span id="signed_icon"> <span id="read_icon">
<span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"> <span
<CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "} id="sent_icon"
{item.email} 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.email + ">"
: item.email}
</span>
</span> </span>
</span> ) : (
) : ( ""
"" )}
)} {item.signingStatus === "SIGNED" ? (
</div> <span id="signed_icon">
))} <span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
{document.Recipient.length === 0 ? "-" : null} <CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "}
<ReactTooltip {item.email}
anchorId="sent_icon" </span>
place="bottom" </span>
content="Document was sent to recipient." ) : (
/> ""
<ReactTooltip )}
anchorId="read_icon" </div>
place="bottom" ))}
content="Document was opened but not signed yet." {document.Recipient.length === 0 ? "-" : null}
/> <ReactTooltip
<ReactTooltip anchorId="sent_icon"
anchorId="signed_icon" place="bottom"
place="bottom" content="Document was sent to recipient."
content="Document was signed by the recipient." />
/> <ReactTooltip
</td> anchorId="read_icon"
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> place="bottom"
{formatDocumentStatus(document.status)} content="Document was opened but not signed yet."
<p> />
<small hidden={document.Recipient.length === 0}> <ReactTooltip
{document.Recipient.filter( anchorId="signed_icon"
(r: any) => r.signingStatus === "SIGNED" place="bottom"
).length || 0} content="Document was signed by the recipient."
/{document.Recipient.length || 0} />
</small> </td>
</p> <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
</td> {formatDocumentStatus(document.status)}
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"> <p>
<div> <small hidden={document.Recipient.length === 0}>
<IconButton {document.Recipient.filter(
icon={PencilSquareIcon} (r: any) => r.signingStatus === "SIGNED"
className="mr-2" ).length || 0}
onClick={(event: any) => { /{document.Recipient.length || 0}
event.preventDefault(); </small>
event.stopPropagation(); </p>
router.push("/documents/" + document.id); </td>
}} <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
> <div>
Edit <IconButton
</IconButton> icon={PencilSquareIcon}
<IconButton className="mr-2"
icon={ArrowDownTrayIcon} onClick={(event: any) => {
className="mr-2" event.preventDefault();
onClick={(event: any) => { event.stopPropagation();
event.preventDefault(); router.push("/documents/" + document.id);
event.stopPropagation(); }}
router.push("/api/documents/" + document.id); >
}} Edit
> </IconButton>
Download <IconButton
</IconButton> icon={ArrowDownTrayIcon}
<IconButton className="mr-2"
icon={TrashIcon} onClick={(event: any) => {
onClick={(event: any) => { event.preventDefault();
event.preventDefault(); event.stopPropagation();
event.stopPropagation(); router.push("/api/documents/" + document.id);
if ( }}
confirm( >
"Are you sure you want to delete this document" Download
) </IconButton>
) { <IconButton
const documentsWithoutIndex = [...documents]; icon={TrashIcon}
const removedItem: any = onClick={(event: any) => {
documentsWithoutIndex.splice(index, 1); event.preventDefault();
setDocuments(documentsWithoutIndex); event.stopPropagation();
fetch(`/api/documents/${document.id}`, { if (
method: "DELETE", confirm(
}) "Are you sure you want to delete this document"
.catch((err) => { )
documentsWithoutIndex.splice( ) {
index, const documentsWithoutIndex = [
0, ...documents,
removedItem ];
); const removedItem: any =
setDocuments(documentsWithoutIndex); documentsWithoutIndex.splice(index, 1);
setDocuments(documentsWithoutIndex);
fetch(`/api/documents/${document.id}`, {
method: "DELETE",
}) })
.then(() => { .catch((err) => {
getDocuments(); documentsWithoutIndex.splice(
}); index,
} 0,
}} removedItem
></IconButton> );
<span className="sr-only">, {document.name}</span> setDocuments(documentsWithoutIndex);
</div> })
</td> .then(() => {
</tr> getDocuments();
))} });
}
}}
></IconButton>
<span className="sr-only">, {document.name}</span>
</div>
</td>
</tr>
)
)}
</tbody> </tbody>
</table> </table>
</div> </div>
@ -350,6 +429,16 @@ function formatDocumentStatus(status: DocumentStatus) {
} }
} }
export async function getServerSideProps(context: NextPageContext) {
const filter = context.query["filter"];
return {
props: {
filter: filter,
},
};
}
DocumentsPage.getLayout = function getLayout(page: ReactElement) { DocumentsPage.getLayout = function getLayout(page: ReactElement) {
return <Layout>{page}</Layout>; return <Layout>{page}</Layout>;
}; };

86
packages/ui/components/selectBox/SelectBox.tsx Normal file
View File

@ -0,0 +1,86 @@
import { classNames } from "@documenso/lib";
import { Listbox, Transition } from "@headlessui/react";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
import React, { Fragment, useState } from "react";
export function SelectBox(props: any) {
return (
<div className={props.className}>
<Listbox
value={props.value}
onChange={(e) => {
props.onChange(e);
}}
>
{({ open }) => (
<>
<Listbox.Label className="block text-sm font-medium text-gray-700">
{props.label}
</Listbox.Label>
<div className="relative mt-1">
<Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm">
<span className="block truncate">{props?.value?.label}</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{props.options.map((option: any) => (
<Listbox.Option
key={option.value}
className={({ active }) =>
classNames(
active ? "text-white bg-neon" : "text-gray-900",
"relative cursor-default select-none py-2 pl-3 pr-9"
)
}
value={option}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate"
)}
>
{option.label}
</span>
{option.value === props.value.value ? (
<span
className={classNames(
active ? "text-white" : "text-neon",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
</div>
);
}

1
packages/ui/components/selectBox/index.ts Normal file
View File

@ -0,0 +1 @@
export { SelectBox } from "./SelectBox";

1
packages/ui/index.ts
View File

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