SelectField refacto use new dropdown
This commit is contained in:
Max S
parent
1ee2b977f6
commit
30af203045
@ -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<HTMLInputElement>) => void;
|
||||
checked: boolean;
|
||||
|
||||
@ -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<IOption | null>(null);
|
||||
const { options, placeholder, disabled, onSelect, selectedOption: selectedOptionProps } = props;
|
||||
const [selectedOption, setSelectedOption] = useState<IOption | null>(selectedOptionProps ?? null);
|
||||
const openable = useOpenable({ defaultOpen: false });
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedOption(selectedOptionProps ?? null);
|
||||
}, [selectedOptionProps]);
|
||||
|
||||
const handleOnSelect = useCallback(
|
||||
(option: IOption) => {
|
||||
setSelectedOption(option);
|
||||
onSelect?.(option);
|
||||
},
|
||||
[onSelect],
|
||||
);
|
||||
|
||||
return (
|
||||
<DropdownMenu options={options} openable={openable} onSelect={setSelectedOption} selectedOption={selectedOption}>
|
||||
<DropdownMenu options={options} openable={openable} onSelect={handleOnSelect} selectedOption={selectedOption}>
|
||||
<div
|
||||
className={classNames([
|
||||
classes["root"],
|
||||
@ -41,12 +55,12 @@ export default function Dropdown(props: IProps) {
|
||||
</div>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
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}`;
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ export type IProps = {
|
||||
label?: string;
|
||||
};
|
||||
|
||||
type IState = {
|
||||
export type IState = {
|
||||
value: string;
|
||||
validationError: ValidationError | null;
|
||||
};
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<IPropsClass, IState> {
|
||||
private contentRef = React.createRef<HTMLUListElement>();
|
||||
private rootRef = React.createRef<HTMLDivElement>();
|
||||
private removeOnresize = () => {};
|
||||
|
||||
static defaultProps = {
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
constructor(props: IPropsClass) {
|
||||
export default class SelectField extends BaseField<IProps, IState> {
|
||||
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 (
|
||||
<div className={classes["container"]}>
|
||||
<div
|
||||
className={classNames(classes["root"], this.props.className)}
|
||||
ref={this.rootRef}
|
||||
data-disabled={this.props.disabled?.toString()}
|
||||
data-errored={(this.state.errors !== null).toString()}>
|
||||
{selectedOption && <input type="text" defaultValue={selectedOption.value as string} name={this.props.name} hidden />}
|
||||
<label
|
||||
className={classNames(classes["container-label"])}
|
||||
data-open={this.state.isOpen}
|
||||
onClick={this.toggle}
|
||||
data-border-right-collapsed={this.props.hasBorderRightCollapsed}>
|
||||
<div className={classNames(classes["container-input"])}>
|
||||
{selectedOption && (
|
||||
<>
|
||||
<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>
|
||||
<span className={classes["text"]}>{selectedOption?.label}</span>
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
{!selectedOption && (
|
||||
<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR}>
|
||||
<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
|
||||
</label>
|
||||
|
||||
<ul
|
||||
className={classes["container-ul"]}
|
||||
data-open={this.state.isOpen}
|
||||
ref={this.contentRef}
|
||||
style={{
|
||||
height: this.state.listHeight + "px",
|
||||
}}>
|
||||
{this.props.options.map((option, index) => (
|
||||
<li
|
||||
key={`${index}-${option.value}`}
|
||||
className={classes["container-li"]}
|
||||
onClick={(e) => this.onSelect(option, e)}>
|
||||
<div className={classes["token-icon"]}>{option.icon}</div>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{option.label}</Typography>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{this.state.isOpen && <div className={classes["backdrop"]} onClick={this.toggle} />}
|
||||
</div>
|
||||
{this.state.errors !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
|
||||
<div className={classes["root"]}>
|
||||
<Dropdown
|
||||
options={this.props.options}
|
||||
placeholder={this.props.placeholder}
|
||||
onSelect={this.handleOnChange}
|
||||
selectedOption={this.state.selectedOption}
|
||||
/>
|
||||
{this.state.selectedOption && (
|
||||
<input
|
||||
className={classes["hidden-input"]}
|
||||
name={this.props.name}
|
||||
type="text"
|
||||
defaultValue={this.state.selectedOption.id}
|
||||
hidden
|
||||
/>
|
||||
)}
|
||||
{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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<HTMLLIElement, 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 (
|
||||
<Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
|
||||
{this.props.placeholder} ne peut pas être vide
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default function SelectField(props: IProps) {
|
||||
const router = useRouter();
|
||||
return <SelectFieldClass {...props} router={router} />;
|
||||
}
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
.hidden-input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
.errors-container {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
212
src/front/Components/DesignSystem/Form/SelectFieldOld/index.tsx
Normal file
212
src/front/Components/DesignSystem/Form/SelectFieldOld/index.tsx
Normal file
@ -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<IPropsClass, IState> {
|
||||
private contentRef = React.createRef<HTMLUListElement>();
|
||||
private rootRef = React.createRef<HTMLDivElement>();
|
||||
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 (
|
||||
<div className={classes["container"]}>
|
||||
<div
|
||||
className={classNames(classes["root"], this.props.className)}
|
||||
ref={this.rootRef}
|
||||
data-disabled={this.props.disabled?.toString()}
|
||||
data-errored={(this.state.errors !== null).toString()}>
|
||||
{selectedOption && <input type="text" defaultValue={selectedOption.value as string} name={this.props.name} hidden />}
|
||||
<label
|
||||
className={classNames(classes["container-label"])}
|
||||
data-open={this.state.isOpen}
|
||||
onClick={this.toggle}
|
||||
data-border-right-collapsed={this.props.hasBorderRightCollapsed}>
|
||||
<div className={classNames(classes["container-input"])}>
|
||||
{selectedOption && (
|
||||
<>
|
||||
<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>
|
||||
<span className={classes["text"]}>{selectedOption?.label}</span>
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
{!selectedOption && (
|
||||
<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR}>
|
||||
<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
|
||||
</label>
|
||||
|
||||
<ul
|
||||
className={classes["container-ul"]}
|
||||
data-open={this.state.isOpen}
|
||||
ref={this.contentRef}
|
||||
style={{
|
||||
height: this.state.listHeight + "px",
|
||||
}}>
|
||||
{this.props.options.map((option, index) => (
|
||||
<li
|
||||
key={`${index}-${option.value}`}
|
||||
className={classes["container-li"]}
|
||||
onClick={(e) => this.onSelect(option, e)}>
|
||||
<div className={classes["token-icon"]}>{option.icon}</div>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>{option.label}</Typography>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{this.state.isOpen && <div className={classes["backdrop"]} onClick={this.toggle} />}
|
||||
</div>
|
||||
{this.state.errors !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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<HTMLLIElement, 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 (
|
||||
<Typography typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
|
||||
{this.props.placeholder} ne peut pas être vide
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default function SelectField(props: IProps) {
|
||||
const router = useRouter();
|
||||
return <SelectFieldClass {...props} router={router} />;
|
||||
}
|
||||
@ -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<IOption>, actionMeta: ActionMeta<IOption>) => void;
|
||||
defaultValue?: PropsValue<IOption>;
|
||||
value?: PropsValue<IOption>;
|
||||
onChange?: (newValue: MultiValue<IOptionOld>, actionMeta: ActionMeta<IOptionOld>) => void;
|
||||
defaultValue?: PropsValue<IOptionOld>;
|
||||
value?: PropsValue<IOptionOld>;
|
||||
isMulti?: boolean;
|
||||
shouldCloseMenuOnSelect: boolean;
|
||||
isOptionDisabled?: (option: IOption, selectValue: Options<IOption>) => boolean;
|
||||
isOptionDisabled?: (option: IOptionOld, selectValue: Options<IOptionOld>) => boolean;
|
||||
validationError?: ValidationError;
|
||||
};
|
||||
type IState = {
|
||||
isFocused: boolean;
|
||||
selectedOptions: MultiValue<IOption>;
|
||||
selectedOptions: MultiValue<IOptionOld>;
|
||||
validationError: ValidationError | null;
|
||||
};
|
||||
|
||||
@ -124,7 +124,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
|
||||
this.setState({ isFocused: false });
|
||||
}
|
||||
|
||||
private onChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
|
||||
private onChange(newValue: MultiValue<IOptionOld>, actionMeta: ActionMeta<IOptionOld>) {
|
||||
this.props.onChange && this.props.onChange(newValue, actionMeta);
|
||||
this.setState({
|
||||
selectedOptions: newValue,
|
||||
|
||||
@ -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<User>({
|
||||
uid: userSelected?.uid as string,
|
||||
office_role: OfficeRole.hydrate<OfficeRole>({
|
||||
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}
|
||||
/>
|
||||
</div>
|
||||
{userSelected?.role?.name !== "super-admin" && (
|
||||
@ -226,7 +228,7 @@ export default function CollaboratorInformations(props: IProps) {
|
||||
cancelText={"Annuler"}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||||
Attribuer le rôle de <span className={classes["role-name"]}>{selectedOption?.label}</span> à{" "}
|
||||
Attribuer le rôle de <span className={classes["role-name"]}>{getLabel(selectedOption)}</span> à{" "}
|
||||
{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@ -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<DeedType | null>(null);
|
||||
const [availableDocuments, setAvailableDocuments] = useState<DocumentType[]>([]);
|
||||
const [selectedDocuments, setSelectedDocuments] = useState<IOption[]>([]);
|
||||
const [selectedDocuments, setSelectedDocuments] = useState<IOptionOld[]>([]);
|
||||
|
||||
const [isDeleteModalOpened, setIsDeleteModalOpened] = useState<boolean>(false);
|
||||
const [isSaveModalOpened, setIsSaveModalOpened] = useState<boolean>(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<IOption>) => {
|
||||
setSelectedDocuments(values as IOption[]);
|
||||
const onDocumentChangeHandler = useCallback((values: MultiValue<IOptionOld>) => {
|
||||
setSelectedDocuments(values as IOptionOld[]);
|
||||
}, []);
|
||||
|
||||
const formattedOptions: IOption[] = availableDocuments
|
||||
const formattedOptions: IOptionOld[] = availableDocuments
|
||||
.map((document) => ({
|
||||
label: document.name,
|
||||
value: document.uid,
|
||||
|
||||
@ -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<IPropsClass, IState> {
|
||||
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<IPropsClass, IState> {
|
||||
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<IPropsClass, IState> {
|
||||
this.setState({ availableCustomers, existingCustomers, isLoaded: true, selectedOption });
|
||||
}
|
||||
|
||||
private async getFolderPreSelectedCustomers(folderUid: string): Promise<IOption[] | undefined> {
|
||||
private async getFolderPreSelectedCustomers(folderUid: string): Promise<IOptionOld[] | undefined> {
|
||||
const query = {
|
||||
q: {
|
||||
customers: {
|
||||
@ -179,7 +179,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
|
||||
},
|
||||
},
|
||||
};
|
||||
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<IPropsClass, IState> {
|
||||
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<IPropsClass, IState> {
|
||||
return options;
|
||||
}
|
||||
|
||||
private onMutiSelectChange(selectedCustomers: readonly IOption[]): void {
|
||||
private onMutiSelectChange(selectedCustomers: readonly IOptionOld[]): void {
|
||||
this.setState({ selectedCustomers });
|
||||
}
|
||||
|
||||
|
||||
@ -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<IOption[]>([]);
|
||||
const [formattedOptions, setFormattedOptions] = useState<IOption[]>([]);
|
||||
const [selectedDocuments, setSelectedDocuments] = useState<IOptionOld[]>([]);
|
||||
const [formattedOptions, setFormattedOptions] = useState<IOptionOld[]>([]);
|
||||
|
||||
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<IOption>) => {
|
||||
setSelectedDocuments(values as IOption[]);
|
||||
const onDocumentChangeHandler = useCallback((values: MultiValue<IOptionOld>) => {
|
||||
setSelectedDocuments(values as IOptionOld[]);
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
|
||||
@ -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<IPropsClass, IState> {
|
||||
}
|
||||
}
|
||||
|
||||
private async getAvailableDocuments(folder: OfficeFolder): Promise<IOption[]> {
|
||||
private async getAvailableDocuments(folder: OfficeFolder): Promise<IOptionOld[]> {
|
||||
// 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<IPropsClass, IState> {
|
||||
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!,
|
||||
|
||||
@ -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<HTMLInputElement>) =>
|
||||
setFolderAccessType(e.target.value as "whole_office" | "select_collaborators");
|
||||
|
||||
const onSelectedCollaboratorsChange = (values: MultiValue<IOption>) => {
|
||||
const onSelectedCollaboratorsChange = (values: MultiValue<IOptionOld>) => {
|
||||
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")}
|
||||
/>
|
||||
<SelectField
|
||||
name="deed"
|
||||
label="Type d'acte"
|
||||
placeholder="Sélectionner un type d'acte"
|
||||
options={
|
||||
availableDeedTypes.map((deedType) => ({
|
||||
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")}
|
||||
/>
|
||||
|
||||
<TextAreaField
|
||||
name="description"
|
||||
label="Note de dossier"
|
||||
@ -179,7 +183,7 @@ export default function CreateFolder(): JSX.Element {
|
||||
availableCollaborators.map((collaborator) => ({
|
||||
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,
|
||||
|
||||
@ -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<User[]>([]);
|
||||
const [selectedCollaborators, setSelectedCollaborators] = useState<readonly IOption[]>([]);
|
||||
const [selectedCollaborators, setSelectedCollaborators] = useState<readonly IOptionOld[]>([]);
|
||||
const [defaultCheckedAllOffice, setDefaultCheckedAllOffice] = useState<boolean>(false);
|
||||
const [selectedOption, setSelectedOption] = useState<ERadioBoxValue>(ERadioBoxValue.SELECTION);
|
||||
const [loading, setLoading] = useState<boolean>(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,
|
||||
|
||||
@ -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];
|
||||
|
||||
@ -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<IProps, IState> {
|
||||
constructor(props: IProps) {
|
||||
@ -74,7 +74,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
|
||||
);
|
||||
}
|
||||
|
||||
private onSelectedOption(option: IOption) {
|
||||
private onSelectedOption(option: IOptionOld) {
|
||||
this.setState({
|
||||
selectedOption: option,
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user