✨ Ask documents working
This commit is contained in:
Maxime Lalo
parent
0003cefa1a
commit
76e92eca78
@ -1,6 +1,8 @@
|
|||||||
@import "@Themes/constants.scss";
|
@import "@Themes/constants.scss";
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
|
margin: 24px auto;
|
||||||
|
width: 600px;
|
||||||
.title {
|
.title {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,118 +1,105 @@
|
|||||||
import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
|
import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
|
||||||
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
|
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
|
||||||
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||||
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
|
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
|
||||||
import Form from "@Front/Components/DesignSystem/Form";
|
import Form from "@Front/Components/DesignSystem/Form";
|
||||||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||||
import BackArrow from "@Front/Components/Elements/BackArrow";
|
import BackArrow from "@Front/Components/Elements/BackArrow";
|
||||||
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
|
||||||
import Module from "@Front/Config/Module";
|
import Module from "@Front/Config/Module";
|
||||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||||
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
||||||
import { NextRouter, useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import React from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
|
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
|
||||||
import BasePage from "../../Base";
|
|
||||||
import classes from "./classes.module.scss";
|
import classes from "./classes.module.scss";
|
||||||
import ParameterDocuments from "./ParameterDocuments";
|
import ParameterDocuments from "./ParameterDocuments";
|
||||||
import { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld";
|
import { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld";
|
||||||
|
import backgroundImage from "@Assets/images/background_refonte.svg";
|
||||||
type IProps = {};
|
type IProps = {};
|
||||||
type IPropsClass = IProps & {
|
|
||||||
router: NextRouter;
|
|
||||||
folderUid: string;
|
|
||||||
customerUid: string;
|
|
||||||
};
|
|
||||||
type IState = {
|
|
||||||
isCreateDocumentModalVisible: boolean;
|
|
||||||
documentTypes: IOptionOld[];
|
|
||||||
folder: OfficeFolder | null;
|
|
||||||
};
|
|
||||||
|
|
||||||
class AskDocumentsClass extends BasePage<IPropsClass, IState> {
|
export default function AskDocuments(props: IProps) {
|
||||||
public constructor(props: IPropsClass) {
|
const router = useRouter();
|
||||||
super(props);
|
let { folderUid, customerUid } = router.query;
|
||||||
|
folderUid = folderUid as string;
|
||||||
|
customerUid = customerUid as string;
|
||||||
|
const [isCreateDocumentModalVisible, setIsCreateDocumentModalVisible] = useState<boolean>(false);
|
||||||
|
const [documentTypes, setDocumentTypes] = useState<IOptionOld[]>([]);
|
||||||
|
const [folder, setFolder] = useState<OfficeFolder | null>(null);
|
||||||
|
|
||||||
this.state = {
|
const closeModal = () => setIsCreateDocumentModalVisible(false);
|
||||||
isCreateDocumentModalVisible: false,
|
const openModal = () => setIsCreateDocumentModalVisible(true);
|
||||||
documentTypes: [],
|
|
||||||
folder: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
this.onFormSubmit = this.onFormSubmit.bind(this);
|
const onFormSubmit = useCallback(
|
||||||
this.closeModal = this.closeModal.bind(this);
|
async (
|
||||||
this.openModal = this.openModal.bind(this);
|
e: React.FormEvent<HTMLFormElement> | null,
|
||||||
}
|
values: {
|
||||||
|
[key: string]: any;
|
||||||
|
},
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
const documentAsked: [] = values["document_types"] as [];
|
||||||
|
for (let i = 0; i < documentAsked.length; i++) {
|
||||||
|
await Documents.getInstance().post({
|
||||||
|
folder: {
|
||||||
|
uid: folderUid,
|
||||||
|
},
|
||||||
|
depositor: {
|
||||||
|
uid: customerUid,
|
||||||
|
},
|
||||||
|
document_type: {
|
||||||
|
uid: documentAsked[i],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
public override render(): JSX.Element {
|
router.push(
|
||||||
const backUrl = Module.getInstance()
|
Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid),
|
||||||
.get()
|
);
|
||||||
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid);
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[customerUid, folderUid, router],
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
const getAvailableDocuments = useCallback(
|
||||||
<DefaultNotaryDashboard title={"Demander des documents"}>
|
async (folder: OfficeFolder): Promise<IOptionOld[]> => {
|
||||||
<div className={classes["root"]}>
|
// Getting already asked documents UIDs in an array
|
||||||
<BackArrow url={backUrl} />
|
const userDocumentTypesUids = folder
|
||||||
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
|
.documents!.filter((document) => document.depositor!.uid! === customerUid!)
|
||||||
Demander des documents
|
.map((document) => {
|
||||||
</Typography>
|
return document.document_type!.uid!;
|
||||||
<Form onSubmit={this.onFormSubmit}>
|
});
|
||||||
<div className={classes["form-container"]}>
|
|
||||||
<div className={classes["checkbox-container"]}>
|
|
||||||
{this.state.documentTypes.map((documentType) => {
|
|
||||||
if (documentType.description && documentType.description.length > 1) {
|
|
||||||
return (
|
|
||||||
<CheckBox
|
|
||||||
name="document_types"
|
|
||||||
toolTip={documentType.description}
|
|
||||||
option={documentType}
|
|
||||||
key={documentType.value as string}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return <CheckBox name="document_types" option={documentType} key={documentType.value as string} />;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div className={classes["add-document-container"]}>
|
|
||||||
<Button
|
|
||||||
rightIcon={<PlusIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
|
|
||||||
variant={EButtonVariant.PRIMARY}
|
|
||||||
styletype={EButtonstyletype.TEXT}
|
|
||||||
onClick={this.openModal}>
|
|
||||||
Ajouter un document
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className={classes["buttons-container"]}>
|
|
||||||
<a href={backUrl}>
|
|
||||||
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED} onClick={this.cancel}>
|
|
||||||
Annuler
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
<Button type="submit">Valider</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
{this.state.folder && (
|
|
||||||
<ParameterDocuments
|
|
||||||
folder={this.state.folder}
|
|
||||||
closeModal={this.closeModal}
|
|
||||||
isCreateDocumentModalVisible={this.state.isCreateDocumentModalVisible}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</DefaultNotaryDashboard>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
public override async componentDidMount(): Promise<void> {
|
// If those UIDs are already asked, filter them to not show them in the list and only
|
||||||
this.loadData();
|
// show the documents that are not asked yet
|
||||||
}
|
const documentTypes = folder.deed!.document_types!.filter((documentType) => {
|
||||||
|
if (userDocumentTypesUids.includes(documentType!.uid!)) return false;
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
private cancel() {}
|
// If there is none document type available, return an empty array
|
||||||
|
if (!documentTypes) return [];
|
||||||
|
|
||||||
private async loadData() {
|
// Else, return an array document types formatted as IOPtions
|
||||||
|
const documentTypesOptions: IOptionOld[] = documentTypes.map((documentType) => {
|
||||||
|
return {
|
||||||
|
label: documentType!.name!,
|
||||||
|
value: documentType!.uid!,
|
||||||
|
description: documentType!.private_description!,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
documentTypesOptions.sort((a, b) => (a.label > b.label ? 1 : -1));
|
||||||
|
|
||||||
|
return documentTypesOptions;
|
||||||
|
},
|
||||||
|
[customerUid],
|
||||||
|
);
|
||||||
|
|
||||||
|
const loadData = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const folder = await Folders.getInstance().getByUid(this.props.folderUid, {
|
const folder = await Folders.getInstance().getByUid(folderUid, {
|
||||||
q: {
|
q: {
|
||||||
deed: {
|
deed: {
|
||||||
include: {
|
include: {
|
||||||
@ -129,97 +116,66 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
if (!folder) return;
|
if (!folder) return;
|
||||||
this.setState({
|
setFolder(folder);
|
||||||
folder,
|
setDocumentTypes(await getAvailableDocuments(folder));
|
||||||
documentTypes: await this.getAvailableDocuments(folder),
|
|
||||||
});
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
}
|
}
|
||||||
}
|
}, [folderUid, getAvailableDocuments]);
|
||||||
|
|
||||||
private async getAvailableDocuments(folder: OfficeFolder): Promise<IOptionOld[]> {
|
useEffect(() => {
|
||||||
// Getting already asked documents UIDs in an array
|
loadData();
|
||||||
const userDocumentTypesUids = folder
|
}, [loadData]);
|
||||||
.documents!.filter((document) => document.depositor!.uid! === this.props.customerUid!)
|
|
||||||
.map((document) => {
|
|
||||||
return document.document_type!.uid!;
|
|
||||||
});
|
|
||||||
|
|
||||||
// If those UIDs are already asked, filter them to not show them in the list and only
|
const backUrl = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid);
|
||||||
// show the documents that are not asked yet
|
return (
|
||||||
const documentTypes = folder.deed!.document_types!.filter((documentType) => {
|
<DefaultDoubleSidePage title={"Demander des documents"} image={backgroundImage} showHeader>
|
||||||
if (userDocumentTypesUids.includes(documentType!.uid!)) return false;
|
<div className={classes["root"]}>
|
||||||
return true;
|
<BackArrow url={backUrl} />
|
||||||
});
|
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
|
||||||
|
Demander des documents
|
||||||
// If there is none document type available, return an empty array
|
</Typography>
|
||||||
if (!documentTypes) return [];
|
<Form onSubmit={onFormSubmit}>
|
||||||
|
<div className={classes["form-container"]}>
|
||||||
// Else, return an array document types formatted as IOPtions
|
<div className={classes["checkbox-container"]}>
|
||||||
const documentTypesOptions: IOptionOld[] = documentTypes.map((documentType) => {
|
{documentTypes.map((documentType) => {
|
||||||
return {
|
if (documentType.description && documentType.description.length > 1) {
|
||||||
label: documentType!.name!,
|
return (
|
||||||
value: documentType!.uid!,
|
<CheckBox
|
||||||
description: documentType!.private_description!,
|
name="document_types"
|
||||||
};
|
toolTip={documentType.description}
|
||||||
});
|
option={documentType}
|
||||||
|
key={documentType.value as string}
|
||||||
documentTypesOptions.sort((a, b) => (a.label > b.label ? 1 : -1));
|
/>
|
||||||
|
);
|
||||||
return documentTypesOptions;
|
}
|
||||||
}
|
return <CheckBox name="document_types" option={documentType} key={documentType.value as string} />;
|
||||||
|
})}
|
||||||
private openModal() {
|
</div>
|
||||||
this.setState({
|
<div className={classes["add-document-container"]}>
|
||||||
isCreateDocumentModalVisible: true,
|
<Button
|
||||||
});
|
rightIcon={<PlusIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
|
||||||
}
|
variant={EButtonVariant.PRIMARY}
|
||||||
|
styletype={EButtonstyletype.OUTLINED}
|
||||||
private closeModal() {
|
size={EButtonSize.MD}
|
||||||
this.loadData();
|
onClick={openModal}>
|
||||||
this.setState({
|
Ajouter un document
|
||||||
isCreateDocumentModalVisible: false,
|
</Button>
|
||||||
});
|
</div>
|
||||||
}
|
<div className={classes["buttons-container"]}>
|
||||||
|
<a href={backUrl}>
|
||||||
private async onFormSubmit(
|
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
|
||||||
e: React.FormEvent<HTMLFormElement> | null,
|
Annuler
|
||||||
values: {
|
</Button>
|
||||||
[key: string]: any;
|
</a>
|
||||||
},
|
<Button type="submit">Valider</Button>
|
||||||
) {
|
</div>
|
||||||
try {
|
</div>
|
||||||
const documentAsked: [] = values["document_types"] as [];
|
</Form>
|
||||||
for (let i = 0; i < documentAsked.length; i++) {
|
</div>
|
||||||
await Documents.getInstance().post({
|
{folder && (
|
||||||
folder: {
|
<ParameterDocuments folder={folder} closeModal={closeModal} isCreateDocumentModalVisible={isCreateDocumentModalVisible} />
|
||||||
uid: this.props.folderUid,
|
)}
|
||||||
},
|
</DefaultDoubleSidePage>
|
||||||
depositor: {
|
);
|
||||||
uid: this.props.customerUid,
|
|
||||||
},
|
|
||||||
document_type: {
|
|
||||||
uid: documentAsked[i],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.router.push(
|
|
||||||
Module.getInstance()
|
|
||||||
.get()
|
|
||||||
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid),
|
|
||||||
);
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AskDocuments(props: IProps) {
|
|
||||||
const router = useRouter();
|
|
||||||
let { folderUid, customerUid } = router.query;
|
|
||||||
folderUid = folderUid as string;
|
|
||||||
customerUid = customerUid as string;
|
|
||||||
return <AskDocumentsClass folderUid={folderUid} customerUid={customerUid} router={router} />;
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user