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";
.root {
margin: 64px;
width: 530px;
width: 472px;
margin: 24px auto;
@media (max-width: $screen-l) {
width: 100%;
margin: 64px 0;
padding: 0 64px;
}
display: flex;
flex-direction: column;
gap: var(--spacing-xl, 32px);
@media (max-width: $screen-m) {
padding: 0 16px 0 16px;
}
.title {
margin-top: 24px;
}
.subtitle {
margin-top: 32px;
}
.form-container {
margin-top: 16px;
.form {
display: flex;
flex-direction: column;
gap: 24px;
}
gap: var(--spacing-md, 16px);
.access-container {
margin-top: 16px;
.radio-container {
margin-top: 16px;
.bottom-container {
display: flex;
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 Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
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 JwtService from "@Front/Services/JwtService/JwtService";
import { DeedType } from "le-coffre-resources/dist/Notary";
import { MultiValue } from "react-select";
export default function CreateFolder(): JSX.Element {
/**
@ -30,6 +31,7 @@ export default function CreateFolder(): JSX.Element {
const [availableDeedTypes, setAvailableDeedTypes] = useState<DeedType[]>([]);
const [collaborators, setCollaborators] = useState<User[]>([]);
const [validationError, setValidationError] = useState<ValidationError[]>([]);
const [selectedCollaborators, setSelectedCollaborators] = useState<User[]>([]);
/**
* Hooks call
@ -46,7 +48,6 @@ export default function CreateFolder(): JSX.Element {
[key: string]: any;
},
) => {
console.log(values);
const officeId = JwtService.getInstance().decodeJwt()?.office_Id;
const officeFolderForm = OfficeFolder.hydrate<OfficeFolder>({
@ -62,7 +63,7 @@ export default function CreateFolder(): JSX.Element {
uid: officeId,
}),
customers: [],
stakeholders: collaborators,
stakeholders: folderAccess === "whole_office" ? collaborators : selectedCollaborators,
});
try {
@ -86,6 +87,11 @@ export default function CreateFolder(): JSX.Element {
const radioOnChange = (e: React.ChangeEvent<HTMLInputElement>) =>
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
*/
@ -98,7 +104,10 @@ export default function CreateFolder(): JSX.Element {
.get({
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}>
<div className={classes["root"]}>
<BackArrow />
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Créer un dossier
</Typography>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
Informations dossier
</Typography>
<Form onSubmit={onFormSubmit}>
<div className={classes["form-container"]}>
<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["header"]}>
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Créer un dossier
</Typography>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
Informations du dossier
</Typography>
</div>
<div className={classes["access-container"]}>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500}>
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[]
}
placeholder="Sélectionner les collaborateurs"
validationError={validationError.find((error) => error.property === "stakeholders")}
/>
</div>
)}
<div className={classes["buttons-container"]}>
<Button fullwidth type="submit">
Créer un dossier
</Button>
<Form onSubmit={onFormSubmit} className={classes["form"]}>
<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["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 className={classes["buttons-container"]}>
<Button fullwidth type="submit">
Créer un dossier
</Button>
</div>
</div>
</Form>