mirror of
https://github.com/documenso/documenso.git
synced 2025-11-14 00:32:43 +10:00
⚡️ 🚸 documents list performance and empty view
This commit is contained in:
Timur Ercan
@ -8,6 +8,7 @@ import {
|
|||||||
CheckIcon,
|
CheckIcon,
|
||||||
DocumentPlusIcon,
|
DocumentPlusIcon,
|
||||||
EnvelopeIcon,
|
EnvelopeIcon,
|
||||||
|
FunnelIcon,
|
||||||
PencilSquareIcon,
|
PencilSquareIcon,
|
||||||
PlusIcon,
|
PlusIcon,
|
||||||
TrashIcon,
|
TrashIcon,
|
||||||
@ -23,6 +24,8 @@ import prisma from "@documenso/prisma";
|
|||||||
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 [filterdDocuments, setFilteredDocuments] = useState([]);
|
||||||
|
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const statusFilters = [
|
const statusFilters = [
|
||||||
{ label: "All", value: "ALL" },
|
{ label: "All", value: "ALL" },
|
||||||
@ -70,6 +73,10 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
|
|||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFilteredDocuments(filterDocumentes(documents));
|
||||||
|
}, [selectedStatusFilter, selectedCreatedFilter]);
|
||||||
|
|
||||||
function showDocument(documentId: number) {
|
function showDocument(documentId: number) {
|
||||||
router.push(`/documents/${documentId}/recipients`);
|
router.push(`/documents/${documentId}/recipients`);
|
||||||
}
|
}
|
||||||
@ -132,8 +139,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="mt-3 mb-12">
|
<div className="mt-3 mb-12">
|
||||||
<div className="w-fit block float-right ml-3 mt-7">
|
<div className="w-fit block float-right ml-3 mt-7">
|
||||||
{filterDocumentes(documents).length > 1
|
{filterdDocuments.length != 1
|
||||||
? filterDocumentes(documents).length + " Documents"
|
? filterdDocuments.length + " Documents"
|
||||||
: "1 Document"}
|
: "1 Document"}
|
||||||
</div>
|
</div>
|
||||||
<SelectBox
|
<SelectBox
|
||||||
@ -214,173 +221,176 @@ 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">
|
||||||
{filterDocumentes(documents).map(
|
{filterdDocuments.map((document: any, index: number) => (
|
||||||
(document: any, index: number) => (
|
<tr
|
||||||
<tr
|
key={document.id}
|
||||||
key={document.id}
|
className="hover:bg-gray-100 cursor-pointer"
|
||||||
className="hover:bg-gray-100 cursor-pointer"
|
onClick={(event) => showDocument(document.id)}
|
||||||
onClick={(event) => showDocument(document.id)}
|
>
|
||||||
>
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
{document.title || "#" + document.id}
|
||||||
{document.title || "#" + document.id}
|
</td>
|
||||||
</td>
|
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
{document.Recipient.map((item: any) => (
|
||||||
{document.Recipient.map((item: any) => (
|
<div key={item.id}>
|
||||||
<div key={item.id}>
|
{item.sendStatus === "NOT_SENT" ? (
|
||||||
{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
|
<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}
|
||||||
</span>
|
</span>
|
||||||
) : (
|
</span>
|
||||||
""
|
) : (
|
||||||
)}
|
""
|
||||||
{item.sendStatus === "SENT" &&
|
)}
|
||||||
item.readStatus !== "OPENED" ? (
|
{item.readStatus === "OPENED" &&
|
||||||
<span id="sent_icon">
|
item.signingStatus === "NOT_SIGNED" ? (
|
||||||
<span
|
<span id="read_icon">
|
||||||
id="sent_icon"
|
<span
|
||||||
className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
|
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
|
<CheckIcon className="inline h-5 -mr-2"></CheckIcon>
|
||||||
? item.name + " <" + item.email + ">"
|
<CheckIcon className="inline h-5 mr-1"></CheckIcon>
|
||||||
: item.email}
|
{item.name
|
||||||
</span>
|
? item.name + " <" + item.email + ">"
|
||||||
|
: item.email}
|
||||||
</span>
|
</span>
|
||||||
) : (
|
</span>
|
||||||
""
|
) : (
|
||||||
)}
|
""
|
||||||
{item.readStatus === "OPENED" &&
|
)}
|
||||||
item.signingStatus === "NOT_SIGNED" ? (
|
{item.signingStatus === "SIGNED" ? (
|
||||||
<span id="read_icon">
|
<span id="signed_icon">
|
||||||
<span
|
<span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
|
||||||
id="sent_icon"
|
<CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "}
|
||||||
className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
|
{item.email}
|
||||||
>
|
|
||||||
<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" ? (
|
)}
|
||||||
<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>
|
|
||||||
</div>
|
</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>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user