Merge branch 'dev' into staging
This commit is contained in:
Maxime Lalo
commit
74b5bf35bb
@ -3,59 +3,34 @@
|
|||||||
.root {
|
.root {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100%;
|
width: 472px;
|
||||||
align-items: flex-start;
|
margin: auto;
|
||||||
width: fit-content;
|
margin-top: 24px;
|
||||||
|
gap: var(--spacing-xl, 32px);
|
||||||
|
|
||||||
.back-arrow {
|
@media (max-width: 504px) {
|
||||||
margin-bottom: 24px;
|
width: unset;
|
||||||
|
margin: 24px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
width: 100%;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
.content {
|
gap: var(--spacing-xl, 32px);
|
||||||
margin-top: 32px;
|
|
||||||
|
|
||||||
>:not(:last-child) {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-content {
|
|
||||||
margin-top: 32px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-container {
|
.button-container {
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
text-align: center;
|
gap: var(--spacing-md, 16px);
|
||||||
margin-top: 24px;
|
|
||||||
|
|
||||||
.cancel-button {
|
@media (max-width: 504px) {
|
||||||
display: flex;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $screen-m) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
|
> button {
|
||||||
.cancel-button {
|
width: 100%;
|
||||||
margin-left: 0;
|
|
||||||
margin-top: 12px;
|
|
||||||
|
|
||||||
>* {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
> a > button {
|
||||||
>* {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,122 +7,71 @@ import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
|
|||||||
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
|
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
|
||||||
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
|
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
|
||||||
import BackArrow from "@Front/Components/Elements/BackArrow";
|
import BackArrow from "@Front/Components/Elements/BackArrow";
|
||||||
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
|
||||||
import Module from "@Front/Config/Module";
|
import Module from "@Front/Config/Module";
|
||||||
import User from "le-coffre-resources/dist/Notary/User";
|
import User from "le-coffre-resources/dist/Notary/User";
|
||||||
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { NextRouter, useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
import BasePage from "../../Base";
|
|
||||||
import classes from "./classes.module.scss";
|
import classes from "./classes.module.scss";
|
||||||
import { ValidationError } from "class-validator";
|
import { ValidationError } from "class-validator";
|
||||||
|
import backgroundImage from "@Assets/images/background_refonte.svg";
|
||||||
type IPropsClass = {
|
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
|
||||||
selectedFolderUid: string;
|
import { useCallback, useEffect, useState } from "react";
|
||||||
router: NextRouter;
|
|
||||||
};
|
|
||||||
type IState = {
|
|
||||||
selectedFolder: OfficeFolder | null;
|
|
||||||
selectedOption?: ERadioBoxValue;
|
|
||||||
availableCollaborators: User[];
|
|
||||||
defaultCheckedAllOffice: boolean;
|
|
||||||
selectedCollaborators: readonly IOption[];
|
|
||||||
loading: boolean;
|
|
||||||
validationError?: ValidationError[];
|
|
||||||
};
|
|
||||||
|
|
||||||
enum ERadioBoxValue {
|
enum ERadioBoxValue {
|
||||||
ALL = "all",
|
ALL = "all",
|
||||||
SELECTION = "selection",
|
SELECTION = "selection",
|
||||||
}
|
}
|
||||||
|
|
||||||
class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
|
export default function UpdateFolderCollaborators() {
|
||||||
constructor(props: IPropsClass) {
|
const router = useRouter();
|
||||||
super(props);
|
let { folderUid } = router.query;
|
||||||
this.state = {
|
|
||||||
selectedFolder: null,
|
|
||||||
availableCollaborators: [],
|
|
||||||
selectedCollaborators: [],
|
|
||||||
defaultCheckedAllOffice: false,
|
|
||||||
selectedOption: ERadioBoxValue.SELECTION,
|
|
||||||
loading: true,
|
|
||||||
};
|
|
||||||
this.onSelectedFolder = this.onSelectedFolder.bind(this);
|
|
||||||
this.onSelectedOptionAllOffice = this.onSelectedOptionAllOffice.bind(this);
|
|
||||||
this.onSelectedOptionSpecific = this.onSelectedOptionSpecific.bind(this);
|
|
||||||
this.onFormSubmit = this.onFormSubmit.bind(this);
|
|
||||||
this.onChangeSelectedCollaborators = this.onChangeSelectedCollaborators.bind(this);
|
|
||||||
}
|
|
||||||
public override render(): JSX.Element {
|
|
||||||
const foldersInformationPath = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
|
|
||||||
const backwardPath = foldersInformationPath.replace("[folderUid]", this.props.selectedFolderUid);
|
|
||||||
const selectOptions: IOption[] = this.state.availableCollaborators.map((collaborator) => {
|
|
||||||
return {
|
|
||||||
label: collaborator.contact?.first_name + " " + collaborator.contact?.last_name,
|
|
||||||
value: collaborator.uid,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
const [availableCollaborators, setAvailableCollaborators] = useState<User[]>([]);
|
||||||
<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
|
const [selectedCollaborators, setSelectedCollaborators] = useState<readonly IOption[]>([]);
|
||||||
<div className={classes["root"]}>
|
const [defaultCheckedAllOffice, setDefaultCheckedAllOffice] = useState<boolean>(false);
|
||||||
<div className={classes["back-arrow"]}>
|
const [selectedOption, setSelectedOption] = useState<ERadioBoxValue>(ERadioBoxValue.SELECTION);
|
||||||
<BackArrow url={backwardPath} />
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
</div>
|
const [validationError, setValidationError] = useState<ValidationError[]>([]);
|
||||||
<Typography typo={ETypo.TITLE_H1}>Modifier les collaborateurs</Typography>
|
|
||||||
|
|
||||||
{!this.state.loading && (
|
const onFormSubmit = useCallback(
|
||||||
<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
|
async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
|
||||||
<div className={classes["content"]}>
|
if (!folderUid || typeof folderUid !== "string") return;
|
||||||
<RadioBox
|
try {
|
||||||
name="office"
|
let collaboratorsUid: User[] = availableCollaborators;
|
||||||
value={ERadioBoxValue.ALL}
|
if (selectedOption === ERadioBoxValue.SELECTION) {
|
||||||
defaultChecked={this.state.defaultCheckedAllOffice}
|
collaboratorsUid = selectedCollaborators.map((collaborator) =>
|
||||||
onChange={this.onSelectedOptionAllOffice}>
|
User.hydrate<User>({ uid: collaborator.value as string }),
|
||||||
Tout l'office
|
);
|
||||||
</RadioBox>
|
}
|
||||||
<RadioBox
|
await Folders.getInstance().put(folderUid, { stakeholders: collaboratorsUid });
|
||||||
name="office"
|
router.push(
|
||||||
value={ERadioBoxValue.SELECTION}
|
Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid),
|
||||||
defaultChecked={!this.state.defaultCheckedAllOffice}
|
);
|
||||||
onChange={this.onSelectedOptionSpecific}>
|
} catch (error) {
|
||||||
Sélectionner des collaborateurs
|
if (!Array.isArray(error)) return;
|
||||||
</RadioBox>
|
setValidationError(error as ValidationError[]);
|
||||||
</div>
|
}
|
||||||
|
},
|
||||||
|
[availableCollaborators, folderUid, router, selectedCollaborators, selectedOption],
|
||||||
|
);
|
||||||
|
|
||||||
{this.state.selectedOption === ERadioBoxValue.SELECTION && (
|
const onSelectedOptionAllOffice = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
<div className={classes["sub-content"]}>
|
if (event.target.value !== ERadioBoxValue.ALL) return;
|
||||||
<MultiSelect
|
setSelectedOption(ERadioBoxValue.ALL);
|
||||||
onChange={this.onChangeSelectedCollaborators}
|
}, []);
|
||||||
options={selectOptions}
|
|
||||||
placeholder="Collaborateurs"
|
|
||||||
defaultValue={this.state.selectedCollaborators}
|
|
||||||
validationError={this.state.validationError?.find((error) => error.property === "stakeholders")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className={classes["button-container"]}>
|
const onChangeSelectedCollaborators = useCallback((selectedCollaborators: readonly IOption[]) => {
|
||||||
<Link href={backwardPath} className={classes["cancel-button"]}>
|
setSelectedCollaborators(selectedCollaborators);
|
||||||
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
|
}, []);
|
||||||
Annuler
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
<Button type="submit">Enregistrer</Button>
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</DefaultNotaryDashboard>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
public override async componentDidMount() {
|
const onSelectedOptionSpecific = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
await this.getFolderAvailableCollaborators(this.props.selectedFolderUid);
|
if (event.target.value !== ERadioBoxValue.SELECTION) return;
|
||||||
}
|
setSelectedOption(ERadioBoxValue.SELECTION);
|
||||||
|
}, []);
|
||||||
|
|
||||||
private async getFolderAvailableCollaborators(folderUid: string) {
|
const getFolderInfos = useCallback(async () => {
|
||||||
|
if (!folderUid || typeof folderUid !== "string") return;
|
||||||
const query = {
|
const query = {
|
||||||
q: {
|
q: {
|
||||||
office: true,
|
office: true,
|
||||||
@ -158,66 +107,82 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
|
|||||||
|
|
||||||
const availableCollaborators = await Users.getInstance().get(userQuery);
|
const availableCollaborators = await Users.getInstance().get(userQuery);
|
||||||
|
|
||||||
this.setState({
|
setLoading(false);
|
||||||
loading: false,
|
setAvailableCollaborators(availableCollaborators);
|
||||||
availableCollaborators,
|
setSelectedCollaborators(preSelectedCollaborators);
|
||||||
selectedCollaborators: preSelectedCollaborators,
|
setDefaultCheckedAllOffice(preSelectedCollaborators.length === availableCollaborators.length);
|
||||||
defaultCheckedAllOffice: preSelectedCollaborators.length === availableCollaborators.length,
|
setSelectedOption(
|
||||||
selectedOption:
|
preSelectedCollaborators.length === availableCollaborators.length ? ERadioBoxValue.ALL : ERadioBoxValue.SELECTION,
|
||||||
preSelectedCollaborators.length === availableCollaborators.length ? ERadioBoxValue.ALL : ERadioBoxValue.SELECTION,
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private onSelectedOptionAllOffice(event: React.ChangeEvent<HTMLInputElement>) {
|
|
||||||
if (event.target.value !== ERadioBoxValue.ALL) return;
|
|
||||||
this.setState({
|
|
||||||
selectedOption: ERadioBoxValue.ALL,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private onChangeSelectedCollaborators(selectedCollaborators: readonly IOption[]) {
|
|
||||||
this.setState({ selectedCollaborators });
|
|
||||||
}
|
|
||||||
|
|
||||||
private onSelectedOptionSpecific(event: React.ChangeEvent<HTMLInputElement>) {
|
|
||||||
if (event.target.value !== ERadioBoxValue.SELECTION) return;
|
|
||||||
this.setState({
|
|
||||||
selectedOption: ERadioBoxValue.SELECTION,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private onSelectedFolder(folder: OfficeFolder): void {
|
|
||||||
this.setState({ selectedFolder: folder });
|
|
||||||
}
|
|
||||||
|
|
||||||
private async onFormSubmit(e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) {
|
|
||||||
try {
|
|
||||||
let collaboratorsUid: User[] = this.state.availableCollaborators;
|
|
||||||
if (this.state.selectedOption === ERadioBoxValue.SELECTION) {
|
|
||||||
collaboratorsUid = this.state.selectedCollaborators.map((collaborator) =>
|
|
||||||
User.hydrate<User>({ uid: collaborator.value as string }),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
await Folders.getInstance().put(this.props.selectedFolderUid, { stakeholders: collaboratorsUid });
|
|
||||||
this.props.router.push(
|
|
||||||
Module.getInstance()
|
|
||||||
.get()
|
|
||||||
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid),
|
|
||||||
);
|
);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (!Array.isArray(error)) return;
|
router.push(Module.getInstance().get().modules.pages["404"].props.path);
|
||||||
this.setState({ validationError: error });
|
return;
|
||||||
}
|
}
|
||||||
}
|
}, [folderUid, router]);
|
||||||
}
|
|
||||||
|
|
||||||
export default function UpdateFolderCollaborators() {
|
useEffect(() => {
|
||||||
const router = useRouter();
|
getFolderInfos();
|
||||||
let { folderUid } = router.query;
|
}, [getFolderInfos]);
|
||||||
folderUid = folderUid as string;
|
|
||||||
return <UpdateFolderCollaboratorsClass selectedFolderUid={folderUid} router={router} />;
|
const foldersInformationPath = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
|
||||||
|
const backwardPath = foldersInformationPath.replace("[folderUid]", folderUid as string);
|
||||||
|
const selectOptions: IOption[] = availableCollaborators.map((collaborator) => {
|
||||||
|
return {
|
||||||
|
label: collaborator.contact?.first_name + " " + collaborator.contact?.last_name,
|
||||||
|
value: collaborator.uid,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
|
||||||
|
<div className={classes["root"]}>
|
||||||
|
<div className={classes["back-arrow"]}>
|
||||||
|
<BackArrow url={backwardPath} />
|
||||||
|
</div>
|
||||||
|
<Typography typo={ETypo.TITLE_H1}>Modifier les collaborateurs</Typography>
|
||||||
|
|
||||||
|
{!loading && (
|
||||||
|
<Form className={classes["form"]} onSubmit={onFormSubmit}>
|
||||||
|
<div className={classes["content"]}>
|
||||||
|
<RadioBox
|
||||||
|
name="office"
|
||||||
|
value={ERadioBoxValue.ALL}
|
||||||
|
defaultChecked={defaultCheckedAllOffice}
|
||||||
|
onChange={onSelectedOptionAllOffice}>
|
||||||
|
Tout l'office
|
||||||
|
</RadioBox>
|
||||||
|
<RadioBox
|
||||||
|
name="office"
|
||||||
|
value={ERadioBoxValue.SELECTION}
|
||||||
|
defaultChecked={!defaultCheckedAllOffice}
|
||||||
|
onChange={onSelectedOptionSpecific}>
|
||||||
|
Sélectionner des collaborateurs
|
||||||
|
</RadioBox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedOption === ERadioBoxValue.SELECTION && (
|
||||||
|
<div className={classes["sub-content"]}>
|
||||||
|
<MultiSelect
|
||||||
|
onChange={onChangeSelectedCollaborators}
|
||||||
|
options={selectOptions}
|
||||||
|
placeholder="Collaborateurs"
|
||||||
|
defaultValue={selectedCollaborators}
|
||||||
|
validationError={validationError?.find((error) => error.property === "stakeholders")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={classes["button-container"]}>
|
||||||
|
<Link href={backwardPath} className={classes["cancel-button"]}>
|
||||||
|
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Button type="submit">Enregistrer</Button>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</DefaultDoubleSidePage>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user