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

✨ Create folder refacto

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-19 13:04:36 +02:00
parent 9a490c8029
commit 1bdaa77247
2 changed files with 99 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
View File

@ -1,49 +1,28 @@
@import "@Themes/constants.scss"; @import "@Themes/constants.scss";
.root { .root {
margin: 64px; width: 472px;
width: 530px; margin: 24px auto;
@media (max-width: $screen-l) { display: flex;
width: 100%; flex-direction: column;
margin: 64px 0; gap: var(--spacing-xl, 32px);
padding: 0 64px;
}
@media (max-width: $screen-m) { .form {
padding: 0 16px 0 16px;
}
.title {
margin-top: 24px;
}
.subtitle {
margin-top: 32px;
}
.form-container {
margin-top: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: var(--spacing-md, 16px);
}
.access-container { .bottom-container {
margin-top: 16px;
.radio-container {
margin-top: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: var(--spacing-xl, 32px);
.radio-container {
display: flex;
flex-direction: column;
gap: var(--spacing-md, 16px);
}
} }
} }
.collaborators-container {
margin-top: 32px;
}
.buttons-container {
margin-top: 32px;
}
} }

153
src/front/Components/Layouts/Folder/CreateFolder/index.tsx
View File

@ -1,4 +1,4 @@
import backgroundImage from "@Assets/images/404-background-image.jpeg"; import backgroundImage from "@Assets/images/background_refonte.svg";
import DeedTypes from "@Front/Api/LeCoffreApi/Notary/DeedTypes/DeedTypes"; import DeedTypes from "@Front/Api/LeCoffreApi/Notary/DeedTypes/DeedTypes";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users"; import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
@ -21,6 +21,7 @@ import React, { useEffect, useState } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import JwtService from "@Front/Services/JwtService/JwtService"; import JwtService from "@Front/Services/JwtService/JwtService";
import { DeedType } from "le-coffre-resources/dist/Notary"; import { DeedType } from "le-coffre-resources/dist/Notary";
import { MultiValue } from "react-select";
export default function CreateFolder(): JSX.Element { export default function CreateFolder(): JSX.Element {
/** /**
@ -30,6 +31,7 @@ export default function CreateFolder(): JSX.Element {
const [availableDeedTypes, setAvailableDeedTypes] = useState<DeedType[]>([]); const [availableDeedTypes, setAvailableDeedTypes] = useState<DeedType[]>([]);
const [collaborators, setCollaborators] = useState<User[]>([]); const [collaborators, setCollaborators] = useState<User[]>([]);
const [validationError, setValidationError] = useState<ValidationError[]>([]); const [validationError, setValidationError] = useState<ValidationError[]>([]);
const [selectedCollaborators, setSelectedCollaborators] = useState<User[]>([]);
/** /**
* Hooks call * Hooks call
@ -46,7 +48,6 @@ export default function CreateFolder(): JSX.Element {
[key: string]: any; [key: string]: any;
}, },
) => { ) => {
console.log(values);
const officeId = JwtService.getInstance().decodeJwt()?.office_Id; const officeId = JwtService.getInstance().decodeJwt()?.office_Id;
const officeFolderForm = OfficeFolder.hydrate<OfficeFolder>({ const officeFolderForm = OfficeFolder.hydrate<OfficeFolder>({
@ -62,7 +63,7 @@ export default function CreateFolder(): JSX.Element {
uid: officeId, uid: officeId,
}), }),
customers: [], customers: [],
stakeholders: collaborators, stakeholders: folderAccess === "whole_office" ? collaborators : selectedCollaborators,
}); });
try { try {
@ -86,6 +87,11 @@ export default function CreateFolder(): JSX.Element {
const radioOnChange = (e: React.ChangeEvent<HTMLInputElement>) => const radioOnChange = (e: React.ChangeEvent<HTMLInputElement>) =>
setFolderAccess(e.target.value as "whole_office" | "select_collaborators"); setFolderAccess(e.target.value as "whole_office" | "select_collaborators");
const onSelectedCollaboratorsChange = (values: MultiValue<IOption>) => {
const selectedCollaborators = collaborators.filter((collaborator) => values.some((value) => value.value === collaborator.uid));
setSelectedCollaborators(selectedCollaborators);
};
/** /**
* UseEffect * UseEffect
*/ */
@ -98,7 +104,10 @@ export default function CreateFolder(): JSX.Element {
.get({ .get({
include: { contact: true }, include: { contact: true },
}) })
.then((users) => setCollaborators(users)); .then((users) => {
setCollaborators(users);
setSelectedCollaborators(users);
});
}, []); }, []);
/** /**
@ -108,73 +117,79 @@ export default function CreateFolder(): JSX.Element {
<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}> <DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
<div className={classes["root"]}> <div className={classes["root"]}>
<BackArrow /> <BackArrow />
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}> <div className={classes["header"]}>
Créer un dossier <Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
</Typography> Créer un dossier
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}> </Typography>
Informations dossier <Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
</Typography> Informations du dossier
<Form onSubmit={onFormSubmit}> </Typography>
<div className={classes["form-container"]}> </div>
<TextField
name="folder_number"
placeholder="Numéro de dossier"
validationError={validationError.find((error) => error.property === "folder_number")}
/>
<TextField
name="name"
placeholder="Intitulé"
validationError={validationError.find((error) => error.property === "name")}
/>
<SelectField
options={
availableDeedTypes.map((deedType) => ({
label: deedType.name,
value: deedType.uid,
})) as IOption[]
}
name="deed"
placeholder={"Type d'acte"}
errors={validationError.find((error) => error.property === "deed")}
/>
<TextAreaField
name="description"
placeholder="Note du dossier"
validationError={validationError.find((error) => error.property === "description")}
required={false}
/>
<div className={classes["access-container"]}> <Form onSubmit={onFormSubmit} className={classes["form"]}>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500}> <TextField
Accès au dossier name="folder_number"
</Typography> placeholder="Numéro de dossier"
<div className={classes["radio-container"]}> validationError={validationError.find((error) => error.property === "folder_number")}
<RadioBox name="file_access" defaultChecked onChange={radioOnChange} value="whole_office"> />
Sélectionner tout l'office <TextField
</RadioBox> name="name"
<RadioBox name="file_access" onChange={radioOnChange} value="select_collaborators"> placeholder="Intitulé"
Sélectionner certains collaborateurs validationError={validationError.find((error) => error.property === "name")}
</RadioBox> />
</div> <SelectField
{folderAccess === "select_collaborators" && ( options={
<div className={classes["collaborators-container"]}> availableDeedTypes.map((deedType) => ({
<MultiSelect label: deedType.name,
options={ value: deedType.uid,
collaborators.map((collaborator) => ({ })) as IOption[]
label: collaborator.contact?.last_name.concat(" ", collaborator.contact.first_name), }
value: collaborator.uid, name="deed"
})) as IOption[] placeholder={"Type d'acte"}
} errors={validationError.find((error) => error.property === "deed")}
placeholder="Sélectionner les collaborateurs" />
validationError={validationError.find((error) => error.property === "stakeholders")} <TextAreaField
/> name="description"
</div> placeholder="Note du dossier"
)} validationError={validationError.find((error) => error.property === "description")}
<div className={classes["buttons-container"]}> required={false}
<Button fullwidth type="submit"> />
Créer un dossier
</Button> <div className={classes["bottom-container"]}>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500}>
Donner l'accès au dossier
</Typography>
<div className={classes["radio-container"]}>
<RadioBox name="file_access" defaultChecked onChange={radioOnChange} value="whole_office">
Sélectionner tout l'office
</RadioBox>
<RadioBox name="file_access" onChange={radioOnChange} value="select_collaborators">
Sélectionner certains collaborateurs
</RadioBox>
</div>
{folderAccess === "select_collaborators" && (
<div className={classes["collaborators-container"]}>
<MultiSelect
options={
collaborators.map((collaborator) => ({
label: collaborator.contact?.last_name.concat(" ", collaborator.contact.first_name),
value: collaborator.uid,
})) as IOption[]
}
defaultValue={selectedCollaborators.map((collaborator) => ({
label: collaborator.contact?.last_name.concat(" ", collaborator.contact.first_name) as string,
value: collaborator.uid!,
}))}
onChange={onSelectedCollaboratorsChange}
placeholder="Sélectionner les collaborateurs"
validationError={validationError.find((error) => error.property === "stakeholders")}
/>
</div> </div>
)}
<div className={classes["buttons-container"]}>
<Button fullwidth type="submit">
Créer un dossier
</Button>
</div> </div>
</div> </div>
</Form> </Form>