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

ClientBox retours

Browse Source
This commit is contained in:
Max S 2024-07-23 10:30:23 +02:00
parent 1e0c70c84c
commit 2cdd13eceb
3 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,10 +9,14 @@
background: var(--primary-weak-higlight, #e5eefa); background: var(--primary-weak-higlight, #e5eefa);
min-width: 300px; min-width: 300px;
.header{ .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
.delete-button {
margin: auto;
}
} }

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

@ -1,4 +1,4 @@
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonSize, 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 useOpenable from "@Front/Hooks/useOpenable"; import useOpenable from "@Front/Hooks/useOpenable";
@ -8,33 +8,44 @@ import { ICustomer } from "..";
import { AnchorStatus } from "../.."; import { AnchorStatus } from "../..";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import DeleteCustomerModal from "./DeleteCustomerModal"; import DeleteCustomerModal from "./DeleteCustomerModal";
import Link from "next/link";
import Module from "@Front/Config/Module";
type IProps = { type IProps = {
customer: ICustomer; customer: ICustomer;
anchorStatus: AnchorStatus; anchorStatus: AnchorStatus;
folderUid: string | undefined;
}; };
export default function ClientBox(props: IProps) { export default function ClientBox(props: IProps) {
const { customer, anchorStatus } = props; const { customer, anchorStatus, folderUid } = props;
const { isOpen, open, close } = useOpenable(); const { isOpen, open, close } = useOpenable();
console.log("customer", customer);
return ( return (
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <div className={classes["header"]}>
<Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_PRIMARY_500}> <Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_PRIMARY_500}>
{customer.contact?.last_name} {customer.contact?.first_name} {customer.contact?.last_name}
</Typography> </Typography>
{anchorStatus === AnchorStatus.NOT_ANCHORED && ( {anchorStatus === AnchorStatus.NOT_ANCHORED && (
<IconButton variant={EIconButtonVariant.NEUTRAL} icon={<PencilSquareIcon />} /> <Link
href={Module.getInstance()
.get()
.modules.pages.Folder.pages.EditClient.props.path.replace("[folderUid]", folderUid ?? "")
.replace("[customerUid]", customer.uid ?? "")}>
<IconButton variant={EIconButtonVariant.NEUTRAL} icon={<PencilSquareIcon />} />
</Link>
)} )}
</div> </div>
<div> <div>
<Typography typo={ETypo.TEXT_LG_BOLD} color={ETypoColor.COLOR_NEUTRAL_700}> <Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_700}>
Numéro de téléphone Numéro de téléphone
</Typography> </Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_PRIMARY_500}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
{customer.contact?.phone_number} {customer.contact?.cell_phone_number ?? customer.contact?.phone_number ?? "_"}
</Typography> </Typography>
</div> </div>
<div> <div>
@ -42,7 +53,7 @@ export default function ClientBox(props: IProps) {
E-mail E-mail
</Typography> </Typography>
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}> <Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
{customer.contact?.email} {customer.contact?.email ?? "_"}
</Typography> </Typography>
</div> </div>
<div> <div>
@ -58,6 +69,7 @@ export default function ClientBox(props: IProps) {
<> <>
<Button <Button
className={classes["delete-button"]} className={classes["delete-button"]}
size={EButtonSize.SM}
variant={EButtonVariant.ERROR} variant={EButtonVariant.ERROR}
styletype={EButtonstyletype.TEXT} styletype={EButtonstyletype.TEXT}
rightIcon={<TrashIcon />} rightIcon={<TrashIcon />}

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

@ -68,7 +68,7 @@ export default function ClientView(props: IProps) {
</div> </div>
<div className={classes["content"]}> <div className={classes["content"]}>
<div className={classes["client-box"]}> <div className={classes["client-box"]}>
<ClientBox customer={customer} anchorStatus={anchorStatus} /> <ClientBox customer={customer} anchorStatus={anchorStatus} folderUid={folder.uid} />
{anchorStatus === AnchorStatus.NOT_ANCHORED && ( {anchorStatus === AnchorStatus.NOT_ANCHORED && (
<Link <Link
href={Module.getInstance() href={Module.getInstance()