Finished

src/front/Api/BaseApiService.ts

@@ -7,6 +7,10 @@ export enum ContentType {
 	FORM_DATA = "multipart/form-data;",
 	PNG = "image/png",
 }
+
+export type IRef = {
+	response?: Response;
+};
 export default abstract class BaseApiService {
 	private static baseUrl: string;
 	protected readonly variables = FrontendVariables.getInstance();
@@ -39,13 +43,13 @@ export default abstract class BaseApiService {
 		return JSON.stringify(body);
 	}
 
-	protected async getRequest<T>(url: URL, token?: string, contentType?: ContentType, filename?: string) {
+	protected async getRequest<T>(url: URL, token?: string, contentType?: ContentType, ref?: IRef) {
 		const request = async () =>
 			await fetch(url, {
 				method: "GET",
 				headers: this.buildHeaders(contentType ?? ContentType.JSON),
 			});
-		return this.sendRequest<T>(request, filename);
+		return this.sendRequest<T>(request, ref);
 	}
 
 	protected async postRequest<T>(url: URL, body: { [key: string]: unknown } = {}, token?: string) {
@@ -114,18 +118,18 @@ export default abstract class BaseApiService {
 		return this.sendRequest<T>(request);
 	}
 
-	private async sendRequest<T>(request: () => Promise<Response>, filename?: string): Promise<T> {
+	private async sendRequest<T>(request: () => Promise<Response>, ref?: IRef): Promise<T> {
 		const response = await request();
-		return this.processResponse<T>(response, request, filename);
+
+		return this.processResponse<T>(response, request, ref);
 	}
 
-	protected async processResponse<T>(response: Response, request: () => Promise<Response>, filename?: string): Promise<T> {
+	protected async processResponse<T>(response: Response, request: () => Promise<Response>, ref?: IRef): Promise<T> {
 		let responseContent: T;
-
+		ref && (ref["response"] = response);
 		if (response.ok) {
 			// Check the Content-Type header to determine the response type
 			const contentType = response.headers.get("Content-Type");
-
 			if (contentType && !contentType.includes("application/json")) {
 				responseContent = (await response.blob()) as T;
 			} else {

src/front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib.ts

@@ -1,3 +1,4 @@
+import { IRef } from "@Front/Api/BaseApiService";
 import BaseNotary from "../BaseNotary";
 
 // TODO Type get query params -> Where + inclue + orderby
@@ -27,7 +28,12 @@ export default class OfficeRib extends BaseNotary {
 	public async getRibStream() {
 		const url = new URL(this.baseURl);
 		try {
-			return await this.getRequest<any>(url);
+			const ref: IRef = {};
+			const blob = await this.getRequest<any>(url, undefined, undefined, ref);
+			const contentDisposition = ref.response?.headers.get("Content-Disposition");
+			const r = /attachment; filename="(.*)"/gim;
+			const fileName = r.exec(contentDisposition ?? "")?.[1] ?? "";
+			return { blob, fileName };
 		} catch (err) {
 			this.onError(err);
 			return Promise.reject(err);

src/front/Components/Layouts/Folder/ViewDocuments/index.tsx

@@ -195,6 +195,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 	private async getFilePreview(): Promise<void> {
 		try {
 			const fileBlob: Blob = await Files.getInstance().download(this.state.selectedFile?.uid as string);
+
 			this.setState({
 				fileBlob,
 			});
@@ -281,7 +282,9 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 			this.props.router.push(
 				Module.getInstance()
 					.get()
-					.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid) + '?customerUid=' + this.state.document?.depositor?.uid,
+					.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid) +
+					"?customerUid=" +
+					this.state.document?.depositor?.uid,
 			);
 		} catch (e) {
 			console.error(e);
@@ -297,7 +300,9 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 			this.props.router.push(
 				Module.getInstance()
 					.get()
-					.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid) + '?customerUid=' + this.state.document?.depositor?.uid,
+					.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid) +
+					"?customerUid=" +
+					this.state.document?.depositor?.uid,
 			);
 		} catch (e) {
 			console.error(e);

src/front/Components/Layouts/Rib/classes.module.scss

@@ -15,7 +15,6 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		flex-direction: column;
 
 		.arrow-container {
 			cursor: pointer;
@@ -28,6 +27,7 @@
 
 		.file-container {
 			max-width: 1000px;
+			min-height: 600px;
 			margin: auto;
 			flex: 1;
 		}
@@ -36,8 +36,6 @@
 	.footer {
 		width: fit-content;
 		margin: auto;
-		display: flex;
-		gap: 10px;
 		.ocr-container {
 			margin-top: 42px;
 		}

src/front/Components/Layouts/Rib/index.tsx

@@ -13,7 +13,7 @@ export default function Rib() {
 	const [documentList, setDocumentList] = useState<File[]>([]);
 	const router = useRouter();
 	let { officeUid } = router.query;
-	const [fileUrl, setFileUrl] = useState<string>("");
+	const [fileBlob, setFileBlob] = useState<Blob>();
 	const [fileName, setFileName] = useState<string>("");
 	const [key, setKey] = useState<string>("");
 	const [isRibModalOpen, setIsRibModalOpen] = useState<boolean>(false);
@@ -25,15 +25,13 @@ export default function Rib() {
 		try {
 			const blob = await OfficeRib.getInstance().getRibStream();
 
-			const ribUrl = URL.createObjectURL(blob);
+			setFileBlob(blob.blob);
-
-			setFileUrl(ribUrl);
 			setKey(key);
-			setFileName(key);
+			setFileName(blob.fileName);
 		} catch (error) {
-			setFileUrl("");
+			// setFileBlob(undefined);
-			setFileName("");
+			// setFileName("");
-			setKey("");
+			// setKey("");
 		}
 	}, [officeUid]);
 
@@ -42,10 +40,11 @@ export default function Rib() {
 	}, [officeUid]);
 
 	function downloadFile() {
-		if (!fileUrl) return;
+		if (!fileBlob) return;
+		const url = window.URL.createObjectURL(fileBlob);
 		const a = document.createElement("a");
 		a.style.display = "none";
-		a.href = fileUrl;
+		a.href = url;
 		a.download = key;
 		document.body.appendChild(a);
 		a.click();
@@ -98,7 +97,7 @@ export default function Rib() {
 					RIB de l'office
 				</Typography>
 
-				{!fileUrl && (
+				{!fileBlob && (
 					<div className={classes["document-container"]}>
 						<div className={classes["file-container"]}>
 							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
@@ -113,10 +112,16 @@ export default function Rib() {
 					</div>
 				)}
 
-				{fileUrl && (
+				{fileBlob && (
 					<div className={classes["document-container"]}>
-						<div className={classes["file-container"]}>{fileUrl && <FilePreview href={fileUrl} fileName={fileName} />}</div>
+						<div className={classes["file-container"]}>
-						<div className={classes["footer"]}>
+							{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}>
 								Supprimer
 							</Button>