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

103
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,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"
@ -258,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);
@ -283,7 +361,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</div> </div>
</td> </td>
</tr> </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";