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

🐛 Fixing responsive in an opened folder

Browse Source
This commit is contained in:
Maxime Lalo 2023-05-10 11:39:51 +02:00
parent e382e1fc4d
commit 4936540456
3 changed files with 47 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx
View File

@ -3,6 +3,7 @@ import classes from "./classes.module.scss";
import { Document } from "le-coffre-resources/dist/Customer";
import Typography, { ITypo } from "../../Typography";
import DocumentNotary from "../../Document/DocumentNotary";
import classNames from "classnames";
type IProps = {
title: string;
@ -17,13 +18,15 @@ type IProps = {
| null;
openDeletionModal: (uid: Document["uid"]) => void;
folderUid: string;
className?: string;
};
type IState = {};
export default class DocumentList extends React.Component<IProps, IState> {
public override render(): JSX.Element {
const classNameToAdd = this.props.className ? classNames(classes["root"], this.props.className) : classes["root"];
return (
<div className={classes["root"]}>
<div className={classNameToAdd}>
<div className={classes["title"]}>
<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography>
</div>
@ -32,7 +35,12 @@ export default class DocumentList extends React.Component<IProps, IState> {
{this.props.documents &&
this.props.documents.map((document) => {
return (
<DocumentNotary folderUid={this.props.folderUid} document={document} key={document.uid} openDeletionModal={this.props.openDeletionModal} />
<DocumentNotary
folderUid={this.props.folderUid}
document={document}
key={document.uid}
openDeletionModal={this.props.openDeletionModal}
/>
);
})}
</div>

31
src/front/Components/DesignSystem/UserFolder/classes.module.scss
View File

@ -57,29 +57,24 @@
gap: 64px;
margin-top: 32px;
@media(max-width: $screen-s){
grid-template-columns: 1fr;
@media (max-width: $screen-s) {
gap: 32px;
}
}
.button-container {
display: inline-grid;
justify-items: start;
gap: 32px;
margin-top: 16px;
.button-desktop{
@media(max-width: $screen-s){
display: none;
}
display: flex;
flex-direction: column;
}
.button-mobile{
display: none;
.documents-asked{
order: -1;
}
.button-container {
display: inline-grid;
justify-items: start;
gap: 32px;
margin-top: 16px;
@media(max-width: $screen-s){
display: block;
order: -1;
}
}
}

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

@ -1,9 +1,11 @@
import ChevronIcon from "@Assets/Icons/chevron.svg";
import PlusIcon from "@Assets/Icons/plus.svg";
import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents";
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import classNames from "classnames";
import Customer, { Document } from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import Image from "next/image";
import Link from "next/link";
import React from "react";
@ -14,8 +16,6 @@ import QuantityProgressBar from "../QuantityProgressBar";
import classes from "./classes.module.scss";
import DocumentList from "./DocumentList";
import UserFolderHeader from "./UserFolderHeader";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents";
type IProps = {
customer: Customer;
@ -53,7 +53,8 @@ export default class UserFolder extends React.Component<IProps, IState> {
const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
const redirectPath = Module.getInstance()
.get()
.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "").replace("[customerUid]", this.props.customer.uid ?? "");
.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "")
.replace("[customerUid]", this.props.customer.uid ?? "");
return (
<div className={classes["root"]} data-opened={this.props.isOpened.toString()}>
<Confirm
@ -68,11 +69,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
</Confirm>
<div className={classes["header"]} onClick={this.changeUserFolder}>
<UserFolderHeader
customer={this.props.customer}
folder={this.props.folder}
isArchived={this.props.isArchived}
/>
<UserFolderHeader customer={this.props.customer} folder={this.props.folder} isArchived={this.props.isArchived} />
<Image
src={ChevronIcon}
alt="chevron open close"
@ -94,6 +91,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
title="Documents demandés"
openDeletionModal={this.openDeletionModal}
folderUid={this.props.folder.uid!}
className={classes["documents-asked"]}
/>
<DocumentList
documents={otherDocuments}
@ -106,18 +104,19 @@ export default class UserFolder extends React.Component<IProps, IState> {
openDeletionModal={this.openDeletionModal}
folderUid={this.props.folder.uid!}
/>
</div>
{!this.props.isArchived && (
<div className={classes["button-container"]}>
<Link href={redirectPath}>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
Demander un autre document{" "}
{!this.props.isArchived && (
<div className={classes["button-container"]}>
<Link href={redirectPath}>
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
Demander un autre document{" "}
</Button>
</Link>
<Button disabled={documentsAsked ? false : true}>
Envoyer un mail de demande
</Button>
</Link>
{<Button disabled={documentsAsked ? false : true} className={classes["button-desktop"]}>Envoyer un mail de demande de documents</Button>}
{<Button disabled={documentsAsked ? false : true} className={classes["button-mobile"]}>Envoyer un mail de demande</Button>}
</div>
)}
</div>
)}
</div>
</div>
)}
</div>
@ -128,11 +127,11 @@ export default class UserFolder extends React.Component<IProps, IState> {
this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
}
private async deleteAskedDocument(){
try{
private async deleteAskedDocument() {
try {
await Documents.getInstance().delete(this.state.selectedDocumentToDelete);
window.location.reload();
}catch(e){
} catch (e) {
console.error(e);
}
}
@ -140,7 +139,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
private calculateDocumentsPercentageProgress(): number {
if (!this.props.customer.documents) return 0;
const totalDocuments: number = this.props.customer.documents.length;
const numberDocumentsRefused: number = this.getDocumentsByStatus(EDocumentStatus.REFUSED)?.length || 0;
const numberDocumentsRefused: number = this.getDocumentsByStatus(EDocumentStatus.REFUSED)?.length || 0;
const numberDocumentsAsked: number = this.getDocumentsByStatus(EDocumentStatus.ASKED)?.length || 0;
const depositedDocuments: number = totalDocuments - numberDocumentsAsked - numberDocumentsRefused;
@ -172,13 +171,12 @@ export default class UserFolder extends React.Component<IProps, IState> {
// return this.props.customer.documents.filter((document) => !documentToExclude.includes(document));
// }
private changeUserFolder(){
private changeUserFolder() {
this.props.onChange(this.props.customer.uid!);
}
private openDeletionModal(uid?: string): void {
if(!uid) return;
if (!uid) return;
this.setState({
isOpenDeletionModal: true,