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

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Max S 2024-09-16 15:16:59 +02:00
commit b2323fda7a
9 changed files with 158 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/front/Components/DesignSystem/Table/MuiTable/index.tsx
View File

@ -8,8 +8,9 @@ import TableRow from "@mui/material/TableRow";
import Typography, { ETypo, ETypoColor } from "../../Typography";
import classes from "./classes.module.scss";
import { SxProps, Theme } from "@mui/material";
export type IRowProps = { key: string } & Record<string, React.ReactNode>;
export type IRowProps = { key: string } & Record<string, React.ReactNode | { sx: SxProps<Theme>; content: React.ReactNode }>;
type IRow = {
key?: string;
@ -29,7 +30,7 @@ export type IHead = {
type CellContent = {
key: string;
value: React.ReactNode;
value: React.ReactNode | { sx: SxProps<Theme>; content: React.ReactNode };
};
export default function MuiTable(props: IProps) {
@ -82,12 +83,14 @@ export default function MuiTable(props: IProps) {
className={classes["cell"]}
key={cell.key}
align="left"
sx={{ border: 0, padding: "4px 8px", height: "53px" }}>
sx={{ ...getCellValueStyle(cell.value), border: 0, padding: "4px 8px", height: "53px" }}>
<Typography
className={classes["content"]}
typo={ETypo.TEXT_MD_REGULAR}
color={ETypoColor.COLOR_NEUTRAL_900}>
{cell.value}
{cell.value && typeof cell.value === "object" && "content" in cell.value
? cell.value.content
: cell.value}
</Typography>
</TableCell>
))}
@ -99,4 +102,11 @@ export default function MuiTable(props: IProps) {
</TableContainer>
</InfiniteScroll>
);
function getCellValueStyle(value: React.ReactNode | { sx: SxProps<Theme>; content: React.ReactNode }) {
if (typeof value === "object" && value !== null && "sx" in value) {
return value.sx;
}
return {};
}
}

2
src/front/Components/DesignSystem/Tag/classes.module.scss
View File

@ -9,6 +9,8 @@
align-items: center;
justify-content: center;
white-space: nowrap;
&.info {
background-color: var(--tag-info-background);
}

3
src/front/Components/Layouts/Folder/DocumentsReminderHistory/classes.module.scss
View File

@ -1,8 +1,7 @@
@import "@Themes/constants.scss";
.root {
padding: var(--spacing-3) var(--spacing-15);
max-width: 1156px;
padding: var(--spacing-4) 142px;
display: flex;
flex-direction: column;

20
src/front/Components/Layouts/Folder/DocumentsReminderHistory/index.tsx
View File

@ -4,7 +4,7 @@ import Dropdown from "@Front/Components/DesignSystem/Dropdown";
import { IOption } from "@Front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption";
import Table from "@Front/Components/DesignSystem/Table";
import { IHead, IRowProps } from "@Front/Components/DesignSystem/Table/MuiTable";
import Tag, { ETagColor } from "@Front/Components/DesignSystem/Tag";
import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
@ -19,6 +19,13 @@ import classes from "./classes.module.scss";
type IProps = {};
const tradDocumentStatus: Record<EDocumentStatus, string> = {
[EDocumentStatus.ASKED]: "DEMANDÉ",
[EDocumentStatus.DEPOSITED]: "À VALIDER",
[EDocumentStatus.VALIDATED]: "VALIDÉ",
[EDocumentStatus.REFUSED]: "REFUSÉ",
};
const header: readonly IHead[] = [
{
key: "remindedAt",
@ -126,6 +133,7 @@ export default function DocumentsReminderHistory(props: IProps) {
options={customersOptions}
onSelectionChange={onSelectionChange}
selectedOption={customerOption ?? customersOptions?.[0]}
label="Client"
/>
<Table className={classes["table"]} header={header} rows={buildRows(reminders)} />
</div>
@ -147,14 +155,14 @@ function buildRows(reminders: DocumentReminder[] | null): IRowProps[] {
function getTag(status: EDocumentStatus) {
switch (status) {
case EDocumentStatus.ASKED:
return <Tag label={status} color={ETagColor.INFO} />;
return <Tag label={tradDocumentStatus[status]} color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} />;
case EDocumentStatus.DEPOSITED:
return <Tag label={status} color={ETagColor.WARNING} />;
return <Tag label={tradDocumentStatus[status]} color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} />;
case EDocumentStatus.VALIDATED:
return <Tag label={status} color={ETagColor.SUCCESS} />;
return <Tag label={tradDocumentStatus[status]} color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} />;
case EDocumentStatus.REFUSED:
return <Tag label={status} color={ETagColor.ERROR} />;
return <Tag label={tradDocumentStatus[status]} color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} />;
default:
return <Tag label={status} color={ETagColor.INFO} />;
return <Tag label={tradDocumentStatus[status]} color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} />;
}
}

