connect historique des relances

This commit is contained in:
Max S 2024-09-09 16:04:34 +02:00
parent a2068bb0fa
commit a7021e6acb
2 changed files with 75 additions and 34 deletions

View File

@ -1,13 +1,17 @@
import DocumentReminders from "@Front/Api/LeCoffreApi/Notary/DocumentReminders/DocumentReminders";
import Table from "@Front/Components/DesignSystem/Table"; import Table from "@Front/Components/DesignSystem/Table";
import { IHead } from "@Front/Components/DesignSystem/Table/MuiTable"; import { IHead, IRowProps } from "@Front/Components/DesignSystem/Table/MuiTable";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow"; import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { DocumentReminder } from "le-coffre-resources/dist/Notary";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React from "react"; import React, { useCallback, useEffect, useState } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Tag, { ETagColor } from "@Front/Components/DesignSystem/Tag";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
type IProps = {}; type IProps = {};
@ -31,9 +35,35 @@ const header: readonly IHead[] = [
]; ];
export default function DocumentsReminderHistory(props: IProps) { export default function DocumentsReminderHistory(props: IProps) {
const [reminders, setReminders] = useState<DocumentReminder[] | null>(null);
const router = useRouter(); const router = useRouter();
let { folderUid } = router.query; let { folderUid } = router.query;
const fetchReminders = useCallback(async () => {
DocumentReminders.getInstance()
.get({
include: {
document: {
include: {
depositor: {
include: {
contact: true,
},
},
document_type: true,
},
},
},
orderBy: { reminder_date: "desc" },
})
.then((reminders) => setReminders(reminders))
.catch((e) => console.warn(e));
}, []);
useEffect(() => {
fetchReminders();
}, [fetchReminders]);
return ( return (
<DefaultTemplate title={"Historique des relances de documents"} isPadding={false}> <DefaultTemplate title={"Historique des relances de documents"} isPadding={false}>
<div className={classes["root"]}> <div className={classes["root"]}>
@ -46,8 +76,34 @@ export default function DocumentsReminderHistory(props: IProps) {
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}> <Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}>
Historique des relances de documents Historique des relances de documents
</Typography> </Typography>
<Table className={classes["table"]} header={header} rows={[{ key: "1", name: "todo", sentAt: "todo", actions: "todo" }]} /> <Table className={classes["table"]} header={header} rows={buildRows(reminders)} />
</div> </div>
</DefaultTemplate> </DefaultTemplate>
); );
} }
function buildRows(reminders: DocumentReminder[] | null): IRowProps[] {
if (!reminders) return [];
return reminders.map((reminder) => ({
key: reminder.uid ?? "",
remindedAt: new Date(reminder.reminder_date!).toLocaleDateString(),
customer: `${reminder.document?.depositor?.contact?.first_name} ${reminder.document?.depositor?.contact?.last_name}`,
document_type: reminder.document?.document_type?.name,
statut: getTag(reminder.document?.document_status as EDocumentStatus),
}));
}
function getTag(status: EDocumentStatus) {
switch (status) {
case EDocumentStatus.ASKED:
return <Tag label={status} color={ETagColor.INFO} />;
case EDocumentStatus.DEPOSITED:
return <Tag label={status} color={ETagColor.WARNING} />;
case EDocumentStatus.VALIDATED:
return <Tag label={status} color={ETagColor.SUCCESS} />;
case EDocumentStatus.REFUSED:
return <Tag label={status} color={ETagColor.ERROR} />;
default:
return <Tag label={status} color={ETagColor.INFO} />;
}
}

View File

@ -1,18 +1,18 @@
import DocumentReminders from "@Front/Api/LeCoffreApi/Notary/DocumentReminders/DocumentReminders";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton"; import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import Module from "@Front/Config/Module";
import useOpenable from "@Front/Hooks/useOpenable"; import useOpenable from "@Front/Hooks/useOpenable";
import { ClockIcon, EnvelopeIcon } from "@heroicons/react/24/outline"; import { ClockIcon, EnvelopeIcon } from "@heroicons/react/24/outline";
import Customer from "le-coffre-resources/dist/Customer"; import Customer from "le-coffre-resources/dist/Customer";
import { DocumentReminder } from "le-coffre-resources/dist/Notary";
import Link from "next/link";
import { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import ReminderModal from "./ReminderModal"; import ReminderModal from "./ReminderModal";
import { useRouter } from "next/router";
import Module from "@Front/Config/Module";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import DocumentReminders from "@Front/Api/LeCoffreApi/Notary/DocumentReminders/DocumentReminders";
import { DocumentReminder } from "le-coffre-resources/dist/Notary";
type IProps = { type IProps = {
customer: Customer; customer: Customer;
@ -39,7 +39,7 @@ export default function EmailReminder(props: IProps) {
useEffect(() => { useEffect(() => {
fetchReminders(); fetchReminders();
}, []); }, [fetchReminders]);
let { folderUid } = router.query; let { folderUid } = router.query;
@ -61,33 +61,18 @@ export default function EmailReminder(props: IProps) {
title={"Voir l'historique des relances"} title={"Voir l'historique des relances"}
href={Module.getInstance() href={Module.getInstance()
.get() .get()
.modules.pages.Folder.pages.DocumentsReminderHistory.props.path.replace("[folderUid]", folderUid as string)}> .modules.pages.Folder.pages.DocumentsReminderHistory.props.path.replace("[folderUid]", folderUid as string)
.replace("[customerUid]", customer.uid ?? "")}>
<IconButton icon={<ClockIcon />} variant={EIconButtonVariant.NEUTRAL} /> <IconButton icon={<ClockIcon />} variant={EIconButtonVariant.NEUTRAL} />
</Link> </Link>
<div className={classes["info"]}> <div className={classes["info"]}>
{/* TODO: mettre la date de la dernière relance */} <Typography typo={ETypo.TEXT_XS_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
{!reminders && ( Dernière relance:{" "}
<Typography typo={ETypo.TEXT_XS_REGULAR} color={ETypoColor.TEXT_SECONDARY}> {reminders && reminders.length > 0 ? new Date(reminders[0]!.reminder_date!).toLocaleDateString() : "-"}
Dernière relance: - </Typography>
</Typography> <Typography typo={ETypo.TEXT_XS_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
)} Nombre de relance: {reminders && reminders.length > 0 ? reminders.length : "0"}
</Typography>
{reminders && reminders.length > 0 && (
<Typography typo={ETypo.TEXT_XS_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
Dernière relance: {new Date(reminders[0]!.reminder_date!).toLocaleDateString()}
</Typography>
)}
{/* TODO: mettre le nombre de relance */}
{!reminders && (
<Typography typo={ETypo.TEXT_XS_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
Nombre de relance: -
</Typography>
)}
{reminders && reminders.length > 0 && (
<Typography typo={ETypo.TEXT_XS_REGULAR} color={ETypoColor.TEXT_SECONDARY}>
Nombre de relance: {reminders.length}
</Typography>
)}
</div> </div>
</div> </div>
<ReminderModal <ReminderModal