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

✨ filter documents by created and status

Browse Source
This commit is contained in:
Timur Ercan
2023-02-23 18:26:37 +01:00
parent 4f0161b0fa
commit b2b963fcc6
2 changed files with 243 additions and 156 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",
stat: "0",
icon: DocumentIcon,
link: "/documents?filter=draft",
link: "/documents?filter=DRAFT",
},
{
name: "Waiting for others",
stat: "0",
icon: UsersIcon,
link: "/documents?filter=waiting_for_others",
link: "/documents?filter=PENDING",
},
{
name: "Completed",
stat: "0",
icon: CheckBadgeIcon,
link: "/documents?filter=completed",
link: "/documents?filter=COMPLETED",
},
];

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

@ -16,13 +16,33 @@ import { useRouter } from "next/router";
import { uploadDocument } from "@documenso/features";
import { DocumentStatus } from "@prisma/client";
import { Tooltip as ReactTooltip } from "react-tooltip";
import { Button, IconButton } from "@documenso/ui";
import Filter from "../components/filter";
import { Button, IconButton, SelectBox } from "@documenso/ui";
import { NextPageContext } from "next";
const DocumentsPage: NextPageWithLayout = (props: any) => {
const router = useRouter();
const [documents, setDocuments]: any[] = useState([]);
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 () => {
if (!documents.length) setLoading(true);
@ -39,13 +59,46 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
};
useEffect(() => {
getDocuments();
getDocuments().finally(() => {
setSelectedStatusFilter(
statusFilters.filter(
(status) => status.value === props.filter.toUpperCase()
)[0]
);
});
}, []);
function showDocument(documentId: number) {
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 (
<>
<Head>
@ -71,7 +124,28 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</Button>
</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-col-12">
<div className="ph-picture"></div>
@ -88,9 +162,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</div>
</div>
</div>
<Filter></Filter>
<div
className="mt-8 flex flex-col"
className="mt-28 flex flex-col"
hidden={!documents.length || loading}
>
<div
@ -129,7 +202,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
{documents.map((document: any, index: number) => (
{filterDocumentes(documents).map(
(document: any, index: number) => (
<tr
key={document.id}
className="hover:bg-gray-100 cursor-pointer"
@ -260,7 +334,9 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
"Are you sure you want to delete this document"
)
) {
const documentsWithoutIndex = [...documents];
const documentsWithoutIndex = [
...documents,
];
const removedItem: any =
documentsWithoutIndex.splice(index, 1);
setDocuments(documentsWithoutIndex);
@ -285,7 +361,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</div>
</td>
</tr>
))}
)
)}
</tbody>
</table>
</div>
@ -352,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) {
return <Layout>{page}</Layout>;
};