mirror of
https://github.com/documenso/documenso.git
synced 2025-11-13 00:03:33 +10:00
⚡️ 🚸 documents list performance and empty view
This commit is contained in:
Timur Ercan
@ -8,6 +8,7 @@ import {
|
||||
CheckIcon,
|
||||
DocumentPlusIcon,
|
||||
EnvelopeIcon,
|
||||
FunnelIcon,
|
||||
PencilSquareIcon,
|
||||
PlusIcon,
|
||||
TrashIcon,
|
||||
@ -23,6 +24,8 @@ import prisma from "@documenso/prisma";
|
||||
const DocumentsPage: NextPageWithLayout = (props: any) => {
|
||||
const router = useRouter();
|
||||
const [documents, setDocuments]: any[] = useState([]);
|
||||
const [filterdDocuments, setFilteredDocuments] = useState([]);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const statusFilters = [
|
||||
{ label: "All", value: "ALL" },
|
||||
@ -70,6 +73,10 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setFilteredDocuments(filterDocumentes(documents));
|
||||
}, [selectedStatusFilter, selectedCreatedFilter]);
|
||||
|
||||
function showDocument(documentId: number) {
|
||||
router.push(`/documents/${documentId}/recipients`);
|
||||
}
|
||||
@ -132,8 +139,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
|
||||
</div>
|
||||
<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"
|
||||
{filterdDocuments.length != 1
|
||||
? filterdDocuments.length + " Documents"
|
||||
: "1 Document"}
|
||||
</div>
|
||||
<SelectBox
|
||||
@ -214,173 +221,176 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 bg-white">
|
||||
{filterDocumentes(documents).map(
|
||||
(document: any, index: number) => (
|
||||
<tr
|
||||
key={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>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
{document.Recipient.map((item: any) => (
|
||||
<div key={item.id}>
|
||||
{item.sendStatus === "NOT_SENT" ? (
|
||||
{filterdDocuments.map((document: any, index: number) => (
|
||||
<tr
|
||||
key={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>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
{document.Recipient.map((item: any) => (
|
||||
<div key={item.id}>
|
||||
{item.sendStatus === "NOT_SENT" ? (
|
||||
<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"
|
||||
>
|
||||
{item.name
|
||||
? item.name + " <" + item.email + ">"
|
||||
: item.email}
|
||||
</span>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{item.sendStatus === "SENT" &&
|
||||
item.readStatus !== "OPENED" ? (
|
||||
<span id="sent_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"
|
||||
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.email + ">"
|
||||
: item.email}
|
||||
</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-green-800"
|
||||
>
|
||||
<EnvelopeIcon className="inline h-5 mr-1"></EnvelopeIcon>
|
||||
{item.name
|
||||
? item.name + " <" + item.email + ">"
|
||||
: item.email}
|
||||
</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-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>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{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-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>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{item.signingStatus === "SIGNED" ? (
|
||||
<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">
|
||||
<CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "}
|
||||
{item.email}
|
||||
</span>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{item.signingStatus === "SIGNED" ? (
|
||||
<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">
|
||||
<CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "}
|
||||
{item.email}
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{document.Recipient.length === 0 ? "-" : null}
|
||||
<ReactTooltip
|
||||
anchorId="sent_icon"
|
||||
place="bottom"
|
||||
content="Document was sent to recipient."
|
||||
/>
|
||||
<ReactTooltip
|
||||
anchorId="read_icon"
|
||||
place="bottom"
|
||||
content="Document was opened but not signed yet."
|
||||
/>
|
||||
<ReactTooltip
|
||||
anchorId="signed_icon"
|
||||
place="bottom"
|
||||
content="Document was signed by the recipient."
|
||||
/>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
{formatDocumentStatus(document.status)}
|
||||
<p>
|
||||
<small hidden={document.Recipient.length === 0}>
|
||||
{document.Recipient.filter(
|
||||
(r: any) => r.signingStatus === "SIGNED"
|
||||
).length || 0}
|
||||
/{document.Recipient.length || 0}
|
||||
</small>
|
||||
</p>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
{new Date(document.created).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
|
||||
<div>
|
||||
<IconButton
|
||||
icon={PencilSquareIcon}
|
||||
className="mr-2"
|
||||
onClick={(event: any) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
router.push("/documents/" + document.id);
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</IconButton>
|
||||
<IconButton
|
||||
icon={ArrowDownTrayIcon}
|
||||
className="mr-2"
|
||||
onClick={(event: any) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
router.push("/api/documents/" + document.id);
|
||||
}}
|
||||
>
|
||||
Download
|
||||
</IconButton>
|
||||
<IconButton
|
||||
icon={TrashIcon}
|
||||
onClick={(event: any) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (
|
||||
confirm(
|
||||
"Are you sure you want to delete this document"
|
||||
)
|
||||
) {
|
||||
const documentsWithoutIndex = [
|
||||
...documents,
|
||||
];
|
||||
const removedItem: any =
|
||||
documentsWithoutIndex.splice(index, 1);
|
||||
setDocuments(documentsWithoutIndex);
|
||||
fetch(`/api/documents/${document.id}`, {
|
||||
method: "DELETE",
|
||||
})
|
||||
.catch((err) => {
|
||||
documentsWithoutIndex.splice(
|
||||
index,
|
||||
0,
|
||||
removedItem
|
||||
);
|
||||
setDocuments(documentsWithoutIndex);
|
||||
})
|
||||
.then(() => {
|
||||
getDocuments();
|
||||
});
|
||||
}
|
||||
}}
|
||||
></IconButton>
|
||||
<span className="sr-only">, {document.name}</span>
|
||||
</span>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
))}
|
||||
{document.Recipient.length === 0 ? "-" : null}
|
||||
<ReactTooltip
|
||||
anchorId="sent_icon"
|
||||
place="bottom"
|
||||
content="Document was sent to recipient."
|
||||
/>
|
||||
<ReactTooltip
|
||||
anchorId="read_icon"
|
||||
place="bottom"
|
||||
content="Document was opened but not signed yet."
|
||||
/>
|
||||
<ReactTooltip
|
||||
anchorId="signed_icon"
|
||||
place="bottom"
|
||||
content="Document was signed by the recipient."
|
||||
/>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
{formatDocumentStatus(document.status)}
|
||||
<p>
|
||||
<small hidden={document.Recipient.length === 0}>
|
||||
{document.Recipient.filter(
|
||||
(r: any) => r.signingStatus === "SIGNED"
|
||||
).length || 0}
|
||||
/{document.Recipient.length || 0}
|
||||
</small>
|
||||
</p>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
{new Date(document.created).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
|
||||
<div>
|
||||
<IconButton
|
||||
icon={PencilSquareIcon}
|
||||
className="mr-2"
|
||||
onClick={(event: any) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
router.push("/documents/" + document.id);
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</IconButton>
|
||||
<IconButton
|
||||
icon={ArrowDownTrayIcon}
|
||||
className="mr-2"
|
||||
onClick={(event: any) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
router.push("/api/documents/" + document.id);
|
||||
}}
|
||||
>
|
||||
Download
|
||||
</IconButton>
|
||||
<IconButton
|
||||
icon={TrashIcon}
|
||||
onClick={(event: any) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (
|
||||
confirm(
|
||||
"Are you sure you want to delete this document"
|
||||
)
|
||||
) {
|
||||
const documentsWithoutIndex = [...documents];
|
||||
const removedItem: any =
|
||||
documentsWithoutIndex.splice(index, 1);
|
||||
setDocuments(documentsWithoutIndex);
|
||||
fetch(`/api/documents/${document.id}`, {
|
||||
method: "DELETE",
|
||||
})
|
||||
.catch((err) => {
|
||||
documentsWithoutIndex.splice(
|
||||
index,
|
||||
0,
|
||||
removedItem
|
||||
);
|
||||
setDocuments(documentsWithoutIndex);
|
||||
})
|
||||
.then(() => {
|
||||
getDocuments();
|
||||
});
|
||||
}
|
||||
}}
|
||||
></IconButton>
|
||||
<span className="sr-only">, {document.name}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
hidden={filterdDocuments.length > 0}
|
||||
className="mx-auto w-fit mt-12 p-3"
|
||||
>
|
||||
<FunnelIcon className="w-5 inline mr-1 align-middle" /> Nothing
|
||||
here. Maybe try a different filter.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user