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

Merge branch 'staging' into preprod

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-29 16:15:18 +02:00
commit aa1fa78e59
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; margin-top: 24px;
} }
.loader-container {
display: flex;
justify-content: center;
margin-top: 150px;
.loader {
width: 32px;
height: 32px;
}
}
.title { .title {
margin-top: 24px; margin-top: 24px;
} }

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