✨ Date instead of text for date field

src/front/Components/DesignSystem/Form/DateField/classes.module.scss

@@ -0,0 +1,102 @@
+@import "@Themes/constants.scss";
+
+.root {
+	position: relative;
+
+	.input {
+		z-index: 1;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding: 24px;
+		gap: 10px;
+		width: 100%;
+		height: 70px;
+		border: 1px solid var(--grey-medium);
+
+		&:disabled {
+			cursor: not-allowed;
+		}
+
+		&:focus {
+			~ .fake-placeholder {
+				transform: translateY(-35px);
+			}
+		}
+
+		&:not([data-value=""]) {
+			~ .fake-placeholder {
+				transform: translateY(-35px);
+			}
+		}
+
+		&[type="number"] {
+			&:focus {
+				~ .fake-placeholder {
+					transform: translateY(-35px);
+				}
+			}
+
+			&:not([data-value=""]) {
+				~ .fake-placeholder {
+					transform: translateY(-35px);
+				}
+			}
+
+			&::-webkit-inner-spin-button,
+			&::-webkit-outer-spin-button {
+				-webkit-appearance: none;
+				margin: 0;
+			}
+
+			/* For Chrome, Safari, and Opera */
+			&::-webkit-inner-spin-button,
+			&::-webkit-outer-spin-button {
+				-webkit-appearance: none;
+				margin: 0;
+			}
+
+			/* For IE 10+ */
+			&::-ms-inner-spin-button,
+			&::-ms-outer-spin-button {
+				display: none;
+			}
+		}
+
+		&:not([data-value=""]) {
+			~ .fake-placeholder {
+				transform: translateY(-35px);
+			}
+		}
+
+		~ .fake-placeholder {
+			z-index: 2;
+			top: 35%;
+			margin-left: 8px;
+			padding: 0 16px;
+			pointer-events: none;
+			position: absolute;
+			background: $white;
+			transition: transform 0.3s ease-in-out;
+		}
+	}
+
+	&[data-is-errored="true"] {
+		.input {
+			border: 1px solid var(--red-flash);
+			~ .fake-placeholder {
+				color: var(--red-flash);
+			}
+		}
+	}
+
+	.copy-icon {
+		cursor: pointer;
+		height: 24px;
+		width: 24px;
+		position: absolute;
+		top: 50%;
+		right: 24px;
+		transform: translate(0, -50%);
+	}
+}

src/front/Components/DesignSystem/Form/DateField/index.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import { ReactNode } from "react";
+import CopyIcon from "@Assets/Icons/copy.svg";
+import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
+import classes from "./classes.module.scss";
+import classnames from "classnames";
+import Image from "next/image";
+
+export type IProps = IBaseFieldProps & {
+	canCopy?: boolean;
+};
+
+export default class DateField extends BaseField<IProps> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = this.getDefaultState();
+	}
+
+	public override render(): ReactNode {
+		const value = this.state.value ?? "";
+		return (
+			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
+					<input
+						onChange={this.onChange}
+						data-value={value}
+						data-has-validation-errors={(this.state.validationError === null).toString()}
+						className={classnames(classes["input"], this.props.className)}
+						value={value}
+						onFocus={this.onFocus}
+						onBlur={this.onBlur}
+						name={this.props.name}
+						disabled={this.props.disabled}
+						type={"date"}
+					/>
+					<div className={classes["fake-placeholder"]}>
+						{this.props.placeholder} {!this.props.required && " (Facultatif)"}
+					</div>
+					{this.props.canCopy && (
+						<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
+							<Image src={CopyIcon} alt="Copy icon" />
+						</div>
+					)}
+				</div>
+				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
+			</Typography>
+		);
+	}
+
+	private onCopyClick = (): void => {
+		if (this.props.canCopy) {
+			navigator.clipboard.writeText(this.state.value ?? "");
+		}
+	};
+}

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

@@ -13,6 +13,7 @@ import { NextRouter, useRouter } from "next/router";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
+import DateField from "@Front/Components/DesignSystem/Form/DateField";
 
 type IProps = {};
 
@@ -43,6 +44,8 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
 			value: this.state.selectedFolder?.deed?.deed_type?.uid,
 		} as IOption;
 		const openingDate = new Date(this.state.selectedFolder?.created_at ?? "");
+		if (!this.state.selectedFolder?.created_at) return <></>;
+		const defaultValue = openingDate.toISOString().split("T")[0];
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
@@ -60,7 +63,7 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
 								defaultValue={this.state.selectedFolder?.folder_number}
 							/>
 							<Select name="deed" options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled />
-							<TextField placeholder="Ouverture du dossier" defaultValue={openingDate.toLocaleDateString("fr-FR")} disabled />
+							<DateField name="opening_date" placeholder="Ouverture du dossier" defaultValue={defaultValue} disabled />
 						</div>
 
 						<div className={classes["button-container"]}>