lecoffre-front/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx

import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectFieldOld";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import Module from "@Front/Config/Module";
import { Deed, OfficeFolder } from "le-coffre-resources/dist/Notary";
import Link from "next/link";
import { useRouter } from "next/router";
import backgroundImage from "@Assets/images/background_refonte.svg";
import classes from "./classes.module.scss";
import DateField from "@Front/Components/DesignSystem/Form/DateField";
import { ValidationError } from "class-validator/types/validation/ValidationError";
import { useEffect, useState } from "react";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import { isArray } from "class-validator";

import FolderService from "src/common/Api/LeCoffreApi/sdk/FolderService";
import LoaderService from "src/common/Api/LeCoffreApi/sdk/Loader/LoaderService";

export default function UpdateFolderMetadata() {
	const router = useRouter();

	const [selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
	const [validationError, setValidationError] = useState<ValidationError[]>([]);

	let { folderUid } = router.query;

	const onFormSubmit = async (
		e: React.FormEvent<HTMLFormElement> | null,
		values: {
			[key: string]: string;
		},
	) => {
		if (!folderUid || isArray(folderUid)) return;
		const newValues = OfficeFolder.hydrate<OfficeFolder>({
			...values,
			deed: Deed.hydrate<Deed>({
				uid: values["deed"],
			}),
		});

		try {
			await newValues.validateOrReject?.({ groups: ["updateFolder"], forbidUnknownValues: false });
		} catch (validationErrors) {
			setValidationError(validationErrors as ValidationError[]);
			return;
		}
		try {
			LoaderService.getInstance().show();
			FolderService.getFolderByUid(folderUid).then((process: any) => {
				if (process) {
					FolderService.updateFolder(process, { ...values, deed: { uid: values["deed"] } }).then(() => {
						setTimeout(() => LoaderService.getInstance().hide(), 2000);
						router.push(Module.getInstance()
							.get()
							.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid));
					});
				}
			});
		} catch (backError) {
			if (!Array.isArray(backError)) return;
			setValidationError(backError);
			return;
		}
	};

	useEffect(() => {
		if (!folderUid || isArray(folderUid)) return;
		LoaderService.getInstance().show();
		FolderService.getFolderByUid(folderUid).then((process: any) => {
			if (process) {
				const folder: any = process.processData;
				setSelectedFolder(folder);
				setTimeout(() => LoaderService.getInstance().hide(), 2000);
			}
		});
	}, [folderUid]);

	const backwardPath = Module.getInstance()
		.get()
		.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", selectedFolder?.uid!);
	const deedOption = {
		label: selectedFolder?.deed?.deed_type?.name,
		value: selectedFolder?.deed?.deed_type?.uid,
	} as IOption;
	const openingDate = new Date(selectedFolder?.created_at ?? "");
	if (!selectedFolder?.created_at) return <></>;
	const defaultValue = openingDate.toISOString().split("T")[0];

	return (
		<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage} showHeader>
			<div className={classes["root"]}>
				<div className={classes["back-arrow"]}>
					<BackArrow url={backwardPath} />
				</div>
				<Typography typo={ETypo.TITLE_H1}>Modifier les informations du dossier</Typography>

				<Form className={classes["form"]} onSubmit={onFormSubmit}>
					<div className={classes["content"]}>
						<TextField
							name="name"
							label="Intitulé du dossier"
							placeholder="Entrer l'intitulé du dossier"
							defaultValue={selectedFolder?.name}
							validationError={validationError.find((error) => error.property === "name")}
						/>
						<TextField
							name="folder_number"
							label="Numéro de dossier"
							placeholder="Entrer le numéro de dossier"
							defaultValue={selectedFolder?.folder_number}
							validationError={validationError.find((error) => error.property === "folder_number")}
						/>
						<Select name="deed" options={[]} placeholder="Type d'acte" selectedOption={deedOption} disabled />
						<DateField name="opening_date" placeholder="Ouverture du dossier" defaultValue={defaultValue} disabled />
						<TextAreaField
							name="description"
							label="Note du dossier"
							defaultValue={selectedFolder?.description ?? undefined}
							validationError={validationError.find((error) => error.property === "description")}
							placeholder="Renseigner une note"
						/>
					</div>

					<div className={classes["button-container"]}>
						<Link href={backwardPath} className={classes["cancel-button"]}>
							<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
								Annuler
							</Button>
						</Link>
						<Button type="submit">Enregistrer les modifications</Button>
					</div>
				</Form>
			</div>
		</DefaultDoubleSidePage>
	);
}