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

new page update client modal

Browse Source
This commit is contained in:
Hugo Lextrait 2023-04-19 17:49:27 +02:00
parent b976e75a6c
commit ecd34fd4e5
5 changed files with 115 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/front/Components/DesignSystem/Button/index.tsx
View File

@ -2,6 +2,7 @@ import Image from "next/image";
import React, { CSSProperties } from "react";
import classes from "./classes.module.scss";
import classNames from "classnames";
export enum EButtonVariant {
PRIMARY = "primary",
@ -21,6 +22,7 @@ type IProps = {
type?: "button" | "submit";
isloading?: string;
iconposition?: "left" | "right";
className?: string;
};
export default function Button(props: IProps) {
@ -35,6 +37,7 @@ export default function Button(props: IProps) {
children,
icon,
iconstyle,
className = "",
} = props;
const fullwidthattr = fullwidth.toString();
@ -46,7 +49,7 @@ export default function Button(props: IProps) {
delete attributes.iconstyle;
delete attributes.iconposition;
return (
<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
{children}
{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}

5
src/front/Components/DesignSystem/Modal/Confirm/classes.module.scss
View File

@ -10,6 +10,11 @@
flex: 1;
}
.sub-container {
flex: 1;
display: flex;
}
@media (max-width: $screen-s) {
flex-direction: column-reverse;
gap: 8px;

24
src/front/Components/DesignSystem/Modal/Confirm/index.tsx
View File

@ -2,10 +2,12 @@ import Button, { EButtonVariant } from "../../Button";
import Modal, { IProps as IPropsModal } from "..";
import classes from "./classes.module.scss";
import React from "react";
import Link from "next/link";
type IProps = IPropsModal & {
onAccept?: () => void;
cancelText: string | JSX.Element;
cancelPath?: string;
confirmText: string | JSX.Element;
showCancelButton: boolean;
isConfirmButtonDisabled: boolean;
@ -39,16 +41,30 @@ export default class Confirm extends React.Component<IProps, IState> {
private footer(): JSX.Element {
return (
<div className={classes["buttons-container"]}>
{this.props.showCancelButton && (
{this.props.showCancelButton &&
(this.props.cancelPath ? (
<Link href={this.props.cancelPath} className={classes["sub-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}>
{this.props.cancelText}
</Button>
)}
<Button variant={EButtonVariant.PRIMARY} onClick={this.props.onAccept} disabled={this.props.isConfirmButtonDisabled}>
</Link>
) : (
<div className={classes["sub-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose} className={classes["sub-container"]}>
{this.props.cancelText}
</Button>
</div>
))}
<div className={classes["sub-container"]}>
<Button
variant={EButtonVariant.PRIMARY}
onClick={this.props.onAccept}
disabled={this.props.isConfirmButtonDisabled}
fullwidth>
{this.props.confirmText}
</Button>
</div>
</div>
);
}
}

4
src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
View File

@ -49,9 +49,9 @@ export default class ClientSection extends React.Component<IProps, IState> {
if (!folderHasCustomer.customer) return null;
// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
return (
<div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
// <div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} />
</div>
// </div>
);
});
return output ?? null;

79
src/front/Components/Layouts/Folder/UpdateClient/index.tsx
View File

@ -10,20 +10,40 @@ import { useRouter } from "next/router";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import Link from "next/link";
import { ChangeEvent } from "react";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
type IProps = {
selectedFolderUid: string;
};
type IState = {
selectedFolder: IDashBoardFolder | null;
inputNameValue: string;
inputFirstNameValue: string;
inputEmailValue: string;
inputPhoneNumberValue: string;
isOpenLeavingModal: boolean;
doesInputHaveValues: boolean;
};
class UpdateClientClass extends BasePage<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
selectedFolder: null,
inputNameValue: "",
inputFirstNameValue: "",
inputEmailValue: "",
inputPhoneNumberValue: "",
isOpenLeavingModal: false,
doesInputHaveValues: false,
};
this.onSelectedFolder = this.onSelectedFolder.bind(this);
this.onChangeNameInput = this.onChangeNameInput.bind(this);
this.onChangeFirstNameInput = this.onChangeFirstNameInput.bind(this);
this.onChangeEmailInput = this.onChangeEmailInput.bind(this);
this.onChangePhoneNumberInput = this.onChangePhoneNumberInput.bind(this);
this.openLeavingModal = this.openLeavingModal.bind(this);
this.closeLeavingModal = this.closeLeavingModal.bind(this);
}
public override render(): JSX.Element {
const backwardPath = "/folder/".concat(this.props.selectedFolderUid);
@ -37,27 +57,78 @@ class UpdateClientClass extends BasePage<IProps, IState> {
<Form className={classes["form"]}>
<div className={classes["content"]}>
<InputField name="input field" fakeplaceholder="Nom" />
<InputField name="input field" fakeplaceholder="Prénom" />
<InputField name="input field" fakeplaceholder="E-mail" isEmail />
<InputField name="input field" fakeplaceholder="Numéro de téléphone" isPositiveNumber />
<InputField name="input field" fakeplaceholder="Nom" onChange={this.onChangeNameInput} />
<InputField name="input field" fakeplaceholder="Prénom" onChange={this.onChangeFirstNameInput} />
<InputField name="input field" fakeplaceholder="E-mail" isEmail onChange={this.onChangeEmailInput} />
<InputField
name="input field"
fakeplaceholder="Numéro de téléphone"
isPositiveNumber
onChange={this.onChangePhoneNumberInput}
/>
</div>
<div className={classes["button-container"]}>
{!this.doesInputsHaveValues() ? (
<Link href={backwardPath} className={classes["cancel-button"]}>
<Button variant={EButtonVariant.GHOST}>Annuler</Button>
</Link>
) : (
<Button variant={EButtonVariant.GHOST} onClick={this.openLeavingModal} className={classes["cancel-button"]}>
Annuler
</Button>
)}
<Button type="submit">Enregistrer</Button>
</div>
</Form>
<Confirm
isOpen={this.state.isOpenLeavingModal}
onClose={this.closeLeavingModal}
closeBtn
header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
cancelText={"Annuler"}
confirmText={"Quitter"}
cancelPath={backwardPath}>
Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.{" "}
</Confirm>
</div>
</DefaultNotaryDashboard>
);
}
private openLeavingModal(): void {
this.setState({ isOpenLeavingModal: true });
}
private closeLeavingModal(): void {
this.setState({ isOpenLeavingModal: false });
}
private onChangeNameInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
this.setState({ inputNameValue: event.target.value });
}
private onChangeFirstNameInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
this.setState({ inputFirstNameValue: event.target.value });
}
private onChangeEmailInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
this.setState({ inputEmailValue: event.target.value });
}
private onChangePhoneNumberInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
this.setState({ inputPhoneNumberValue: event.target.value });
}
private onSelectedFolder(folder: IDashBoardFolder): void {
this.setState({ selectedFolder: folder });
}
private doesInputsHaveValues(): boolean {
const doesInputsHaveValues: boolean =
this.state.inputNameValue !== "" ||
this.state.inputFirstNameValue !== "" ||
this.state.inputEmailValue !== "" ||
this.state.inputPhoneNumberValue !== "";
return doesInputsHaveValues;
}
}
export default function UpdateClient() {