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

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-24 17:37:30 +02:00
commit 7c30d90c15
11 changed files with 93 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx
View File

@ -1,17 +1,12 @@
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 Button from "../Button";
import SearchBar from "../SearchBar";
import classes from "./classes.module.scss";
import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
import { IBlock } from "../SearchBlockList/BlockList/Block";
import BlockList from "../SearchBlockList/BlockList";
import SearchBlockList from "../SearchBlockList";
type IProps = {
folders: OfficeFolder[];
@ -45,33 +40,9 @@ class FolderArchivedListContainerClass extends React.Component<IPropsClass, ISta
}
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>
)}
<SearchBlockList blocks={this.state.blocks} onSelectedBlock={this.onSelectedFolder} />
</div>
);
}

4
src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx
View File

@ -29,7 +29,9 @@ export default function Block(props: IProps) {
<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
{secondaryText}
</Typography>
<Typography typo={ETypo.TEXT_MD_BOLD} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
<Typography
typo={ETypo.TEXT_MD_BOLD}
color={isActive ? ETypoColor.NAVIGATION_BUTTON_CONTRAST_ACTIVE : ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
{primaryText}
</Typography>
</div>

1
src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
View File

@ -24,6 +24,5 @@
.bottom-container {
margin-top: auto;
width: 336px;
}
}

17
src/front/Components/DesignSystem/SearchBlockList/index.tsx
View File

@ -4,7 +4,7 @@ import { IBlock } from "./BlockList/Block";
import classes from "./classes.module.scss";
import SearchBar from "../SearchBar";
import Button from "../Button";
import Link from "next/link";
import { useRouter } from "next/router";
type IProps = {
blocks: IBlock[];
@ -17,6 +17,8 @@ type IProps = {
export default function SearchBlockList(props: IProps) {
const { blocks, onSelectedBlock, bottomButton } = props;
const router = useRouter();
const [blocksShowing, setBlocksShowing] = useState<IBlock[]>(blocks);
const bottomButtonRef = useRef<HTMLAnchorElement>(null);
const searchBarRef = useRef<HTMLDivElement>(null);
@ -47,6 +49,11 @@ export default function SearchBlockList(props: IProps) {
};
}, [bottomButton]);
const redirectOnBottomButtonClick = useCallback(() => {
if (!bottomButton) return;
router.push(bottomButton.link);
}, [bottomButton, router]);
useEffect(() => {
setBlocksShowing(blocks);
}, [blocks]);
@ -60,9 +67,11 @@ export default function SearchBlockList(props: IProps) {
<BlockList blocks={blocksShowing} onSelectedBlock={onSelectedBlock} />
</div>
{bottomButton && (
<Link href={bottomButton.link} className={classes["bottom-container"]} ref={bottomButtonRef}>
<Button fullwidth>{bottomButton.text}</Button>
</Link>
<div className={classes["bottom-container"]}>
<Button fullwidth onClick={redirectOnBottomButtonClick}>
{bottomButton.text}
</Button>
</div>
)}
</div>
);

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

@ -154,6 +154,7 @@ export enum ETypoColor {
CONTRAST_HOVERED = "--contrast-hovered",
ERROR_WEAK_CONTRAST = "--error-weak-contrast",
NAVIGATION_BUTTON_CONTRAST_DEFAULT = "--navigation-button-contrast-default",
NAVIGATION_BUTTON_CONTRAST_ACTIVE = "--navigation-button-contrast-active",
}
export default function Typography(props: IProps) {

43
src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
View File

@ -1,12 +1,11 @@
import React, { useCallback, useState } from "react";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import User from "le-coffre-resources/dist/Notary";
import { useRouter } from "next/router";
import Module from "@Front/Config/Module";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
collaborators: User[];
@ -15,22 +14,9 @@ type IProps = {
};
export default function CollaboratorListContainer(props: IProps) {
const [filteredUsers, setFilteredUsers] = useState<User[]>(props.collaborators);
const router = useRouter();
const { collaboratorUid } = router.query;
const filterUsers = useCallback(
(input: string) => {
const filteredUsers = props.collaborators.filter((user) => {
return (
user.contact?.first_name?.toLowerCase().includes(input.toLowerCase()) ||
user.contact?.last_name?.toLowerCase().includes(input.toLowerCase())
);
});
setFilteredUsers(filteredUsers);
},
[props.collaborators],
);
const onSelectedBlock = useCallback(
(block: IBlock) => {
@ -43,35 +29,16 @@ export default function CollaboratorListContainer(props: IProps) {
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={filterUsers} placeholder="Chercher un collaborateur" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList
blocks={filteredUsers.map((user) => {
<SearchBlockList
blocks={props.collaborators.map((user) => {
return {
primaryText: user.contact?.first_name + " " + user.contact?.last_name,
id: user.uid!,
selected: user.uid === collaboratorUid,
rightIcon: user.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) ? (
<div
style={{
height: "12px",
width: "12px",
borderRadius: "100px",
backgroundColor: "var(--color-success-600)",
}}
/>
) : (
<></>
),
isActive: user.uid === collaboratorUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
</div>
</div>
);
}

2
src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
View File

@ -34,7 +34,7 @@ export default function DeedListContainer(props: IProps) {
return {
primaryText: deed.name,
id: deed.uid!,
selected: deedTypeUid === deed.uid,
isActive: deedTypeUid === deed.uid,
};
})}
onSelectedBlock={onSelectedBlock}

39
src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx
View File

@ -1,14 +1,11 @@
import Button from "@Front/Components/DesignSystem/Button";
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import Module from "@Front/Config/Module";
import { DocumentType } from "le-coffre-resources/dist/SuperAdmin";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useCallback, useState } from "react";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
documentTypes: DocumentType[];
@ -17,19 +14,9 @@ type IProps = {
};
export default function DocumentTypeListContainer(props: IProps) {
const [filteredDocumentTypes, setFilteredDocumentTypes] = useState<DocumentType[]>(props.documentTypes);
const router = useRouter();
const { documentTypeUid } = router.query;
const filterDocumentTypes = useCallback(
(input: string) => {
const filteredDocumentTypes = props.documentTypes.filter((documentType) => {
return documentType.name.toLowerCase().includes(input.toLowerCase());
});
setFilteredDocumentTypes(filteredDocumentTypes);
},
[props.documentTypes],
);
const onSelectedBlock = useCallback(
(block: IBlock) => {
@ -42,28 +29,20 @@ export default function DocumentTypeListContainer(props: IProps) {
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={filterDocumentTypes} placeholder="Chercher un document" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList
blocks={filteredDocumentTypes.map((documentType) => {
<SearchBlockList
blocks={props.documentTypes.map((documentType) => {
return {
primaryText: documentType.name,
id: documentType.uid!,
selected: documentType.uid === documentTypeUid,
isActive: documentType.uid === documentTypeUid,
};
})}
onSelectedBlock={onSelectedBlock}
bottomButton={{
link: Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path,
text: "Créer un type de document",
}}
/>
</div>
</div>
<div className={classes["create-container"]}>
<Link href={Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path}>
<Button fullwidth={true}>Créer un type de document</Button>
</Link>
</div>
</div>
);
}

30
src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
View File

@ -1,12 +1,11 @@
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import Module from "@Front/Config/Module";
import { Office } from "le-coffre-resources/dist/SuperAdmin";
import { useRouter } from "next/router";
import React, { useCallback, useState } from "react";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
offices: Office[];
@ -15,21 +14,9 @@ type IProps = {
};
export default function OfficeListContainer(props: IProps) {
const [filteredOffices, setFilteredOffices] = useState<Office[]>(props.offices);
const router = useRouter();
const { officeUid } = router.query;
const filterOffices = useCallback(
(input: string) => {
const filteredOffices = props.offices.filter((office) => {
return (
office.name.toLowerCase().includes(input.toLowerCase()) || office.crpcen?.toLowerCase().includes(input.toLowerCase())
);
});
setFilteredOffices(filteredOffices);
},
[props.offices],
);
const onSelectedBlock = useCallback(
(block: IBlock) => {
@ -42,23 +29,16 @@ export default function OfficeListContainer(props: IProps) {
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={filterOffices} placeholder="Chercher un office" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList
blocks={filteredOffices.map((office) => {
<SearchBlockList
blocks={props.offices.map((office) => {
return {
primaryText: office.crpcen + " - " + office.name,
id: office.uid!,
selected: office.uid === officeUid,
isActive: office.uid === officeUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
</div>
</div>
);
}

40
src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
View File

@ -1,14 +1,11 @@
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import Module from "@Front/Config/Module";
import { OfficeRole } from "le-coffre-resources/dist/Admin";
import { useRouter } from "next/router";
import React, { useCallback, useState } from "react";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import Link from "next/link";
import Button from "@Front/Components/DesignSystem/Button";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
roles: OfficeRole[];
@ -17,21 +14,10 @@ type IProps = {
};
export default function RoleListContainer(props: IProps) {
const [filteredRoles, setFilteredRoles] = useState<OfficeRole[]>(props.roles);
const router = useRouter();
const { roleUid } = router.query;
const filterRoles = useCallback(
(input: string) => {
const filteredRoles = props.roles.filter((role) => {
return role.name?.toLowerCase().includes(input.toLowerCase());
});
setFilteredRoles(filteredRoles);
},
[props.roles],
);
const onSelectedBlock = useCallback(
(block: IBlock) => {
props.onCloseLeftSide && props.onCloseLeftSide();
@ -43,13 +29,8 @@ export default function RoleListContainer(props: IProps) {
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={filterRoles} placeholder="Chercher un rôle" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList
blocks={filteredRoles
<SearchBlockList
blocks={props.roles
.filter((role) => {
if (role.name === "admin") return false;
return true;
@ -58,18 +39,15 @@ export default function RoleListContainer(props: IProps) {
return {
primaryText: role.name,
id: role.uid!,
selected: role.uid === roleUid,
isActive: role.uid === roleUid,
};
})}
onSelectedBlock={onSelectedBlock}
bottomButton={{
link: Module.getInstance().get().modules.pages.Roles.pages.Create.props.path,
text: "Créer un rôle",
}}
/>
</div>
</div>
<div className={classes["create-container"]}>
<Link href={Module.getInstance().get().modules.pages.Roles.pages.Create.props.path}>
<Button fullwidth={true}>Créer un rôle</Button>
</Link>
</div>
</div>
);
}

31
src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
View File

@ -1,12 +1,11 @@
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import Module from "@Front/Config/Module";
import User from "le-coffre-resources/dist/Notary";
import { useRouter } from "next/router";
import React, { useCallback, useState } from "react";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
users: User[];
@ -15,22 +14,9 @@ type IProps = {
};
export default function UserListContainer(props: IProps) {
const [filteredUsers, setFilteredUsers] = useState<User[]>(props.users);
const router = useRouter();
const { userUid } = router.query;
const filterUsers = useCallback(
(input: string) => {
const filteredUsers = props.users.filter((user) => {
return (
user.contact?.first_name?.toLowerCase().includes(input.toLowerCase()) ||
user.contact?.last_name?.toLowerCase().includes(input.toLowerCase())
);
});
setFilteredUsers(filteredUsers);
},
[props.users],
);
const onSelectedBlock = useCallback(
(block: IBlock) => {
@ -43,23 +29,16 @@ export default function UserListContainer(props: IProps) {
return (
<div className={classes["root"]}>
<div className={classes["header"]}>
<div className={classes["searchbar"]}>
<SearchBar onChange={filterUsers} placeholder="Chercher un utilisateur" />
</div>
<div className={classes["folderlist-container"]}>
<BlockList
blocks={filteredUsers.map((user) => {
<SearchBlockList
blocks={props.users.map((user) => {
return {
primaryText: user.contact?.first_name + " " + user.contact?.last_name,
id: user.uid!,
selected: user.uid === userUid,
isActive: user.uid === userUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
</div>
</div>
);
}