From cdefea0bdb6ed34c81db88495b5acac258dca9c0 Mon Sep 17 00:00:00 2001 From: atrincas Date: Tue, 3 Dec 2024 10:03:44 +0100 Subject: [PATCH] Updated file-upload component --- .../profile/file-upload/description/index.tsx | 70 +++++++++++++++++++ .../containers/profile/file-upload/index.tsx | 39 +++++++---- client/src/containers/profile/index.tsx | 34 ++------- 3 files changed, 101 insertions(+), 42 deletions(-) create mode 100644 client/src/containers/profile/file-upload/description/index.tsx diff --git a/client/src/containers/profile/file-upload/description/index.tsx b/client/src/containers/profile/file-upload/description/index.tsx new file mode 100644 index 00000000..5337a27d --- /dev/null +++ b/client/src/containers/profile/file-upload/description/index.tsx @@ -0,0 +1,70 @@ +import { FC } from "react"; + +import { FileDownIcon } from "lucide-react"; + +import { Button } from "@/components/ui/button"; + +const downloadFiles = (files: iFile[]) => { + files.forEach((f) => { + const link = document.createElement("a"); + link.href = f.path; + link.download = f.path.split("/").pop() || ""; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }); +}; + +const openFileUploadWindow = () => + document.getElementById("share-information-input")?.click(); + +interface iFile { + name: string; + path: string; +} + +interface FileUploadDescriptionProps { + files: iFile[]; +} + +const FileUploadDescription: FC = ({ files }) => { + return ( + <> +

+ Provide your input on the methodology and data by  + +  the required templates, completing them with the necessary + information, and  + +  them to contribute new insights for evaluation. +

+ +
    + {files.map((f) => ( +
  1. + +
    2. + ))} +
+ + ); +}; + +export default FileUploadDescription; diff --git a/client/src/containers/profile/file-upload/index.tsx b/client/src/containers/profile/file-upload/index.tsx index 8b6a00f4..f7ce8221 100644 --- a/client/src/containers/profile/file-upload/index.tsx +++ b/client/src/containers/profile/file-upload/index.tsx @@ -2,7 +2,7 @@ import React, { FC, useCallback, useState } from "react"; import { useDropzone } from "react-dropzone"; -import { FilePlusIcon, XIcon } from "lucide-react"; +import { FileUpIcon, XIcon } from "lucide-react"; import { useSession } from "next-auth/react"; import { client } from "@/lib/query-client"; @@ -13,10 +13,18 @@ import { Card } from "@/components/ui/card"; import { useToast } from "@/components/ui/toast/use-toast"; // Array should be in this order -const REQUIRED_FILES = [ - "carbon-input-template.xlsx", - "cost-input-template.xlsx", +export const EXCEL_FILES = [ + { + name: "carbon-input-template.xlsx", + path: "/forms/carbon-input-template.xlsx", + }, + { + name: "cost-input-template.xlsx", + path: "/forms/cost-input-template.xlsx", + }, ]; + +const REQUIRED_FILE_NAMES = EXCEL_FILES.map((f) => f.name); const EXCEL_EXTENSIONS = [".xlsx", ".xls"]; const MAX_FILES = 2; @@ -27,7 +35,7 @@ const FileUpload: FC = () => { const onDropAccepted = useCallback( (acceptedFiles: File[]) => { const validFiles = acceptedFiles.filter((file) => - REQUIRED_FILES.includes(file.name), + REQUIRED_FILE_NAMES.includes(file.name), ); if (validFiles.length !== acceptedFiles.length) { @@ -64,7 +72,7 @@ const FileUpload: FC = () => { }; const handleUploadClick = async () => { const fileNames = files.map((file) => file.name); - const missingFiles = REQUIRED_FILES.filter( + const missingFiles = REQUIRED_FILE_NAMES.filter( (name) => !fileNames.includes(name), ); @@ -76,7 +84,7 @@ const FileUpload: FC = () => { } const formData = new FormData(); - const sortedFiles = REQUIRED_FILES.map( + const sortedFiles = REQUIRED_FILE_NAMES.map( (name) => files.find((file) => file.name === name)!, ); @@ -117,19 +125,24 @@ const FileUpload: FC = () => { {...getRootProps()} variant="secondary" className={cn({ - "select-none border-dashed p-10 transition-colors": true, + "select-none border bg-big-stone-950 p-10 transition-colors": true, "bg-card": isDragActive, "cursor-pointer hover:bg-card": files.length < MAX_FILES, "cursor-not-allowed opacity-50": files.length >= MAX_FILES, })} > - +
- +

- {files.length < MAX_FILES - ? "Drop files, or click to upload" - : "You've attached the maximum of 2 files"} + {files.length < MAX_FILES ? ( + <> + Drag and drop the files or  + click to upload + + ) : ( + "You've attached the maximum of 2 files" + )}

diff --git a/client/src/containers/profile/index.tsx b/client/src/containers/profile/index.tsx index e5e4e7eb..7309497d 100644 --- a/client/src/containers/profile/index.tsx +++ b/client/src/containers/profile/index.tsx @@ -7,13 +7,13 @@ import Link from "next/link"; import { useSetAtom } from "jotai"; import CustomProjects from "@/containers/profile/custom-projects"; -import FileUpload from "@/containers/profile/file-upload"; +import FileUpload, { EXCEL_FILES } from "@/containers/profile/file-upload"; +import FileUploadDescription from "@/containers/profile/file-upload/description"; import ProfileSection from "@/containers/profile/profile-section"; import ProfileSidebar from "@/containers/profile/profile-sidebar"; import { intersectingAtom } from "@/containers/profile/store"; import UserDetails from "@/containers/profile/user-details"; -import { Button } from "@/components/ui/button"; import { ScrollArea } from "@/components/ui/scroll-area"; import { SidebarTrigger } from "@/components/ui/sidebar"; import DeleteAccount from "src/containers/profile/delete-account"; @@ -40,33 +40,9 @@ const sections = [ Component: CustomProjects, }, { - id: "data-upload", - title: "Data upload", - description: ( - <> -

- Download the required templates, fill them in, and upload the - completed files below. -

- -
    -
  1. - -
    2. -
  2. - -
    3. -
- - ), + id: "share-information", + title: "Share information", + description: , Component: FileUpload, }, {