diff --git a/src/front/Components/DesignSystem/Autocomplete/index.tsx b/src/front/Components/DesignSystem/Autocomplete/index.tsx index 8ecfc3db..7b081c11 100644 --- a/src/front/Components/DesignSystem/Autocomplete/index.tsx +++ b/src/front/Components/DesignSystem/Autocomplete/index.tsx @@ -6,6 +6,7 @@ import { IOption } from "../Dropdown/DropdownMenu/DropdownOption"; import SearchBar from "../SearchBar"; import Typography, { ETypo, ETypoColor } from "../Typography"; import classes from "./classes.module.scss"; +import { getLabel } from "../Dropdown"; type IProps = { options: IOption[]; @@ -51,24 +52,21 @@ export default function Autocomplete(props: IProps) { }, [selectedOptionProps]); const handleSelectOption = useCallback( - (option: IOption) => { - setSelectedOption(option); - setSearchValue(getLabel(option) || ""); + (newOption: IOption, _options: IOption[]) => { + setSelectedOption(newOption); + setSearchValue(getLabel(newOption) || ""); openable.close(); }, [openable], ); - 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}`; - } - return ( - +
{label && ( @@ -76,7 +74,14 @@ export default function Autocomplete(props: IProps) { )}
- + setSelectedOption(null)} + onFocus={openable.open} + /> ); } diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss new file mode 100644 index 00000000..9ebc273e --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss @@ -0,0 +1,20 @@ +@import "@Themes/constants.scss"; + +.root { + width: fit-content; + height: 32px; + + display: inline-flex; + padding: 4px 12px; + align-items: center; + gap: 8px; + + border-radius: var(--input-chip-radius, 360px); + border: 1px solid var(--input-chip-default-border, #b7d1f1); + background: var(--input-chip-default-background, #e5eefa); + + &:hover { + background-color: var(--input-chip-hovered-background); + border-color: var(--input-chip-hovered-border); + } +} diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx new file mode 100644 index 00000000..2bcfa230 --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx @@ -0,0 +1,26 @@ +import { XMarkIcon } from "@heroicons/react/24/outline"; +import classNames from "classnames"; +import React from "react"; + +import IconButton from "../../IconButton"; +import Typography, { ETypo, ETypoColor } from "../../Typography"; +import classes from "./classes.module.scss"; + +type IProps = { + text: string; + className?: string; + onDelete?: () => void; +}; + +export default function Chip(props: IProps) { + const { className, text, onDelete } = props; + + return ( +
+ + {text} + + } onClick={onDelete} /> +
+ ); +} diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss new file mode 100644 index 00000000..fa4937cd --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss @@ -0,0 +1,73 @@ +@import "@Themes/constants.scss"; + +.root { + border-radius: var(--input-radius, 0px); + border: 1px solid var(--input-main-border-filled, #6d7e8a); + background: var(--input-background, #fff); + + svg { + stroke: var(--button-icon-button-default-default); + } + + &:hover { + border-radius: var(--input-radius, 0px); + border: 1px solid var(--input-main-border-hovered, #b4bec5); + background: var(--input-background, #fff); + } + + &[data-has-value="true"] { + border-radius: var(--input-radius, 0px); + border: 1px solid var(--input-main-border-filled, #6d7e8a); + background: var(--input-background, #fff); + } + + &[data-is-focused="true"] { + border-radius: var(--input-radius, 0px); + border: 1px solid var(--input-main-border-focused, #005bcb); + background: var(--input-background, #fff); + } + + &[data-is-disabled="true"] { + opacity: var(--opacity-disabled, 0.3); + pointer-events: none; + } + + .content { + display: flex; + align-items: center; + align-content: center; + gap: 16px var(--spacing-2, 16px); + flex-wrap: wrap; + + min-height: 56px; + + padding: var(--spacing-1-5, 12px) var(--spacing-sm, 8px); + + .input { + flex: 1; + border: none; + + color: var(--input-placeholder-filled, #24282e); + + /* text/md/semibold */ + font-family: var(--font-text-family, Poppins); + font-size: 16px; + font-style: normal; + font-weight: var(--font-text-weight-semibold, 600); + line-height: normal; + letter-spacing: 0.08px; + width: 100%; + + &::placeholder { + color: var(--input-placeholder-empty, #6d7e8a); + /* text/md/regular */ + font-family: var(--font-text-family, Poppins); + font-size: 16px; + font-style: normal; + font-weight: var(--font-text-weight-regular, 400); + line-height: normal; + letter-spacing: 0.08px; + } + } + } +} diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx new file mode 100644 index 00000000..5e926fdc --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx @@ -0,0 +1,90 @@ +import React, { useCallback, useEffect } from "react"; + +import { getLabel } from "../../Dropdown"; +import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption"; +import Chip from "../Chip"; +import classes from "./classes.module.scss"; + +type IProps = { + selectedOptions: IOption[]; + onSelectedOptionsChange: (options: IOption[]) => void; + onChange?: (input: string) => void; + value?: string; + placeholder?: string; + disabled?: boolean; + onClear?: () => void; + onFocus?: () => void; + onBlur?: () => void; +}; + +export default function ChipContainer(props: IProps) { + const { + selectedOptions, + onChange, + value: propValue, + placeholder = "Rechercher", + disabled = false, + onFocus, + onBlur, + onSelectedOptionsChange, + } = props; + + const [isFocused, setIsFocused] = React.useState(false); + const [value, setValue] = React.useState(propValue || ""); + + const changeValue = useCallback( + (value: string) => { + setValue(value); + onChange && onChange(value); + }, + [onChange], + ); + + const handleOnChange = useCallback((event: React.ChangeEvent) => changeValue(event.target.value), [changeValue]); + + const handleFocus = useCallback(() => { + setIsFocused(true); + onFocus?.(); + }, [onFocus]); + + const handleBlur = useCallback( + (e: React.FocusEvent) => { + setIsFocused(false); + onBlur?.(); + }, + [onBlur], + ); + + const onChipDelete = useCallback( + (option: IOption) => { + const newSelectedOptions = selectedOptions.filter((selectedOption) => selectedOption.id !== option.id); + onSelectedOptionsChange && onSelectedOptionsChange(newSelectedOptions); + }, + [selectedOptions, onSelectedOptionsChange], + ); + + useEffect(() => { + if (propValue !== undefined) { + setValue(propValue); + } + }, [propValue]); + + return ( +
+
+ {selectedOptions.map((option) => ( + onChipDelete(option)} /> + ))} + +
+
+ ); +} diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/classes.module.scss b/src/front/Components/DesignSystem/AutocompleteMultiSelect/classes.module.scss new file mode 100644 index 00000000..0a331a1d --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/classes.module.scss @@ -0,0 +1,7 @@ +@import "@Themes/constants.scss"; + +.root { + .label { + padding: 0px var(--spacing-2, 16px); + } +} diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/index.tsx b/src/front/Components/DesignSystem/AutocompleteMultiSelect/index.tsx new file mode 100644 index 00000000..4274bf89 --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/index.tsx @@ -0,0 +1,88 @@ +import useOpenable from "@Front/Hooks/useOpenable"; +import { useCallback, useEffect, useState } from "react"; + +import DropdownMenu from "../Dropdown/DropdownMenu"; +import { IOption } from "../Dropdown/DropdownMenu/DropdownOption"; +import Typography, { ETypo, ETypoColor } from "../Typography"; +import classes from "./classes.module.scss"; +import ChipContainer from "./ChipContainer"; +import { getLabel } from "../Dropdown"; + +type IProps = { + options: IOption[]; + placeholder?: string; + disabled?: boolean; + label?: string; + onSelect?: (option: IOption) => void; + selectedOptions?: IOption[] | null; +}; + +export default function AutocompleteMultiSelect(props: IProps) { + const { options, placeholder, disabled, label, selectedOptions: selectedOptionsProps } = props; + const [selectedOptions, setSelectedOptions] = useState(selectedOptionsProps ?? null); + const [searchValue, setSearchValue] = useState(""); + const [filteredOptions, setFilteredOptions] = useState(options); + const openable = useOpenable({ defaultOpen: false }); + + useEffect(() => { + if (searchValue) { + const filteredOptions = options.filter((option) => getLabel(option)?.toLowerCase().includes(searchValue.toLowerCase())); + console.log(filteredOptions); + if (filteredOptions.length === 0) + return setFilteredOptions([{ id: "no-results", label: "Aucun résulats", notSelectable: true }]); + return setFilteredOptions(filteredOptions); + } + return setFilteredOptions(options); + }, [searchValue, options]); + + const handleSearchChange = useCallback( + (value: string) => { + setSearchValue(value); + if (value) { + openable.open(); + } else { + openable.close(); + } + }, + [openable], + ); + + useEffect(() => { + setSelectedOptions(selectedOptionsProps ?? null); + }, [selectedOptionsProps]); + + const handleSelectOption = useCallback( + (_newOption: IOption, options: IOption[]) => { + setSelectedOptions(options); + setSearchValue(""); + openable.close(); + }, + [openable], + ); + + return ( + +
+ {label && ( + + {label} + + )} +
+ setSelectedOptions(null)} + onFocus={openable.open} + selectedOptions={selectedOptions ?? []} + onSelectedOptionsChange={setSelectedOptions} + /> + + ); +} diff --git a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss index d8742a45..a56ca26e 100644 --- a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss +++ b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss @@ -30,6 +30,7 @@ overflow: visible; .content { max-height: 500px; + overflow: auto; opacity: 1; } } diff --git a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/index.tsx b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/index.tsx index c19f6982..5ad68d7b 100644 --- a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/index.tsx +++ b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/index.tsx @@ -1,12 +1,12 @@ import classNames from "classnames"; -import React, { useCallback } from "react"; +import React, { useCallback, useEffect, useRef } from "react"; import classes from "./classes.module.scss"; import DropdownOption, { IOption } from "./DropdownOption"; type IProps = { options: IOption[]; - selectedOption: IOption | null; + selectedOptions: IOption[]; children: React.ReactNode; openable: { isOpen: boolean; @@ -14,21 +14,40 @@ type IProps = { close: () => void; toggle: () => void; }; - onSelect?: (option: IOption) => void; + onSelect?: (newOption: IOption, options: IOption[]) => void; }; export default function DropdownMenu(props: IProps) { - const { children, options, onSelect, openable, selectedOption } = props; + const { children, options, onSelect, openable, selectedOptions } = props; + const ref = useRef(null); const handleSelect = useCallback( (option: IOption) => { - onSelect?.(option); + const newOptions = selectedOptions.some((selectedOption) => selectedOption.id === option.id) + ? selectedOptions + : [...selectedOptions, option]; + + onSelect?.(option, newOptions); openable.close(); }, - [onSelect, openable], + [onSelect, openable, selectedOptions], ); + const handleClickOutside = useCallback( + (event: MouseEvent) => { + if (ref.current && !ref.current.contains(event.target as Node)) { + openable.close(); + } + }, + [openable], + ); + + useEffect(() => { + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, [handleClickOutside]); + return ( -
+
{children}
{options.map((option) => { @@ -39,6 +58,6 @@ export default function DropdownMenu(props: IProps) { ); function isActive(option: IOption): boolean { - return selectedOption?.id === option.id; + return selectedOptions.some((selectedOption) => selectedOption.id === option.id); } } diff --git a/src/front/Components/DesignSystem/Dropdown/index.tsx b/src/front/Components/DesignSystem/Dropdown/index.tsx index a3875994..b00cacea 100644 --- a/src/front/Components/DesignSystem/Dropdown/index.tsx +++ b/src/front/Components/DesignSystem/Dropdown/index.tsx @@ -27,15 +27,19 @@ export default function Dropdown(props: IProps) { }, [selectedOptionProps]); const handleOnSelect = useCallback( - (option: IOption) => { - setSelectedOption(option); - onSelect?.(option); + (newOption: IOption, _options: IOption[]) => { + setSelectedOption(newOption); + onSelect?.(newOption); }, [onSelect], ); return ( - +
{label && ( diff --git a/src/front/Components/DesignSystem/FolderList/classes.module.scss b/src/front/Components/DesignSystem/FolderList/classes.module.scss deleted file mode 100644 index b1bf1c69..00000000 --- a/src/front/Components/DesignSystem/FolderList/classes.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - height: calc(100vh - 290px); - overflow-y: scroll; - - &.archived { - height: calc(100vh - 220px); - } - - .active { - background-color: var(--color-neutral-200); - } -} diff --git a/src/front/Components/DesignSystem/FolderList/index.tsx b/src/front/Components/DesignSystem/FolderList/index.tsx deleted file mode 100644 index c319582a..00000000 --- a/src/front/Components/DesignSystem/FolderList/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import Module from "@Front/Config/Module"; -import classNames from "classnames"; -import { OfficeFolder } from "le-coffre-resources/dist/Notary"; -import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document"; -import Link from "next/link"; -import { useRouter } from "next/router"; -import React from "react"; - -import FolderContainer from "../FolderContainer"; -import classes from "./classes.module.scss"; - -type IProps = { - folders: OfficeFolder[]; - isArchived: boolean; - onSelectedFolder?: (folder: OfficeFolder) => void; - onCloseLeftSide?: () => void; -}; - -type IPropsClass = IProps & { - selectedFolder: string; -}; - -type IState = {}; - -class FolderListClass extends React.Component { - private redirectPath: string = this.props.isArchived - ? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path - : Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path; - public override render(): JSX.Element { - return
{this.renderFolders()}
; - } - - private renderFolders(): JSX.Element[] { - const pendingFolders = this.props.folders - .filter((folder) => { - const pendingDocuments = (folder.documents ?? []).filter( - (document) => document.document_status === EDocumentStatus.DEPOSITED, - ); - return pendingDocuments.length >= 1; - }) - .sort((folder1, folder2) => { - return folder1.created_at! > folder2.created_at! ? -1 : 1; - }); - - const otherFolders = this.props.folders - .filter((folder) => { - const pendingDocuments = (folder.documents ?? []).filter( - (document) => document.document_status === EDocumentStatus.DEPOSITED, - ); - return pendingDocuments.length === 0; - }) - .sort((folder1, folder2) => { - return folder1.created_at! > folder2.created_at! ? -1 : 1; - }); - - return [...pendingFolders, ...otherFolders].map((folder) => { - return ( -
- - ; - -
- ); - }); - } -} - -export default function FolderList(props: IProps) { - const router = useRouter(); - let { folderUid } = router.query; - folderUid = folderUid as string; - return ; -} diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx index 53df5b74..188bcfd6 100644 --- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx +++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx @@ -11,8 +11,6 @@ import SearchBlockList from "../SearchBlockList"; type IProps = { folders: OfficeFolder[]; isArchived: boolean; - onSelectedFolder?: (folder: OfficeFolder) => void; - onCloseLeftSide?: () => void; }; export default function FolderListContainer(props: IProps) { @@ -64,10 +62,8 @@ export default function FolderListContainer(props: IProps) { const [blocks, setBlocks] = React.useState(getBlocks(folders)); const onSelectedFolder = (block: IBlock) => { - props.onCloseLeftSide && props.onCloseLeftSide(); const folder = folders.find((folder) => folder.uid === block.id); if (!folder) return; - props.onSelectedFolder && props.onSelectedFolder(folder); const path = redirectPath.replace("[folderUid]", folder.uid ?? ""); router.push(path); }; diff --git a/src/front/Components/DesignSystem/IconButton/classes.module.scss b/src/front/Components/DesignSystem/IconButton/classes.module.scss index 920f424e..cc78b949 100644 --- a/src/front/Components/DesignSystem/IconButton/classes.module.scss +++ b/src/front/Components/DesignSystem/IconButton/classes.module.scss @@ -94,6 +94,10 @@ } } + &.default { + padding: 0; + } + &.disabled { cursor: default; opacity: var(--opacity-disabled, 0.3); diff --git a/src/front/Components/DesignSystem/SearchBar/index.tsx b/src/front/Components/DesignSystem/SearchBar/index.tsx index 113305ce..ebcce2fe 100644 --- a/src/front/Components/DesignSystem/SearchBar/index.tsx +++ b/src/front/Components/DesignSystem/SearchBar/index.tsx @@ -1,16 +1,21 @@ +import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline"; import React, { useCallback, useEffect } from "react"; import classes from "./classes.module.scss"; -import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline"; type IProps = { onChange?: (input: string) => void; value?: string; placeholder?: string; disabled?: boolean; + onClear?: () => void; + onFocus?: () => void; + onBlur?: () => void; }; -export default function SearchBar({ onChange, value: propValue, placeholder = "Rechercher", disabled = false }: IProps) { +export default function SearchBar(props: IProps) { + const { onChange, value: propValue, placeholder = "Rechercher", disabled = false, onClear, onFocus, onBlur } = props; + const [isFocused, setIsFocused] = React.useState(false); const [value, setValue] = React.useState(propValue || ""); @@ -22,10 +27,25 @@ export default function SearchBar({ onChange, value: propValue, placeholder = "R [onChange], ); - const handleOnChange = (event: React.ChangeEvent) => changeValue(event.target.value); - const handleFocus = () => setIsFocused(true); - const handleBlur = () => setIsFocused(false); - const clearValue = () => changeValue(""); + const handleOnChange = useCallback((event: React.ChangeEvent) => changeValue(event.target.value), [changeValue]); + + const handleFocus = useCallback(() => { + setIsFocused(true); + onFocus?.(); + }, [onFocus]); + + const handleBlur = useCallback( + (e: React.FocusEvent) => { + setIsFocused(false); + onBlur?.(); + }, + [onBlur], + ); + + const clearValue = useCallback(() => { + changeValue(""); + onClear?.(); + }, [changeValue, onClear]); useEffect(() => { if (propValue !== undefined) { diff --git a/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx index 50c7ef77..458f6d67 100644 --- a/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx +++ b/src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx @@ -1,8 +1,8 @@ -import React, { useCallback, useEffect } from "react"; +import React, { useEffect } from "react"; import { IBlock } from "../BlockList/Block"; import classes from "./classes.module.scss"; -import Typography, { ETypo, ETypoColor } from "../../Typography"; -import { ChevronDownIcon } from "@heroicons/react/24/outline"; +import Dropdown from "../../Dropdown"; +import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption"; type IProps = { blocks: IBlock[]; onSelectedBlock: (block: IBlock) => void; @@ -11,72 +11,36 @@ type IProps = { export default function DropdownNavigation({ blocks, onSelectedBlock, defaultSelectedBlock = blocks[0] }: IProps) { const [selectedBlock, setSelectedBlock] = React.useState(defaultSelectedBlock ?? null); - const [isDropdownOpened, setIsDropdownOpened] = React.useState(false); - const rootRef = React.useRef(null); - - const selectBlock = useCallback( - (id: string) => { - setIsDropdownOpened(false); - setSelectedBlock(blocks.find((folder) => folder.id === id)!); - onSelectedBlock && onSelectedBlock(blocks.find((folder) => folder.id === id)!); - }, - [blocks, onSelectedBlock], - ); - - const handleOnClick = () => setIsDropdownOpened((prev) => !prev); - - useEffect(() => { - // on click outside of root, close dropdown - const handleClickOutside = (event: MouseEvent) => { - if (rootRef.current && !rootRef.current.contains(event.target as Node)) { - setIsDropdownOpened(false); - } - }; - document.addEventListener("mousedown", handleClickOutside); - return () => document.removeEventListener("mousedown", handleClickOutside); - }, []); useEffect(() => { if (defaultSelectedBlock) setSelectedBlock(defaultSelectedBlock); }, [defaultSelectedBlock]); - return ( -
- {selectedBlock && ( - <> -
-
- {selectedBlock.secondaryText && ( - - {selectedBlock.secondaryText} - - )} - - {selectedBlock.primaryText} - -
- -
- {isDropdownOpened && ( -
- {blocks - .filter((block) => block.id !== selectedBlock.id) - .map((block) => ( -
selectBlock(block.id)}> - {block.secondaryText && ( - - {block.secondaryText} - - )} - - {block.primaryText} - -
- ))} -
- )} - - )} + const handleDropDownSelect = (option: IOption) => { + const block = blocks.find((block) => block.id === option.id); + if (block) { + setSelectedBlock(block); + onSelectedBlock + ? onSelectedBlock(block) + : console.error("DropdownNavigation: onSelectedBlock prop is required to handle block selection"); + } + }; + + return ( +
+ { + return { + id: block.id, + label: { + subtext: block.primaryText, + text: block.secondaryText, + }, + } as IOption; + })} + onSelect={handleDropDownSelect} + selectedOption={selectedBlock ? { id: selectedBlock.id, label: selectedBlock.primaryText } : undefined} + />
); } diff --git a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss index d7a8ef40..4354b29d 100644 --- a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss +++ b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss @@ -11,6 +11,7 @@ justify-content: flex-start; @media (max-width: $screen-m) { + height: auto; gap: 16px; padding: var(--spacing-lg, 24px); width: auto; diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx index 9f63599c..584397a6 100644 --- a/src/front/Components/DesignSystem/Typography/index.tsx +++ b/src/front/Components/DesignSystem/Typography/index.tsx @@ -159,6 +159,8 @@ export enum ETypoColor { DROPDOWN_CONTRAST_DEFAULT = "--dropdown-contrast-default", DROPDOWN_CONTRAST_ACTIVE = "--dropdown-contrast-active", + + INPUT_CHIP_CONTRAST = "--input-chip-contrast", } export default function Typography(props: IProps) { diff --git a/src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss new file mode 100644 index 00000000..882a9394 --- /dev/null +++ b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss @@ -0,0 +1,23 @@ +@import "@Themes/constants.scss"; + +.root { + position: relative; + .content { + display: flex; + justify-content: flex-start; + height: calc(100vh - var(--header-height)); + + @media (max-width: $screen-m) { + flex-direction: column; + } + .right-side { + min-width: calc(100% - 336px); + overflow-y: auto; + padding: var(--spacing-lg, 24px); + + @media (max-width: $screen-m) { + width: 100%; + } + } + } +} diff --git a/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx new file mode 100644 index 00000000..67fce823 --- /dev/null +++ b/src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx @@ -0,0 +1,45 @@ +import Header from "@Front/Components/DesignSystem/Header"; +import Version from "@Front/Components/DesignSystem/Version"; +import BackArrow from "@Front/Components/Elements/BackArrow"; +import React, { ReactNode } from "react"; + +import classes from "./classes.module.scss"; +import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; +import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList"; + +export type IPropsDashboardWithList = { + title?: string; + children?: ReactNode; + isArchived?: boolean; + hasBackArrow?: boolean; + backArrowUrl?: string; + mobileBackText?: string; +}; + +type IProps = IPropsDashboardWithList & { + blocksList: IBlock[]; + onSelectedBlock: (block: IBlock) => void; + headerConnected?: boolean; +}; + +export default function DefaultDashboardWithList(props: IProps) { + const { hasBackArrow, backArrowUrl, children, blocksList, onSelectedBlock, headerConnected = true } = props; + + return ( +
+
+
+ +
+ {hasBackArrow && ( +
+ +
+ )} + {children} +
+
+ +
+ ); +} diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx index 2a5e00a7..3b3a383b 100644 --- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx @@ -13,14 +13,13 @@ type IProps = { title: string; children?: ReactNode; isArchived?: boolean; - onSelectedFolder?: (folder: OfficeFolder) => void; hasBackArrow?: boolean; backArrowUrl?: string; mobileBackText?: string; }; export default function DefaultNotaryDashboard(props: IProps) { - const { hasBackArrow, onSelectedFolder, backArrowUrl, children, isArchived } = props; + const { hasBackArrow, backArrowUrl, children, isArchived } = props; const [folders, setFolders] = React.useState([]); @@ -67,7 +66,7 @@ export default function DefaultNotaryDashboard(props: IProps) {
- +
{hasBackArrow && (
diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss deleted file mode 100644 index a34b9618..00000000 --- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - width: calc(100vh - 83px); - display: flex; - flex-direction: column; - justify-content: space-between; - - .header { - flex: 1; - } - - .searchbar { - padding: 40px 24px 24px 24px; - } - - .folderlist-container { - max-height: 100vh; - height: 100vh; - overflow: auto; - border-right: 1px solid var(--color-neutral-200); - } -} diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx deleted file mode 100644 index b3c92662..00000000 --- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import Module from "@Front/Config/Module"; -import { Office } from "le-coffre-resources/dist/SuperAdmin"; -import { useRouter } from "next/router"; -import React, { useCallback } from "react"; - -import classes from "./classes.module.scss"; -import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; -import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList"; - -type IProps = { - offices: Office[]; - onSelectedOffice?: (office: Office) => void; - onCloseLeftSide?: () => void; -}; - -export default function OfficeListContainer(props: IProps) { - const router = useRouter(); - - const { officeUid } = router.query; - - const onSelectedBlock = useCallback( - (block: IBlock) => { - props.onCloseLeftSide && props.onCloseLeftSide(); - const redirectPath = Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path; - router.push(redirectPath.replace("[uid]", block.id)); - }, - [props, router], - ); - - return ( -
- { - return { - primaryText: office.crpcen + " - " + office.name, - id: office.uid!, - isActive: office.uid === officeUid, - }; - })} - onSelectedBlock={onSelectedBlock} - /> -
- ); -} diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss deleted file mode 100644 index f54563dd..00000000 --- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss +++ /dev/null @@ -1,116 +0,0 @@ -@import "@Themes/constants.scss"; - -@keyframes growWidth { - 0% { - width: 100%; - } - - 100% { - width: 200%; - } -} - -.root { - .content { - display: flex; - overflow: hidden; - height: calc(100vh - var(--header-height)); - - .overlay { - position: absolute; - width: 100%; - height: 100%; - background-color: var(--color-generic-white); - opacity: 0.5; - z-index: 2; - transition: all 0.3s $custom-easing; - } - - .left-side { - background-color: var(--color-generic-white); - z-index: 3; - display: flex; - width: 336px; - min-width: 336px; - transition: all 0.3s $custom-easing; - overflow: hidden; - - @media (max-width: ($screen-m - 1px)) { - width: 56px; - min-width: 56px; - transform: translateX(-389px); - - &.opened { - transform: translateX(0px); - width: 336px; - min-width: 336px; - } - } - - @media (max-width: $screen-s) { - width: 0px; - min-width: 0px; - - &.opened { - width: 100vw; - min-width: 100vw; - } - } - } - - .closable-left-side { - position: absolute; - background-color: var(--color-generic-white); - z-index: 0; - display: flex; - justify-content: center; - min-width: 56px; - max-width: 56px; - height: calc(100vh - var(--header-height)); - border-right: 1px var(--color-neutral-200) solid; - - @media (min-width: $screen-m) { - display: none; - } - - .chevron-icon { - margin-top: 21px; - transform: rotate(180deg); - cursor: pointer; - } - - @media (max-width: $screen-s) { - display: none; - } - } - - .right-side { - min-width: calc(100vw - 389px); - padding: 24px; - overflow-y: auto; - - @media (max-width: ($screen-m - 1px)) { - min-width: calc(100vw - 56px); - } - - @media (max-width: $screen-s) { - flex: 1; - min-width: unset; - } - - .back-arrow-mobile { - display: none; - @media (max-width: $screen-s) { - display: block; - margin-bottom: 24px; - } - } - - .back-arrow-desktop { - @media (max-width: $screen-s) { - display: none; - } - } - } - } -} diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx index bbb729f3..0cdeaf38 100644 --- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx @@ -1,112 +1,42 @@ -import ChevronIcon from "@Assets/Icons/chevron.svg"; +import { Office } from "le-coffre-resources/dist/SuperAdmin"; +import React, { useEffect } from "react"; + +import { useRouter } from "next/router"; +import Module from "@Front/Config/Module"; +import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; +import DefaultDashboardWithList, { IPropsDashboardWithList } from "../DefaultDashboardWithList"; import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices"; -import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; -import Header from "@Front/Components/DesignSystem/Header"; -import Version from "@Front/Components/DesignSystem/Version"; -import BackArrow from "@Front/Components/Elements/BackArrow"; -import WindowStore from "@Front/Stores/WindowStore"; -import classNames from "classnames"; -import { Office } from "le-coffre-resources/dist/Notary"; -import Image from "next/image"; -import React, { ReactNode } from "react"; -import classes from "./classes.module.scss"; -import OfficeListContainer from "./OfficeListContainer"; -import { ChevronLeftIcon } from "@heroicons/react/24/outline"; +type IProps = IPropsDashboardWithList; -type IProps = { - title: string; - children?: ReactNode; - onSelectedOffice: (office: Office) => void; - hasBackArrow: boolean; - backArrowUrl?: string; - mobileBackText?: string; -}; -type IState = { - offices: Office[] | null; - isLeftSideOpen: boolean; - leftSideCanBeClosed: boolean; -}; +export default function DefaultOfficeDashboard(props: IProps) { + const [offices, setOffices] = React.useState(null); + const router = useRouter(); + const { officeUid } = router.query; + useEffect(() => { + Offices.getInstance() + .get() + .then((offices) => setOffices(offices)); + }, []); -export default class DefaultOfficeDashboard extends React.Component { - private onWindowResize = () => {}; - public static defaultProps: Partial = { - hasBackArrow: false, + const onSelectedBlock = (block: IBlock) => { + router.push(Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path.replace("[uid]", block.id)); }; - public constructor(props: IProps) { - super(props); - this.state = { - offices: null, - isLeftSideOpen: false, - leftSideCanBeClosed: typeof window !== "undefined" ? window.innerWidth < 1024 : false, - }; - this.onOpenLeftSide = this.onOpenLeftSide.bind(this); - this.onCloseLeftSide = this.onCloseLeftSide.bind(this); - } - - public override render(): JSX.Element { - return ( -
-
-
- {this.state.isLeftSideOpen &&
} -
- {this.state.offices && } -
-
- open side menu -
- -
- {this.props.hasBackArrow && ( -
- -
- )} - {this.props.mobileBackText && ( -
- -
- )} - {this.props.children} -
-
- -
- ); - } - - public override async componentDidMount() { - this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window)); - const offices = await Offices.getInstance().get(); - this.setState({ offices }); - } - - public override componentWillUnmount() { - this.onWindowResize(); - } - - private onOpenLeftSide() { - this.setState({ isLeftSideOpen: true }); - } - - private onCloseLeftSide() { - if (!this.state.leftSideCanBeClosed) return; - this.setState({ isLeftSideOpen: false }); - } - - private onResize(window: Window) { - if (window.innerWidth > 1023) { - if (!this.state.leftSideCanBeClosed) return; - this.setState({ leftSideCanBeClosed: false }); - } - this.setState({ leftSideCanBeClosed: true }); - } + return ( + ({ + id: office.uid!, + primaryText: office.name, + isActive: office.uid === officeUid, + secondaryText: office.crpcen, + })) + : [] + } + /> + ); } diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss deleted file mode 100644 index a34b9618..00000000 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - width: calc(100vh - 83px); - display: flex; - flex-direction: column; - justify-content: space-between; - - .header { - flex: 1; - } - - .searchbar { - padding: 40px 24px 24px 24px; - } - - .folderlist-container { - max-height: 100vh; - height: 100vh; - overflow: auto; - border-right: 1px solid var(--color-neutral-200); - } -} diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx deleted file mode 100644 index 0842539d..00000000 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import Module from "@Front/Config/Module"; -import User from "le-coffre-resources/dist/Notary"; -import { useRouter } from "next/router"; -import React, { useCallback } from "react"; - -import classes from "./classes.module.scss"; -import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; -import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList"; - -type IProps = { - users: User[]; - onSelectedUser?: (user: User) => void; - onCloseLeftSide?: () => void; -}; - -export default function UserListContainer(props: IProps) { - const router = useRouter(); - - const { userUid } = router.query; - - const onSelectedBlock = useCallback( - (block: IBlock) => { - props.onCloseLeftSide && props.onCloseLeftSide(); - const redirectPath = Module.getInstance().get().modules.pages.Users.pages.UsersInformations.props.path; - router.push(redirectPath.replace("[uid]", block.id)); - }, - [props, router], - ); - - return ( -
- { - return { - primaryText: user.contact?.first_name + " " + user.contact?.last_name, - id: user.uid!, - isActive: user.uid === userUid, - }; - })} - onSelectedBlock={onSelectedBlock} - /> -
- ); -} diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss deleted file mode 100644 index 059853fe..00000000 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss +++ /dev/null @@ -1,116 +0,0 @@ -@import "@Themes/constants.scss"; - -@keyframes growWidth { - 0% { - width: 100%; - } - - 100% { - width: 200%; - } -} - -.root { - .content { - display: flex; - overflow: hidden; - height: calc(100vh - var(--header-height)); - - .overlay { - position: absolute; - width: 100%; - height: 100%; - background-color: var(--color-generic-white); - opacity: 0.5; - z-index: 2; - transition: all 0.3s $custom-easing; - } - - .left-side { - background-color: var(--color-generic-white); - z-index: 3; - display: flex; - width: 336px; - min-width: 336px; - transition: all 0.3s $custom-easing; - overflow: hidden; - - @media (max-width: ($screen-m - 1px)) { - width: 56px; - min-width: 56px; - transform: translateX(-389px); - - &.opened { - transform: translateX(0px); - width: 336px; - min-width: 336px; - } - } - - @media (max-width: $screen-s) { - width: 0px; - min-width: 0px; - - &.opened { - width: 100vw; - min-width: 100vw; - } - } - } - - .closable-left-side { - position: absolute; - background-color: var(--color-generic-white); - z-index: 0; - display: flex; - justify-content: center; - min-width: 56px; - max-width: 56px; - height: calc(100vh - var(--header-height)); - border-right: 1px var(--color-neutral-200 solid); - - @media (min-width: $screen-m) { - display: none; - } - - .chevron-icon { - margin-top: 21px; - transform: rotate(180deg); - cursor: pointer; - } - - @media (max-width: $screen-s) { - display: none; - } - } - - .right-side { - min-width: calc(100vw - 389px); - padding: 24px; - overflow-y: auto; - - @media (max-width: ($screen-m - 1px)) { - min-width: calc(100vw - 56px); - } - - @media (max-width: $screen-s) { - flex: 1; - min-width: unset; - } - - .back-arrow-mobile { - display: none; - @media (max-width: $screen-s) { - display: block; - margin-bottom: 24px; - } - } - - .back-arrow-desktop { - @media (max-width: $screen-s) { - display: none; - } - } - } - } -} diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx index 27a6d89b..e3b97389 100644 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx @@ -1,115 +1,46 @@ -import ChevronIcon from "@Assets/Icons/chevron.svg"; -import { ChevronLeftIcon } from "@heroicons/react/20/solid"; import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users"; -import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; -import Header from "@Front/Components/DesignSystem/Header"; -import Version from "@Front/Components/DesignSystem/Version"; -import BackArrow from "@Front/Components/Elements/BackArrow"; -import WindowStore from "@Front/Stores/WindowStore"; -import classNames from "classnames"; import User from "le-coffre-resources/dist/SuperAdmin"; -import Image from "next/image"; -import React, { ReactNode } from "react"; +import React, { useEffect } from "react"; -import classes from "./classes.module.scss"; -import UserListContainer from "./UserListContainer"; +import { useRouter } from "next/router"; +import Module from "@Front/Config/Module"; +import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block"; +import DefaultDashboardWithList, { IPropsDashboardWithList } from "../DefaultDashboardWithList"; -type IProps = { - title: string; - children?: ReactNode; - onSelectedUser: (user: User) => void; - hasBackArrow: boolean; - backArrowUrl?: string; - mobileBackText?: string; -}; -type IState = { - users: User[] | null; - isLeftSideOpen: boolean; - leftSideCanBeClosed: boolean; -}; +type IProps = IPropsDashboardWithList; -export default class DefaultUserDashboard extends React.Component { - private onWindowResize = () => {}; - public static defaultProps: Partial = { - hasBackArrow: false, - }; - - public constructor(props: IProps) { - super(props); - this.state = { - users: null, - isLeftSideOpen: false, - leftSideCanBeClosed: typeof window !== "undefined" ? window.innerWidth < 1024 : false, - }; - this.onOpenLeftSide = this.onOpenLeftSide.bind(this); - this.onCloseLeftSide = this.onCloseLeftSide.bind(this); - } - - public override render(): JSX.Element { - return ( -
-
-
- {this.state.isLeftSideOpen &&
} -
- {this.state.users && } -
-
- open side menu -
- -
- {this.props.hasBackArrow && ( -
- -
- )} - {this.props.mobileBackText && ( -
- -
- )} - {this.props.children} -
-
- -
- ); - } - - public override async componentDidMount() { - this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window)); +export default function DefaultUserDashboard(props: IProps) { + const [users, setUsers] = React.useState(null); + const router = useRouter(); + const { userUid } = router.query; + useEffect(() => { const query: IGetUsersparams = { include: { contact: true }, }; - const users = await Users.getInstance().get(query); - this.setState({ users }); - } - public override componentWillUnmount() { - this.onWindowResize(); - } + Users.getInstance() + .get(query) + .then((users) => setUsers(users)); + }, []); - private onOpenLeftSide() { - this.setState({ isLeftSideOpen: true }); - } + const onSelectedBlock = (block: IBlock) => { + router.push(Module.getInstance().get().modules.pages.Users.pages.UsersInformations.props.path.replace("[uid]", block.id)); + }; - private onCloseLeftSide() { - if (!this.state.leftSideCanBeClosed) return; - this.setState({ isLeftSideOpen: false }); - } - - private onResize(window: Window) { - if (window.innerWidth > 1023) { - if (!this.state.leftSideCanBeClosed) return; - this.setState({ leftSideCanBeClosed: false }); - } - this.setState({ leftSideCanBeClosed: true }); - } + return ( + ({ + id: user.uid!, + primaryText: user.contact?.first_name + " " + user.contact?.last_name, + isActive: user.uid === userUid, + secondaryText: user.contact?.email, + })) + : [] + } + /> + ); } diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx index 1ca60d3e..d8121590 100644 --- a/src/front/Components/Layouts/DesignSystem/index.tsx +++ b/src/front/Components/Layouts/DesignSystem/index.tsx @@ -1,4 +1,6 @@ import Alert, { EAlertVariant } from "@Front/Components/DesignSystem/Alert"; +import Autocomplete from "@Front/Components/DesignSystem/Autocomplete"; +import AutocompleteMultiSelect from "@Front/Components/DesignSystem/AutocompleteMultiSelect"; import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import CircleProgress from "@Front/Components/DesignSystem/CircleProgress"; import Dropdown from "@Front/Components/DesignSystem/Dropdown"; @@ -19,19 +21,10 @@ import NumberPicker from "@Front/Components/Elements/NumberPicker"; import Tabs from "@Front/Components/Elements/Tabs"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import useOpenable from "@Front/Hooks/useOpenable"; -import { - ArchiveBoxIcon, - ArrowLongLeftIcon, - ArrowLongRightIcon, - EllipsisHorizontalIcon, - PencilSquareIcon, - UsersIcon, - XMarkIcon, -} from "@heroicons/react/24/outline"; +import { ArchiveBoxIcon, ArrowLongLeftIcon, ArrowLongRightIcon, EllipsisHorizontalIcon, PencilSquareIcon, UsersIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { useCallback, useMemo, useState } from "react"; import classes from "./classes.module.scss"; -import Autocomplete from "@Front/Components/DesignSystem/Autocomplete"; export default function DesignSystem() { const { isOpen, open, close } = useOpenable(); @@ -84,6 +77,29 @@ export default function DesignSystem() {
+ Autocomplete Multi Select + + Autocomplete Dropdown diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx index a0af3c56..fc6f4ce3 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx @@ -50,7 +50,7 @@ class AskDocumentsClass extends BasePage { .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid); return ( - {}}> +
diff --git a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx index 75d08e65..92095538 100644 --- a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx +++ b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx @@ -74,7 +74,7 @@ class UpdateClientClass extends BasePage { public override render(): JSX.Element { return ( - +
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx index a9aeaa84..fdcda8f0 100644 --- a/src/front/Components/Layouts/Folder/index.tsx +++ b/src/front/Components/Layouts/Folder/index.tsx @@ -6,10 +6,10 @@ import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNot import Module from "@Front/Config/Module"; import JwtService from "@Front/Services/JwtService/JwtService"; import { DocumentIcon } from "@heroicons/react/24/outline"; -import User, { OfficeFolder } from "le-coffre-resources/dist/Notary"; +import User from "le-coffre-resources/dist/Notary"; import Image from "next/image"; import Link from "next/link"; -import { useCallback, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import classes from "./classes.module.scss"; import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; @@ -17,14 +17,10 @@ import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus"; import { useRouter } from "next/router"; export default function Folder() { - const [_folder, setFolder] = useState(null); const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true); const router = useRouter(); const [activeUser, setActiveUser] = useState(); - const onSelectedFolder = useCallback((folder: OfficeFolder): void => { - setFolder(folder); - }, []); useEffect(() => { const decodedJwt = JwtService.getInstance().decodeJwt(); @@ -59,7 +55,7 @@ export default function Folder() { }, [router]); return ( - +
diff --git a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx index a74522b7..fc3708bb 100644 --- a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx +++ b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx @@ -39,7 +39,7 @@ class UpdateFolderMetadataClass extends BasePage { .get() .modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid); return ( - +
diff --git a/src/front/Components/Layouts/FolderArchived/index.tsx b/src/front/Components/Layouts/FolderArchived/index.tsx index 748e2001..2ee150f2 100644 --- a/src/front/Components/Layouts/FolderArchived/index.tsx +++ b/src/front/Components/Layouts/FolderArchived/index.tsx @@ -23,11 +23,7 @@ export default class FolderArchived extends BasePage { // TODO: Message if the user has not created any folder yet public override render(): JSX.Element { return ( - +
Informations du dossier diff --git a/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx b/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx index f6e8b91e..2a761172 100644 --- a/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx +++ b/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx @@ -117,7 +117,7 @@ export default function OfficeInformations(props: IProps) { ); return ( - +
Office {officeSelected?.crpcen + " - " + officeSelected?.name} diff --git a/src/front/Components/Layouts/Offices/index.tsx b/src/front/Components/Layouts/Offices/index.tsx index bded3736..5c060f27 100644 --- a/src/front/Components/Layouts/Offices/index.tsx +++ b/src/front/Components/Layouts/Offices/index.tsx @@ -9,7 +9,7 @@ type IState = {}; export default class Offices extends BasePage { public override render(): JSX.Element { return ( - +
Informations des offices diff --git a/src/front/Components/Layouts/Users/UserInformations/index.tsx b/src/front/Components/Layouts/Users/UserInformations/index.tsx index 2ffc406f..2a723553 100644 --- a/src/front/Components/Layouts/Users/UserInformations/index.tsx +++ b/src/front/Components/Layouts/Users/UserInformations/index.tsx @@ -210,7 +210,7 @@ export default function UserInformations(props: IProps) { }, [currentAppointment, getUser]); return ( - + {!isLoading && (
diff --git a/src/front/Components/Layouts/Users/index.tsx b/src/front/Components/Layouts/Users/index.tsx index 60f48873..b9da00ca 100644 --- a/src/front/Components/Layouts/Users/index.tsx +++ b/src/front/Components/Layouts/Users/index.tsx @@ -9,7 +9,7 @@ type IState = {}; export default class Users extends BasePage { public override render(): JSX.Element { return ( - +
Informations des utilisateurs