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

Feature update folder description (#20)

Browse Source
This commit is contained in:
Maxime Lalo 2023-05-03 13:26:34 +02:00 committed by GitHub
commit ebd5ccd039
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx
View File

@ -1,50 +1,58 @@
import "reflect-metadata";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow"; import BackArrow from "@Front/Components/Elements/BackArrow";
import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { NextRouter, useRouter } from "next/router";
import BasePage from "../../Base"; import BasePage from "../../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
type IProps = { type IProps = {};
type IPropsClass = IProps & {
folderUid: string;
router: NextRouter;
};
type IState = {
folder: IDashBoardFolder | null; folder: IDashBoardFolder | null;
}; };
type IState = { class UpdateFolderDescriptionClass extends BasePage<IPropsClass, IState> {
selectedFolder: IDashBoardFolder | null; private backwardPath = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid);
}; constructor(props: IPropsClass) {
class UpdateFolderDescriptionClass extends BasePage<IProps, IState> {
constructor(props: IProps) {
super(props); super(props);
this.state = { this.state = {
selectedFolder: null, folder: null,
}; };
this.onSelectedFolder = this.onSelectedFolder.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this);
} }
public override render(): JSX.Element { public override render(): JSX.Element {
const backwardPath = Module.getInstance()
.get()
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folder?.uid ?? "");
return ( return (
<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}> <DefaultNotaryDashboard title={"Ajouter client(s)"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["back-arrow"]}> <div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} /> <BackArrow url={this.backwardPath} />
</div> </div>
<Typography typo={ITypo.H1Bis}>Modifier la note du dossier</Typography> <Typography typo={ITypo.H1Bis}>Modifier la note du dossier</Typography>
<Form className={classes["form"]}> <Form className={classes["form"]} onSubmit={this.onFormSubmit}>
<div className={classes["content"]}> <div className={classes["content"]}>
<InputField name="input field" fakeplaceholder="Note du dossier" textarea defaultValue={this.props.folder?.description ?? ""} /> <InputField
name="description"
fakeplaceholder="Note du dossier"
textarea
defaultValue={this.state.folder?.description ?? ""}
/>
</div> </div>
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Link href={backwardPath} className={classes["cancel-button"]}> <Link href={this.backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button> <Button variant={EButtonVariant.GHOST}>Annuler</Button>
</Link> </Link>
<Button type="submit">Enregistrer</Button> <Button type="submit">Enregistrer</Button>
@ -55,15 +63,25 @@ class UpdateFolderDescriptionClass extends BasePage<IProps, IState> {
); );
} }
private onSelectedFolder(folder: IDashBoardFolder): void { public override async componentDidMount() {
this.setState({ selectedFolder: folder }); const folder = await Folders.getInstance().getByUid(this.props.folderUid);
this.setState({ folder });
}
private async onFormSubmit(e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) {
try {
await Folders.getInstance().put(this.props.folderUid, values);
this.props.router.push(this.backwardPath);
} catch (error) {
console.error(error)
}
} }
} }
export default function UpdateFolderDescription() { export default function UpdateFolderDescription(props: IProps) {
const router = useRouter(); const router = useRouter();
let { folderUid } = router.query; let { folderUid } = router.query;
folderUid = folderUid as string; folderUid = folderUid as string;
const folder = folders.find((folder) => folder.uid === folderUid) ?? null;
return <UpdateFolderDescriptionClass folder={folder} />; return <UpdateFolderDescriptionClass folderUid={folderUid} router={router} />;
} }