✨ Update folder metadatas working

src/front/Components/DesignSystem/Select/classes.module.scss

@@ -7,6 +7,13 @@
 	width: 100%;
 	border: 1px solid $grey-medium;
 
+	&[data-disabled="true"]{
+		.container-label{
+			cursor: not-allowed;
+		}
+		opacity: 0.6;
+	}
+
 	.container-label {
 		display: flex;
 		justify-content: space-between;
@@ -17,6 +24,8 @@
 		padding: 24px;
 		z-index: 1;
 
+		
+
 		&[data-border-right-collapsed="true"] {
 			border-radius: 8px 0 0 8px;
 		}

src/front/Components/DesignSystem/Select/index.tsx

@@ -9,12 +9,13 @@ import classes from "./classes.module.scss";
 
 type IProps = {
 	selectedOption?: IOption;
-	onChange: (selectedOption: IOption) => void;
+	onChange?: (selectedOption: IOption) => void;
 	options: IOption[];
 	hasBorderRightCollapsed?: boolean;
 	placeholder?: string;
 	className?: string;
 	name?: string;
+	disabled: boolean;
 };
 
 export type IOption = {
@@ -35,6 +36,10 @@ export default class Select extends React.Component<IProps, IState> {
 	private rootRef = React.createRef<HTMLDivElement>();
 	private removeOnresize = () => {};
 
+	static defaultProps = {
+		disabled: false,
+	};
+
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
@@ -50,7 +55,10 @@ export default class Select extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		const selectedOption = this.state.selectedOption ?? this.props.selectedOption;
 		return (
-			<div className={classNames(classes["root"], this.props.className)} ref={this.rootRef}>
+			<div
+				className={classNames(classes["root"], this.props.className)}
+				ref={this.rootRef}
+				data-disabled={this.props.disabled.toString()}>
 				{selectedOption && <input type="text" defaultValue={selectedOption.value as string} name={this.props.name} hidden />}
 				<label
 					className={classNames(classes["container-label"])}
@@ -126,6 +134,7 @@ export default class Select extends React.Component<IProps, IState> {
 	}
 
 	private toggle(e: FormEvent) {
+		if (this.props.disabled) return;
 		e.preventDefault();
 		let listHeight = 0;
 		let listWidth = this.rootRef.current?.scrollWidth ?? 0;
@@ -140,6 +149,7 @@ export default class Select extends React.Component<IProps, IState> {
 	}
 
 	private onSelect(option: IOption, e: React.MouseEvent<HTMLLIElement, MouseEvent>) {
+		if (this.props.disabled) return;
 		this.props.onChange && this.props.onChange(option);
 		this.setState({
 			selectedOption: option,

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

@@ -4,6 +4,7 @@ import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Select, { IOption } from "@Front/Components/DesignSystem/Select";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
@@ -39,6 +40,11 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
 		const backwardPath = Module.getInstance()
 			.get()
 			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.state.selectedFolder?.uid!);
+		const deedOption = {
+			label: this.state.selectedFolder?.deed?.deed_type?.name,
+			value: this.state.selectedFolder?.deed?.deed_type?.uid,
+		} as IOption;
+		const openingDate = new Date(this.state.selectedFolder?.created_at ?? "");
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
@@ -55,6 +61,12 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
 								fakeplaceholder="Numéro de dossier"
 								defaultValue={this.state.selectedFolder?.folder_number}
 							/>
+							<Select options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled />
+							<InputField
+								fakeplaceholder="Ouverture du dossier"
+								defaultValue={openingDate.toLocaleDateString("fr-FR")}
+								disabled
+							/>
 						</div>
 
 						<div className={classes["button-container"]}>
@@ -73,21 +85,23 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
 		const folder = await this.getFolder();
 		this.setState({
 			selectedFolder: folder,
-		})
+		});
 	}
 
 	private async onFormSubmit(
 		e: React.FormEvent<HTMLFormElement> | null,
 		values: {
 			[key: string]: string;
-		}
+		},
 	) {
-		try{
+		try {
 			await Folders.getInstance().put(this.props.folderUid, values);
-			const url = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid);
+			const url = Module.getInstance()
+				.get()
+				.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid);
 			this.props.router.push(url);
-		}catch(e){
-			console.error(e)
+		} catch (e) {
+			console.error(e);
 		}
 	}
 
@@ -112,5 +126,5 @@ export default function UpdateFolderMetadata(props: IProps) {
 	const router = useRouter();
 	let { folderUid } = router.query;
 	folderUid = folderUid as string;
-	return <UpdateFolderMetadataClass folderUid={folderUid} router={router}/>;
+	return <UpdateFolderMetadataClass folderUid={folderUid} router={router} />;
 }