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

🐛 Fix pre selected users

Browse Source
This commit is contained in:
Maxime Lalo 2023-09-19 15:34:49 +02:00
parent d3ae82f245
commit 456fd1d9c2
1 changed files with 65 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
View File

@ -24,7 +24,9 @@ type IState = {
selectedFolder: OfficeFolder | null; selectedFolder: OfficeFolder | null;
selectedOption?: ERadioBoxValue; selectedOption?: ERadioBoxValue;
availableCollaborators: User[]; availableCollaborators: User[];
defaultCheckedAllOffice: boolean;
selectedCollaborators: readonly IOption[]; selectedCollaborators: readonly IOption[];
loading: boolean;
}; };
enum ERadioBoxValue { enum ERadioBoxValue {
@ -39,6 +41,9 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
selectedFolder: null, selectedFolder: null,
availableCollaborators: [], availableCollaborators: [],
selectedCollaborators: [], selectedCollaborators: [],
defaultCheckedAllOffice: false,
selectedOption: ERadioBoxValue.SELECTION,
loading: true,
}; };
this.onSelectedFolder = this.onSelectedFolder.bind(this); this.onSelectedFolder = this.onSelectedFolder.bind(this);
this.onSelectedOptionAllOffice = this.onSelectedOptionAllOffice.bind(this); this.onSelectedOptionAllOffice = this.onSelectedOptionAllOffice.bind(this);
@ -55,6 +60,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
value: collaborator.uid, value: collaborator.uid,
}; };
}); });
return ( return (
<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}> <DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
<div className={classes["root"]}> <div className={classes["root"]}>
@ -63,34 +69,44 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
</div> </div>
<Typography typo={ITypo.H1Bis}>Modifier les collaborateurs</Typography> <Typography typo={ITypo.H1Bis}>Modifier les collaborateurs</Typography>
<Form className={classes["form"]} onSubmit={this.onFormSubmit}> {!this.state.loading && (
<div className={classes["content"]}> <Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<RadioBox name="office" value={ERadioBoxValue.ALL} defaultChecked onChange={this.onSelectedOptionAllOffice}> <div className={classes["content"]}>
Tout l'office <RadioBox
</RadioBox> name="office"
<RadioBox name="office" value={ERadioBoxValue.SELECTION} onChange={this.onSelectedOptionSpecific}> value={ERadioBoxValue.ALL}
Sélectionner des collaborateurs defaultChecked={this.state.defaultCheckedAllOffice}
</RadioBox> onChange={this.onSelectedOptionAllOffice}>
</div> Tout l'office
</RadioBox>
{this.state.selectedOption === ERadioBoxValue.SELECTION && ( <RadioBox
<div className={classes["sub-content"]}> name="office"
<MultiSelect value={ERadioBoxValue.SELECTION}
onChange={this.onChangeSelectedCollaborators} defaultChecked={!this.state.defaultCheckedAllOffice}
options={selectOptions} onChange={this.onSelectedOptionSpecific}>
placeholder="Collaborateurs" Sélectionner des collaborateurs
defaultValue={this.state.selectedCollaborators} </RadioBox>
/>
</div> </div>
)}
<div className={classes["button-container"]}> {this.state.selectedOption === ERadioBoxValue.SELECTION && (
<Link href={backwardPath} className={classes["cancel-button"]}> <div className={classes["sub-content"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <MultiSelect
</Link> onChange={this.onChangeSelectedCollaborators}
<Button type="submit">Enregistrer</Button> options={selectOptions}
</div> placeholder="Collaborateurs"
</Form> defaultValue={this.state.selectedCollaborators}
/>
</div>
)}
<div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
</Link>
<Button type="submit">Enregistrer</Button>
</div>
</Form>
)}
</div> </div>
</DefaultNotaryDashboard> </DefaultNotaryDashboard>
); );
@ -121,27 +137,33 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
value: collaborator.uid, value: collaborator.uid,
}; };
}); });
this.setState({ selectedCollaborators: preSelectedCollaborators });
// no need to pass query 'where' param here, default query for notaries include only users which are in the same office as the caller
const userQuery: IGetUsersParams = {
include: {
contact: {
select: {
first_name: true,
last_name: true,
},
},
},
};
const availableCollaborators = await Users.getInstance().get(userQuery);
this.setState({
loading: false,
availableCollaborators,
selectedCollaborators: preSelectedCollaborators,
defaultCheckedAllOffice: preSelectedCollaborators.length === availableCollaborators.length,
selectedOption:
preSelectedCollaborators.length === availableCollaborators.length ? ERadioBoxValue.ALL : ERadioBoxValue.SELECTION,
});
} catch (error) { } catch (error) {
this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path); this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
return; return;
} }
// no need to pass query 'where' param here, default query for notaries include only users which are in the same office as the caller
const userQuery: IGetUsersParams = {
include: {
contact: {
select: {
first_name: true,
last_name: true,
},
},
},
};
const availableCollaborators = await Users.getInstance().get(userQuery);
console.log(availableCollaborators)
this.setState({ availableCollaborators });
} }
private onSelectedOptionAllOffice(event: React.ChangeEvent<HTMLInputElement>) { private onSelectedOptionAllOffice(event: React.ChangeEvent<HTMLInputElement>) {