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

✨ Folder loading refacto

Browse Source
This commit is contained in:
Maxime Lalo 2023-10-02 16:02:27 +02:00
parent 008b755dfd
commit 040906173e
1 changed files with 68 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,6 @@ enum AnchorStatus {
"VERIFIED_ON_CHAIN" = "VERIFIED_ON_CHAIN", "VERIFIED_ON_CHAIN" = "VERIFIED_ON_CHAIN",
"ANCHORING" = "ANCHORING", "ANCHORING" = "ANCHORING",
"NOT_ANCHORED" = "NOT_ANCHORED", "NOT_ANCHORED" = "NOT_ANCHORED",
"FETCHING" = "FETCHING",
} }
type IProps = {}; type IProps = {};
@ -36,10 +35,11 @@ type IPropsClass = IProps & {
router: NextRouter; router: NextRouter;
selectedFolderUid: string; selectedFolderUid: string;
isAnchored: AnchorStatus; isAnchored: AnchorStatus;
isLoading: boolean;
selectedFolder: OfficeFolder | null;
}; };
type IState = { type IState = {
selectedFolder: OfficeFolder | null;
isArchivedModalOpen: boolean; isArchivedModalOpen: boolean;
inputArchivedDescripton: string; inputArchivedDescripton: string;
isValidateModalVisible: boolean; isValidateModalVisible: boolean;
@ -51,7 +51,6 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
public constructor(props: IPropsClass) { public constructor(props: IPropsClass) {
super(props); super(props);
this.state = { this.state = {
selectedFolder: null,
isArchivedModalOpen: false, isArchivedModalOpen: false,
inputArchivedDescripton: "", inputArchivedDescripton: "",
isValidateModalVisible: false, isValidateModalVisible: false,
@ -59,7 +58,6 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
isVerifDeleteModalVisible: false, isVerifDeleteModalVisible: false,
isPreventArchiveModalOpen: false, isPreventArchiveModalOpen: false,
}; };
this.onSelectedFolder = this.onSelectedFolder.bind(this);
this.openArchivedModal = this.openArchivedModal.bind(this); this.openArchivedModal = this.openArchivedModal.bind(this);
this.closeArchivedModal = this.closeArchivedModal.bind(this); this.closeArchivedModal = this.closeArchivedModal.bind(this);
this.onArchivedModalAccepted = this.onArchivedModalAccepted.bind(this); this.onArchivedModalAccepted = this.onArchivedModalAccepted.bind(this);
@ -77,17 +75,15 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
// TODO: Message if the user has not created any folder yet // TODO: Message if the user has not created any folder yet
// TODO: get the selected folder from the api in componentDidMount // TODO: get the selected folder from the api in componentDidMount
public override render(): JSX.Element { public override render(): JSX.Element {
console.log("Loading : ", this.props.isLoading);
console.log("Anchor status : ", this.props.isAnchored);
const redirectPathEditCollaborators = Module.getInstance() const redirectPathEditCollaborators = Module.getInstance()
.get() .get()
.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid); .modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
return ( return (
<DefaultNotaryDashboard <DefaultNotaryDashboard title={"Dossier"} isArchived={false} mobileBackText="Retour aux dossiers">
title={"Dossier"}
onSelectedFolder={this.onSelectedFolder}
isArchived={false}
mobileBackText="Retour aux dossiers">
<div className={classes["root"]}> <div className={classes["root"]}>
{this.state.selectedFolder ? ( {this.props.selectedFolder ? (
<div className={classes["folder-informations"]}> <div className={classes["folder-informations"]}>
<div className={classes["folder-header"]}> <div className={classes["folder-header"]}>
<div className={classes["header"]}> <div className={classes["header"]}>
@ -100,9 +96,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
</Button> </Button>
</Link> </Link>
</div> </div>
<FolderBoxInformation folder={this.state.selectedFolder} type={EFolderBoxInformationType.INFORMATIONS} /> <FolderBoxInformation folder={this.props.selectedFolder} type={EFolderBoxInformationType.INFORMATIONS} />
<div className={classes["second-box"]}> <div className={classes["second-box"]}>
<FolderBoxInformation folder={this.state.selectedFolder} type={EFolderBoxInformationType.DESCRIPTION} /> <FolderBoxInformation folder={this.props.selectedFolder} type={EFolderBoxInformationType.DESCRIPTION} />
</div> </div>
<div className={classes["progress-bar"]}> <div className={classes["progress-bar"]}>
<QuantityProgressBar <QuantityProgressBar
@ -111,16 +107,16 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
currentNumber={this.getCompletionNumber()} currentNumber={this.getCompletionNumber()}
/> />
</div> </div>
{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />} {this.doesFolderHaveCustomer() && <ClientSection folder={this.props.selectedFolder} />}
</div> </div>
{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />} {!this.doesFolderHaveCustomer() && <ClientSection folder={this.props.selectedFolder} />}
<div className={classes["button-container"]}> <div className={classes["button-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}> <Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>
Archiver le dossier Archiver le dossier
</Button> </Button>
{this.everyDocumentValidated() && ( {this.everyDocumentValidated() && !this.props.isLoading && (
<> <>
{this.props.isAnchored === AnchorStatus.NOT_ANCHORED && ( {this.props.isAnchored === AnchorStatus.NOT_ANCHORED && (
<Button variant={EButtonVariant.PRIMARY} onClick={this.openValidateModal}> <Button variant={EButtonVariant.PRIMARY} onClick={this.openValidateModal}>
@ -136,7 +132,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
{this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && ( {this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && (
<Button <Button
variant={EButtonVariant.PRIMARY} variant={EButtonVariant.PRIMARY}
onClick={() => this.downloadAnchoringProof(this.state.selectedFolder?.uid)}> onClick={() => this.downloadAnchoringProof(this.props.selectedFolder?.uid)}>
Télécharger la preuve d'ancrage Télécharger la preuve d'ancrage
</Button> </Button>
)} )}
@ -245,13 +241,6 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
); );
} }
public override async componentDidMount() {
const selectedFolder = await this.getFolder();
this.setState({
selectedFolder,
});
}
private closePreventArchiveModal() { private closePreventArchiveModal() {
this.setState({ this.setState({
isPreventArchiveModalOpen: false, isPreventArchiveModalOpen: false,
@ -311,8 +300,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
} }
private async anchorFolder() { private async anchorFolder() {
if (!this.state.selectedFolder?.uid) return; if (!this.props.selectedFolder?.uid) return;
return await OfficeFolderAnchors.getInstance().post(this.state.selectedFolder.uid); return await OfficeFolderAnchors.getInstance().post(this.props.selectedFolder.uid);
} }
private async downloadAnchoringProof(uid?: string) { private async downloadAnchoringProof(uid?: string) {
@ -325,7 +314,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
a.style.display = "none"; a.style.display = "none";
a.href = url; a.href = url;
// the filename you want // the filename you want
a.download = `anchoring_proof_${this.state.selectedFolder?.folder_number}_${this.state.selectedFolder?.name}.pdf`; a.download = `anchoring_proof_${this.props.selectedFolder?.folder_number}_${this.props.selectedFolder?.name}.pdf`;
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
@ -335,21 +324,21 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
} }
private everyDocumentValidated(): boolean { private everyDocumentValidated(): boolean {
if (!this.state.selectedFolder?.documents) return false; if (!this.props.selectedFolder?.documents) return false;
return ( return (
this.state.selectedFolder?.documents?.length >= 1 && this.props.selectedFolder?.documents?.length >= 1 &&
this.state.selectedFolder?.documents.every((document) => document.document_status === EDocumentStatus.VALIDATED) this.props.selectedFolder?.documents.every((document) => document.document_status === EDocumentStatus.VALIDATED)
); );
} }
private async deleteFolder() { private async deleteFolder() {
if (!this.state.selectedFolder?.uid) return; if (!this.props.selectedFolder?.uid) return;
await Folders.getInstance().delete(this.state.selectedFolder.uid); await Folders.getInstance().delete(this.props.selectedFolder.uid);
this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path); this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path);
} }
private getCompletionNumber() { private getCompletionNumber() {
const documents = this.state.selectedFolder?.documents; const documents = this.props.selectedFolder?.documents;
if (!documents) return 0; if (!documents) return 0;
const totalDocuments = documents.length; const totalDocuments = documents.length;
const refusedDocuments = documents.filter((document) => document.document_status === EDocumentStatus.REFUSED).length ?? 0; const refusedDocuments = documents.filter((document) => document.document_status === EDocumentStatus.REFUSED).length ?? 0;
@ -363,12 +352,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
} }
private doesFolderHaveCustomer(): boolean { private doesFolderHaveCustomer(): boolean {
if (!this.state.selectedFolder?.customers) return false; if (!this.props.selectedFolder?.customers) return false;
return this.state.selectedFolder?.customers!.length > 0; return this.props.selectedFolder?.customers!.length > 0;
}
private onSelectedFolder(folder: OfficeFolder): void {
this.setState({ selectedFolder: folder });
} }
private openArchivedModal(): void { private openArchivedModal(): void {
@ -388,15 +373,38 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
} }
private async onArchivedModalAccepted() { private async onArchivedModalAccepted() {
if (!this.state.selectedFolder) return; if (!this.props.selectedFolder) return;
const ressourceFolder = OfficeFolder.hydrate<OfficeFolder>(this.state.selectedFolder); const ressourceFolder = OfficeFolder.hydrate<OfficeFolder>(this.props.selectedFolder);
ressourceFolder.archived_description = this.state.inputArchivedDescripton; ressourceFolder.archived_description = this.state.inputArchivedDescripton;
await Folders.getInstance().archive(this.state.selectedFolder.uid ?? "", ressourceFolder); await Folders.getInstance().archive(this.props.selectedFolder.uid ?? "", ressourceFolder);
this.closeArchivedModal(); this.closeArchivedModal();
this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path); this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path);
} }
}
private async getFolder(): Promise<OfficeFolder> { export default function FolderInformation(props: IProps) {
const router = useRouter();
const [isAnchored, setIsAnchored] = useState<AnchorStatus>(AnchorStatus.NOT_ANCHORED);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
let { folderUid } = router.query;
folderUid = folderUid as string;
const verifyAnchorStatus = useCallback(async () => {
if (!folderUid) return;
setIsLoading(true);
try {
const anchorStatus = await OfficeFolderAnchors.getInstance().get(folderUid as string);
setIsAnchored(anchorStatus.status === "VERIFIED_ON_CHAIN" ? AnchorStatus.VERIFIED_ON_CHAIN : AnchorStatus.ANCHORING);
} catch (e) {
setIsAnchored(AnchorStatus.NOT_ANCHORED);
}
setIsLoading(false);
}, [folderUid]);
const getFolder = useCallback(async () => {
if (!folderUid) return;
const query = { const query = {
q: { q: {
deed: { include: { deed_type: true } }, deed: { include: { deed_type: true } },
@ -426,30 +434,28 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
}, },
}; };
const folder = await Folders.getInstance().getByUid(this.props.selectedFolderUid, query); const folder = await Folders.getInstance().getByUid(folderUid as string, query);
return folder; if (folder) {
} setSelectedFolder(folder);
}
export default function FolderInformation(props: IProps) {
const router = useRouter();
const [isAnchored, setIsAnchored] = useState<AnchorStatus>(AnchorStatus.FETCHING);
let { folderUid } = router.query;
folderUid = folderUid as string;
const verifyAnchorStatus = useCallback(async () => {
if (!folderUid) return;
try {
const anchorStatus = await OfficeFolderAnchors.getInstance().get(folderUid as string);
setIsAnchored(anchorStatus.status === "VERIFIED_ON_CHAIN" ? AnchorStatus.VERIFIED_ON_CHAIN : AnchorStatus.ANCHORING);
} catch (e) {
setIsAnchored(AnchorStatus.NOT_ANCHORED);
} }
}, [folderUid]); }, [folderUid]);
useEffect(() => { useEffect(() => {
verifyAnchorStatus(); verifyAnchorStatus();
}, [folderUid, verifyAnchorStatus]); getFolder();
}, [verifyAnchorStatus, getFolder]);
return <FolderInformationClass {...props} selectedFolderUid={folderUid} router={router} isAnchored={isAnchored} />; useEffect(() => {
setIsLoading(true);
}, [folderUid]);
return (
<FolderInformationClass
{...props}
selectedFolderUid={folderUid}
router={router}
isAnchored={isAnchored}
isLoading={isLoading}
selectedFolder={selectedFolder}
/>
);
} }