connect files notary + handle download

This commit is contained in:
Max S 2024-09-10 19:26:54 +02:00
parent dfba3474d5
commit eee11aa4bb
12 changed files with 254 additions and 127 deletions

View File

@ -1,15 +1,13 @@
import { DocumentNotary } from "le-coffre-resources/dist/Notary";
import BaseNotary from "../BaseNotary";
// TODO Type get query params -> Where + inclue + orderby
export interface IGetDocumentNotaryparams {
where?: {};
include?: {};
orderBy?: {};
}
// TODO Type getbyuid query params
export default class DocumentsNotary extends BaseNotary {
private static instance: DocumentsNotary;
private readonly baseURl = this.namespaceUrl.concat("/documents_notary");
@ -26,17 +24,17 @@ export default class DocumentsNotary extends BaseNotary {
}
}
// public async get(q: IGetDocumentNotaryparams): Promise<DocumentNotary[]> {
// const url = new URL(this.baseURl);
// const query = { q };
// Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
// try {
// return await this.getRequest<DocumentNotary[]>(url);
// } catch (err) {
// this.onError(err);
// return Promise.reject(err);
// }
// }
public async get(q: IGetDocumentNotaryparams): Promise<DocumentNotary[]> {
const url = new URL(this.baseURl);
const query = { q };
Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
try {
return await this.getRequest<DocumentNotary[]>(url);
} catch (err) {
this.onError(err);
return Promise.reject(err);
}
}
/**
* @description : Create a Document Notary
@ -50,4 +48,18 @@ export default class DocumentsNotary extends BaseNotary {
return Promise.reject(err);
}
}
/**
* @description : Delete a Document Notary
*/
public async delete(uid: string): Promise<void> {
const url = new URL(this.baseURl);
url.pathname = url.pathname.concat(`/${uid}`);
try {
await this.deleteRequest(url);
} catch (err) {
this.onError(err);
return Promise.reject(err);
}
}
}

View File

@ -0,0 +1,71 @@
import { File } from "le-coffre-resources/dist/SuperAdmin";
import BaseNotary from "../BaseNotary";
export interface IGetFilesparams {
where?: {};
include?: {};
}
export type IPutFilesParams = {};
export interface IPostFilesParams {}
export default class FilesNotary extends BaseNotary {
private static instance: FilesNotary;
private readonly baseURl = this.namespaceUrl.concat("/files-notary");
private constructor() {
super();
}
public static getInstance() {
return (this.instance ??= new this());
}
public async get(q: IGetFilesparams): Promise<File[]> {
const url = new URL(this.baseURl);
const query = { q };
if (q) Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
try {
const files = await this.getRequest<File[]>(url);
return files;
} catch (err) {
this.onError(err);
return Promise.reject(err);
}
}
public async getByUid(uid: string, q?: any): Promise<File> {
const url = new URL(this.baseURl.concat(`/${uid}`));
const query = { q };
if (q) Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
try {
const file = await this.getRequest<File>(url);
return file;
} catch (err) {
this.onError(err);
return Promise.reject(err);
}
}
public async delete(uid: string): Promise<File> {
const url = new URL(this.baseURl.concat(`/${uid}`));
try {
return await this.deleteRequest<File>(url);
} catch (err) {
this.onError(err);
return Promise.reject(err);
}
}
public async download(uid: string): Promise<any> {
const url = new URL(this.baseURl.concat(`/download/${uid}`));
try {
return await this.getRequest<any>(url);
} catch (err) {
this.onError(err);
return Promise.reject(err);
}
}
}

View File

