✨ Searchbar fully working
This commit is contained in:
Maxime Lalo
parent
9dedb60b69
commit
4960b51ee3
@ -2,8 +2,8 @@ import Module from "@Front/Config/Module";
|
||||
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
||||
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
|
||||
import Link from "next/link";
|
||||
import { NextRouter, useRouter } from "next/router";
|
||||
import React from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useCallback, useEffect } from "react";
|
||||
|
||||
import BlockList, { IBlock } from "../BlockList";
|
||||
import Button from "../Button";
|
||||
@ -19,68 +19,38 @@ type IProps = {
|
||||
onCloseLeftSide?: () => void;
|
||||
};
|
||||
|
||||
type IPropsClass = IProps & {
|
||||
router: NextRouter;
|
||||
selectedFolder: string;
|
||||
};
|
||||
export default function FolderListContainer(props: IProps) {
|
||||
const router = useRouter();
|
||||
const { folderUid } = router.query;
|
||||
const { folders, isArchived } = props;
|
||||
|
||||
type IState = {
|
||||
filteredFolders: OfficeFolder[];
|
||||
blocks: IBlock[];
|
||||
};
|
||||
|
||||
class FolderListContainerClass extends React.Component<IPropsClass, IState> {
|
||||
private redirectPath: string = this.props.isArchived
|
||||
const redirectPath: string = isArchived
|
||||
? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
|
||||
: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
|
||||
public constructor(props: IPropsClass) {
|
||||
super(props);
|
||||
this.state = {
|
||||
filteredFolders: this.props.folders,
|
||||
blocks: this.getBlocks(this.props.folders),
|
||||
|
||||
const filterFolders = (value: string): void => {
|
||||
const filteredFolders: OfficeFolder[] = folders.filter((folder) => {
|
||||
const name = folder.name.toLowerCase();
|
||||
const number = folder.folder_number.toLowerCase();
|
||||
value = value.toLowerCase();
|
||||
if (folder.customers) {
|
||||
const customerNames = folder.customers
|
||||
.map((customer) => {
|
||||
return `${customer.contact?.first_name.toLowerCase()} ${customer.contact?.last_name.toLowerCase()}`;
|
||||
})
|
||||
.join(", ");
|
||||
|
||||
return name.includes(value) || number.includes(value) || customerNames.includes(value);
|
||||
}
|
||||
|
||||
return name.includes(value) || number.includes(value);
|
||||
});
|
||||
|
||||
setBlocks(getBlocks(filteredFolders));
|
||||
};
|
||||
this.filterFolders = this.filterFolders.bind(this);
|
||||
this.onSelectedFolder = this.onSelectedFolder.bind(this);
|
||||
}
|
||||
|
||||
public override render(): JSX.Element {
|
||||
const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
|
||||
return (
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["header"]}>
|
||||
<div className={classes["searchbar"]}>
|
||||
<SearchBar onChange={this.filterFolders} placeholder="Chercher un dossier" />
|
||||
</div>
|
||||
<div className={classes["folderlist-container"]}>
|
||||
<BlockList blocks={this.state.blocks} onSelectedBlock={this.onSelectedFolder} />
|
||||
</div>
|
||||
</div>
|
||||
{!this.props.isArchived && (
|
||||
<div>
|
||||
<Rules
|
||||
mode={RulesMode.NECESSARY}
|
||||
rules={[
|
||||
{
|
||||
action: AppRuleActions.create,
|
||||
name: AppRuleNames.officeFolders,
|
||||
},
|
||||
]}>
|
||||
<Link href={navigatePath}>
|
||||
<Button fullwidth={true}>Créer un dossier</Button>
|
||||
</Link>
|
||||
</Rules>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
public override componentDidUpdate(prevProps: Readonly<IPropsClass>, prevState: Readonly<IState>, 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 getBlocks = useCallback(
|
||||
(folders: OfficeFolder[]): IBlock[] => {
|
||||
const pendingFolders = folders
|
||||
.filter((folder) => {
|
||||
const pendingDocuments = (folder.documents ?? []).filter(
|
||||
@ -107,44 +77,55 @@ class FolderListContainerClass extends React.Component<IPropsClass, IState> {
|
||||
return {
|
||||
id: folder.uid!,
|
||||
name: folder.folder_number! + " - " + folder.name!,
|
||||
selected: this.props.selectedFolder === folder.uid,
|
||||
selected: folderUid === folder.uid,
|
||||
hasFlag: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
[folderUid],
|
||||
);
|
||||
|
||||
private onSelectedFolder(block: IBlock) {
|
||||
const folder = this.props.folders.find((folder) => folder.uid === block.id);
|
||||
const [blocks, setBlocks] = React.useState<IBlock[]>(getBlocks(folders));
|
||||
|
||||
const onSelectedFolder = (block: IBlock) => {
|
||||
const folder = folders.find((folder) => folder.uid === block.id);
|
||||
if (!folder) return;
|
||||
this.props.onSelectedFolder && this.props.onSelectedFolder(folder);
|
||||
const path = this.redirectPath.replace("[folderUid]", folder.uid ?? "");
|
||||
this.props.router.push(path);
|
||||
}
|
||||
props.onSelectedFolder && props.onSelectedFolder(folder);
|
||||
const path = redirectPath.replace("[folderUid]", folder.uid ?? "");
|
||||
router.push(path);
|
||||
};
|
||||
|
||||
private filterFolders(value: string): void {
|
||||
const filteredFolders: OfficeFolder[] = this.props.folders.filter((folder) => {
|
||||
const name = folder.name.toLowerCase();
|
||||
const number = folder.folder_number.toLowerCase();
|
||||
value = value.toLowerCase();
|
||||
if (folder.customers) {
|
||||
const customerNames = folder.customers
|
||||
.map((customer) => {
|
||||
return `${customer.contact?.first_name.toLowerCase()} ${customer.contact?.last_name.toLowerCase()}`;
|
||||
})
|
||||
.join(", ");
|
||||
useEffect(() => {
|
||||
setBlocks(getBlocks(folders));
|
||||
}, [folders, getBlocks]);
|
||||
|
||||
return name.includes(value) || number.includes(value) || customerNames.includes(value);
|
||||
}
|
||||
|
||||
return name.includes(value) || number.includes(value);
|
||||
});
|
||||
|
||||
this.setState({ filteredFolders, blocks: this.getBlocks(filteredFolders) });
|
||||
}
|
||||
}
|
||||
|
||||
export default function FolderListContainer(props: IProps) {
|
||||
const router = useRouter();
|
||||
const { folderUid } = router.query;
|
||||
return <FolderListContainerClass {...props} router={router} selectedFolder={folderUid as string} />;
|
||||
const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
|
||||
return (
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["header"]}>
|
||||
<div className={classes["searchbar"]}>
|
||||
<SearchBar onChange={filterFolders} placeholder="Chercher un dossier" />
|
||||
</div>
|
||||
<div className={classes["folderlist-container"]}>
|
||||
<BlockList blocks={blocks} onSelectedBlock={onSelectedFolder} />
|
||||
</div>
|
||||
</div>
|
||||
{!isArchived && (
|
||||
<div>
|
||||
<Rules
|
||||
mode={RulesMode.NECESSARY}
|
||||
rules={[
|
||||
{
|
||||
action: AppRuleActions.create,
|
||||
name: AppRuleNames.officeFolders,
|
||||
},
|
||||
]}>
|
||||
<Link href={navigatePath}>
|
||||
<Button fullwidth={true}>Créer un dossier</Button>
|
||||
</Link>
|
||||
</Rules>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,30 +2,66 @@
|
||||
|
||||
.root {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 24px;
|
||||
background-color: var(--color-generic-white);
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
position: relative;
|
||||
padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-2, 16px);
|
||||
|
||||
.fake-placeholder {
|
||||
position: absolute;
|
||||
left: 47px;
|
||||
top: 24px;
|
||||
color: var(--color-neutral-500);
|
||||
pointer-events: none;
|
||||
border-radius: var(--input-radius, 0px);
|
||||
border: 1px solid var(--input-main-border-default, #d7dce0);
|
||||
background: var(--input-background, #fff);
|
||||
|
||||
&:hover {
|
||||
border-radius: var(--input-radius, 0px);
|
||||
border: 1px solid var(--input-main-border-hovered, #b4bec5);
|
||||
background: var(--input-background, #fff);
|
||||
}
|
||||
|
||||
&[data-has-value="true"] {
|
||||
border-radius: var(--input-radius, 0px);
|
||||
border: 1px solid var(--input-main-border-filled, #6d7e8a);
|
||||
background: var(--input-background, #fff);
|
||||
}
|
||||
|
||||
&[data-is-focused="true"] {
|
||||
border-radius: var(--input-radius, 0px);
|
||||
border: 1px solid var(--input-main-border-focused, #005bcb);
|
||||
background: var(--input-background, #fff);
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 8px;
|
||||
padding: 0px var(--spacing-2, 16px);
|
||||
|
||||
.input {
|
||||
border: 0;
|
||||
margin-left: 8px;
|
||||
padding: 24px 0;
|
||||
width: 100%;
|
||||
font-family: "Inter", sans-serif;
|
||||
flex: 1;
|
||||
border: none;
|
||||
|
||||
color: var(--input-placeholder-filled, #24282e);
|
||||
|
||||
/* text/md/semibold */
|
||||
font-family: var(--font-text-family, Poppins);
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
color: var(--color-neutral-500);
|
||||
font-weight: var(--font-text-weight-semibold, 600);
|
||||
line-height: normal;
|
||||
letter-spacing: 0.08px;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--input-placeholder-empty, #6d7e8a);
|
||||
/* text/md/regular */
|
||||
font-family: var(--font-text-family, Poppins);
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: var(--font-text-weight-regular, 400);
|
||||
line-height: normal;
|
||||
letter-spacing: 0.08px;
|
||||
}
|
||||
}
|
||||
|
||||
.cross {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,54 +1,53 @@
|
||||
import LoopIcon from "@Assets/Icons/loop.svg";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import React, { useCallback } from "react";
|
||||
|
||||
import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
type IProps = {
|
||||
onChange?: (input: string) => void;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
type IState = {
|
||||
hasValue: boolean;
|
||||
};
|
||||
export default function SearchBar({ onChange, placeholder = "Rechercher" }: IProps) {
|
||||
const [isFocused, setIsFocused] = React.useState(false);
|
||||
const [value, setValue] = React.useState("");
|
||||
|
||||
export default class SearchBar extends React.Component<IProps, IState> {
|
||||
static defaultProps = {
|
||||
placeholder: "Search",
|
||||
};
|
||||
const handleOnChange = useCallback(
|
||||
(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue(event.target.value);
|
||||
onChange && onChange(event.target.value);
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
const handleFocus = useCallback(() => {
|
||||
setIsFocused(true);
|
||||
}, []);
|
||||
|
||||
const handleBlur = useCallback(() => {
|
||||
setIsFocused(false);
|
||||
}, []);
|
||||
|
||||
const clearValue = useCallback(() => {
|
||||
setValue("");
|
||||
onChange && onChange("");
|
||||
}, [onChange]);
|
||||
|
||||
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={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
|
||||
<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
|
||||
</Typography>
|
||||
)}
|
||||
<input type="text" placeholder="" className={classes["input"]} onChange={this.onChange} />
|
||||
<label className={classes["root"]} data-is-focused={isFocused} data-has-value={value !== ""}>
|
||||
<div className={classes["input-container"]}>
|
||||
<MagnifyingGlassIcon width="24" height="24" />
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
placeholder={placeholder}
|
||||
className={classes["input"]}
|
||||
onChange={handleOnChange}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
{value !== "" && <XMarkIcon width="24" height="24" className={classes["cross"]} onClick={clearValue} />}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
private onChange(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
const hasValue = event.target.value.length > 0;
|
||||
this.doesInputHaveValue(hasValue);
|
||||
if (!this.props.onChange) return;
|
||||
this.props.onChange(event.target.value);
|
||||
}
|
||||
|
||||
private doesInputHaveValue(hasValue: boolean) {
|
||||
this.setState({ hasValue });
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user