✨ Refacto types de fichiers à demander
This commit is contained in:
Maxime Lalo
parent
44b75b7f7a
commit
4cf0bdb1e8
@ -0,0 +1,11 @@
|
||||
.add-document-form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
.radiobox-container {
|
||||
> :not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,159 @@
|
||||
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
||||
import classes from "./classes.module.scss";
|
||||
import TextField from "@Front/Components/DesignSystem/Form/TextField";
|
||||
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
|
||||
import { ChangeEvent, useCallback, useEffect, useState } from "react";
|
||||
import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
|
||||
import { DocumentType, OfficeFolder } from "le-coffre-resources/dist/Notary";
|
||||
import Deeds from "@Front/Api/LeCoffreApi/Notary/Deeds/Deeds";
|
||||
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
|
||||
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
|
||||
import { MultiValue } from "react-select";
|
||||
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
|
||||
type IProps = {
|
||||
isCreateDocumentModalVisible: boolean;
|
||||
closeModal: () => void;
|
||||
folder: OfficeFolder;
|
||||
};
|
||||
|
||||
export default function ParameterDocuments(props: IProps) {
|
||||
const [visibleDescription, setVisibleDescription] = useState<string>("");
|
||||
const [documentName, setDocumentName] = useState<string>("");
|
||||
|
||||
const [addOrEditDocument, setAddOrEditDocument] = useState<"add" | "edit">("edit");
|
||||
|
||||
const [selectedDocuments, setSelectedDocuments] = useState<IOption[]>([]);
|
||||
const [formattedOptions, setFormattedOptions] = useState<IOption[]>([]);
|
||||
|
||||
const getAvailableDocuments = useCallback(async () => {
|
||||
const documents = await DocumentTypes.getInstance().get({});
|
||||
|
||||
const formattedOptions: IOption[] = documents
|
||||
.filter((document) => {
|
||||
return !props.folder.deed?.document_types?.some((documentType) => documentType.uid === document.uid);
|
||||
})
|
||||
.map((document) => {
|
||||
return {
|
||||
label: document.name,
|
||||
value: document.uid,
|
||||
};
|
||||
});
|
||||
setFormattedOptions(formattedOptions);
|
||||
}, [props.folder.deed?.document_types]);
|
||||
|
||||
const onVisibleDescriptionChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
setVisibleDescription(event.target.value);
|
||||
};
|
||||
|
||||
const onDocumentNameChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
setDocumentName(event.target.value);
|
||||
};
|
||||
|
||||
const onDocumentChangeHandler = useCallback((values: MultiValue<IOption>) => {
|
||||
setSelectedDocuments(values as IOption[]);
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setFormattedOptions([]);
|
||||
setSelectedDocuments([]);
|
||||
setAddOrEditDocument("edit");
|
||||
setVisibleDescription("");
|
||||
setDocumentName("");
|
||||
props.closeModal();
|
||||
}, [props]);
|
||||
|
||||
const addDocument = useCallback(async () => {
|
||||
if (addOrEditDocument === "add") {
|
||||
try {
|
||||
const documentType = await DocumentTypes.getInstance().post({
|
||||
name: documentName,
|
||||
private_description: visibleDescription,
|
||||
office: {
|
||||
uid: props.folder.office!.uid!,
|
||||
},
|
||||
public_description: visibleDescription,
|
||||
});
|
||||
|
||||
const oldDocumentsType = props.folder.deed?.document_types!;
|
||||
await Deeds.getInstance().put(props.folder.deed?.uid!, {
|
||||
document_types: [...oldDocumentsType, documentType],
|
||||
});
|
||||
|
||||
//await this.loadData();
|
||||
handleClose();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const oldDocumentsType = props.folder.deed?.document_types!;
|
||||
await Deeds.getInstance().put(props.folder.deed?.uid!, {
|
||||
document_types: [
|
||||
...oldDocumentsType,
|
||||
...selectedDocuments.map((document) => DocumentType.hydrate<DocumentType>({ uid: document.value as string })),
|
||||
],
|
||||
});
|
||||
|
||||
//await this.loadData();
|
||||
handleClose();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
}, [addOrEditDocument, documentName, handleClose, props, selectedDocuments, visibleDescription]);
|
||||
|
||||
const selectEditMode = () => {
|
||||
setAddOrEditDocument("edit");
|
||||
};
|
||||
|
||||
const selectAddMode = () => {
|
||||
setAddOrEditDocument("add");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getAvailableDocuments();
|
||||
}, [getAvailableDocuments, props.folder]);
|
||||
|
||||
return (
|
||||
<Confirm
|
||||
isOpen={props.isCreateDocumentModalVisible}
|
||||
onClose={handleClose}
|
||||
onAccept={addDocument}
|
||||
closeBtn
|
||||
header={"Ajouter des documents demandables"}
|
||||
cancelText={"Annuler"}
|
||||
confirmText={"Ajouter"}>
|
||||
<div className={classes["add-document-form-container"]}>
|
||||
<div className={classes["radiobox-container"]}>
|
||||
<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"}>
|
||||
<Typography typo={ITypo.P_ERR_18}>Document existant</Typography>
|
||||
</RadioBox>
|
||||
|
||||
<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}>
|
||||
<Typography typo={ITypo.P_ERR_18}>Créer un document</Typography>
|
||||
</RadioBox>
|
||||
</div>
|
||||
{addOrEditDocument === "add" && (
|
||||
<>
|
||||
<TextField name="document_name" placeholder="Nom du document à ajouter" onChange={onDocumentNameChange} />
|
||||
<TextAreaField
|
||||
name="description"
|
||||
placeholder="Description visible par le client"
|
||||
onChange={onVisibleDescriptionChange}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{addOrEditDocument === "edit" && (
|
||||
<MultiSelect
|
||||
options={formattedOptions}
|
||||
placeholder="Cliquez pour sélectionner des documents"
|
||||
onChange={onDocumentChangeHandler}
|
||||
defaultValue={selectedDocuments}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Confirm>
|
||||
);
|
||||
}
|
||||
@ -37,10 +37,4 @@
|
||||
.buttons-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.add-document-form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,10 @@
|
||||
import PlusIcon from "@Assets/Icons/plus.svg";
|
||||
import Deeds from "@Front/Api/LeCoffreApi/Notary/Deeds/Deeds";
|
||||
import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
|
||||
import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
|
||||
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
|
||||
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
|
||||
import Form from "@Front/Components/DesignSystem/Form";
|
||||
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
|
||||
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
|
||||
import TextField from "@Front/Components/DesignSystem/Form/TextField";
|
||||
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import BackArrow from "@Front/Components/Elements/BackArrow";
|
||||
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
||||
@ -20,6 +15,7 @@ import React from "react";
|
||||
|
||||
import BasePage from "../../Base";
|
||||
import classes from "./classes.module.scss";
|
||||
import ParameterDocuments from "./ParameterDocuments";
|
||||
|
||||
type IProps = {};
|
||||
type IPropsClass = IProps & {
|
||||
@ -29,8 +25,6 @@ type IPropsClass = IProps & {
|
||||
};
|
||||
type IState = {
|
||||
isCreateDocumentModalVisible: boolean;
|
||||
documentName: string;
|
||||
visibleDescription: string;
|
||||
documentTypes: IOption[];
|
||||
folder: OfficeFolder | null;
|
||||
};
|
||||
@ -41,8 +35,6 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
|
||||
this.state = {
|
||||
isCreateDocumentModalVisible: false,
|
||||
documentName: "",
|
||||
visibleDescription: "",
|
||||
documentTypes: [],
|
||||
folder: null,
|
||||
};
|
||||
@ -50,11 +42,6 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
this.onFormSubmit = this.onFormSubmit.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
this.openModal = this.openModal.bind(this);
|
||||
this.cancel = this.cancel.bind(this);
|
||||
this.onVisibleDescriptionChange = this.onVisibleDescriptionChange.bind(this);
|
||||
this.onDocumentNameChange = this.onDocumentNameChange.bind(this);
|
||||
this.addDocument = this.addDocument.bind(this);
|
||||
this.canAddDocument = this.canAddDocument.bind(this);
|
||||
}
|
||||
|
||||
public override render(): JSX.Element {
|
||||
@ -101,25 +88,14 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
<Confirm
|
||||
isOpen={this.state.isCreateDocumentModalVisible}
|
||||
onClose={this.closeModal}
|
||||
onAccept={this.addDocument}
|
||||
canConfirm={this.canAddDocument()}
|
||||
closeBtn
|
||||
header={"Créer un type de document"}
|
||||
cancelText={"Annuler"}
|
||||
confirmText={"Ajouter"}>
|
||||
<div className={classes["add-document-form-container"]}>
|
||||
<TextField name="document_name" placeholder="Nom du document à ajouter" onChange={this.onDocumentNameChange} />
|
||||
<TextAreaField
|
||||
name="description"
|
||||
placeholder="Description visible par le client"
|
||||
onChange={this.onVisibleDescriptionChange}
|
||||
</div>
|
||||
{this.state.folder && (
|
||||
<ParameterDocuments
|
||||
folder={this.state.folder}
|
||||
closeModal={this.closeModal}
|
||||
isCreateDocumentModalVisible={this.state.isCreateDocumentModalVisible}
|
||||
/>
|
||||
</div>
|
||||
</Confirm>
|
||||
</div>
|
||||
)}
|
||||
</DefaultNotaryDashboard>
|
||||
);
|
||||
}
|
||||
@ -128,6 +104,8 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
this.loadData();
|
||||
}
|
||||
|
||||
private cancel() {}
|
||||
|
||||
private async loadData() {
|
||||
try {
|
||||
const folder = await Folders.getInstance().getByUid(this.props.folderUid, {
|
||||
@ -186,72 +164,16 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
|
||||
return documentTypesOptions;
|
||||
}
|
||||
|
||||
private canAddDocument() {
|
||||
if (this.state.documentName === "" || this.state.visibleDescription === "") {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
private async addDocument() {
|
||||
try {
|
||||
const documentType = await DocumentTypes.getInstance().post({
|
||||
name: this.state.documentName,
|
||||
private_description: this.state.visibleDescription,
|
||||
office: {
|
||||
uid: this.state.folder?.office!.uid!,
|
||||
},
|
||||
public_description: this.state.visibleDescription,
|
||||
});
|
||||
|
||||
const oldDocumentsType = this.state.folder?.deed?.document_types!;
|
||||
await Deeds.getInstance().put(this.state.folder?.deed?.uid!, {
|
||||
document_types: [...oldDocumentsType, documentType],
|
||||
});
|
||||
|
||||
await this.loadData();
|
||||
this.setState({
|
||||
isCreateDocumentModalVisible: false,
|
||||
documentName: "",
|
||||
visibleDescription: "",
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
private onVisibleDescriptionChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
|
||||
this.setState({
|
||||
visibleDescription: e.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
private onDocumentNameChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
|
||||
this.setState({
|
||||
documentName: e.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
private cancel() {
|
||||
this.setState({
|
||||
visibleDescription: "",
|
||||
documentName: "",
|
||||
});
|
||||
}
|
||||
|
||||
private openModal() {
|
||||
this.setState({
|
||||
isCreateDocumentModalVisible: true,
|
||||
visibleDescription: "",
|
||||
documentName: "",
|
||||
});
|
||||
}
|
||||
|
||||
private closeModal() {
|
||||
this.loadData();
|
||||
this.setState({
|
||||
isCreateDocumentModalVisible: false,
|
||||
visibleDescription: "",
|
||||
documentName: "",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user