@ -27,7 +27,6 @@ export default function Autocomplete(props: IProps) {
useEffect(() => {
if (searchValue) {
const filteredOptions = options.filter((option) => getLabel(option)?.toLowerCase().includes(searchValue.toLowerCase()));
console.log(filteredOptions);
if (filteredOptions.length === 0)
return setFilteredOptions([{ id: "no-results", label: "Aucun résulats", notSelectable: true }]);
return setFilteredOptions(filteredOptions);

View File

@ -39,7 +39,6 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
public override render(): JSX.Element {
const toast = this.props.toast;
console.log(toast);
const style = {
"--data-duration": `${toast.time}ms`,

View File

@ -80,7 +80,6 @@ export default function Tabs<T>({ onSelect, tabs: propsTabs }: IProps<T>) {
newTabs.splice(index, 1);
newTabs.unshift(tabs.current[index]!);
tabs.current = newTabs;
console.log("Updated values ; ", tabs.current);
handleSelect(value);
},
[handleSelect],

View File

@ -1,18 +1,22 @@
import React from "react";
import classes from "./classes.module.scss";
import { useRouter } from "next/router";
import DocumentsNotary from "@Front/Api/LeCoffreApi/Notary/DocumentsNotary/DocumentsNotary";
import FilesNotary from "@Front/Api/LeCoffreApi/Notary/FilesNotary/Files";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import IconButton from "@Front/Components/DesignSystem/IconButton";
import Table from "@Front/Components/DesignSystem/Table";
import { IHead, IRowProps } from "@Front/Components/DesignSystem/Table/MuiTable";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Module from "@Front/Config/Module";
import BackArrow from "@Front/Components/Elements/BackArrow";
import JwtService from "@Front/Services/JwtService/JwtService";
import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { IHead } from "@Front/Components/DesignSystem/Table/MuiTable";
import Table from "@Front/Components/DesignSystem/Table";
import { saveAs } from "file-saver";
import JSZip from "jszip";
import { DocumentNotary } from "le-coffre-resources/dist/Notary";
import { useRouter } from "next/router";
import React, { useCallback, useEffect, useState } from "react";
type IProps = {};
import classes from "./classes.module.scss";
const header: readonly IHead[] = [
{
@ -29,9 +33,60 @@ const header: readonly IHead[] = [
},
];
export default function ReceivedDocuments(props: IProps) {
export default function ReceivedDocuments() {
const router = useRouter();
let { folderUid } = router.query;
const [documentsNotary, setDocumentsNotary] = useState<DocumentNotary[]>([]);
useEffect(() => {
const customerUid = JwtService.getInstance().decodeCustomerJwt()?.customerId;
if (!folderUid || !customerUid) return;
DocumentsNotary.getInstance()
.get({ where: { folder: { uid: folderUid }, customer: { uid: customerUid } }, include: { files: true } })
.then((documentsNotary) => setDocumentsNotary(documentsNotary));
}, [folderUid]);
const onDownload = useCallback((doc: DocumentNotary) => {
const file = doc.files?.[0];
if (!file || !file?.uid) return;
return FilesNotary.getInstance()
.download(file.uid)
.then((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = file.file_name ?? "file";
a.click();
URL.revokeObjectURL(url);
})
.catch((e) => console.warn(e));
}, []);
const onDownloadAll = useCallback(async () => {
if (documentsNotary.length === 0) return;
const zip = new JSZip();
const folder = zip.folder("documents") || zip;
const downloadPromises = documentsNotary.map(async (doc) => {
const file = doc.files?.[0];
if (file && file.uid) {
const blob = await FilesNotary.getInstance().download(file.uid);
folder.file(file.file_name ?? "file", blob);
}
});
await Promise.all(downloadPromises);
zip.generateAsync({ type: "blob" })
.then((blob: any) => {
saveAs(blob, "documents.zip");
})
.catch((error: any) => {
console.error("Error generating ZIP file: ", error);
});
}, [documentsNotary]);
return (
<DefaultTemplate title={"Documents reçus"} isPadding={false}>
@ -45,15 +100,25 @@ export default function ReceivedDocuments(props: IProps) {
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}>
Un document vous a é envoyé
</Typography>
<Table className={classes["table"]} header={header} rows={[{ key: "1", name: "todo", sentAt: "todo", actions: "todo" }]} />
<Table className={classes["table"]} header={header} rows={buildRows(documentsNotary, onDownload)} />
<Button
variant={EButtonVariant.PRIMARY}
size={EButtonSize.LG}
styletype={EButtonstyletype.CONTAINED}
leftIcon={<ArrowDownTrayIcon />}>
leftIcon={<ArrowDownTrayIcon />}
onClick={onDownloadAll}>
Tout télécharger
</Button>
</div>
</DefaultTemplate>
);
}
function buildRows(documentsNotary: DocumentNotary[], onDownloadFileNotary: (doc: DocumentNotary) => void): IRowProps[] {
return documentsNotary.map((documentNotary) => ({
key: documentNotary.uid ?? "",
name: documentNotary.files?.[0]?.file_name?.split(".")?.[0] ?? "_",
sentAt: new Date(documentNotary.created_at!).toLocaleDateString(),
actions: <IconButton onClick={() => onDownloadFileNotary(documentNotary)} icon={<ArrowDownTrayIcon />} />,
}));
}

View File

@ -1,4 +1,4 @@
import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
import DocumentsNotary from "@Front/Api/LeCoffreApi/Notary/DocumentsNotary/DocumentsNotary";
import Modal from "@Front/Components/DesignSystem/Modal";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import React, { useCallback } from "react";
@ -15,7 +15,7 @@ export default function DeleteSentDocumentModal(props: IProps) {
const onDelete = useCallback(
() =>
Documents.getInstance()
DocumentsNotary.getInstance()
.delete(documentUid)
.then(() => onDeleteSuccess(documentUid))
.then(onClose)

View File

@ -8,18 +8,21 @@ import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Ty
import Module from "@Front/Config/Module";
import useOpenable from "@Front/Hooks/useOpenable";
import { ArrowDownTrayIcon, EyeIcon, TrashIcon } from "@heroicons/react/24/outline";
import { useMediaQuery } from "@mui/material";
import { Document } from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import { DocumentNotary } from "le-coffre-resources/dist/Notary";
import Link from "next/link";
import { useCallback, useEffect, useMemo, useState } from "react";
import classes from "./classes.module.scss";
import DeleteAskedDocumentModal from "./DeleteAskedDocumentModal";
import DeleteSentDocumentModal from "./DeleteSentDocumentModal";
import { useMediaQuery } from "@mui/material";
import FilesNotary from "@Front/Api/LeCoffreApi/Notary/FilesNotary/Files";
type IProps = {
documents: Document[];
documentsNotary: DocumentNotary[];
folderUid: string;
};
@ -31,7 +34,7 @@ const tradDocumentStatus: Record<EDocumentStatus, string> = {
};
export default function DocumentTables(props: IProps) {
const { documents: documentsProps, folderUid } = props;
const { documents: documentsProps, folderUid, documentsNotary } = props;
const [documents, setDocuments] = useState<Document[]>(documentsProps);
const [documentUid, setDocumentUid] = useState<string | null>(null);
@ -79,6 +82,23 @@ export default function DocumentTables(props: IProps) {
.catch((e) => console.warn(e));
}, []);
const onDownloadFileNotary = useCallback((doc: DocumentNotary) => {
const file = doc.files?.[0];
if (!file || !file?.uid) return;
return FilesNotary.getInstance()
.download(file.uid)
.then((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = file.file_name ?? "file";
a.click();
URL.revokeObjectURL(url);
})
.catch((e) => console.warn(e));
}, []);
const askedDocuments: IRowProps[] = useMemo(
() =>
documents
@ -190,27 +210,25 @@ export default function DocumentTables(props: IProps) {
[documents],
);
//TODO: modify accordingly when the back will handle sent documents
const sentDocuments: IRowProps[] = useMemo(
() =>
documents
documentsNotary
.map((document) => {
if (document.document_status !== "sent") return null;
return {
key: document.uid,
document_type: document.document_type?.name ?? "_",
document_status: <Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label={"Envoyé"} />,
document_type: document.files?.[0]?.file_name?.split(".")?.[0] ?? "_",
document_status: <Tag color={ETagColor.NEUTRAL} variant={ETagVariant.SEMI_BOLD} label={"ENVOYÉ"} />,
date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
actions: (
<div className={classes["actions"]}>
<IconButton onClick={() => onDownload(document)} icon={<ArrowDownTrayIcon />} />
<IconButton onClick={() => onDownloadFileNotary(document)} icon={<ArrowDownTrayIcon />} />
<IconButton icon={<TrashIcon onClick={() => openDeleteSentDocumentModal(document.uid)} />} />
</div>
),
};
})
.filter((document) => document !== null) as IRowProps[],
[documents, onDownload, openDeleteSentDocumentModal],
[documentsNotary, onDownloadFileNotary, openDeleteSentDocumentModal],
);
const progress = useMemo(() => {
@ -219,13 +237,9 @@ export default function DocumentTables(props: IProps) {
return (validatedDocuments.length / total) * 100;
}, [askedDocuments.length, refusedDocuments.length, toValidateDocuments.length, validatedDocuments.length]);
const handleDelete = useCallback(
(documentUid: string) => {
setDocuments(documents.filter((document) => document.uid !== documentUid));
const handleDelete = useCallback((_documentUid: string) => {
window.location.reload();
},
[documents],
);
}, []);
return (
<div className={classes["root"]}>

View File

@ -22,11 +22,10 @@ export default function ReminderModal(props: IProps) {
const [isAllSelected, setIsAllSelected] = useState(false);
const onRemind = useCallback(() => {
console.log("selectedOptions", selectedOptions);
Customers.getInstance().sendReminder(customer.uid!, selectedOptions.map((option) => option.value) as string[]);
onRemindSuccess();
onClose?.();
}, [onClose, onRemindSuccess, selectedOptions]);
}, [customer.uid, onClose, onRemindSuccess, selectedOptions]);
const documentsOptions: IOption[] = useMemo(
() =>

View File

@ -1,3 +1,4 @@
import DocumentsNotary from "@Front/Api/LeCoffreApi/Notary/DocumentsNotary/DocumentsNotary";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Tabs from "@Front/Components/Elements/Tabs";
@ -6,8 +7,9 @@ import { DocumentIcon, UserPlusIcon } from "@heroicons/react/24/outline";
import Customer from "le-coffre-resources/dist/Customer";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { DocumentNotary } from "le-coffre-resources/dist/Notary";
import Link from "next/link";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { AnchorStatus } from "..";
import classes from "./classes.module.scss";
@ -25,6 +27,7 @@ export type ICustomer = Customer & { id: string };
export default function ClientView(props: IProps) {
const { folder, anchorStatus } = props;
const [documentsNotary, setDocumentsNotary] = useState<DocumentNotary[]>([]);
const customers: ICustomer[] = useMemo(
() =>
@ -74,6 +77,12 @@ export default function ClientView(props: IProps) {
[folder],
);
useEffect(() => {
DocumentsNotary.getInstance()
.get({ where: { folder: { uid: folder.uid }, customer: { uid: customer.uid } }, include: { files: true } })
.then((documentsNotary) => setDocumentsNotary(documentsNotary));
}, [customer.uid, folder]);
return (
<section className={classes["root"]}>
<div className={classes["tab-container"]}>
@ -123,8 +132,8 @@ export default function ClientView(props: IProps) {
</div>
</div>
{doesCustomerHaveDocument ? (
<DocumentTables documents={customer.documents ?? []} folderUid={folder?.uid ?? ""} />
{doesCustomerHaveDocument || documentsNotary.length > 0 ? (
<DocumentTables documents={customer.documents ?? []} documentsNotary={documentsNotary} folderUid={folder?.uid ?? ""} />
) : (
<NoDocument />
)}

View File

@ -1,4 +1,5 @@
import backgroundImage from "@Assets/images/background_refonte.svg";
import DocumentsNotary from "@Front/Api/LeCoffreApi/Notary/DocumentsNotary/DocumentsNotary";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import AutocompleteMultiSelect from "@Front/Components/DesignSystem/AutocompleteMultiSelect";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
@ -15,95 +16,62 @@ import { useRouter } from "next/router";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import classes from "./classes.module.scss";
import DocumentsNotary from "@Front/Api/LeCoffreApi/Notary/DocumentsNotary/DocumentsNotary";
enum EClientSelection {
ALL_CLIENTS = "all_clients",
SELECTED_CLIENTS = "selected_clients",
}
// type IDocumentFileBase = {
// id: string;
// file: File | null;
// uid?: string;
// isLoading?: boolean;
// error?: string;
// };
// export type IDocumentFileWithUid = IDocumentFileBase & {
// uid: string;
// };
// type IDocumentFile = IDocumentFileBase | IDocumentFileWithUid;
export default function SendDocuments() {
const router = useRouter();
let { folderUid } = router.query;
const [folder, setFolder] = useState<OfficeFolder | null>(null);
const [clientSelection, setClientSelection] = useState<EClientSelection | null>(EClientSelection.SELECTED_CLIENTS);
const [clientSelection, setClientSelection] = useState<EClientSelection | null>(null);
const [selectedClients, setSelectedClients] = useState<string[]>([]);
const [files, setFiles] = useState<File[]>([]);
const onFormSubmit = useCallback(
async (
_e: React.FormEvent<HTMLFormElement> | null,
values: {
_values: {
[key: string]: any;
},
//TODO: when back is done
) => {
if (folder?.customers && clientSelection === EClientSelection.ALL_CLIENTS) {
const allClientIds = folder.customers.map((customer) => customer.uid ?? "");
setSelectedClients(allClientIds);
}
const formData = new FormData();
console.log("files", files);
// get the files from the input which name is "files"
// console.log({ values });
// const files: File[] = values["files"];
// console.log({ files });
selectedClients.forEach(async (customer) => {
formData.append("customerUid", customer as string);
formData.append("folderUid", folderUid as string);
if (!files[0]) {
if (!files.length) {
console.error("No files to send");
return;
}
formData.append("file", files[0]);
const documentNotary = await DocumentsNotary.getInstance().post(formData);
console.log(documentNotary);
try {
await Promise.all(
selectedClients.map(async (customer) => {
const promises = files.map(async (file) => {
const formData = new FormData();
formData.append("customerUid", customer as string);
formData.append("folderUid", folderUid as string);
formData.append("name", file.name);
formData.append("file", file);
// Envoi de chaque fichier pour chaque client
return DocumentsNotary.getInstance().post(formData);
});
// const formData = new FormData();
// files.forEach((file) => {
// if (file.file) {
// formData.append("file", file.file);
// }
// });
// selectedClients.forEach((client) => {
// formData.append("customers", client);
// });
// formData.append("folder", folderUid as string);
// const documentNotary = await DocumentsNotary.getInstance().post(formData);
// console.log(documentNotary);
},
[clientSelection, selectedClients, files],
// Attendre que tous les fichiers pour un client soient envoyés
await Promise.all(promises);
}),
);
router.push(
Module.getInstance()
.get()
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string),
);
console.log("All files have been successfully sent.");
} catch (error) {
console.error("Error while sending files: ", error);
}
},
[files, folderUid, router, selectedClients],
);
// const onAddToList = useCallback((documentFile: IDocumentFile) => {
// const test = files;
// test.push(documentFile);
// setFiles(test);
// }, []);
// const onRemoveFromList = useCallback((documentFile: IDocumentFile) => {
// const test = files;
// const index = test.findIndex((doc) => doc.id === documentFile.id);
// if (index === -1) return;
// test.splice(index, 1);
// setFiles(test);
// }, []);
const fetchFolder = useCallback(async () => {
Folders.getInstance()
@ -126,11 +94,9 @@ export default function SendDocuments() {
setClientSelection(selection);
if (selection === EClientSelection.ALL_CLIENTS && folder?.customers) {
// Automatically select all customers
const allClientIds = folder.customers.map((customer) => customer.uid ?? "");
setSelectedClients(allClientIds);
} else {
// Clear selected clients when selecting "Sélectionner certains clients"
setSelectedClients([]);
}
},
@ -143,11 +109,7 @@ export default function SendDocuments() {
useEffect(() => {
fetchFolder();
if (folder?.customers && clientSelection === EClientSelection.ALL_CLIENTS) {
const allClientIds = folder.customers.map((customer) => customer.uid ?? "");
setSelectedClients(allClientIds);
}
}, []);
}, [fetchFolder]);
const backUrl = useMemo(
() =>
@ -191,7 +153,6 @@ export default function SendDocuments() {
value={EClientSelection.SELECTED_CLIENTS}
label="Sélectionner certains clients"
onChange={onClientSelectionChange}
defaultChecked
/>
</div>

View File

@ -30,7 +30,6 @@ export default function Folder() {
},
})
.then((folders) => {
console.log(folders);
if (folders.length > 0)
router.push(
Module.getInstance()