4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

sent documents table

Browse Source
This commit is contained in:
Max S 2024-08-13 11:47:28 +02:00
parent ed75a960c4
commit 9fa0ae6039
2 changed files with 59 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/classes.module.scss
View File

@ -11,4 +11,10 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.actions {
display: flex;
align-items: center;
gap: var(--spacing-sm, 8px);
}
} }

80
src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
View File

@ -21,25 +21,6 @@ type IProps = {
folderUid: string; folderUid: string;
}; };
const header: readonly IHead[] = [
{
key: "document_type",
title: "Type de document",
},
{
key: "document_status",
title: "Statut",
},
{
key: "created_at",
title: "Demandé le",
},
{
key: "actions",
title: "Actions",
},
];
const tradDocumentStatus: Record<EDocumentStatus, string> = { const tradDocumentStatus: Record<EDocumentStatus, string> = {
[EDocumentStatus.ASKED]: "Demandé", [EDocumentStatus.ASKED]: "Demandé",
[EDocumentStatus.DEPOSITED]: "À valider", [EDocumentStatus.DEPOSITED]: "À valider",
@ -99,7 +80,7 @@ export default function DocumentTables(props: IProps) {
label={tradDocumentStatus[document.document_status].toUpperCase()} label={tradDocumentStatus[document.document_status].toUpperCase()}
/> />
), ),
created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_", date: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
actions: <IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />, actions: <IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />,
}; };
}) })
@ -122,7 +103,7 @@ export default function DocumentTables(props: IProps) {
label={tradDocumentStatus[document.document_status].toUpperCase()} label={tradDocumentStatus[document.document_status].toUpperCase()}
/> />
), ),
created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_", date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
actions: ( actions: (
<Link <Link
href={Module.getInstance() href={Module.getInstance()
@ -153,7 +134,7 @@ export default function DocumentTables(props: IProps) {
label={tradDocumentStatus[document.document_status].toUpperCase()} label={tradDocumentStatus[document.document_status].toUpperCase()}
/> />
), ),
created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_", date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
actions: ( actions: (
<div className={classes["actions"]}> <div className={classes["actions"]}>
<Link <Link
@ -187,7 +168,7 @@ export default function DocumentTables(props: IProps) {
label={tradDocumentStatus[document.document_status].toUpperCase()} label={tradDocumentStatus[document.document_status].toUpperCase()}
/> />
), ),
created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_", date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
actions: "", actions: "",
}; };
}) })
@ -195,6 +176,29 @@ export default function DocumentTables(props: IProps) {
[documents], [documents],
); );
//TODO: modify accordingly when the back will handle sent documents
const sentDocuments: IRowProps[] = useMemo(
() =>
documents
.map((document) => {
if (document.document_status !== "sent") return null;
return {
key: document.uid,
document_type: document.document_type?.name ?? "_",
document_status: <Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label={"Envoyé"} />,
date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
actions: (
<div className={classes["actions"]}>
<IconButton onClick={() => onDownload(document)} icon={<ArrowDownTrayIcon />} />
<IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />
</div>
),
};
})
.filter((document) => document !== null) as IRowProps[],
[documents, onDownload, openDeleteAskedDocumentModal],
);
const progress = useMemo(() => { const progress = useMemo(() => {
const total = askedDocuments.length + toValidateDocuments.length + validatedDocuments.length + refusedDocuments.length; const total = askedDocuments.length + toValidateDocuments.length + validatedDocuments.length + refusedDocuments.length;
if (total === 0) return 0; if (total === 0) return 0;
@ -217,10 +221,11 @@ export default function DocumentTables(props: IProps) {
</Typography> </Typography>
<CircleProgress percentage={progress} /> <CircleProgress percentage={progress} />
</div> </div>
{askedDocuments.length > 0 && <Table header={header} rows={askedDocuments} />} {askedDocuments.length > 0 && <Table header={getHeader("Demandé le")} rows={askedDocuments} />}
{toValidateDocuments.length > 0 && <Table header={header} rows={toValidateDocuments} />} {toValidateDocuments.length > 0 && <Table header={getHeader("Déposé le")} rows={toValidateDocuments} />}
{validatedDocuments.length > 0 && <Table header={header} rows={validatedDocuments} />} {validatedDocuments.length > 0 && <Table header={getHeader("Validé le")} rows={validatedDocuments} />}
{refusedDocuments.length > 0 && <Table header={header} rows={refusedDocuments} />} {refusedDocuments.length > 0 && <Table header={getHeader("Demandé le")} rows={refusedDocuments} />}
{sentDocuments.length > 0 && <Table header={getHeader("Envoyé le")} rows={sentDocuments} />}
{documentUid && ( {documentUid && (
<DeleteAskedDocumentModal <DeleteAskedDocumentModal
isOpen={deleteAskedOocumentModal.isOpen} isOpen={deleteAskedOocumentModal.isOpen}
@ -232,3 +237,24 @@ export default function DocumentTables(props: IProps) {
</div> </div>
); );
} }
function getHeader(dateColumnTitle: string): IHead[] {
return [
{
key: "document_type",
title: "Type de document",
},
{
key: "document_status",
title: "Statut",
},
{
key: "date",
title: dateColumnTitle,
},
{
key: "actions",
title: "Action",
},
];
}