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

✨ Disable arrows when nothing previous/next

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-24 15:58:21 +02:00
parent fd574305b4
commit 2cfd3907b7
2 changed files with 55 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss
View File

@ -15,9 +15,14 @@
display: flex;
justify-content: space-between;
align-items: center;
.arrow-container{
cursor: pointer;
&[data-disabled="true"]{
opacity: 0.3;
cursor: not-allowed;
}
}
.file-container{

76
src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
View File

@ -1,5 +1,6 @@
import "reflect-metadata";
import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
@ -17,13 +18,11 @@ import React from "react";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
type IProps = {};
type IPropsClass = {
documentsList: Document[];
selectedDocument: Document | null;
selectedDocument: Document | null;
router: NextRouter;
folderUid: string;
};
@ -47,7 +46,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
refuseText: "",
hasValidateAnchoring: false,
selectedDocument: null,
selectedDocumentIndex: -1
selectedDocumentIndex: -1,
};
this.closeModals = this.closeModals.bind(this);
@ -55,6 +54,11 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
this.openRefuseModal = this.openRefuseModal.bind(this);
this.onRefuseTextChange = this.onRefuseTextChange.bind(this);
this.validateAnchoring = this.validateAnchoring.bind(this);
this.goToNext = this.goToNext.bind(this);
this.goToPrevious = this.goToPrevious.bind(this);
this.hasPrevious = this.hasPrevious.bind(this);
this.hasNext = this.hasNext.bind(this);
}
public override render(): JSX.Element | null {
@ -69,17 +73,21 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
{this.state.selectedDocument.document_type.name}
</Typography>
<div className={classes["document-container"]}>
<div className={classes["arrow-container"]} onClick={this.goToPrevious()}>
<Image src={LeftArrowIcon} alt="left arrow" />
</div>
{this.props.documentsList.length > 1 && (
<div className={classes["arrow-container"]} onClick={this.goToPrevious} data-disabled={(!this.hasPrevious()).toString()}>
<Image src={LeftArrowIcon} alt="left arrow" />
</div>
)}
<div className={classes["file-container"]}>
{this.state.selectedDocument.files?.map((file) => (
<FilePreview href={file.file_path as string} key={file.uid} />
))}
</div>
<div className={classes["arrow-container"]} onClick={this.goToNext()}>
<Image src={RightArrowIcon} alt="right arrow" />
</div>
{this.props.documentsList.length > 1 && (
<div className={classes["arrow-container"]} onClick={this.goToNext} data-disabled={(!this.hasNext()).toString()}>
<Image src={RightArrowIcon} alt="right arrow" />
</div>
)}
</div>
<div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
@ -148,7 +156,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
}
override componentDidMount(): void {
if(!this.props.selectedDocument) return;
if (!this.props.selectedDocument) return;
this.setState({
selectedDocument: this.props.selectedDocument,
selectedDocumentIndex: this.props.documentsList.findIndex((doc) => doc.uid === this.props.selectedDocument!.uid),
@ -163,27 +171,33 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
});
}
}
private goToPrevious() {
return () => {
const index = this.state.selectedDocumentIndex - 1;
if (index < 0) {
return;
}
this.props.router.push(`/folder/${this.props.folderUid}/document/${this.props.documentsList[index]!.uid}`)
};
if (this.hasPrevious()) {
this.props.router.push(
`/folder/${this.props.folderUid}/document/${this.props.documentsList[this.state.selectedDocumentIndex - 1]!.uid}`,
);
}
}
private goToNext() {
return () => {
const index = this.state.selectedDocumentIndex + 1;
if (index >= this.props.documentsList.length) {
return;
}
this.props.router.push(`/folder/${this.props.folderUid}/document/${this.props.documentsList[index]!.uid}`)
if (this.hasNext()) {
this.props.router.push(
`/folder/${this.props.folderUid}/document/${this.props.documentsList[this.state.selectedDocumentIndex + 1]!.uid}`,
);
}
}
private hasPrevious() {
const index = this.state.selectedDocumentIndex - 1;
return index >= 0;
}
private hasNext() {
const index = this.state.selectedDocumentIndex + 1;
return index < this.props.documentsList.length;
}
private validateAnchoring() {
this.setState({
hasValidateAnchoring: true,
@ -224,5 +238,13 @@ export default function ViewDocuments(props: IProps) {
const documents = folder.documents!;
const selectedDocument = documents.find((document) => document.uid === documentUid) ?? null;
return <ViewDocumentsClass {...props} documentsList={documents} selectedDocument={selectedDocument} router={router} folderUid={folderUid as string}/>;
return (
<ViewDocumentsClass
{...props}
documentsList={documents}
selectedDocument={selectedDocument}
router={router}
folderUid={folderUid as string}
/>
);
}