diff --git a/src/front/Components/DesignSystem/Autocomplete/index.tsx b/src/front/Components/DesignSystem/Autocomplete/index.tsx index 7b081c11..a5169574 100644 --- a/src/front/Components/DesignSystem/Autocomplete/index.tsx +++ b/src/front/Components/DesignSystem/Autocomplete/index.tsx @@ -13,12 +13,12 @@ type IProps = { placeholder?: string; disabled?: boolean; label?: string; - onSelect?: (option: IOption) => void; + onSelectionChange?: (option: IOption | null) => void; selectedOption?: IOption | null; }; export default function Autocomplete(props: IProps) { - const { options, placeholder, disabled, label, selectedOption: selectedOptionProps } = props; + const { onSelectionChange, options, placeholder, disabled, label, selectedOption: selectedOptionProps } = props; const [selectedOption, setSelectedOption] = useState(selectedOptionProps ?? null); const [searchValue, setSearchValue] = useState(""); const [filteredOptions, setFilteredOptions] = useState(options); @@ -47,17 +47,25 @@ export default function Autocomplete(props: IProps) { [openable], ); + const handleChange = useCallback( + (option: IOption | null) => { + setSelectedOption(option); + onSelectionChange?.(option); + }, + [onSelectionChange], + ); + useEffect(() => { setSelectedOption(selectedOptionProps ?? null); }, [selectedOptionProps]); const handleSelectOption = useCallback( (newOption: IOption, _options: IOption[]) => { - setSelectedOption(newOption); + handleChange(newOption); setSearchValue(getLabel(newOption) || ""); openable.close(); }, - [openable], + [handleChange, openable], ); return ( @@ -65,8 +73,7 @@ export default function Autocomplete(props: IProps) { options={filteredOptions} openable={openable} onSelect={handleSelectOption} - selectedOptions={selectedOption ? [selectedOption] : []} - > + selectedOptions={selectedOption ? [selectedOption] : []}>
{label && ( @@ -79,7 +86,7 @@ export default function Autocomplete(props: IProps) { disabled={disabled} onChange={handleSearchChange} value={searchValue} - onClear={() => setSelectedOption(null)} + onClear={() => handleChange(null)} onFocus={openable.open} /> diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/index.tsx b/src/front/Components/DesignSystem/AutocompleteMultiSelect/index.tsx index 4274bf89..700040db 100644 --- a/src/front/Components/DesignSystem/AutocompleteMultiSelect/index.tsx +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/index.tsx @@ -1,24 +1,24 @@ import useOpenable from "@Front/Hooks/useOpenable"; import { useCallback, useEffect, useState } from "react"; +import { getLabel } from "../Dropdown"; 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"; +import classes from "./classes.module.scss"; type IProps = { options: IOption[]; placeholder?: string; disabled?: boolean; label?: string; - onSelect?: (option: IOption) => void; + onSelectionChange?: (options: IOption[] | null) => void; selectedOptions?: IOption[] | null; }; export default function AutocompleteMultiSelect(props: IProps) { - const { options, placeholder, disabled, label, selectedOptions: selectedOptionsProps } = props; + const { onSelectionChange, options, placeholder, disabled, label, selectedOptions: selectedOptionsProps } = props; const [selectedOptions, setSelectedOptions] = useState(selectedOptionsProps ?? null); const [searchValue, setSearchValue] = useState(""); const [filteredOptions, setFilteredOptions] = useState(options); @@ -27,7 +27,6 @@ export default function AutocompleteMultiSelect(props: IProps) { 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); @@ -47,17 +46,25 @@ export default function AutocompleteMultiSelect(props: IProps) { [openable], ); + const handleChange = useCallback( + (options: IOption[] | null) => { + setSelectedOptions(options); + onSelectionChange?.(options); + }, + [onSelectionChange], + ); + useEffect(() => { setSelectedOptions(selectedOptionsProps ?? null); }, [selectedOptionsProps]); const handleSelectOption = useCallback( (_newOption: IOption, options: IOption[]) => { - setSelectedOptions(options); + handleChange(options); setSearchValue(""); openable.close(); }, - [openable], + [handleChange, openable], ); return ( @@ -78,10 +85,10 @@ export default function AutocompleteMultiSelect(props: IProps) { disabled={disabled} onChange={handleSearchChange} value={searchValue} - onClear={() => setSelectedOptions(null)} + onClear={() => handleChange(null)} onFocus={openable.open} selectedOptions={selectedOptions ?? []} - onSelectedOptionsChange={setSelectedOptions} + onSelectedOptionsChange={handleChange} /> ); diff --git a/src/front/Components/DesignSystem/Dropdown/classes.module.scss b/src/front/Components/DesignSystem/Dropdown/classes.module.scss index ccb9c08a..d2b3d7b3 100644 --- a/src/front/Components/DesignSystem/Dropdown/classes.module.scss +++ b/src/front/Components/DesignSystem/Dropdown/classes.module.scss @@ -30,6 +30,7 @@ padding: 0px var(--spacing-2, 16px); align-items: center; flex: 1 0 0; + gap: 4px; } svg { diff --git a/src/front/Components/DesignSystem/Dropdown/index.tsx b/src/front/Components/DesignSystem/Dropdown/index.tsx index b00cacea..f325a0e5 100644 --- a/src/front/Components/DesignSystem/Dropdown/index.tsx +++ b/src/front/Components/DesignSystem/Dropdown/index.tsx @@ -13,12 +13,12 @@ type IProps = { label?: string; placeholder?: string; disabled?: boolean; - onSelect?: (option: IOption) => void; + onSelectionChange?: (option: IOption) => void; selectedOption?: IOption | null; }; export default function Dropdown(props: IProps) { - const { options, placeholder, disabled, onSelect, selectedOption: selectedOptionProps, label } = props; + const { options, placeholder, disabled, onSelectionChange, selectedOption: selectedOptionProps, label } = props; const [selectedOption, setSelectedOption] = useState(selectedOptionProps ?? null); const openable = useOpenable({ defaultOpen: false }); @@ -29,9 +29,9 @@ export default function Dropdown(props: IProps) { const handleOnSelect = useCallback( (newOption: IOption, _options: IOption[]) => { setSelectedOption(newOption); - onSelect?.(newOption); + onSelectionChange?.(newOption); }, - [onSelect], + [onSelectionChange], ); return ( @@ -55,12 +55,7 @@ export default function Dropdown(props: IProps) { ])} onClick={openable.toggle}>
- - {getLabel(selectedOption) ?? placeholder} - + {getLabelContent(selectedOption, placeholder)}
@@ -74,5 +69,44 @@ export function getLabel(option: IOption | null): string | null { if (typeof option.label === "string") { return option.label; } - return `${option.label.text} ${option.label.subtext}`; + return `${option.label.text}, ${option.label.subtext}`; +} + +function getLabelContent(option: IOption | null, placeholder?: string) { + if (!option) + return ( + + {placeholder} + + ); + + if (typeof option.label === "string") { + return ( + + {option.label} + + ); + } + + return ( + + + {`${option.label.text} , `} + + + {option.label.subtext} + + + ); } diff --git a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss deleted file mode 100644 index 560b12a5..00000000 --- a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - display: flex; - flex-direction: column; - justify-content: space-between; -} diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx deleted file mode 100644 index 188bcfd6..00000000 --- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import Module from "@Front/Config/Module"; -import { OfficeFolder } from "le-coffre-resources/dist/Notary"; -import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document"; -import { useRouter } from "next/router"; -import React, { useCallback, useEffect } from "react"; - -import classes from "./classes.module.scss"; -import { IBlock } from "../SearchBlockList/BlockList/Block"; -import SearchBlockList from "../SearchBlockList"; - -type IProps = { - folders: OfficeFolder[]; - isArchived: boolean; -}; - -export default function FolderListContainer(props: IProps) { - const router = useRouter(); - const { folderUid } = router.query; - const { folders, isArchived } = props; - - const redirectPath: string = isArchived - ? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path - : Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path; - - const getBlocks = useCallback( - (folders: OfficeFolder[]): IBlock[] => { - const pendingFolders = 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 = 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 { - id: folder.uid!, - primaryText: folder.name, - secondaryText: folder.folder_number, - isActive: folderUid === folder.uid, - showAlert: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED), - }; - }); - }, - [folderUid], - ); - - const [blocks, setBlocks] = React.useState(getBlocks(folders)); - - const onSelectedFolder = (block: IBlock) => { - const folder = folders.find((folder) => folder.uid === block.id); - if (!folder) return; - const path = redirectPath.replace("[folderUid]", folder.uid ?? ""); - router.push(path); - }; - - useEffect(() => { - setBlocks(getBlocks(folders)); - }, [folders, getBlocks]); - - return ( -
- -
- ); -} diff --git a/src/front/Components/DesignSystem/Footer/classes.module.scss b/src/front/Components/DesignSystem/Footer/classes.module.scss index f9a12433..16d6a0fb 100644 --- a/src/front/Components/DesignSystem/Footer/classes.module.scss +++ b/src/front/Components/DesignSystem/Footer/classes.module.scss @@ -8,13 +8,12 @@ font-size: 12px; font-weight: var(--font-text-weight-regular, 400); letter-spacing: 0.06px; - .sub-root { display: flex; align-items: center; gap: var(--Radius-lg, 16px); white-space: nowrap; - padding: 0 360px; + padding: var(--spacing-1-5, 12px) var(--Radius-xl, 24px); //make it sticky @media (max-width: 1023px) { diff --git a/src/front/Components/DesignSystem/Footer/desktop.tsx b/src/front/Components/DesignSystem/Footer/desktop.tsx index d0eb1772..023fb75e 100644 --- a/src/front/Components/DesignSystem/Footer/desktop.tsx +++ b/src/front/Components/DesignSystem/Footer/desktop.tsx @@ -1,20 +1,25 @@ import React from "react"; import classes from "./classes.module.scss"; +import Link from "next/link"; +import Module from "@Front/Config/Module"; +import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard"; type IProps = { className?: string; }; +const legalPages = Module.getInstance().get().modules.pages.Legal.pages.LegalInformations.props.path; + export default function Desktop({ className }: IProps) { return (
© Copyright lecoffre 2024 - Conditions d'utilisation + Conditions d'utilisation - Politique de confidentialité + Politique de confidentialité - Politique des cookies + Politique des cookies
); } diff --git a/src/front/Components/DesignSystem/Footer/index.tsx b/src/front/Components/DesignSystem/Footer/index.tsx index 8867ec7f..9a23212f 100644 --- a/src/front/Components/DesignSystem/Footer/index.tsx +++ b/src/front/Components/DesignSystem/Footer/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import classes from "./classes.module.scss"; import Mobile from "./mobile"; import Desktop from "./desktop"; @@ -9,6 +9,9 @@ type IProps = { }; export default function Footer({ className }: IProps) { + useEffect(() => { + document.documentElement.style.setProperty("--footer-height", `43px`); + }); return (