diff --git a/src/front/Assets/icons/loop.svg b/src/front/Assets/icons/loop.svg new file mode 100644 index 00000000..bac9066a --- /dev/null +++ b/src/front/Assets/icons/loop.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/front/Components/DesignSystem/FolderContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderContainer/classes.module.scss index 2ccc11e6..0e7a13ec 100644 --- a/src/front/Components/DesignSystem/FolderContainer/classes.module.scss +++ b/src/front/Components/DesignSystem/FolderContainer/classes.module.scss @@ -8,16 +8,17 @@ padding: 24px; border: 1px solid $grey-medium; + &:hover{ + background-color: $grey-medium; + } + .left-side { display: inline-flex; justify-content: space-between; align-items: center; - .warning-circle { + .warning{ margin-left: 32px; - padding: 6px; - border-radius: 100px; - background-color: $orange-flash; } } } \ No newline at end of file diff --git a/src/front/Components/DesignSystem/FolderContainer/index.tsx b/src/front/Components/DesignSystem/FolderContainer/index.tsx index 492c5c9e..d97d8be7 100644 --- a/src/front/Components/DesignSystem/FolderContainer/index.tsx +++ b/src/front/Components/DesignSystem/FolderContainer/index.tsx @@ -8,7 +8,7 @@ import WarningBadge from "../WarningBadge"; type IProps = { folder: { - folder_number: OfficeFolder["folder_number"]; + folder_number: OfficeFolder["folder_number"] ; documents?: OfficeFolder["documents"]; }; } @@ -19,15 +19,14 @@ export default class FolderContainer extends React.Component { return
{"Dossier ".concat(this.props.folder.folder_number)} - {this.countPendingDocuments() > 0 && } - + {this.countPendingDocuments() > 0 &&
}
chevron
; } private countPendingDocuments(): number { - if(!this.props.folder.documents) return 0; + if (!this.props.folder.documents) return 0; return this.props.folder.documents?.filter((document) => document.document_status === "PENDING").length ?? 0; } } diff --git a/src/front/Components/DesignSystem/FolderList/classes.module.scss b/src/front/Components/DesignSystem/FolderList/classes.module.scss new file mode 100644 index 00000000..f68b3ab0 --- /dev/null +++ b/src/front/Components/DesignSystem/FolderList/classes.module.scss @@ -0,0 +1,4 @@ +@import "@Themes/constants.scss"; + +.root { +} diff --git a/src/front/Components/DesignSystem/FolderList/index.tsx b/src/front/Components/DesignSystem/FolderList/index.tsx new file mode 100644 index 00000000..eda8afe1 --- /dev/null +++ b/src/front/Components/DesignSystem/FolderList/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import classes from "./classes.module.scss"; +import FolderContainer from "../FolderContainer"; +import { IFolder } from "../SearchBar"; + +type IProps = { + folders: IFolder[]; +}; + +type IState = {}; + +export default class FolderList extends React.Component { + public override render(): JSX.Element { + return
+ {this.props.folders.map((folder) => { + + return ; + })}; +
; + } +} diff --git a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss new file mode 100644 index 00000000..f68b3ab0 --- /dev/null +++ b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss @@ -0,0 +1,4 @@ +@import "@Themes/constants.scss"; + +.root { +} diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx new file mode 100644 index 00000000..8b48b6fe --- /dev/null +++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import classes from "./classes.module.scss"; +import SearchBar, { IFolder } from "../SearchBar"; +import Button from "../Button"; +import FolderList from "../FolderList"; + +type IProps = { + folders: IFolder[]; +}; +type IState = { + filteredFolders: IFolder[]; +}; + +export default class FolderListContainer extends React.Component { + //coinstructor + public constructor(props: IProps) { + super(props); + this.state = { + filteredFolders: this.props.folders, + }; + this.filterFolders = this.filterFolders.bind(this); + } + + public override render(): JSX.Element { + return
+ + + +
; + } + + private filterFolders(folders: IFolder[]) :IFolder[] { + this.setState({ filteredFolders: folders }) + return folders; + } +} diff --git a/src/front/Components/DesignSystem/SearchBar/classes.module.scss b/src/front/Components/DesignSystem/SearchBar/classes.module.scss new file mode 100644 index 00000000..c7f1a739 --- /dev/null +++ b/src/front/Components/DesignSystem/SearchBar/classes.module.scss @@ -0,0 +1,31 @@ +@import "@Themes/constants.scss"; + +.root { + display: flex; + align-items: center; + padding-left: 24px; + background-color: $white; + border: 1px solid $grey-medium; + position: relative; + + .fake-placeholder { + position: absolute; + left: 47px; + top: 24px; + color: $grey; + pointer-events: none; + } + + .input { + border: 0; + margin-left: 8px; + padding: 24px 0; + width: 100%; + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 22px; + color: $grey; + } +} \ No newline at end of file diff --git a/src/front/Components/DesignSystem/SearchBar/index.tsx b/src/front/Components/DesignSystem/SearchBar/index.tsx new file mode 100644 index 00000000..f6503f19 --- /dev/null +++ b/src/front/Components/DesignSystem/SearchBar/index.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import classes from "./classes.module.scss"; +import LoopIcon from "@Assets/Icons/loop.svg"; +import Image from "next/image"; +import Typography, { ITypo } from "../Typography"; +import { OfficeFolder } from "le-coffre-resources/dist/Customer"; + +type IProps = { + folders: IFolder[]; + onChange?: (folders: IFolder[]) => IFolder[]; +}; +type IState = { + hasValue: boolean; +}; + +export type IFolder = { + folder_number: OfficeFolder["folder_number"]; + documents?: OfficeFolder["documents"]; +}; + +export default class SearchBar extends React.Component { + public constructor(props: IProps) { + super(props); + this.state = { + hasValue: false, + }; + this.doesInputHaveValue = this.doesInputHaveValue.bind(this); + this.onChange = this.onChange.bind(this); + } + public override render(): JSX.Element { + return
+ Loop icon + {!this.state.hasValue &&
Select
} + +
; + } + + private onChange(event: React.ChangeEvent) { + const hasValue = event.target.value.length > 0 + this.doesInputHaveValue(hasValue); + if (!this.props.onChange) return; + this.props.onChange(this.filterFolders(event)); + } + + private doesInputHaveValue(hasValue: boolean) { + this.setState({ hasValue }); + } + + private filterFolders(event: React.ChangeEvent) { + const filteredFolders: IFolder[] = this.props.folders.filter((folder) => folder.folder_number.includes(event.target.value)); + return filteredFolders; + } +} diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx index 4f68f05a..1c3089fe 100644 --- a/src/front/Components/DesignSystem/UserFolder/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/index.tsx @@ -130,7 +130,6 @@ export default class UserFolder extends React.Component { } private openDeletionModal(uid: string): void { - console.log("Delete item > ", uid); // TODO: call API to delete document this.setState({ isOpenDeletionModal: true diff --git a/src/front/Components/Layouts/DesignSystem/dummyData.ts b/src/front/Components/Layouts/DesignSystem/dummyData.ts index a5c04efd..ce25c07f 100644 --- a/src/front/Components/Layouts/DesignSystem/dummyData.ts +++ b/src/front/Components/Layouts/DesignSystem/dummyData.ts @@ -48,19 +48,6 @@ export const deed: Deed = { updated_at: new Date(), }; -export const folder: OfficeFolder = { - uid: "11123312", - folder_number: "12331", - name: "Mon dossier", - status: EFolderStatus.ARCHIVED, - deed: deed, - office: office, - created_at: new Date(), - updated_at: new Date(), - description: "Description", - archived_description: "Archived description", -}; - export const contact: Contact = { uid: "123123", first_name: "John", @@ -90,6 +77,18 @@ export const customer: Customer = { updated_at: new Date(), status: ECustomerStatus.VALIDATED, }; +export const folder: OfficeFolder = { + uid: "11123312", + folder_number: "12331", + name: "Mon dossier", + status: EFolderStatus.ARCHIVED, + deed: deed, + office: office, + created_at: new Date(), + updated_at: new Date(), + description: "Description", + archived_description: "Archived description", +}; export const document: Document = { uid: "0", @@ -140,9 +139,11 @@ export const customer2: Customer = { documents: [document, document2, documentPending, documentDeposited], }; + + export const folderWithPendingDocument: OfficeFolder = { uid: "11123312", - folder_number: "12332", + folder_number: "00001", name: "Mon dossier", status: EFolderStatus.ARCHIVED, deed: deed, @@ -151,5 +152,45 @@ export const folderWithPendingDocument: OfficeFolder = { updated_at: new Date(), description: "Description", archived_description: "Archived description", - documents: [documentPending], + documents: [document, document2, documentPending, documentDeposited], }; +export const folderWithPendingDocument1: OfficeFolder = { + uid: "11123312", + folder_number: "00002", + name: "Mon dossier", + status: EFolderStatus.ARCHIVED, + deed: deed, + office: office, + created_at: new Date(), + updated_at: new Date(), + description: "Description", + archived_description: "Archived description", + documents: [documentDeposited], +}; +export const folderWithPendingDocument2: OfficeFolder = { + uid: "11123312", + folder_number: "00003", + name: "Mon dossier", + status: EFolderStatus.ARCHIVED, + deed: deed, + office: office, + created_at: new Date(), + updated_at: new Date(), + description: "Description", + archived_description: "Archived description", + documents: [document, document2], +}; +export const folderWithPendingDocument3: OfficeFolder = { + uid: "11123312", + folder_number: "00014", + name: "Mon dossier", + status: EFolderStatus.ARCHIVED, + deed: deed, + office: office, + created_at: new Date(), + updated_at: new Date(), + description: "Description", + archived_description: "Archived description", + documents: [document, document2, documentDeposited, documentPending], +}; +export const folders : OfficeFolder[] = [folderWithPendingDocument, folderWithPendingDocument1, folderWithPendingDocument2, folderWithPendingDocument3] diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx index 89793f90..bfb71a74 100644 --- a/src/front/Components/Layouts/DesignSystem/index.tsx +++ b/src/front/Components/Layouts/DesignSystem/index.tsx @@ -13,11 +13,13 @@ import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField" import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; import "reflect-metadata"; import FolderContainer from "@Front/Components/DesignSystem/FolderContainer"; -import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument } from "./dummyData" +import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument, folders } from "./dummyData" import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary"; import Select, { IOption } from "@Front/Components/DesignSystem/Select"; import UserFolder from "@Front/Components/DesignSystem/UserFolder"; import MultiSelect from "@Front/Components/DesignSystem/Materials/MultiSelect"; +import SearchBar from "@Front/Components/DesignSystem/SearchBar"; +import FolderList from "@Front/Components/DesignSystem/FolderListContainer"; type IState = { isModalDisplayed: boolean; @@ -37,7 +39,7 @@ export default class DesignSystem extends BasePage { this.onSelectedOption = this.onSelectedOption.bind(this); } - + public override render(): JSX.Element { const selectOptions: IOption[] = [ @@ -65,8 +67,6 @@ export default class DesignSystem extends BasePage { - -
Button components @@ -229,6 +229,35 @@ export default class DesignSystem extends BasePage {
+
+
+ MultiSelect +
+
+ +
+
+ + +
+
+ Document SearchBar +
+
+ +
+
+ +
+
+ Folder List +
+
+ +
+
+ + );