From 97729dc3cd395205557114d895c5371319ec326d Mon Sep 17 00:00:00 2001 From: "Arnaud D. Natali" <79214488+0xSaitama@users.noreply.github.com> Date: Tue, 19 Sep 2023 18:28:37 +0200 Subject: [PATCH 01/12] refacto header depending on rules (#60) --- src/front/Api/Entities/rule.ts | 3 + .../Header/BurgerMenu/BurgerModal/index.tsx | 133 ++++++++++++------ .../DesignSystem/Header/Navigation/index.tsx | 21 ++- .../Header/Profile/ProfileModal/index.tsx | 114 ++++++++++----- 4 files changed, 185 insertions(+), 86 deletions(-) diff --git a/src/front/Api/Entities/rule.ts b/src/front/Api/Entities/rule.ts index 72716a8e..06b21bde 100644 --- a/src/front/Api/Entities/rule.ts +++ b/src/front/Api/Entities/rule.ts @@ -13,4 +13,7 @@ export enum AppRuleActions { export enum AppRuleNames { users = "users", officeFolders = "folders", + officeRoles = "office-roles", + deedTypes = "deed-types", + offices = "offices" } diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx index f9b5dcfa..25593986 100644 --- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx +++ b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx @@ -4,6 +4,8 @@ import React from "react"; import NavigationLink from "../../NavigationLink"; import classes from "./classes.module.scss"; +import Rules, { RulesMode } from "@Front/Components/Elements/Rules"; +import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule"; type IProps = { isOpen: boolean; @@ -32,49 +34,94 @@ export default class BurgerModal extends React.Component { text="Dossiers archivés" routesActive={[Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path]} /> - - - - - + + + + + + + + + + + + + + +
diff --git a/src/front/Components/DesignSystem/Header/Navigation/index.tsx b/src/front/Components/DesignSystem/Header/Navigation/index.tsx index 3145fec9..6a494bea 100644 --- a/src/front/Components/DesignSystem/Header/Navigation/index.tsx +++ b/src/front/Components/DesignSystem/Header/Navigation/index.tsx @@ -3,6 +3,8 @@ import React from "react"; import HeaderLink from "../HeaderLink"; import classes from "./classes.module.scss"; +import Rules, { RulesMode } from "@Front/Components/Elements/Rules"; +import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule"; type IProps = {}; type IState = {}; @@ -24,11 +26,20 @@ export default class Navigation extends React.Component { path={Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path} routesActive={[Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path]} /> - + + +
); } diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx index 72500903..3314c522 100644 --- a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx +++ b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx @@ -4,6 +4,8 @@ import React from "react"; import NavigationLink from "../../NavigationLink"; import classes from "./classes.module.scss"; +import Rules, { RulesMode } from "@Front/Components/Elements/Rules"; +import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule"; type IProps = { isOpen: boolean; @@ -20,44 +22,80 @@ export default class ProfileModal extends React.Component {
- - - - + + + + + + + + + + + +
From 5422efd530d3c7cf741a9024fa70120f9156ebbd Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 20 Sep 2023 15:56:09 +0200 Subject: [PATCH 02/12] :bug: Fixing cookie undefined & rule component --- src/front/Components/Elements/Rules/index.tsx | 29 ++++---- .../Layouts/Roles/RolesCreate/index.tsx | 69 +++++++++++-------- src/front/Services/JwtService/JwtService.ts | 8 +-- src/middleware.ts | 16 ----- 4 files changed, 58 insertions(+), 64 deletions(-) diff --git a/src/front/Components/Elements/Rules/index.tsx b/src/front/Components/Elements/Rules/index.tsx index 889adf89..ecf66840 100644 --- a/src/front/Components/Elements/Rules/index.tsx +++ b/src/front/Components/Elements/Rules/index.tsx @@ -1,8 +1,8 @@ import React, { useCallback, useEffect } from "react"; -import { useRouter } from "next/router"; -import Module from "@Front/Config/Module"; import JwtService from "@Front/Services/JwtService/JwtService"; import { IAppRule } from "@Front/Api/Entities/rule"; +import { useRouter } from "next/router"; +import Module from "@Front/Config/Module"; export enum RulesMode { OPTIONAL = "optional", @@ -10,16 +10,18 @@ export enum RulesMode { } type IProps = { - isPage?: boolean; mode: RulesMode; rules: IAppRule[]; - no?: boolean; children: JSX.Element; + isPage?: boolean; }; export default function Rules(props: IProps) { const router = useRouter(); + const [isShowing, setIsShowing] = React.useState(false); + const [hasJwt, setHasJwt] = React.useState(false); + const getShowValue = useCallback(() => { if (props.mode === RulesMode.NECESSARY) { return props.rules.every((rule) => JwtService.getInstance().hasRule(rule.name, rule.action)); @@ -27,19 +29,18 @@ export default function Rules(props: IProps) { return !!props.rules.find((rule) => JwtService.getInstance().hasRule(rule.name, rule.action)); }, [props.mode, props.rules]); - const show = getShowValue(); - const [isShowing, setIsShowing] = React.useState(props.no ? !show : show); - useEffect(() => { - setIsShowing(props.no ? !show : show); - }, [props.no, show]); + if (!JwtService.getInstance().decodeJwt()) return; + setHasJwt(true); + setIsShowing(getShowValue()); + }, [getShowValue, isShowing]); - if (!isShowing && props.isPage) { - router.push(Module.getInstance().get().modules.pages.Home.props.path); - } - - if (!JwtService.getInstance().decodeJwt() || !isShowing) { + if (props.isPage && !isShowing) { + router.push(Module.getInstance().get().modules.pages[404].props.path); return null; } + + if (!hasJwt || !isShowing) return null; + return props.children; } diff --git a/src/front/Components/Layouts/Roles/RolesCreate/index.tsx b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx index 0fbbd749..d64b4e85 100644 --- a/src/front/Components/Layouts/Roles/RolesCreate/index.tsx +++ b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx @@ -12,6 +12,8 @@ import { useCallback, useState } from "react"; import classes from "./classes.module.scss"; import JwtService from "@Front/Services/JwtService/JwtService"; +import Rules, { RulesMode } from "@Front/Components/Elements/Rules"; +import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule"; type IProps = {}; export default function RolesCreate(props: IProps) { @@ -61,35 +63,44 @@ export default function RolesCreate(props: IProps) { }, [hasChanged, redirect]); return ( - -
-
- Créer un rôle + + +
+
+ Créer un rôle +
+
+ +
+ + +
+ + +
+ + Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées. + +
+
-
- -
- - -
- - -
- - Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées. - -
- -
- + + ); } diff --git a/src/front/Services/JwtService/JwtService.ts b/src/front/Services/JwtService/JwtService.ts index 86380536..a2fd9183 100644 --- a/src/front/Services/JwtService/JwtService.ts +++ b/src/front/Services/JwtService/JwtService.ts @@ -68,10 +68,8 @@ export default class JwtService { } public hasRule(name: string, action: string) { - const accessToken = CookieService.getInstance().getCookie("leCoffreAccessToken"); - if (!accessToken) return false; - const decodedToken = this.decodeJwt(); - if (!decodedToken) return false; - return decodedToken?.rules?.some((rule: string) => rule === `${action} ${name}`); + const token = this.decodeJwt(); + if (!token) return false; + return token?.rules?.some((rule: string) => rule === `${action} ${name}`); } } diff --git a/src/middleware.ts b/src/middleware.ts index 02594795..6422af83 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -25,22 +25,6 @@ export async function middleware(request: NextRequest) { return NextResponse.redirect(new URL("/login", request.url)); } - const requestUrlPath = request.nextUrl.pathname; - if ( - requestUrlPath.startsWith("/collaborators") || - requestUrlPath.startsWith("/deed-types") || - requestUrlPath.startsWith("/customer") || - requestUrlPath.startsWith("/offices") || - requestUrlPath.startsWith("/roles") || - requestUrlPath.startsWith("/users") - ) { - if (userDecodedToken.role !== "admin" && userDecodedToken.role !== "super-admin") - return NextResponse.redirect(new URL("/404", request.url)); - } - if ((requestUrlPath.startsWith("/my-account") || requestUrlPath.startsWith("/document-types")) && !userDecodedToken) - return NextResponse.redirect(new URL("/404", request.url)); - if (requestUrlPath.startsWith("/client-dashboard") && !customerDecodedToken) return NextResponse.redirect(new URL("/404", request.url)); - return NextResponse.next(); } From b56ef1f009984fd6a3320d3511d5a93b5d6149d3 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 20 Sep 2023 16:08:51 +0200 Subject: [PATCH 03/12] :bug: Fix highlight folder --- .../Components/DesignSystem/FolderListContainer/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx index abfeb50a..47af85be 100644 --- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx +++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx @@ -75,6 +75,11 @@ class FolderListContainerClass extends React.Component { ); } + public override componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any): void { + if (prevProps.selectedFolder !== this.props.selectedFolder) { + this.setState({ filteredFolders: this.props.folders, blocks: this.getBlocks(this.props.folders) }); + } + } private getBlocks(folders: OfficeFolder[]): IBlock[] { const pendingFolders = folders .filter((folder) => { From 9e05918afb08f050b95460427b83ff3dff74314d Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 20 Sep 2023 17:05:07 +0200 Subject: [PATCH 04/12] :sparkles: Date instead of text for date field --- .../Form/DateField/classes.module.scss | 102 ++++++++++++++++++ .../DesignSystem/Form/DateField/index.tsx | 56 ++++++++++ .../Folder/UpdateFolderMetadata/index.tsx | 5 +- 3 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 src/front/Components/DesignSystem/Form/DateField/classes.module.scss create mode 100644 src/front/Components/DesignSystem/Form/DateField/index.tsx diff --git a/src/front/Components/DesignSystem/Form/DateField/classes.module.scss b/src/front/Components/DesignSystem/Form/DateField/classes.module.scss new file mode 100644 index 00000000..0fda11ae --- /dev/null +++ b/src/front/Components/DesignSystem/Form/DateField/classes.module.scss @@ -0,0 +1,102 @@ +@import "@Themes/constants.scss"; + +.root { + position: relative; + + .input { + z-index: 1; + display: flex; + flex-direction: row; + align-items: center; + padding: 24px; + gap: 10px; + width: 100%; + height: 70px; + border: 1px solid var(--grey-medium); + + &:disabled { + cursor: not-allowed; + } + + &:focus { + ~ .fake-placeholder { + transform: translateY(-35px); + } + } + + &:not([data-value=""]) { + ~ .fake-placeholder { + transform: translateY(-35px); + } + } + + &[type="number"] { + &:focus { + ~ .fake-placeholder { + transform: translateY(-35px); + } + } + + &:not([data-value=""]) { + ~ .fake-placeholder { + transform: translateY(-35px); + } + } + + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + /* For Chrome, Safari, and Opera */ + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + /* For IE 10+ */ + &::-ms-inner-spin-button, + &::-ms-outer-spin-button { + display: none; + } + } + + &:not([data-value=""]) { + ~ .fake-placeholder { + transform: translateY(-35px); + } + } + + ~ .fake-placeholder { + z-index: 2; + top: 35%; + margin-left: 8px; + padding: 0 16px; + pointer-events: none; + position: absolute; + background: $white; + transition: transform 0.3s ease-in-out; + } + } + + &[data-is-errored="true"] { + .input { + border: 1px solid var(--red-flash); + ~ .fake-placeholder { + color: var(--red-flash); + } + } + } + + .copy-icon { + cursor: pointer; + height: 24px; + width: 24px; + position: absolute; + top: 50%; + right: 24px; + transform: translate(0, -50%); + } +} diff --git a/src/front/Components/DesignSystem/Form/DateField/index.tsx b/src/front/Components/DesignSystem/Form/DateField/index.tsx new file mode 100644 index 00000000..0c0e892a --- /dev/null +++ b/src/front/Components/DesignSystem/Form/DateField/index.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; +import { ReactNode } from "react"; +import CopyIcon from "@Assets/Icons/copy.svg"; +import BaseField, { IProps as IBaseFieldProps } from "../BaseField"; +import classes from "./classes.module.scss"; +import classnames from "classnames"; +import Image from "next/image"; + +export type IProps = IBaseFieldProps & { + canCopy?: boolean; +}; + +export default class DateField extends BaseField { + constructor(props: IProps) { + super(props); + this.state = this.getDefaultState(); + } + + public override render(): ReactNode { + const value = this.state.value ?? ""; + return ( + +
+ +
+ {this.props.placeholder} {!this.props.required && " (Facultatif)"} +
+ {this.props.canCopy && ( +
+ Copy icon +
+ )} +
+ {this.hasError() &&
{this.renderErrors()}
} + + ); + } + + private onCopyClick = (): void => { + if (this.props.canCopy) { + navigator.clipboard.writeText(this.state.value ?? ""); + } + }; +} diff --git a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx index 75501e12..6e3f30d5 100644 --- a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx +++ b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx @@ -13,6 +13,7 @@ import { NextRouter, useRouter } from "next/router"; import BasePage from "../../Base"; import classes from "./classes.module.scss"; +import DateField from "@Front/Components/DesignSystem/Form/DateField"; type IProps = {}; @@ -43,6 +44,8 @@ class UpdateFolderMetadataClass extends BasePage { value: this.state.selectedFolder?.deed?.deed_type?.uid, } as IOption; const openingDate = new Date(this.state.selectedFolder?.created_at ?? ""); + if (!this.state.selectedFolder?.created_at) return <>; + const defaultValue = openingDate.toISOString().split("T")[0]; return (
@@ -60,7 +63,7 @@ class UpdateFolderMetadataClass extends BasePage { defaultValue={this.state.selectedFolder?.folder_number} /> }
); } + 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) { @@ -140,15 +162,6 @@ export default class SelectField extends React.Component { return null; } - public override componentDidMount(): void { - this.onResize(); - this.removeOnresize = WindowStore.getInstance().onResize(() => this.onResize()); - } - - public override componentWillUnmount() { - this.removeOnresize(); - } - private onResize() { let listHeight = 0; let listWidth = 0; @@ -192,3 +205,8 @@ export default class SelectField extends React.Component { ); } } + +export default function SelectField(props: IProps) { + const router = useRouter(); + return ; +} diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx index 6ec149a5..639617fd 100644 --- a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx +++ b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx @@ -45,9 +45,9 @@ export default function CollaboratorInformations(props: IProps) { setRoleModalOpened(false); setSelectedOption({ value: userSelected?.office_role ? userSelected?.office_role?.uid : userSelected?.role?.uid, - label: userSelected?.office_role ? userSelected?.office_role?.name : userSelected?.role?.name!, + label: userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint", }); - }, [userSelected?.office_role, userSelected?.role?.name, userSelected?.role?.uid]); + }, [userSelected?.office_role, userSelected?.role?.uid]); const changeRole = useCallback(async () => { await Users.getInstance().put( @@ -133,7 +133,7 @@ export default function CollaboratorInformations(props: IProps) { setUserSelected(user); setSelectedOption({ value: user?.office_role ? user?.office_role?.uid : user?.role?.uid, - label: user?.office_role ? user?.office_role?.name : user?.role?.name!, + label: user?.office_role ? user?.office_role?.name : "Utilisateur restreint", }); } @@ -197,7 +197,6 @@ export default function CollaboratorInformations(props: IProps) { })} selectedOption={selectedOption!} onChange={handleRoleChange} - disabled={userSelected?.role?.name === "super-admin"} />
{userSelected?.role?.name !== "super-admin" && ( From 70732336c59198fc99730a2e407b73f5853fb901 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Thu, 21 Sep 2023 16:05:39 +0200 Subject: [PATCH 09/12] :sparkles: Select utilisateur restreint on page utilisateurs --- .../Layouts/Users/UserInformations/index.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/front/Components/Layouts/Users/UserInformations/index.tsx b/src/front/Components/Layouts/Users/UserInformations/index.tsx index 08e3c512..990b3de6 100644 --- a/src/front/Components/Layouts/Users/UserInformations/index.tsx +++ b/src/front/Components/Layouts/Users/UserInformations/index.tsx @@ -81,7 +81,11 @@ export default function UserInformations(props: IProps) { useEffect(() => { if (!userSelected) return; - setCurrentAppointment(userSelected?.appointment?.find((appointment) => appointment.status === EAppointmentStatus.OPEN && appointment.votes?.length != 0) ?? null); + setCurrentAppointment( + userSelected?.appointment?.find( + (appointment) => appointment.status === EAppointmentStatus.OPEN && appointment.votes?.length != 0, + ) ?? null, + ); }, [userSelected]); /** Functions for the admin modal */ @@ -271,7 +275,7 @@ export default function UserInformations(props: IProps) { onChange={handleRoleChange} selectedOption={{ value: userSelected?.office_role ? userSelected?.office_role?.uid : userSelected?.role?.uid, - label: userSelected?.office_role ? userSelected?.office_role?.name : userSelected?.role?.label!, + label: userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint", }} />
@@ -282,7 +286,12 @@ export default function UserInformations(props: IProps) {
- + {currentAppointment && (
From 5ee73384223ba0d2e806606abdcbeecef83da9f0 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Thu, 21 Sep 2023 16:10:03 +0200 Subject: [PATCH 10/12] :sparkles: Save popup on changing documents in deed types --- .../DeedTypes/DeedTypesInformations/index.tsx | 38 ++++++++++++++++--- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx index 78035956..dedab3c0 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx @@ -30,6 +30,7 @@ export default function DeedTypesInformations(props: IProps) { const [selectedDocuments, setSelectedDocuments] = useState([]); const [isDeleteModalOpened, setIsDeleteModalOpened] = useState(false); + const [isSaveModalOpened, setIsSaveModalOpened] = useState(false); const openDeleteModal = useCallback(() => { setIsDeleteModalOpened(true); @@ -39,6 +40,14 @@ export default function DeedTypesInformations(props: IProps) { setIsDeleteModalOpened(false); }, []); + const openSaveModal = useCallback(() => { + setIsSaveModalOpened(true); + }, []); + + const closeSaveModal = useCallback(() => { + setIsSaveModalOpened(false); + }, []); + const deleteDeedType = useCallback(async () => { await DeedTypes.getInstance().put( deedTypeUid as string, @@ -81,14 +90,19 @@ export default function DeedTypesInformations(props: IProps) { const onSubmitHandler = useCallback( async (e: React.FormEvent | null, values: { [key: string]: string }) => { - await DeedTypes.getInstance().put(deedTypeUid as string, { - uid: deedTypeUid as string, - document_types: selectedDocuments.map((document) => DocumentType.hydrate({ uid: document.value as string })), - }); + openSaveModal(); }, - [deedTypeUid, selectedDocuments], + [openSaveModal], ); + const saveDocumentTypes = useCallback(async () => { + await DeedTypes.getInstance().put(deedTypeUid as string, { + uid: deedTypeUid as string, + document_types: selectedDocuments.map((document) => DocumentType.hydrate({ uid: document.value as string })), + }); + closeSaveModal(); + }, [closeSaveModal, deedTypeUid, selectedDocuments]); + const onDocumentChangeHandler = useCallback((values: MultiValue) => { setSelectedDocuments(values as IOption[]); }, []); @@ -171,6 +185,20 @@ export default function DeedTypesInformations(props: IProps) {
+ +
+ + Les documents seront associés à ce type d'acte. + +
+
); From 917a917c97bfe3ffc06dfc212ac95f8a0ee65459 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Thu, 21 Sep 2023 16:14:46 +0200 Subject: [PATCH 11/12] :sparkles: Modifying text and adding a tooltip to deed types parameters --- .../DeedTypes/DeedTypesInformations/classes.module.scss | 3 +++ .../Layouts/DeedTypes/DeedTypesInformations/index.tsx | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/classes.module.scss b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/classes.module.scss index b81e9055..7f0fcf99 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/classes.module.scss +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/classes.module.scss @@ -72,6 +72,9 @@ border: 1px solid var(--grey); .container-title { + display: flex; + gap: 8px; + align-items: center; } .documents { diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx index dedab3c0..b5454cab 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx @@ -19,6 +19,7 @@ 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) { @@ -151,7 +152,8 @@ export default function DeedTypesInformations(props: IProps) {
- Documents paramétrés + Sélectionner les documents associés à ce type d'acte +
Date: Thu, 21 Sep 2023 16:17:55 +0200 Subject: [PATCH 12/12] :sparkles: Return button on documents --- .../DocumentTypesInformations/classes.module.scss | 12 ++++++++++++ .../DocumentTypesInformations/index.tsx | 12 ++++++++++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/classes.module.scss b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/classes.module.scss index c471a213..7aeed370 100644 --- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/classes.module.scss +++ b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/classes.module.scss @@ -1,6 +1,18 @@ @import "@Themes/constants.scss"; .root { + .header { + display: flex; + justify-content: space-between; + align-items: flex-start; + + @media (max-width: $screen-l) { + flex-direction: column; + align-items: flex-start; + gap: 24px; + } + } + .document-infos { display: flex; align-items: flex-start; diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx index f07303e6..82242224 100644 --- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx +++ b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx @@ -1,3 +1,4 @@ +import ChevronIcon from "@Assets/Icons/chevron.svg"; import PenICon from "@Assets/Icons/pen.svg"; import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; @@ -10,6 +11,7 @@ import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import classes from "./classes.module.scss"; +import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; export default function DocumentTypesInformations() { const router = useRouter(); @@ -33,8 +35,14 @@ export default function DocumentTypesInformations() { return (
-
- Paramétrage des documents +
+ Paramétrage des listes de pièces + + +