From 30af203045ab6a1b9e9ab90f852152d97fbab7c0 Mon Sep 17 00:00:00 2001 From: Max S Date: Fri, 26 Jul 2024 15:48:42 +0200 Subject: [PATCH] SelectField refacto use new dropdown --- .../DesignSystem/CheckBox/index.tsx | 4 +- .../DesignSystem/Dropdown/index.tsx | 44 ++-- .../DesignSystem/Form/BaseField.tsx | 2 +- .../Form/SelectField/classes.module.scss | 142 +---------- .../DesignSystem/Form/SelectField/index.tsx | 237 ++++-------------- .../Form/SelectFieldOld/classes.module.scss | 11 + .../Form/SelectFieldOld/index.tsx | 212 ++++++++++++++++ .../DesignSystem/MultiSelect/index.tsx | 18 +- .../CollaboratorInformations/index.tsx | 18 +- .../DeedTypes/DeedTypesInformations/index.tsx | 16 +- .../Folder/AddClientToFolder/index.tsx | 18 +- .../AskDocuments/ParameterDocuments/index.tsx | 29 +-- .../Layouts/Folder/AskDocuments/index.tsx | 10 +- .../Layouts/Folder/CreateFolder/index.tsx | 26 +- .../UpdateFolderCollaborators/index.tsx | 18 +- .../Folder/UpdateFolderMetadata/index.tsx | 4 +- .../UpdateFolderMetadata/index.tsx | 6 +- 17 files changed, 389 insertions(+), 426 deletions(-) create mode 100644 src/front/Components/DesignSystem/Form/SelectFieldOld/classes.module.scss create mode 100644 src/front/Components/DesignSystem/Form/SelectFieldOld/index.tsx diff --git a/src/front/Components/DesignSystem/CheckBox/index.tsx b/src/front/Components/DesignSystem/CheckBox/index.tsx index 70f2c91a..d200511d 100644 --- a/src/front/Components/DesignSystem/CheckBox/index.tsx +++ b/src/front/Components/DesignSystem/CheckBox/index.tsx @@ -1,14 +1,14 @@ import React from "react"; -import { IOption } from "../Form/SelectField"; import Tooltip from "../ToolTip"; import Typography, { ETypo, ETypoColor } from "../Typography"; import classes from "./classes.module.scss"; import classNames from "classnames"; +import { IOptionOld } from "../Form/SelectFieldOld"; type IProps = { name?: string; - option: IOption; + option: IOptionOld; toolTip?: string; onChange?: (e: React.ChangeEvent) => void; checked: boolean; diff --git a/src/front/Components/DesignSystem/Dropdown/index.tsx b/src/front/Components/DesignSystem/Dropdown/index.tsx index 8bd40c39..4827bcb3 100644 --- a/src/front/Components/DesignSystem/Dropdown/index.tsx +++ b/src/front/Components/DesignSystem/Dropdown/index.tsx @@ -1,27 +1,41 @@ import useOpenable from "@Front/Hooks/useOpenable"; +import { ChevronDownIcon } from "@heroicons/react/24/outline"; import classNames from "classnames"; -import { useState } from "react"; +import { useCallback, useEffect, useState } from "react"; +import IconButton from "../IconButton"; import Typography, { ETypo, ETypoColor } from "../Typography"; import classes from "./classes.module.scss"; import DropdownMenu from "./DropdownMenu"; import { IOption } from "./DropdownMenu/DropdownOption"; -import IconButton from "../IconButton"; -import { ChevronDownIcon } from "@heroicons/react/24/outline"; type IProps = { options: IOption[]; - placeholder: string; + placeholder?: string; disabled?: boolean; + onSelect?: (option: IOption) => void; + selectedOption?: IOption | null; }; export default function Dropdown(props: IProps) { - const { options, placeholder, disabled } = props; - const [selectedOption, setSelectedOption] = useState(null); + const { options, placeholder, disabled, onSelect, selectedOption: selectedOptionProps } = props; + const [selectedOption, setSelectedOption] = useState(selectedOptionProps ?? null); const openable = useOpenable({ defaultOpen: false }); + useEffect(() => { + setSelectedOption(selectedOptionProps ?? null); + }, [selectedOptionProps]); + + const handleOnSelect = useCallback( + (option: IOption) => { + setSelectedOption(option); + onSelect?.(option); + }, + [onSelect], + ); + return ( - +
); - - function getLabel(option: IOption | null): string | null { - if (!option) return null; - if (typeof option.label === "string") { - return option.label; - } - return `${option.label.text} ${option.label.subtext}`; - } +} + +export function getLabel(option: IOption | null): string | null { + if (!option) return null; + if (typeof option.label === "string") { + return option.label; + } + return `${option.label.text} ${option.label.subtext}`; } diff --git a/src/front/Components/DesignSystem/Form/BaseField.tsx b/src/front/Components/DesignSystem/Form/BaseField.tsx index 3fe14388..fd16a00a 100644 --- a/src/front/Components/DesignSystem/Form/BaseField.tsx +++ b/src/front/Components/DesignSystem/Form/BaseField.tsx @@ -18,7 +18,7 @@ export type IProps = { label?: string; }; -type IState = { +export type IState = { value: string; validationError: ValidationError | null; }; diff --git a/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss b/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss index 07a3b243..caa72fd2 100644 --- a/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss +++ b/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss @@ -1,143 +1,11 @@ @import "@Themes/constants.scss"; .root { - display: flex; - position: relative; - flex-direction: column; - width: 100%; - border: 1px solid var(--color-neutral-200); - - &[data-errored="true"] { - border: 1px solid var(--color-error-600); + .hidden-input { + position: absolute; + opacity: 0; } - - &[data-disabled="true"] { - .container-label { - cursor: not-allowed; - } - opacity: 0.6; - } - - .container-label { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - background-color: var(--color-generic-white); - cursor: pointer; - padding: 24px; - z-index: 1; - - &[data-border-right-collapsed="true"] { - border-radius: 8px 0 0 8px; - } - - .container-input chevron-icon { - display: flex; - align-items: center; - - span { - display: flex; - - .icon { - display: flex; - margin-right: 8px; - align-items: center; - } - } - - .placeholder { - position: absolute; - top: 24px; - left: 8px; - background-color: var(--color-generic-white); - padding: 0 16px; - - &[data-open="true"] { - transform: translateY(-36px); - } - } - } - - .chevron-icon { - height: 24px; - - fill: var(--color-neutral-500); - transition: all 350ms $custom-easing; - transform: rotate(90deg); - - &[data-open="true"] { - transform: rotate(-90deg); - } - } - } - - .container-ul { - padding-left: 24px; - z-index: 3; - list-style: none; - margin: 0; - outline: 0; - display: flex; - flex-direction: column; - width: 100%; - transition: height 350ms $custom-easing, opacity 350ms $custom-easing; - opacity: 1; - overflow: hidden; - top: 50px; - background-color: var(--color-generic-white); - - &[data-open="false"] { - height: 0; - opacity: 0; - border: none; - } - } - - .container-li { - display: flex; - justify-content: flex-start; - align-items: center; - padding-bottom: 24px; - border-radius: 8px; - cursor: pointer; - background: var(--color-neutral-50); - - &:hover { - background: var(--color-neutral-100); - } - - &:active { - background: var(--color-neutral-200); - } - - span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - - .token-icon { - max-width: 20px; - display: flex; - align-items: center; - margin-right: 11px; - - > svg { - height: 20px; - margin-right: 11px; - } - - > img { - height: 20px; - width: 20px; - } - } - - .backdrop { - position: fixed; - z-index: 1; - inset: 0; + .errors-container { + margin-top: 8px; } } diff --git a/src/front/Components/DesignSystem/Form/SelectField/index.tsx b/src/front/Components/DesignSystem/Form/SelectField/index.tsx index 55418357..6a8ae219 100644 --- a/src/front/Components/DesignSystem/Form/SelectField/index.tsx +++ b/src/front/Components/DesignSystem/Form/SelectField/index.tsx @@ -1,212 +1,63 @@ -import ChevronIcon from "@Assets/Icons/chevron.svg"; -import WindowStore from "@Front/Stores/WindowStore"; -import { ValidationError } from "class-validator"; -import classNames from "classnames"; -import Image from "next/image"; -import React, { FormEvent, ReactNode } from "react"; +import React from "react"; +import { ReactNode } from "react"; -import Typography, { ETypo, ETypoColor } from "../../Typography"; +import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption"; +import BaseField, { IProps as IBaseFieldProps, IState as IBaseFieldState } from "../BaseField"; import classes from "./classes.module.scss"; -import { NextRouter, useRouter } from "next/router"; +import Dropdown from "../../Dropdown"; -type IProps = { - selectedOption?: IOption; - onChange?: (selectedOption: IOption) => void; +export type IProps = IBaseFieldProps & { + onSelect?: (option: IOption) => void; options: IOption[]; - hasBorderRightCollapsed?: boolean; - placeholder?: string; - className?: string; - name: string; - disabled?: boolean; - errors?: ValidationError; + selectedOption?: IOption | null; }; -export type IOption = { - value: unknown; - label: string; - icon?: ReactNode; - description?: string; -}; - -type IState = { - isOpen: boolean; - listWidth: number; - listHeight: number; +type IState = IBaseFieldState & { selectedOption: IOption | null; - errors: ValidationError | null; }; -type IPropsClass = IProps & { - router: NextRouter; -}; - -class SelectFieldClass extends React.Component { - private contentRef = React.createRef(); - private rootRef = React.createRef(); - private removeOnresize = () => {}; - - static defaultProps = { - disabled: false, - }; - - constructor(props: IPropsClass) { +export default class SelectField extends BaseField { + constructor(props: IProps) { super(props); this.state = { - isOpen: false, - listHeight: 0, - listWidth: 0, - selectedOption: null, - errors: this.props.errors ?? null, + selectedOption: this.props.selectedOption ?? null, + ...this.getDefaultState(), }; - this.toggle = this.toggle.bind(this); - this.onSelect = this.onSelect.bind(this); + + this.handleOnChange = this.handleOnChange.bind(this); } - public override render(): JSX.Element { - const selectedOption = this.state.selectedOption ?? this.props.selectedOption; + private handleOnChange = (option: IOption) => { + this.setState({ selectedOption: option }); + this.props.onSelect?.(option); + }; + + public override componentDidUpdate(prevProps: IProps): void { + if (prevProps.selectedOption !== this.props.selectedOption) { + this.setState({ selectedOption: this.props.selectedOption ?? null }); + } + } + + public override render(): ReactNode { return ( -
-
- {selectedOption && } - - -
    - {this.props.options.map((option, index) => ( -
  • this.onSelect(option, e)}> -
    {option.icon}
    - {option.label} -
    • - ))} -
- - {this.state.isOpen &&
} -
- {this.state.errors !== null &&
{this.renderErrors()}
} +
+ + {this.state.selectedOption && ( + + )} + {this.hasError() &&
{this.renderErrors()}
}
); } - public override componentDidMount(): void { - this.onResize(); - this.removeOnresize = WindowStore.getInstance().onResize(() => this.onResize()); - - this.props.router.events.on("routeChangeStart", () => { - this.setState({ - isOpen: false, - selectedOption: null, - listHeight: 0, - listWidth: 0, - }); - }); - } - - public override componentWillUnmount() { - this.removeOnresize(); - } - - public override componentDidUpdate(prevProps: IProps) { - if (this.props.errors !== prevProps.errors) { - this.setState({ - errors: this.props.errors ?? null, - }); - } - - if (this.props.selectedOption !== prevProps.selectedOption) { - this.setState({ - selectedOption: this.props.selectedOption ?? null, - }); - } - } - - static getDerivedStateFromProps(props: IProps, state: IState) { - if (props.selectedOption?.value) { - return { - value: props.selectedOption?.value, - }; - } - return null; - } - - private onResize() { - let listHeight = 0; - let listWidth = 0; - listWidth = this.rootRef.current?.scrollWidth ?? 0; - if (this.state.listHeight) { - listHeight = this.contentRef.current?.scrollHeight ?? 0; - } - this.setState({ listHeight, listWidth }); - } - - private toggle(e: FormEvent) { - if (this.props.disabled) return; - e.preventDefault(); - let listHeight = 0; - let listWidth = this.rootRef.current?.scrollWidth ?? 0; - - if (!this.state.listHeight) { - listHeight = this.contentRef.current?.scrollHeight ?? 0; - } - - this.setState((state) => { - return { isOpen: !state.isOpen, listHeight, listWidth }; - }); - } - - private onSelect(option: IOption, e: React.MouseEvent) { - if (this.props.disabled) return; - this.props.onChange && this.props.onChange(option); - this.setState({ - selectedOption: option, - }); - this.toggle(e); - } - - private renderErrors(): JSX.Element | null { - if (!this.state.errors) return null; - return ( - - {this.props.placeholder} ne peut pas être vide - - ); - } -} - -export default function SelectField(props: IProps) { - const router = useRouter(); - return ; } diff --git a/src/front/Components/DesignSystem/Form/SelectFieldOld/classes.module.scss b/src/front/Components/DesignSystem/Form/SelectFieldOld/classes.module.scss new file mode 100644 index 00000000..caa72fd2 --- /dev/null +++ b/src/front/Components/DesignSystem/Form/SelectFieldOld/classes.module.scss @@ -0,0 +1,11 @@ +@import "@Themes/constants.scss"; + +.root { + .hidden-input { + position: absolute; + opacity: 0; + } + .errors-container { + margin-top: 8px; + } +} diff --git a/src/front/Components/DesignSystem/Form/SelectFieldOld/index.tsx b/src/front/Components/DesignSystem/Form/SelectFieldOld/index.tsx new file mode 100644 index 00000000..ba077302 --- /dev/null +++ b/src/front/Components/DesignSystem/Form/SelectFieldOld/index.tsx @@ -0,0 +1,212 @@ +import ChevronIcon from "@Assets/Icons/chevron.svg"; +import WindowStore from "@Front/Stores/WindowStore"; +import { ValidationError } from "class-validator"; +import classNames from "classnames"; +import Image from "next/image"; +import React, { FormEvent, ReactNode } from "react"; + +import Typography, { ETypo, ETypoColor } from "../../Typography"; +import classes from "./classes.module.scss"; +import { NextRouter, useRouter } from "next/router"; + +type IProps = { + selectedOption?: IOptionOld; + onChange?: (selectedOption: IOptionOld) => void; + options: IOptionOld[]; + hasBorderRightCollapsed?: boolean; + placeholder?: string; + className?: string; + name: string; + disabled?: boolean; + errors?: ValidationError; +}; + +export type IOptionOld = { + value: unknown; + label: string; + icon?: ReactNode; + description?: string; +}; + +type IState = { + isOpen: boolean; + listWidth: number; + listHeight: number; + selectedOption: IOptionOld | null; + errors: ValidationError | null; +}; + +type IPropsClass = IProps & { + router: NextRouter; +}; + +class SelectFieldClass extends React.Component { + private contentRef = React.createRef(); + private rootRef = React.createRef(); + private removeOnresize = () => {}; + + static defaultProps = { + disabled: false, + }; + + constructor(props: IPropsClass) { + super(props); + this.state = { + isOpen: false, + listHeight: 0, + listWidth: 0, + selectedOption: null, + errors: this.props.errors ?? null, + }; + this.toggle = this.toggle.bind(this); + this.onSelect = this.onSelect.bind(this); + } + + public override render(): JSX.Element { + const selectedOption = this.state.selectedOption ?? this.props.selectedOption; + return ( +
+
+ {selectedOption && } + + +
    + {this.props.options.map((option, index) => ( +
  • this.onSelect(option, e)}> +
    {option.icon}
    + {option.label} +
    • + ))} +
+ + {this.state.isOpen &&
} +
+ {this.state.errors !== null &&
{this.renderErrors()}
} +
+ ); + } + public override componentDidMount(): void { + this.onResize(); + this.removeOnresize = WindowStore.getInstance().onResize(() => this.onResize()); + + this.props.router.events.on("routeChangeStart", () => { + this.setState({ + isOpen: false, + selectedOption: null, + listHeight: 0, + listWidth: 0, + }); + }); + } + + public override componentWillUnmount() { + this.removeOnresize(); + } + + public override componentDidUpdate(prevProps: IProps) { + if (this.props.errors !== prevProps.errors) { + this.setState({ + errors: this.props.errors ?? null, + }); + } + + if (this.props.selectedOption !== prevProps.selectedOption) { + this.setState({ + selectedOption: this.props.selectedOption ?? null, + }); + } + } + + static getDerivedStateFromProps(props: IProps, state: IState) { + if (props.selectedOption?.value) { + return { + value: props.selectedOption?.value, + }; + } + return null; + } + + private onResize() { + let listHeight = 0; + let listWidth = 0; + listWidth = this.rootRef.current?.scrollWidth ?? 0; + if (this.state.listHeight) { + listHeight = this.contentRef.current?.scrollHeight ?? 0; + } + this.setState({ listHeight, listWidth }); + } + + private toggle(e: FormEvent) { + if (this.props.disabled) return; + e.preventDefault(); + let listHeight = 0; + let listWidth = this.rootRef.current?.scrollWidth ?? 0; + + if (!this.state.listHeight) { + listHeight = this.contentRef.current?.scrollHeight ?? 0; + } + + this.setState((state) => { + return { isOpen: !state.isOpen, listHeight, listWidth }; + }); + } + + private onSelect(option: IOptionOld, e: React.MouseEvent) { + if (this.props.disabled) return; + this.props.onChange && this.props.onChange(option); + this.setState({ + selectedOption: option, + }); + this.toggle(e); + } + + private renderErrors(): JSX.Element | null { + if (!this.state.errors) return null; + return ( + + {this.props.placeholder} ne peut pas être vide + + ); + } +} + +export default function SelectField(props: IProps) { + const router = useRouter(); + return ; +} diff --git a/src/front/Components/DesignSystem/MultiSelect/index.tsx b/src/front/Components/DesignSystem/MultiSelect/index.tsx index 535d36c2..d505f4f6 100644 --- a/src/front/Components/DesignSystem/MultiSelect/index.tsx +++ b/src/front/Components/DesignSystem/MultiSelect/index.tsx @@ -1,28 +1,28 @@ +import { ValidationError } from "class-validator"; import classNames from "classnames"; import React from "react"; import ReactSelect, { ActionMeta, MultiValue, Options, PropsValue } from "react-select"; -import { IOption } from "../Form/SelectField"; +import { IOptionOld } from "../Form/SelectFieldOld"; import Typography, { ETypo, ETypoColor } from "../Typography"; import classes from "./classes.module.scss"; import { styles } from "./styles"; -import { ValidationError } from "class-validator"; type IProps = { - options: IOption[]; + options: IOptionOld[]; label?: string | JSX.Element; placeholder?: string; - onChange?: (newValue: MultiValue, actionMeta: ActionMeta) => void; - defaultValue?: PropsValue; - value?: PropsValue; + onChange?: (newValue: MultiValue, actionMeta: ActionMeta) => void; + defaultValue?: PropsValue; + value?: PropsValue; isMulti?: boolean; shouldCloseMenuOnSelect: boolean; - isOptionDisabled?: (option: IOption, selectValue: Options) => boolean; + isOptionDisabled?: (option: IOptionOld, selectValue: Options) => boolean; validationError?: ValidationError; }; type IState = { isFocused: boolean; - selectedOptions: MultiValue; + selectedOptions: MultiValue; validationError: ValidationError | null; }; @@ -124,7 +124,7 @@ export default class MultiSelect extends React.Component { this.setState({ isFocused: false }); } - private onChange(newValue: MultiValue, actionMeta: ActionMeta) { + private onChange(newValue: MultiValue, actionMeta: ActionMeta) { this.props.onChange && this.props.onChange(newValue, actionMeta); this.setState({ selectedOptions: newValue, diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx index 3ff2ade3..bedf9614 100644 --- a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx +++ b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx @@ -3,7 +3,6 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles"; import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles"; import Users from "@Front/Api/LeCoffreApi/Admin/Users/Users"; import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; -import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Switch from "@Front/Components/DesignSystem/Switch"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; @@ -15,6 +14,9 @@ import { useRouter } from "next/router"; import { useCallback, useEffect, useState } from "react"; import classes from "./classes.module.scss"; +import { IOption } from "@Front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption"; +import { getLabel } from "@Front/Components/DesignSystem/Dropdown"; +import SelectField from "@Front/Components/DesignSystem/Form/SelectField"; type IProps = {}; export default function CollaboratorInformations(props: IProps) { @@ -44,7 +46,7 @@ export default function CollaboratorInformations(props: IProps) { const closeRoleModal = useCallback(() => { setRoleModalOpened(false); setSelectedOption({ - value: userSelected?.office_role ? userSelected?.office_role?.uid : userSelected?.role?.uid, + id: (userSelected?.office_role ? userSelected?.office_role?.uid : userSelected?.role?.uid) ?? "", label: userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint", }); }, [userSelected?.office_role, userSelected?.role?.uid]); @@ -55,7 +57,7 @@ export default function CollaboratorInformations(props: IProps) { User.hydrate({ uid: userSelected?.uid as string, office_role: OfficeRole.hydrate({ - uid: selectedOption?.value as string, + uid: selectedOption?.id as string, }), }), ); @@ -134,10 +136,10 @@ export default function CollaboratorInformations(props: IProps) { const roles = await OfficeRoles.getInstance().get(); if (!roles) return; - setAvailableRoles(roles.map((role) => ({ value: role.uid, label: role.name }))); + setAvailableRoles(roles.map((role) => ({ id: role.uid ?? "", label: role.name }))); setUserSelected(user); setSelectedOption({ - value: user?.office_role ? user?.office_role?.uid : user?.role?.uid, + id: (user?.office_role ? user?.office_role?.uid : user?.role?.uid) ?? "", label: user?.office_role ? user?.office_role?.name : "Utilisateur restreint", }); } @@ -206,8 +208,8 @@ export default function CollaboratorInformations(props: IProps) { options={availableRoles.filter((role) => { return role.label !== "admin"; })} - selectedOption={selectedOption!} - onChange={handleRoleChange} + onSelect={handleRoleChange} + selectedOption={selectedOption} />
{userSelected?.role?.name !== "super-admin" && ( @@ -226,7 +228,7 @@ export default function CollaboratorInformations(props: IProps) { cancelText={"Annuler"}>
- Attribuer le rôle de {selectedOption?.label} à{" "} + Attribuer le rôle de {getLabel(selectedOption)} à{" "} {userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx index b6f19080..2b21f6c1 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx @@ -4,9 +4,10 @@ import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes"; import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTypes"; import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Form from "@Front/Components/DesignSystem/Form"; -import { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; -import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; +import { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; +import Tooltip from "@Front/Components/DesignSystem/ToolTip"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard"; import Module from "@Front/Config/Module"; @@ -19,7 +20,6 @@ import { useCallback, useEffect, useState } from "react"; import { MultiValue } from "react-select"; import classes from "./classes.module.scss"; -import Tooltip from "@Front/Components/DesignSystem/ToolTip"; type IProps = {}; export default function DeedTypesInformations(props: IProps) { @@ -28,7 +28,7 @@ export default function DeedTypesInformations(props: IProps) { const [deedTypeSelected, setDeedTypeSelected] = useState(null); const [availableDocuments, setAvailableDocuments] = useState([]); - const [selectedDocuments, setSelectedDocuments] = useState([]); + const [selectedDocuments, setSelectedDocuments] = useState([]); const [isDeleteModalOpened, setIsDeleteModalOpened] = useState(false); const [isSaveModalOpened, setIsSaveModalOpened] = useState(false); @@ -71,7 +71,7 @@ export default function DeedTypesInformations(props: IProps) { setDeedTypeSelected(deedType); if (!deedType.document_types) return; - const documentsOptions: IOption[] = deedType.document_types + const documentsOptions: IOptionOld[] = deedType.document_types ?.map((documentType) => { return { label: documentType.name, @@ -106,11 +106,11 @@ export default function DeedTypesInformations(props: IProps) { closeSaveModal(); }, [closeSaveModal, deedTypeUid, selectedDocuments]); - const onDocumentChangeHandler = useCallback((values: MultiValue) => { - setSelectedDocuments(values as IOption[]); + const onDocumentChangeHandler = useCallback((values: MultiValue) => { + setSelectedDocuments(values as IOptionOld[]); }, []); - const formattedOptions: IOption[] = availableDocuments + const formattedOptions: IOptionOld[] = availableDocuments .map((document) => ({ label: document.name, value: document.uid, diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx index 8232f187..0424fde9 100644 --- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx +++ b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx @@ -2,7 +2,7 @@ import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers"; 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 { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; +import { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; import RadioBox from "@Front/Components/DesignSystem/RadioBox"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; @@ -27,8 +27,8 @@ type IProps = {}; type IState = { selectedOption: ESelectedOption; availableCustomers: Customer[]; - selectedCustomers: readonly IOption[]; - existingCustomers: IOption[]; + selectedCustomers: readonly IOptionOld[]; + existingCustomers: IOptionOld[]; isLoaded: boolean; validationError: ValidationError[]; }; @@ -54,7 +54,7 @@ class AddClientToFolderClass extends BasePage { this.onFormSubmit = this.onFormSubmit.bind(this); } public override render(): JSX.Element { - const selectOptions: IOption[] = this.getSelectedOptions(); + const selectOptions: IOptionOld[] = this.getSelectedOptions(); const backwardPath = Module.getInstance() .get() @@ -153,7 +153,7 @@ class AddClientToFolderClass extends BasePage { public override async componentDidMount() { const query = {}; const availableCustomers = await Customers.getInstance().get(query); - let preExistingCustomers: IOption[] | undefined = await this.getFolderPreSelectedCustomers(this.props.selectedFolderUid); + let preExistingCustomers: IOptionOld[] | undefined = await this.getFolderPreSelectedCustomers(this.props.selectedFolderUid); const existingCustomers = preExistingCustomers ?? []; existingCustomers.forEach((customer) => { @@ -169,7 +169,7 @@ class AddClientToFolderClass extends BasePage { this.setState({ availableCustomers, existingCustomers, isLoaded: true, selectedOption }); } - private async getFolderPreSelectedCustomers(folderUid: string): Promise { + private async getFolderPreSelectedCustomers(folderUid: string): Promise { const query = { q: { customers: { @@ -179,7 +179,7 @@ class AddClientToFolderClass extends BasePage { }, }, }; - let preExistingCustomers: IOption[] = []; + let preExistingCustomers: IOptionOld[] = []; try { const folder = await Folders.getInstance().getByUid(folderUid, query); preExistingCustomers = folder.customers!.map((customer) => { @@ -195,7 +195,7 @@ class AddClientToFolderClass extends BasePage { return preExistingCustomers; } - private getSelectedOptions(): IOption[] { + private getSelectedOptions(): IOptionOld[] { let options = this.state.availableCustomers?.map((customer) => { return { label: customer.contact?.first_name + " " + customer.contact?.last_name, @@ -206,7 +206,7 @@ class AddClientToFolderClass extends BasePage { return options; } - private onMutiSelectChange(selectedCustomers: readonly IOption[]): void { + private onMutiSelectChange(selectedCustomers: readonly IOptionOld[]): void { this.setState({ selectedCustomers }); } diff --git a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx index 6b0a7759..580dd270 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx @@ -1,16 +1,17 @@ -import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; -import classes from "./classes.module.scss"; -import TextField from "@Front/Components/DesignSystem/Form/TextField"; -import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; -import { ChangeEvent, useCallback, useEffect, useState } from "react"; -import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes"; -import { DocumentType, OfficeFolder } from "le-coffre-resources/dist/Notary"; import Deeds from "@Front/Api/LeCoffreApi/Notary/Deeds/Deeds"; +import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes"; +import { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; +import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; +import TextField from "@Front/Components/DesignSystem/Form/TextField"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; -import { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; -import { MultiValue } from "react-select"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import RadioBox from "@Front/Components/DesignSystem/RadioBox"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; +import { DocumentType, OfficeFolder } from "le-coffre-resources/dist/Notary"; +import { ChangeEvent, useCallback, useEffect, useState } from "react"; +import { MultiValue } from "react-select"; + +import classes from "./classes.module.scss"; type IProps = { isCreateDocumentModalVisible: boolean; @@ -24,13 +25,13 @@ export default function ParameterDocuments(props: IProps) { const [addOrEditDocument, setAddOrEditDocument] = useState<"add" | "edit">("edit"); - const [selectedDocuments, setSelectedDocuments] = useState([]); - const [formattedOptions, setFormattedOptions] = useState([]); + const [selectedDocuments, setSelectedDocuments] = useState([]); + const [formattedOptions, setFormattedOptions] = useState([]); const getAvailableDocuments = useCallback(async () => { const documents = await DocumentTypes.getInstance().get({}); - const formattedOptions: IOption[] = documents + const formattedOptions: IOptionOld[] = documents .filter((document) => { return !props.folder.deed?.document_types?.some((documentType) => documentType.uid === document.uid); }) @@ -52,8 +53,8 @@ export default function ParameterDocuments(props: IProps) { setDocumentName(event.target.value); }; - const onDocumentChangeHandler = useCallback((values: MultiValue) => { - setSelectedDocuments(values as IOption[]); + const onDocumentChangeHandler = useCallback((values: MultiValue) => { + setSelectedDocuments(values as IOptionOld[]); }, []); const handleClose = useCallback(() => { diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx index d2fe5615..a0af3c56 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx @@ -1,14 +1,13 @@ -import { PlusIcon } from "@heroicons/react/24/outline"; import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import CheckBox from "@Front/Components/DesignSystem/CheckBox"; import Form from "@Front/Components/DesignSystem/Form"; -import { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import Module from "@Front/Config/Module"; +import { PlusIcon } from "@heroicons/react/24/outline"; import { OfficeFolder } from "le-coffre-resources/dist/Notary"; import { NextRouter, useRouter } from "next/router"; import React from "react"; @@ -16,6 +15,7 @@ import React from "react"; import BasePage from "../../Base"; import classes from "./classes.module.scss"; import ParameterDocuments from "./ParameterDocuments"; +import { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; type IProps = {}; type IPropsClass = IProps & { @@ -25,7 +25,7 @@ type IPropsClass = IProps & { }; type IState = { isCreateDocumentModalVisible: boolean; - documentTypes: IOption[]; + documentTypes: IOptionOld[]; folder: OfficeFolder | null; }; @@ -138,7 +138,7 @@ class AskDocumentsClass extends BasePage { } } - private async getAvailableDocuments(folder: OfficeFolder): Promise { + private async getAvailableDocuments(folder: OfficeFolder): Promise { // Getting already asked documents UIDs in an array const userDocumentTypesUids = folder .documents!.filter((document) => document.depositor!.uid! === this.props.customerUid!) @@ -157,7 +157,7 @@ class AskDocumentsClass extends BasePage { if (!documentTypes) return []; // Else, return an array document types formatted as IOPtions - const documentTypesOptions: IOption[] = documentTypes.map((documentType) => { + const documentTypesOptions: IOptionOld[] = documentTypes.map((documentType) => { return { label: documentType!.name!, value: documentType!.uid!, diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx index 1bac8cae..5e6a515e 100644 --- a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx +++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx @@ -3,25 +3,27 @@ import DeedTypes from "@Front/Api/LeCoffreApi/Notary/DeedTypes/DeedTypes"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users"; import Button from "@Front/Components/DesignSystem/Button"; +import { IOption } from "@Front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption"; import Form from "@Front/Components/DesignSystem/Form"; -import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; -import TextField from "@Front/Components/DesignSystem/Form/TextField"; +import SelectField from "@Front/Components/DesignSystem/Form/SelectField"; +import { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; +import TextField from "@Front/Components/DesignSystem/Form/TextField"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; import RadioBox from "@Front/Components/DesignSystem/RadioBox"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; +import JwtService from "@Front/Services/JwtService/JwtService"; import { ValidationError } from "class-validator/types/validation/ValidationError"; import { Deed, Office, OfficeFolder } from "le-coffre-resources/dist/Notary"; import User from "le-coffre-resources/dist/Notary"; +import { DeedType } from "le-coffre-resources/dist/Notary"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; +import { MultiValue } from "react-select"; import classes from "./classes.module.scss"; -import JwtService from "@Front/Services/JwtService/JwtService"; -import { DeedType } from "le-coffre-resources/dist/Notary"; -import { MultiValue } from "react-select"; export default function CreateFolder(): JSX.Element { /** @@ -87,7 +89,7 @@ export default function CreateFolder(): JSX.Element { const radioOnChange = (e: React.ChangeEvent) => setFolderAccessType(e.target.value as "whole_office" | "select_collaborators"); - const onSelectedCollaboratorsChange = (values: MultiValue) => { + const onSelectedCollaboratorsChange = (values: MultiValue) => { const selectedCollaborators = availableCollaborators.filter((collaborator) => values.some((value) => value.value === collaborator.uid), ); @@ -142,16 +144,18 @@ export default function CreateFolder(): JSX.Element { validationError={validationError.find((error) => error.property === "name")} /> ({ + id: deedType.uid, label: deedType.name, - value: deedType.uid, })) as IOption[] } - name="deed" - placeholder={"Type d'acte"} - errors={validationError.find((error) => error.property === "deed")} + validationError={validationError.find((error) => error.property === "deed")} /> + ({ label: collaborator.contact?.last_name.concat(" ", collaborator.contact.first_name), value: collaborator.uid, - })) as IOption[] + })) as IOptionOld[] } defaultValue={selectedCollaborators.map((collaborator) => ({ label: collaborator.contact?.last_name.concat(" ", collaborator.contact.first_name) as string, diff --git a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx index de94f5c0..d9967e4c 100644 --- a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx +++ b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx @@ -1,22 +1,22 @@ +import backgroundImage from "@Assets/images/background_refonte.svg"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Users, { IGetUsersParams } from "@Front/Api/LeCoffreApi/Notary/Users/Users"; import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Form from "@Front/Components/DesignSystem/Form"; -import { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; +import { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; import RadioBox from "@Front/Components/DesignSystem/RadioBox"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; +import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import Module from "@Front/Config/Module"; +import { ValidationError } from "class-validator"; import User from "le-coffre-resources/dist/Notary/User"; import Link from "next/link"; import { useRouter } from "next/router"; +import { useCallback, useEffect, useState } from "react"; import classes from "./classes.module.scss"; -import { ValidationError } from "class-validator"; -import backgroundImage from "@Assets/images/background_refonte.svg"; -import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; -import { useCallback, useEffect, useState } from "react"; enum ERadioBoxValue { ALL = "all", @@ -28,7 +28,7 @@ export default function UpdateFolderCollaborators() { let { folderUid } = router.query; const [availableCollaborators, setAvailableCollaborators] = useState([]); - const [selectedCollaborators, setSelectedCollaborators] = useState([]); + const [selectedCollaborators, setSelectedCollaborators] = useState([]); const [defaultCheckedAllOffice, setDefaultCheckedAllOffice] = useState(false); const [selectedOption, setSelectedOption] = useState(ERadioBoxValue.SELECTION); const [loading, setLoading] = useState(true); @@ -61,7 +61,7 @@ export default function UpdateFolderCollaborators() { setSelectedOption(ERadioBoxValue.ALL); }, []); - const onChangeSelectedCollaborators = useCallback((selectedCollaborators: readonly IOption[]) => { + const onChangeSelectedCollaborators = useCallback((selectedCollaborators: readonly IOptionOld[]) => { setSelectedCollaborators(selectedCollaborators); }, []); @@ -86,7 +86,7 @@ export default function UpdateFolderCollaborators() { let folder = null; try { folder = await Folders.getInstance().getByUid(folderUid, query); - const preSelectedCollaborators: IOption[] = folder.stakeholders!.map((collaborator) => { + const preSelectedCollaborators: IOptionOld[] = folder.stakeholders!.map((collaborator) => { return { label: collaborator.contact?.first_name + " " + collaborator.contact?.last_name, value: collaborator.uid, @@ -126,7 +126,7 @@ export default function UpdateFolderCollaborators() { const foldersInformationPath = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path; const backwardPath = foldersInformationPath.replace("[folderUid]", folderUid as string); - const selectOptions: IOption[] = availableCollaborators.map((collaborator) => { + const selectOptions: IOptionOld[] = availableCollaborators.map((collaborator) => { return { label: collaborator.contact?.first_name + " " + collaborator.contact?.last_name, value: collaborator.uid, diff --git a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx index 76470291..38299062 100644 --- a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx +++ b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx @@ -1,7 +1,7 @@ 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/SelectField"; +import Select, { IOptionOld } 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"; @@ -81,7 +81,7 @@ export default function UpdateFolderMetadata() { const deedOption = { label: selectedFolder?.deed?.deed_type?.name, value: selectedFolder?.deed?.deed_type?.uid, - } as IOption; + } as IOptionOld; const openingDate = new Date(selectedFolder?.created_at ?? ""); if (!selectedFolder?.created_at) return <>; const defaultValue = openingDate.toISOString().split("T")[0]; diff --git a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx index a8ac0db5..a74522b7 100644 --- a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx +++ b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx @@ -1,6 +1,6 @@ import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Form from "@Front/Components/DesignSystem/Form"; -import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; +import Select, { IOptionOld } 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"; @@ -18,7 +18,7 @@ type IProps = { }; type IState = { selectedFolder: OfficeFolder | null; - selectedOption?: IOption; + selectedOption?: IOptionOld; }; class UpdateFolderMetadataClass extends BasePage { constructor(props: IProps) { @@ -74,7 +74,7 @@ class UpdateFolderMetadataClass extends BasePage { ); } - private onSelectedOption(option: IOption) { + private onSelectedOption(option: IOptionOld) { this.setState({ selectedOption: option, });