From ebd433c89edb129f61d7dadbc4972fc24aab3f39 Mon Sep 17 00:00:00 2001 From: Hugo Lextrait Date: Mon, 17 Apr 2023 11:25:08 +0200 Subject: [PATCH] :sparkles: add uid in url for folder --- .vscode/settings.json | 2 +- prettier.config.js | 37 +++--- .../DesignSystem/FolderList/index.tsx | 3 + .../Components/Elements/InputField/index.tsx | 1 + .../Layouts/AddClientToFolder/index.tsx | 2 - src/front/Components/Layouts/Folder/index.tsx | 26 ++-- .../ClientSection/classes.module.scss | 0 .../ClientSection/index.tsx | 2 +- .../FolderInformation/classes.module.scss | 72 +++++++++++ .../Layouts/FolderInformation/index.tsx | 114 ++++++++++++++++++ .../dossier/{ => [uid]}/ajouter-client.tsx | 0 src/pages/dossier/[uid]/index.tsx | 5 + 12 files changed, 232 insertions(+), 32 deletions(-) rename src/front/Components/Layouts/{Folder => FolderInformation}/ClientSection/classes.module.scss (100%) rename src/front/Components/Layouts/{Folder => FolderInformation}/ClientSection/index.tsx (95%) create mode 100644 src/front/Components/Layouts/FolderInformation/classes.module.scss create mode 100644 src/front/Components/Layouts/FolderInformation/index.tsx rename src/pages/dossier/{ => [uid]}/ajouter-client.tsx (100%) create mode 100644 src/pages/dossier/[uid]/index.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index 11ce1ece..5769e826 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,6 @@ { "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": false, + "editor.formatOnSave": true, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, diff --git a/prettier.config.js b/prettier.config.js index 90b63d98..32d80db4 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -1,17 +1,24 @@ module.exports = { - overrides: [ - { - files: ["src//*.ts", "src//.tsx", "src/**/.scss", "./*.js"], - options: { - tabWidth: 4, - useTabs: true, - singleQuote: false, - trailingComma: "all", - printWidth: 140, - endOfLine: "lf", - semi: true, - bracketSameLine: true, - }, - }, - ], + overrides: [ + { + files: [ + "src//*.ts", + "src//.tsx", + "src/**/.scss", + "./*.js", + ], + options: { + tabWidth: 4, + useTabs: true, + singleQuote: false, + trailingComma: + "all", + printWidth: 140, + endOfLine: + "lf", + semi: true, + bracketSameLine: true, + }, + }, + ], }; diff --git a/src/front/Components/DesignSystem/FolderList/index.tsx b/src/front/Components/DesignSystem/FolderList/index.tsx index 36227b8e..dbaa0e3f 100644 --- a/src/front/Components/DesignSystem/FolderList/index.tsx +++ b/src/front/Components/DesignSystem/FolderList/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import classes from "./classes.module.scss"; import FolderContainer from "../FolderContainer"; import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; +import Link from "next/link"; type IProps = { folders: IDashBoardFolder[]; @@ -16,7 +17,9 @@ export default class FolderList extends React.Component { return
{this.props.folders.map((folder) => { return
+ ; +
})};
; diff --git a/src/front/Components/Elements/InputField/index.tsx b/src/front/Components/Elements/InputField/index.tsx index 39f443af..6b4a00ec 100644 --- a/src/front/Components/Elements/InputField/index.tsx +++ b/src/front/Components/Elements/InputField/index.tsx @@ -42,6 +42,7 @@ export default class InputField extends React.Component { {this.props.inputStatus === "success" && success icon} {this.props.inputStatus === "error" && error icon} + {this.props.errorMsg &&
{this.props.errorMsg}
} diff --git a/src/front/Components/Layouts/AddClientToFolder/index.tsx b/src/front/Components/Layouts/AddClientToFolder/index.tsx index 54435a55..af9b7df0 100644 --- a/src/front/Components/Layouts/AddClientToFolder/index.tsx +++ b/src/front/Components/Layouts/AddClientToFolder/index.tsx @@ -38,7 +38,6 @@ export default class AddClientToFolder extends BasePage{ { value: "adazzqsdaad", label: "jane Doe" }, { value: "adazzqsdaad", label: "Marcelino Doe" }, ]; - console.log("this.state.hasNewClientSelected", this.state.hasNewClientSelected) return (
@@ -80,7 +79,6 @@ export default class AddClientToFolder extends BasePage{ } private onMutiSelectChange(newValue: MultiValue, actionMeta: ActionMeta): void { - console.log(newValue.length <= 0) if (newValue.length <= 0) { this.setState({ hasNewClientSelected: false }); return; diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx index 119a0e96..f3eba143 100644 --- a/src/front/Components/Layouts/Folder/index.tsx +++ b/src/front/Components/Layouts/Folder/index.tsx @@ -2,13 +2,13 @@ import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/Layo import BasePage from "../Base"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import classes from "./classes.module.scss"; -import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; -import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation"; -import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; -import ClientSection from "./ClientSection"; -import ChevronIcon from "@Assets/Icons/chevron.svg"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; -import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; +// import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; +// import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation"; +// import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; +// import ClientSection from "./ClientSection"; +// import ChevronIcon from "@Assets/Icons/chevron.svg"; +// import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +// import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; type IProps = {}; type IState = { @@ -32,7 +32,7 @@ export default class Folder extends BasePage{ return (
- {this.state.selectedFolder + {/* {this.state.selectedFolder ?
@@ -69,13 +69,13 @@ export default class Folder extends BasePage{
- : + : */}
Informations du dossier
Veuillez sélectionner un dossier.
-
} +
); @@ -84,9 +84,9 @@ export default class Folder extends BasePage{ // const users = await Users.getInstance().getByUid("5rOlvAleeX"); } - private doesFolderHaveCustomer(): boolean { - return this.state.selectedFolder?.office_folder_has_customers !== undefined; - } + // private doesFolderHaveCustomer(): boolean { + // return this.state.selectedFolder?.office_folder_has_customers !== undefined; + // } private onSelectedFolder(folder: IDashBoardFolder): void { this.setState({ selectedFolder: folder }); diff --git a/src/front/Components/Layouts/Folder/ClientSection/classes.module.scss b/src/front/Components/Layouts/FolderInformation/ClientSection/classes.module.scss similarity index 100% rename from src/front/Components/Layouts/Folder/ClientSection/classes.module.scss rename to src/front/Components/Layouts/FolderInformation/ClientSection/classes.module.scss diff --git a/src/front/Components/Layouts/Folder/ClientSection/index.tsx b/src/front/Components/Layouts/FolderInformation/ClientSection/index.tsx similarity index 95% rename from src/front/Components/Layouts/Folder/ClientSection/index.tsx rename to src/front/Components/Layouts/FolderInformation/ClientSection/index.tsx index 91136c9d..82fba79f 100644 --- a/src/front/Components/Layouts/Folder/ClientSection/index.tsx +++ b/src/front/Components/Layouts/FolderInformation/ClientSection/index.tsx @@ -24,7 +24,7 @@ export default class ClientSection extends React.Component {
Aucun client n’est associé au dossier.
- +
} diff --git a/src/front/Components/Layouts/FolderInformation/classes.module.scss b/src/front/Components/Layouts/FolderInformation/classes.module.scss new file mode 100644 index 00000000..8c0772b4 --- /dev/null +++ b/src/front/Components/Layouts/FolderInformation/classes.module.scss @@ -0,0 +1,72 @@ +@import "@Themes/constants.scss"; + +.root { + display: flex; + align-items: center; + flex-direction: column; + min-height: 100%; + + .no-folder-selected { + width: 100%; + + .choose-a-folder { + margin-top: 96px; + text-align: center; + } + } + + .folder-informations { + width: 100%; + min-height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + flex-grow: 1; + + .folder-header { + width: 100%; + + .header { + margin-bottom: 32px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + } + } + + .second-box { + margin-top: 24px; + margin-bottom: 32px; + } + + .progress-bar { + margin-bottom: 32px; + } + + .button-container { + width: 100%; + text-align: center; + :first-child { + margin-right: 12px; + } + > * { + margin: auto; + } + @media (max-width: $screen-m) { + :first-child { + margin-right: 0; + margin-bottom: 12px; + } + > * { + width: 100%; + } + } + } + .modal-title{ + margin-bottom: 24px; + } + } +} \ No newline at end of file diff --git a/src/front/Components/Layouts/FolderInformation/index.tsx b/src/front/Components/Layouts/FolderInformation/index.tsx new file mode 100644 index 00000000..0a7db9d8 --- /dev/null +++ b/src/front/Components/Layouts/FolderInformation/index.tsx @@ -0,0 +1,114 @@ +import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; +import BasePage from "../Base"; +import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; +import classes from "./classes.module.scss"; +import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; +import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation"; +import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; +import ClientSection from "./ClientSection"; +import ChevronIcon from "@Assets/Icons/chevron.svg"; +import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; +import { useRouter } from "next/router"; + +type IPropsClass = { + selectedFolderUid: string; +}; +type IState = { + selectedFolder: IDashBoardFolder | null; + isArchivedModalOpen: boolean; +}; +class FolderInformationClass extends BasePage{ + public constructor(props: IPropsClass) { + super(props); + this.state = { + selectedFolder: null, + isArchivedModalOpen: false, + }; + this.onSelectedFolder = this.onSelectedFolder.bind(this); + this.openArchivedModal = this.openArchivedModal.bind(this); + this.closeArchivedModal = this.closeArchivedModal.bind(this); + } + + // TODO: Message if the user has not created any folder yet + public override render(): JSX.Element { + return ( + +
+ {this.state.selectedFolder + ? +
+
+
+ Informations du dossier + +
+ +
+ +
+
+ +
+ {this.doesFolderHaveCustomer() && } +
+ + {!this.doesFolderHaveCustomer() && } + +
+ + +
+ +
+ Souhaitez-vous vraiment archiver le dossier ? +
+ +
+
+ : +
+ Informations du dossier +
+ Veuillez sélectionner un dossier. +
+
} +
+
+ ); + } + public override async componentDidMount() { + // if() + // const selectedFolder = await Fodler.getInstance().getByUid(this.props.selectedFolderUid); + // this.setState({ selectedFolder }); + } + + private doesFolderHaveCustomer(): boolean { + return this.state.selectedFolder?.office_folder_has_customers !== undefined; + } + + private onSelectedFolder(folder: IDashBoardFolder): void { + this.setState({ selectedFolder: folder }); + } + + private openArchivedModal(): void { + this.setState({ isArchivedModalOpen: true }); + } + + private closeArchivedModal(): void { + this.setState({ isArchivedModalOpen: false }); + } +} + +export default function FolderInformation() { + const router = useRouter(); + let { uid } = router.query; + uid = uid as string; + return ; +} diff --git a/src/pages/dossier/ajouter-client.tsx b/src/pages/dossier/[uid]/ajouter-client.tsx similarity index 100% rename from src/pages/dossier/ajouter-client.tsx rename to src/pages/dossier/[uid]/ajouter-client.tsx diff --git a/src/pages/dossier/[uid]/index.tsx b/src/pages/dossier/[uid]/index.tsx new file mode 100644 index 00000000..ed68037c --- /dev/null +++ b/src/pages/dossier/[uid]/index.tsx @@ -0,0 +1,5 @@ +import FolderInformation from "@Front/Components/Layouts/FolderInformation"; + +export default function Route() { + return ; +}