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

functionnal searchbar for front end folder list (#6)

Browse Source 
We need to add infinite scroll to this component

1) Folder list ->
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28712&t=k&c=5121c3f117db4114b998f8a560c9dc90

2) SearchBar ->
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28712&t=k&c=8dd6f1a469b840fc86dd51c596e211bf

3) Fixes ->
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28712&t=k&c=0b1860df9481401582e1da03d7b127d9
This commit is contained in:
hugolxt 2023-04-06 11:06:58 +02:00 committed by GitHub
parent 404a39b908
commit 8240bb780a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 249 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/Assets/icons/loop.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4351 10.0629H10.7124L10.4563 9.81589C11.3528 8.77301 11.8925 7.4191 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.4191 11.8925 8.77301 11.3528 9.81589 10.4563L10.0629 10.7124V11.4351L14.6369 16L16 14.6369L11.4351 10.0629ZM5.94625 10.0629C3.66838 10.0629 1.82962 8.22413 1.82962 5.94625C1.82962 3.66838 3.66838 1.82962 5.94625 1.82962C8.22413 1.82962 10.0629 3.66838 10.0629 5.94625C10.0629 8.22413 8.22413 10.0629 5.94625 10.0629Z" fill="#939393"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 645 B

9
src/front/Components/DesignSystem/FolderContainer/classes.module.scss
View File

@ -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;
}
}
}

3
src/front/Components/DesignSystem/FolderContainer/index.tsx
View File

@ -19,8 +19,7 @@ export default class FolderContainer extends React.Component<IProps, IState> {
return <div className={classes["root"]}>
<div className={classes["left-side"]}>
<Typography typo={ITypo.P_16}>{"Dossier ".concat(this.props.folder.folder_number)}</Typography>
{this.countPendingDocuments() > 0 && <WarningBadge />}
{this.countPendingDocuments() > 0 && <div className={classes["warning"]}><WarningBadge /></div>}
</div>
<Image alt="chevron" src={ChevronIcon} />
</div>;

4
src/front/Components/DesignSystem/FolderList/classes.module.scss Normal file
View File

@ -0,0 +1,4 @@
@import "@Themes/constants.scss";
.root {
}

21
src/front/Components/DesignSystem/FolderList/index.tsx Normal file
View File

@ -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<IProps, IState> {
public override render(): JSX.Element {
return <div className={classes["root"]}>
{this.props.folders.map((folder) => {
return <FolderContainer folder={folder} />;
})};
</div>;
}
}

4
src/front/Components/DesignSystem/FolderListContainer/classes.module.scss Normal file
View File

@ -0,0 +1,4 @@
@import "@Themes/constants.scss";
.root {
}

36
src/front/Components/DesignSystem/FolderListContainer/index.tsx Normal file
View File

@ -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<IProps, IState> {
//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 <div className={classes["root"]}>
<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
<FolderList folders={this.state.filteredFolders}/>
<Button fullwidth={"true"}>Créer un dossier</Button>
</div>;
}
private filterFolders(folders: IFolder[]) :IFolder[] {
this.setState({ filteredFolders: folders })
return folders;
}
}

31
src/front/Components/DesignSystem/SearchBar/classes.module.scss Normal file
View File

@ -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;
}
}

53
src/front/Components/DesignSystem/SearchBar/index.tsx Normal file
View File

@ -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<IProps, IState> {
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 <div className={classes["root"]}>
<Image src={LoopIcon} alt="Loop icon" />
{!this.state.hasValue && <Typography typo={ITypo.P_ERR_18}><div className={classes["fake-placeholder"]}>Select</div></Typography>}
<input type="text" placeholder="" className={classes["input"]} onChange={this.onChange} />
</div>;
}
private onChange(event: React.ChangeEvent<HTMLInputElement>) {
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<HTMLInputElement>) {
const filteredFolders: IFolder[] = this.props.folders.filter((folder) => folder.folder_number.includes(event.target.value));
return filteredFolders;
}
}

1
src/front/Components/DesignSystem/UserFolder/index.tsx
View File

@ -130,7 +130,6 @@ export default class UserFolder extends React.Component<IProps, IState> {
}
private openDeletionModal(uid: string): void {
console.log("Delete item > ", uid);
// TODO: call API to delete document
this.setState({
isOpenDeletionModal: true

71
src/front/Components/Layouts/DesignSystem/dummyData.ts
View File

@ -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]

35
src/front/Components/Layouts/DesignSystem/index.tsx
View File

@ -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;
@ -65,8 +67,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
</Typography>
</div>
</div>
<MultiSelect options={selectOptions} placeholder="Numéro CRPCEN"/>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Button components</Typography>
@ -229,6 +229,35 @@ export default class DesignSystem extends BasePage<IProps, IState> {
</div>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>MultiSelect</Typography>
</div>
<div className={classes["sub-section"]}>
<MultiSelect options={selectOptions} placeholder="Numéro CRPCEN" />
</div>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Document SearchBar</Typography>
</div>
<div className={classes["sub-section"]}>
<SearchBar folders={folders} />
</div>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Folder List</Typography>
</div>
<div className={classes["sub-section"]}>
<FolderList folders={folders} />
</div>
</div>
</div>
</DefaultTemplate>
);