✨ responsive folder client view
This commit is contained in:
Max S
parent
79f965e502
commit
334313e71d
@ -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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,19 +103,22 @@ export default function ClientView(props: IProps) {
|
||||
onDelete={handleClientDelete}
|
||||
customerNote={folder.notes!.find((value) => value.customer?.uid === customer.uid) ?? null}
|
||||
/>
|
||||
{anchorStatus === AnchorStatus.NOT_ANCHORED && (
|
||||
<Link
|
||||
href={Module.getInstance()
|
||||
.get()
|
||||
.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", folder.uid ?? "")
|
||||
.replace("[customerUid]", customer.uid ?? "")}>
|
||||
<Button rightIcon={<DocumentIcon />} variant={EButtonVariant.PRIMARY} fullwidth>
|
||||
Demander un document
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
<EmailReminder customer={customer} />
|
||||
<div className={classes["button-container"]}>
|
||||
{anchorStatus === AnchorStatus.NOT_ANCHORED && (
|
||||
<Link
|
||||
href={Module.getInstance()
|
||||
.get()
|
||||
.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", folder.uid ?? "")
|
||||
.replace("[customerUid]", customer.uid ?? "")}>
|
||||
<Button rightIcon={<DocumentIcon />} variant={EButtonVariant.PRIMARY} fullwidth>
|
||||
Demander un document
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
<EmailReminder customer={customer} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{doesCustomerHaveDocument ? (
|
||||
<DocumentTables documents={customer.documents ?? []} folderUid={folder?.uid ?? ""} />
|
||||
) : (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user