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-04-29 16:15:14 +02:00
commit 034810bd1b
2 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/front/Components/Layouts/Rib/classes.module.scss
View File

@ -5,6 +5,16 @@
margin-top: 24px;
}
.loader-container {
display: flex;
justify-content: center;
margin-top: 150px;
.loader {
width: 32px;
height: 32px;
}
}
.title {
margin-top: 24px;
}

26
src/front/Components/Layouts/Rib/index.tsx
View File

@ -8,6 +8,7 @@ import { useRouter } from "next/router";
import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib";
import DepositRib from "@Front/Components/DesignSystem/DepositRib";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Loader from "@Front/Components/DesignSystem/Loader";
export default function Rib() {
const [documentList, setDocumentList] = useState<File[]>([]);
@ -18,13 +19,12 @@ export default function Rib() {
const [key, setKey] = useState<string>("");
const [isRibModalOpen, setIsRibModalOpen] = useState<boolean>(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true);
//Put fetch data in a useCallback
const fetchData = useCallback(async () => {
try {
const blob = await OfficeRib.getInstance().getRibStream();
setFileBlob(blob.blob);
setKey(key);
setFileName(blob.fileName);
@ -33,6 +33,7 @@ export default function Rib() {
setFileName("");
setKey("");
}
setIsLoading(false);
}, [key]);
useEffect(() => {
@ -96,8 +97,15 @@ export default function Rib() {
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
RIB de l'office
</Typography>
{!fileBlob && (
{isLoading && (
<div className={classes["loader-container"]}>
<div className={classes["loader"]}>
<Loader />
</div>
</div>
)}
{!isLoading && !fileBlob && (
<>
<div className={classes["document-container"]}>
<div>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
@ -105,24 +113,21 @@ export default function Rib() {
</Typography>
</div>
</div>
)}
{!fileBlob && (
<div className={classes["footer"]}>
<div className={classes["buttons-container"]}>
<Button onClick={openRibModal}>Déposer un RIB</Button>
</div>
</div>
</>
)}
{fileBlob && (
{!isLoading && fileBlob && (
<>
<div className={classes["document-container"]}>
<div className={classes["file-container"]}>
{fileBlob && <FilePreview href={fileBlob ? URL.createObjectURL(fileBlob) : ""} fileName={fileName} />}
</div>
</div>
)}
{fileBlob && (
<div className={classes["footer"]}>
<div className={classes["buttons-container"]}>
<Button onClick={openDeleteModal} variant={EButtonVariant.SECONDARY}>
@ -134,6 +139,7 @@ export default function Rib() {
<Button onClick={downloadFile}>Télécharger</Button>
</div>
</div>
</>
)}
<Confirm