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", 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",
}, },
]; ];

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

@ -16,13 +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 Filter from "../components/filter"; 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);
@ -39,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>
@ -71,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,9 +162,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</div> </div>
</div> </div>
</div> </div>
<Filter></Filter>
<div <div
className="mt-8 flex flex-col" className="mt-28 flex flex-col"
hidden={!documents.length || loading} hidden={!documents.length || loading}
> >
<div <div
@ -129,7 +202,8 @@ 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(
(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"
@ -260,7 +334,9 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
"Are you sure you want to delete this document" "Are you sure you want to delete this document"
) )
) { ) {
const documentsWithoutIndex = [...documents]; const documentsWithoutIndex = [
...documents,
];
const removedItem: any = const removedItem: any =
documentsWithoutIndex.splice(index, 1); documentsWithoutIndex.splice(index, 1);
setDocuments(documentsWithoutIndex); setDocuments(documentsWithoutIndex);
@ -285,7 +361,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</div> </div>
</td> </td>
</tr> </tr>
))} )
)}
</tbody> </tbody>
</table> </table>
</div> </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) { DocumentsPage.getLayout = function getLayout(page: ReactElement) {
return <Layout>{page}</Layout>; return <Layout>{page}</Layout>;
}; };