4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ refont page select folder client side

Browse Source
This commit is contained in:
Max S 2024-08-13 12:35:51 +02:00
parent 828058d430
commit 065e8ad559
5 changed files with 64 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
View File

@ -75,4 +75,8 @@
display: block;
}
}
&[data-fullwidth="true"] {
width: 100%;
}
}

5
src/front/Components/DesignSystem/SearchBlockList/index.tsx
View File

@ -14,9 +14,10 @@ export type ISearchBlockListProps = {
text: string;
link: string;
};
fullwidth?: boolean;
};
export default function SearchBlockList(props: ISearchBlockListProps) {
const { blocks, onSelectedBlock, bottomButton } = props;
const { blocks, onSelectedBlock, bottomButton, fullwidth = false } = props;
const [selectedBlock, setSelectedBlock] = useState<IBlock | null>(null);
const router = useRouter();
@ -69,7 +70,7 @@ export default function SearchBlockList(props: ISearchBlockListProps) {
}, [blocks]);
return (
<div className={classes["root"]}>
<div className={classes["root"]} data-fullwidth={fullwidth}>
<div className={classes["searchbar"]} ref={searchBarRef}>
<SearchBar placeholder="Chercher" onChange={handleSearchChange} />
{bottomButton && (

4
src/front/Components/Layouts/Folder/index.tsx
View File

@ -62,13 +62,13 @@ export default function Folder() {
<Image src={LogoIcon} alt="logo" />
{activeUser && activeUser.contact && (
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
Bonjour {activeUser.contact.first_name}, bienvenue sur LeCoffre.io
</Typography>
)}
{!activeUser ||
(!activeUser.contact && (
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
Bonjour, bienvenue sur LeCoffre.io
</Typography>
))}

29
src/front/Components/Layouts/SelectFolder/classes.module.scss
View File

@ -1,17 +1,22 @@
.root {
position: relative;
.select-folder-container {
max-width: 530px;
padding: 80px 72px;
@import "@Themes/constants.scss";
.root {
margin: 80px auto;
width: 472px;
display: flex;
flex-direction: column;
gap: var(--spacing-xl, 32px);
@media (max-width: $screen-s) {
width: 100%;
margin: 0;
padding: var(--spacing-md, 16px);
}
.title-container {
display: flex;
flex-direction: column;
justify-content: center;
gap: 48px;
margin: auto;
background-color: white;
.title {
text-align: center;
}
gap: var(--spacing-sm, 8px);
}
}

68
src/front/Components/Layouts/SelectFolder/index.tsx
View File

@ -1,26 +1,28 @@
import backgroundImage from "@Assets/images/background_refonte.svg";
import LogoIcon from "@Assets/logo_small_blue.svg";
import Folders from "@Front/Api/LeCoffreApi/Customer/Folders/Folders";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import JwtService from "@Front/Services/JwtService/JwtService";
import { OfficeFolder } from "le-coffre-resources/dist/Customer";
import Image from "next/image";
import { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react";
import LandingImage from "../Login/landing-connect.jpeg";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
export default function SelectFolder() {
const [folders, setFolders] = useState<OfficeFolder[]>([]);
const router = useRouter();
useEffect(() => {
async function getFolders() {
const jwt = JwtService.getInstance().decodeCustomerJwt();
if (!jwt) return;
const jwt = JwtService.getInstance().decodeCustomerJwt();
if (!jwt) return;
const folders = await Folders.getInstance().get({
Folders.getInstance()
.get({
q: {
where: {
customers: {
@ -40,11 +42,8 @@ export default function SelectFolder() {
customers: true,
},
},
});
setFolders(folders);
}
getFolders();
})
.then((folders) => setFolders(folders));
}, []);
const handleSelectBlock = useCallback(
@ -55,26 +54,35 @@ export default function SelectFolder() {
);
return (
<DefaultDoubleSidePage title="Sélectionner un dossier" image={LandingImage}>
<DefaultDoubleSidePage title="Sélectionner un dossier" image={backgroundImage}>
<div className={classes["root"]}>
<div className={classes["select-folder-container"]}>
<div className={classes["title"]}>
<Typography typo={ETypo.DISPLAY_LARGE}>Vos dossiers</Typography>
</div>
<div className={classes["folders-container"]}>
<BlockList
onSelectedBlock={handleSelectBlock}
blocks={folders.map((folder) => {
return {
id: folder.uid!,
primaryText: folder.name!,
selected: false,
};
})}
/>
</div>
<div className={classes["title-container"]}>
<Image src={LogoIcon} alt="logo" width={56} />
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
Vos dossiers en cours
</Typography>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_PRIMARY}>
Veuillez sélectionner le dossier pour lequel vous souhaitez déposer ou consulter des documents.
</Typography>
</div>
<Typography typo={ETypo.TITLE_H6} color={ETypoColor.TEXT_ACCENT}>
Liste des dossiers disponibles :
</Typography>
<SearchBlockList blocks={getBlocks(folders)} onSelectedBlock={handleSelectBlock} fullwidth />
</div>
</DefaultDoubleSidePage>
);
}
function getBlocks(folders: OfficeFolder[]): IBlock[] {
return folders.map((folder) => {
return {
id: folder.uid!,
primaryText: folder.name!,
secondaryText: folder.folder_number!,
};
});
}