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

✨ responsive folder client view

Browse Source
This commit is contained in:
Max S 2024-08-26 11:45:01 +02:00
parent 79f965e502
commit 334313e71d
3 changed files with 70 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
View File

@ -16,6 +16,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
import classes from "./classes.module.scss";
import DeleteAskedDocumentModal from "./DeleteAskedDocumentModal";
import DeleteSentDocumentModal from "./DeleteSentDocumentModal";
import { useMediaQuery } from "@mui/material";
type IProps = {
documents: Document[];
@ -34,6 +35,8 @@ export default function DocumentTables(props: IProps) {
const [documents, setDocuments] = useState<Document[]>(documentsProps);
const [documentUid, setDocumentUid] = useState<string | null>(null);
const isMobile = useMediaQuery("(max-width:524px)");
const deleteAskedDocumentModal = useOpenable();
const deleteSentDocumentModal = useOpenable();
@ -232,11 +235,11 @@ export default function DocumentTables(props: IProps) {
</Typography>
<CircleProgress percentage={progress} />
</div>
{askedDocuments.length > 0 && <Table header={getHeader("Demandé le")} rows={askedDocuments} />}
{toValidateDocuments.length > 0 && <Table header={getHeader("Déposé le")} rows={toValidateDocuments} />}
{validatedDocuments.length > 0 && <Table header={getHeader("Validé le")} rows={validatedDocuments} />}
{refusedDocuments.length > 0 && <Table header={getHeader("Demandé le")} rows={refusedDocuments} />}
{sentDocuments.length > 0 && <Table header={getHeader("Envoyé le")} rows={sentDocuments} />}
{askedDocuments.length > 0 && <Table header={getHeader("Demandé le", isMobile)} rows={askedDocuments} />}
{toValidateDocuments.length > 0 && <Table header={getHeader("Déposé le", isMobile)} rows={toValidateDocuments} />}
{validatedDocuments.length > 0 && <Table header={getHeader("Validé le", isMobile)} rows={validatedDocuments} />}
{refusedDocuments.length > 0 && <Table header={getHeader("Demandé le", isMobile)} rows={refusedDocuments} />}
{sentDocuments.length > 0 && <Table header={getHeader("Envoyé le", isMobile)} rows={sentDocuments} />}
{documentUid && (
<>
<DeleteAskedDocumentModal
@ -257,7 +260,23 @@ export default function DocumentTables(props: IProps) {
);
}
function getHeader(dateColumnTitle: string): IHead[] {
function getHeader(dateColumnTitle: string, isMobile: boolean): IHead[] {
if (isMobile) {
return [
{
key: "document_type",
title: "Type de document",
},
{
key: "document_status",
title: "Statut",
},
{
key: "actions",
title: "Action",
},
];
}
return [
{
key: "document_type",

23
src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss
View File

@ -1,5 +1,7 @@
@import "@Themes/constants.scss";
$mobile-breakpoint: 664px;
.root {
display: flex;
flex-direction: column;
@ -20,11 +22,30 @@
display: flex;
gap: var(--spacing-lg, 24px);
.client-box {
@media screen and (max-width: $screen-s) {
flex-direction: column;
}
.client-box-container {
display: flex;
flex-direction: column;
gap: var(--spacing-lg, 24px);
.button-container {
display: flex;
flex-direction: column;
gap: var(--spacing-lg, 24px);
}
@media screen and (max-width: $screen-s) {
flex-direction: row;
}
@media screen and (max-width: $mobile-breakpoint) {
flex-direction: column;
margin: auto;
}
}
}
}

20
src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
View File

@ -1,21 +1,20 @@
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Tabs from "@Front/Components/Elements/Tabs";
import Module from "@Front/Config/Module";
import { DocumentIcon, UserPlusIcon } from "@heroicons/react/24/outline";
import Customer from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Link from "next/link";
import { useCallback, useMemo, useState } from "react";
import { AnchorStatus } from "..";
import classes from "./classes.module.scss";
import ClientBox from "./ClientBox";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { DocumentIcon, UserPlusIcon } from "@heroicons/react/24/outline";
import Module from "@Front/Config/Module";
import Link from "next/link";
import NoDocument from "./NoDocument";
import DocumentTables from "./DocumentTables";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import EmailReminder from "./EmailReminder";
import NoDocument from "./NoDocument";
type IProps = {
folder: OfficeFolder;
@ -96,7 +95,7 @@ export default function ClientView(props: IProps) {
)}
</div>
<div className={classes["content"]}>
<div className={classes["client-box"]}>
<div className={classes["client-box-container"]}>
<ClientBox
customer={customer}
anchorStatus={anchorStatus}
@ -104,6 +103,7 @@ export default function ClientView(props: IProps) {
onDelete={handleClientDelete}
customerNote={folder.notes!.find((value) => value.customer?.uid === customer.uid) ?? null}
/>
<div className={classes["button-container"]}>
{anchorStatus === AnchorStatus.NOT_ANCHORED && (
<Link
href={Module.getInstance()
@ -117,6 +117,8 @@ export default function ClientView(props: IProps) {
)}
<EmailReminder customer={customer} />
</div>
</div>
{doesCustomerHaveDocument ? (
<DocumentTables documents={customer.documents ?? []} folderUid={folder?.uid ?? ""} />
) : (