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