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

Fixed Notary documents

Browse Source
This commit is contained in:
Vins 2024-09-09 11:15:41 +02:00
parent 5f7a4c2e63
commit a2068bb0fa
2 changed files with 49 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/front/Components/DesignSystem/DragAndDrop/index.tsx
View File

@ -22,8 +22,8 @@ type IProps = {
defaultFiles?: IDocumentFileWithUid[]; defaultFiles?: IDocumentFileWithUid[];
onDelete?: (fileUid: string) => Promise<any>; onDelete?: (fileUid: string) => Promise<any>;
onAddFile?: (file: File) => Promise<any>; onAddFile?: (file: File) => Promise<any>;
onAddToList?: (file: IDocumentFile) => void; name?: string;
onRemoveFromList?: (file: IDocumentFile) => void; onChange?: (files: File[]) => void;
} & ( } & (
| { onDelete: (fileUid: string) => Promise<any>; onAddFile?: never; defaultFiles: IDocumentFileWithUid[] } | { onDelete: (fileUid: string) => Promise<any>; onAddFile?: never; defaultFiles: IDocumentFileWithUid[] }
| { onDelete?: never; onAddFile: (file: File) => Promise<any>; defaultFiles: IDocumentFileWithUid[] } | { onDelete?: never; onAddFile: (file: File) => Promise<any>; defaultFiles: IDocumentFileWithUid[] }
@ -70,7 +70,7 @@ export type IDocumentFileWithUid = IDocumentFileBase & {
type IDocumentFile = IDocumentFileBase | IDocumentFileWithUid; type IDocumentFile = IDocumentFileBase | IDocumentFileWithUid;
export default function DragAndDrop(props: IProps) { export default function DragAndDrop(props: IProps) {
const { title, description, defaultFiles, onDelete, onAddFile, onAddToList, onRemoveFromList } = props; const { title, description, defaultFiles, onDelete, onAddFile, name, onChange } = props;
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const [documentFiles, setDocumentFiles] = useState<IDocumentFile[]>([]); const [documentFiles, setDocumentFiles] = useState<IDocumentFile[]>([]);
@ -81,6 +81,8 @@ export default function DragAndDrop(props: IProps) {
} }
}, [defaultFiles]); }, [defaultFiles]);
useEffect(() => onChange?.(documentFiles.map((doc) => doc.file).filter((file) => file !== null) as File[]), [documentFiles, onChange]);
const handleAddFiles = useCallback( const handleAddFiles = useCallback(
(files: File[]) => { (files: File[]) => {
files.forEach((file) => { files.forEach((file) => {
@ -97,9 +99,6 @@ export default function DragAndDrop(props: IProps) {
} }
return setTimeout(async () => { return setTimeout(async () => {
if (onAddToList) {
onAddToList(newDoc);
}
setDocumentFiles((prevDocs) => prevDocs.map((doc) => (doc.id === newDoc.id ? newDoc : doc))); setDocumentFiles((prevDocs) => prevDocs.map((doc) => (doc.id === newDoc.id ? newDoc : doc)));
}, 1000); }, 1000);
} catch (error: any) { } catch (error: any) {
@ -122,9 +121,6 @@ export default function DragAndDrop(props: IProps) {
const handleRemove = useCallback( const handleRemove = useCallback(
(documentFile: IDocumentFile) => { (documentFile: IDocumentFile) => {
if (onRemoveFromList) {
onRemoveFromList(documentFile);
}
const loadingDoc = { ...documentFile, isLoading: true }; const loadingDoc = { ...documentFile, isLoading: true };
setDocumentFiles((prevDocs) => prevDocs.map((doc) => (doc.id === documentFile.id ? loadingDoc : doc))); setDocumentFiles((prevDocs) => prevDocs.map((doc) => (doc.id === documentFile.id ? loadingDoc : doc)));
@ -210,6 +206,7 @@ export default function DragAndDrop(props: IProps) {
function inputFile() { function inputFile() {
return ( return (
<input <input
name={name}
ref={fileInputRef} ref={fileInputRef}
type="file" type="file"
multiple multiple

75
src/front/Components/Layouts/Folder/SendDocuments/index.tsx
View File

@ -22,32 +22,32 @@ enum EClientSelection {
SELECTED_CLIENTS = "selected_clients", SELECTED_CLIENTS = "selected_clients",
} }
type IDocumentFileBase = { // type IDocumentFileBase = {
id: string; // id: string;
file: File | null; // file: File | null;
uid?: string; // uid?: string;
isLoading?: boolean; // isLoading?: boolean;
error?: string; // error?: string;
}; // };
export type IDocumentFileWithUid = IDocumentFileBase & { // export type IDocumentFileWithUid = IDocumentFileBase & {
uid: string; // uid: string;
}; // };
type IDocumentFile = IDocumentFileBase | IDocumentFileWithUid; // type IDocumentFile = IDocumentFileBase | IDocumentFileWithUid;
export default function SendDocuments() { export default function SendDocuments() {
const router = useRouter(); const router = useRouter();
let { folderUid } = router.query; let { folderUid } = router.query;
const [folder, setFolder] = useState<OfficeFolder | null>(null); const [folder, setFolder] = useState<OfficeFolder | null>(null);
const [clientSelection, setClientSelection] = useState<EClientSelection | null>(EClientSelection.SELECTED_CLIENTS); const [clientSelection, setClientSelection] = useState<EClientSelection | null>(EClientSelection.SELECTED_CLIENTS);
const [files, setFiles] = useState<IDocumentFile[]>([]);
const [selectedClients, setSelectedClients] = useState<string[]>([]); const [selectedClients, setSelectedClients] = useState<string[]>([]);
const [files, setFiles] = useState<File[]>([]);
const onFormSubmit = useCallback( const onFormSubmit = useCallback(
async ( async (
_e: React.FormEvent<HTMLFormElement> | null, _e: React.FormEvent<HTMLFormElement> | null,
_values: { values: {
[key: string]: any; [key: string]: any;
}, },
//TODO: when back is done //TODO: when back is done
@ -57,14 +57,21 @@ export default function SendDocuments() {
setSelectedClients(allClientIds); setSelectedClients(allClientIds);
} }
const formData = new FormData(); 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) => { selectedClients.forEach(async (customer) => {
console.log(files[0]?.file);
if (!files[0]?.file) return;
formData.append("customerUid", customer as string); formData.append("customerUid", customer as string);
formData.append("folderUid", folderUid as string); formData.append("folderUid", folderUid as string);
formData.append("file", files[0].file as File); if (!files[0]) {
console.error("No files to send");
return;
}
formData.append("file", files[0]);
const documentNotary = await DocumentsNotary.getInstance().post(formData); const documentNotary = await DocumentsNotary.getInstance().post(formData);
console.log(documentNotary); console.log(documentNotary);
}); });
@ -81,22 +88,22 @@ export default function SendDocuments() {
// const documentNotary = await DocumentsNotary.getInstance().post(formData); // const documentNotary = await DocumentsNotary.getInstance().post(formData);
// console.log(documentNotary); // console.log(documentNotary);
}, },
[files, clientSelection, selectedClients], [clientSelection, selectedClients, files],
); );
const onAddToList = useCallback((documentFile: IDocumentFile) => { // const onAddToList = useCallback((documentFile: IDocumentFile) => {
const test = files; // const test = files;
test.push(documentFile); // test.push(documentFile);
setFiles(test); // setFiles(test);
}, []); // }, []);
const onRemoveFromList = useCallback((documentFile: IDocumentFile) => { // const onRemoveFromList = useCallback((documentFile: IDocumentFile) => {
const test = files; // const test = files;
const index = test.findIndex((doc) => doc.id === documentFile.id); // const index = test.findIndex((doc) => doc.id === documentFile.id);
if (index === -1) return; // if (index === -1) return;
test.splice(index, 1); // test.splice(index, 1);
setFiles(test); // setFiles(test);
}, []); // }, []);
const fetchFolder = useCallback(async () => { const fetchFolder = useCallback(async () => {
Folders.getInstance() Folders.getInstance()
@ -150,6 +157,10 @@ export default function SendDocuments() {
[folderUid], [folderUid],
); );
const handleFileChange = useCallback((files: File[]) => {
setFiles(files);
}, []);
const clientsOptions = useMemo(() => { const clientsOptions = useMemo(() => {
if (!folder?.customers) return []; if (!folder?.customers) return [];
return folder.customers.map((customer) => ({ return folder.customers.map((customer) => ({
@ -195,10 +206,10 @@ export default function SendDocuments() {
{clientSelection && ( {clientSelection && (
<> <>
<DragAndDrop <DragAndDrop
name="files"
title="Glisser ou déposer ou" title="Glisser ou déposer ou"
description="Formats acceptés : PDF, JPG Taille maximale : 5 Mo" description="Formats acceptés : PDF, JPG Taille maximale : 5 Mo"
onAddToList={onAddToList} onChange={handleFileChange}
onRemoveFromList={onRemoveFromList}
/> />
<div className={classes["buttons-container"]}> <div className={classes["buttons-container"]}>