3
src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/classes.module.scss
View File

@ -2,12 +2,11 @@
.root {
display: flex;
width: fit-content;
padding: var(--spacing-md, 16px);
flex-direction: column;
gap: var(--spacing-md, 16px);
background: var(--primary-weak-higlight, #e5eefa);
min-width: 300px;
width: 300px;
.header {
display: flex;

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

@ -16,5 +16,6 @@
display: flex;
align-items: center;
gap: var(--spacing-sm, 8px);
justify-content: center;
}
}

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

@ -131,16 +131,29 @@ export default function DocumentTables(props: IProps) {
if (document.document_status !== EDocumentStatus.ASKED) return null;
return {
key: document.uid,
document_type: document.document_type?.name ?? "_",
document_status: (
<Tag
color={ETagColor.INFO}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
date: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
actions: <IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />,
document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" },
document_status: {
sx: { width: 107 },
content: (
<Tag
color={ETagColor.INFO}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
},
date: {
sx: { width: 107 },
content: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
},
actions: {
sx: { width: 76 },
content: (
<div className={classes["actions"]}>
<IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />
</div>
),
},
};
})
.filter((document) => document !== null) as IRowProps[],
@ -154,24 +167,35 @@ export default function DocumentTables(props: IProps) {
if (document.document_status !== EDocumentStatus.DEPOSITED) return null;
return {
key: document.uid,
document_type: document.document_type?.name ?? "_",
document_status: (
<Tag
color={ETagColor.WARNING}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
actions: (
<Link
href={Module.getInstance()
.get()
.modules.pages.Folder.pages.ViewDocuments.props.path.replace("[folderUid]", folderUid)
.replace("[documentUid]", document.uid ?? "")}>
<IconButton icon={<EyeIcon />} />
</Link>
),
document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" },
document_status: {
sx: { width: 107 },
content: (
<Tag
color={ETagColor.WARNING}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
},
date: {
sx: { width: 107 },
content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
},
actions: {
sx: { width: 76 },
content: (
<div className={classes["actions"]}>
<Link
href={Module.getInstance()
.get()
.modules.pages.Folder.pages.ViewDocuments.props.path.replace("[folderUid]", folderUid)
.replace("[documentUid]", document.uid ?? "")}>
<IconButton icon={<EyeIcon />} />
</Link>
</div>
),
},
};
})
.filter((document) => document !== null) as IRowProps[],
@ -185,27 +209,36 @@ export default function DocumentTables(props: IProps) {
if (document.document_status !== EDocumentStatus.VALIDATED) return null;
return {
key: document.uid,
document_type: document.document_type?.name ?? "_",
document_status: (
<Tag
color={ETagColor.SUCCESS}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
actions: (
<div className={classes["actions"]}>
<Link
href={Module.getInstance()
.get()
.modules.pages.Folder.pages.ViewDocuments.props.path.replace("[folderUid]", folderUid)
.replace("[documentUid]", document.uid ?? "")}>
<IconButton icon={<EyeIcon />} />
</Link>
<IconButton onClick={() => onDownload(document)} icon={<ArrowDownTrayIcon />} />
</div>
),
document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" },
document_status: {
sx: { width: 107 },
content: (
<Tag
color={ETagColor.SUCCESS}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
},
date: {
sx: { width: 107 },
content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
},
actions: {
sx: { width: 76 },
content: (
<div className={classes["actions"]}>
<Link
href={Module.getInstance()
.get()
.modules.pages.Folder.pages.ViewDocuments.props.path.replace("[folderUid]", folderUid)
.replace("[documentUid]", document.uid ?? "")}>
<IconButton icon={<EyeIcon />} />
</Link>
<IconButton onClick={() => onDownload(document)} icon={<ArrowDownTrayIcon />} />
</div>
),
},
};
})
.filter((document) => document !== null) as IRowProps[],
@ -219,15 +252,21 @@ export default function DocumentTables(props: IProps) {
if (document.document_status !== EDocumentStatus.REFUSED) return null;
return {
key: document.uid,
document_type: document.document_type?.name ?? "_",
document_status: (
<Tag
color={ETagColor.ERROR}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
document_type: { sx: { width: 400 }, content: document.document_type?.name ?? "_" },
document_status: {
sx: { width: 107 },
content: (
<Tag
color={ETagColor.ERROR}
variant={ETagVariant.SEMI_BOLD}
label={tradDocumentStatus[document.document_status].toUpperCase()}
/>
),
},
date: {
sx: { width: 107 },
content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
},
actions: "",
};
})
@ -241,15 +280,27 @@ export default function DocumentTables(props: IProps) {
.map((document) => {
return {
key: document.uid,
document_type: document.files?.[0]?.file_name?.split(".")?.[0] ?? "_",
document_status: <Tag color={ETagColor.NEUTRAL} variant={ETagVariant.SEMI_BOLD} label={"ENVOYÉ"} />,
date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
actions: (
<div className={classes["actions"]}>
<IconButton onClick={() => onDownloadFileNotary(document)} icon={<ArrowDownTrayIcon />} />
<IconButton icon={<TrashIcon onClick={() => openDeleteSentDocumentModal(document.uid)} />} />
</div>
),
document_type: {
sx: { width: 400 },
content: formatName(document.files?.[0]?.file_name?.split(".")?.[0] ?? "") || "_",
},
document_status: {
sx: { width: 107 },
content: <Tag color={ETagColor.NEUTRAL} variant={ETagVariant.SEMI_BOLD} label={"ENVOYÉ"} />,
},
date: {
sx: { width: 107 },
content: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
},
actions: {
sx: { width: 76 },
content: (
<div className={classes["actions"]}>
<IconButton onClick={() => onDownloadFileNotary(document)} icon={<ArrowDownTrayIcon />} />
<IconButton icon={<TrashIcon onClick={() => openDeleteSentDocumentModal(document.uid)} />} />
</div>
),
},
};
})
.filter((document) => document !== null) as IRowProps[],
@ -333,3 +384,7 @@ function getHeader(dateColumnTitle: string, isMobile: boolean): IHead[] {
},
];
}
function formatName(text: string): string {
return text.replace(/[^a-zA-Z0-9 ]/g, "");
}

4
src/front/Components/Layouts/Folder/FolderInformation/ClientView/EmailReminder/ReminderModal/index.tsx
View File

@ -4,7 +4,7 @@ import { IOption } from "@Front/Components/DesignSystem/Form/SelectFieldOld";
import Modal from "@Front/Components/DesignSystem/Modal";
import Separator, { ESeperatorColor } from "@Front/Components/DesignSystem/Separator";
import { ToasterService } from "@Front/Components/DesignSystem/Toaster";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import Customer from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import React, { useCallback, useMemo, useState } from "react";
@ -79,7 +79,7 @@ export default function ReminderModal(props: IProps) {
firstButton={{ children: "Annuler", onClick: onClose }}
secondButton={{ children: "Relancer", onClick: onRemind }}>
<div className={classes["root"]}>
<Typography typo={ETypo.TEXT_MD_LIGHT}>
<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.TEXT_SECONDARY}>
Sélectionnez le(s) document(s) pour lequel vous souhaitez relancer le client.
</Typography>
<CheckBox

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

@ -112,10 +112,7 @@ export default function ClientView(props: IProps) {
</Button>
</Link>
)}
<EmailReminder
customer={customer}
isAnchored={anchorStatus !== AnchorStatus.NOT_ANCHORED}
/>
<EmailReminder customer={customer} isAnchored={anchorStatus !== AnchorStatus.NOT_ANCHORED} />
</div>
</div>