Merge pull request #383 from Open-Earth-Foundation/feature/new-data-flow

Feature/new data flow
Open-Earth-Foundation · Mar 29, 2024 · 45058ec · 45058ec
2 parents 46df715 + d9b1e5c
commit 45058ec
Show file tree

Hide file tree

Showing 20 changed files with 736 additions and 102 deletions.
diff --git a/app/migrations/20240314122321-add_scope_and_subsector_to_userfile.cjs b/app/migrations/20240314122321-add_scope_and_subsector_to_userfile.cjs
@@ -0,0 +1,20 @@
+'use strict';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up (queryInterface, Sequelize) {
+    await queryInterface.addColumn('UserFile', 'scopes', {
+      type: Sequelize.ARRAY(Sequelize.STRING),
+      allowNull: true
+    })
+    await queryInterface.addColumn('UserFile', 'subsectors', {
+      type: Sequelize.ARRAY(Sequelize.STRING),
+      allowNull: true
+    })
+  },
+
+  async down (queryInterface, Sequelize) {
+   await queryInterface.removeColumn('UserFile', 'scopes');
+   await queryInterface.removeColumn('UserFile', 'subsectors')
+  }
+};
diff --git a/app/src/app/[lng]/data/[step]/page.tsx b/app/src/app/[lng]/data/[step]/page.tsx
@@ -72,6 +72,7 @@ import type {
   SubSectorWithRelations,
 } from "./types";
 
+import AddFileDataModal from "@/components/Modals/add-file-data-modal";
 import { v4 as uuidv4 } from "uuid";
 import { InventoryValueAttributes } from "@/models/InventoryValue";
 import { DataSource } from "@/models/DataSource";
@@ -449,35 +450,18 @@ export default function AddDataSteps({
     (state: RootState) => state.inventoryData,
   );
   const dispatch = useDispatch();
-  function fileToBase64(file: File) {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
 
-      reader.onload = () => resolve(reader.result);
-      reader.onerror = (error) => reject(error);
-    });
-  }
   // Add file data to rudux state object
+  const {
+    isOpen: isfileDataModalOpen,
+    onOpen: onFileDataModalOpen,
+    onClose: onfileDataModalClose,
+  } = useDisclosure();
+
+  const [uploadedFile, setUploadedFile] = useState<File>();
+
   const handleFileSelect = async (file: File) => {
-    const base64FileString = await fileToBase64(file);
-    const filename = file.name;
-    dispatch(
-      addFile({
-        sectorName: currentStep.title!,
-        fileData: {
-          fileId: uuidv4(),
-          fileName: filename,
-          userId: userInfo?.userId,
-          sector: currentStep.title,
-          data: base64FileString,
-          // TODO this should not be passed in but rather set on the server (only necessary for AWS S3 or external hosting)
-          url: "http://localhost",
-          size: file.size,
-          fileType: filename.split(".").pop(),
-        },
-      }),
-    );
+    onFileDataModalOpen();
   };
 
   const sectorData = getInventoryData.sectors.filter(
@@ -892,74 +876,97 @@ export default function AddDataSteps({
           >
             <Box w="full">
               <Box mb="24px">
-                <FileInput onFileSelect={handleFileSelect} t={t} />
+                <FileInput
+                  onFileSelect={handleFileSelect}
+                  setUploadedFile={setUploadedFile}
+                  t={t}
+                />
               </Box>
               <Box mb="24px">
                 <Heading size="sm">{t("files-uploaded")}</Heading>
               </Box>
               <Box display="flex" flexDirection="column" gap="8px">
                 {sectorData &&
-                  sectorData[0]?.files.map((file: any, i: number) => (
-                    <Card
-                      shadow="none"
-                      h="80px"
-                      w="full"
-                      borderWidth="1px"
-                      borderColor="border.overlay"
-                      borderRadius="8px"
-                      px="16px"
-                      py="16px"
-                      key={i}
-                    >
-                      <Box display="flex" gap="16px">
-                        <Box>
-                          <ExcelFileIcon />
-                        </Box>
-                        <Box
-                          display="flex"
-                          flexDirection="column"
-                          justifyContent="center"
-                          gap="8px"
-                        >
-                          <Heading
-                            fontSize="lable.lg"
-                            fontWeight="normal"
-                            letterSpacing="wide"
-                            isTruncated
-                          >
-                            {file.fileName}
-                          </Heading>
-                          <Text
-                            fontSize="body.md"
-                            fontWeight="normal"
-                            color="interactive.control"
+                  sectorData[0]?.files.map((file: any, i: number) => {
+                    return (
+                      <Card
+                        shadow="none"
+                        minH="120px"
+                        w="full"
+                        borderWidth="1px"
+                        borderColor="border.overlay"
+                        borderRadius="8px"
+                        px="16px"
+                        py="16px"
+                        key={i}
+                      >
+                        <Box display="flex" gap="16px">
+                          <Box>
+                            <ExcelFileIcon />
+                          </Box>
+                          <Box
+                            display="flex"
+                            flexDirection="column"
+                            justifyContent="center"
+                            gap="8px"
                           >
-                            {bytesToMB(file.size)}
-                          </Text>
-                        </Box>
-                        <Box
-                          color="sentiment.negativeDefault"
-                          display="flex"
-                          justifyContent="right"
-                          alignItems="center"
-                          w="full"
-                        >
-                          <Button
-                            variant="ghost"
+                            <Heading
+                              fontSize="lable.lg"
+                              fontWeight="normal"
+                              letterSpacing="wide"
+                              isTruncated
+                            >
+                              {file.fileName}
+                            </Heading>
+                            <Text
+                              fontSize="body.md"
+                              fontWeight="normal"
+                              color="interactive.control"
+                            >
+                              {bytesToMB(file.size)}
+                            </Text>
+                          </Box>
+                          <Box
                             color="sentiment.negativeDefault"
-                            onClick={() =>
-                              removeSectorFile(
-                                file.fileId,
-                                sectorData[0].sectorName,
-                              )
-                            }
+                            display="flex"
+                            justifyContent="right"
+                            alignItems="center"
+                            w="full"
                           >
-                            <FiTrash2 size={24} />
-                          </Button>
+                            <Button
+                              variant="ghost"
+                              color="sentiment.negativeDefault"
+                              onClick={() =>
+                                removeSectorFile(
+                                  file.fileId,
+                                  sectorData[0].sectorName,
+                                )
+                              }
+                            >
+                              <FiTrash2 size={24} />
+                            </Button>
+                          </Box>
+                        </Box>
+                        <Box w="full" className="relative pl-[63px]">
+                          {file.subsectors.split(",").map((item: any) => (
+                            <Tag
+                              key={item}
+                              mt={2}
+                              mr={2}
+                              size="md"
+                              borderRadius="full"
+                              variant="solid"
+                              color="content.alternative"
+                              bg="background.neutral"
+                              maxW="150px"
+                            >
+                              <TagLabel>{item}</TagLabel>
+                            </Tag>
+                          ))}
                         </Box>
-                      </Box>
-                    </Card>
-                  ))}
+                      </Card>
+                    );
+                  })}
               </Box>
             </Box>
           </Box>
@@ -1005,6 +1012,16 @@ export default function AddDataSteps({
           </Box>
         </Box>
       </Card>
+      {/* Add fole data modal */}
+      <AddFileDataModal
+        isOpen={isfileDataModalOpen}
+        onClose={onfileDataModalClose}
+        subsectors={currentStep.subSectors}
+        t={t}
+        uploadedFile={uploadedFile!}
+        currentStep={currentStep}
+        userInfo={userInfo}
+      />
       {/*** Bottom bar ***/}
       <div className="bg-white w-full fixed bottom-0 left-0 border-t-4 border-brand py-4 px-4 drop-shadow-2xl hover:drop-shadow-4xl transition-all">
         <Box className="w-[1090px] max-w-full mx-auto flex flex-row flex-wrap gap-y-2">

diff --git a/app/src/app/[lng]/data/review/page.tsx b/app/src/app/[lng]/data/review/page.tsx
@@ -81,6 +81,8 @@ export default function ReviewPage({
           formData.append("userId", fileData.userId!);
           formData.append("fileName", fileData.fileName!);
           formData.append("sector", fileData.sector!);
+          formData.append("subsectors", fileData.subsectors!);
+          formData.append("scopes", fileData.scopes!);
           formData.append("status", defaultStatus);
           formData.append("fileReference", "");
           formData.append("url", fileData.url!);
@@ -279,6 +281,7 @@ export default function ReviewPage({
                       key={i}
                       fileName={file.fileName}
                       fileSize={file.size}
+                      subsectors={file.subsectors}
                     />
                   ))}
                 </Box>
@@ -401,6 +404,7 @@ export default function ReviewPage({
                         key={i}
                         fileName={file.fileName}
                         fileSize={file.size}
+                        subsectors={file.subsectors}
                       />
                     ))}
                   </Box>
@@ -546,6 +550,7 @@ export default function ReviewPage({
                           key={i}
                           fileName={file.fileName}
                           fileSize={file.size}
+                          subsectors={file.subsectors}
                         />
                       ),
                     )}

diff --git a/app/src/app/api/v0/city/[city]/file/route.ts b/app/src/app/api/v0/city/[city]/file/route.ts
@@ -75,6 +75,8 @@ export const POST = apiHandler(async (req: NextRequest, context) => {
   const buffer = Buffer.from(bytes);
 
   const fileType = filename.split(".").pop();
+  const subsectors = formData.get("subsectors") as string;
+  const scopes = formData.get("scopes") as string;
 
   const fileData = {
     userId: userId,
@@ -85,6 +87,8 @@ export const POST = apiHandler(async (req: NextRequest, context) => {
     fileType: fileType,
     fileName: filename,
     sector: formData.get("sector"),
+    subsectors: subsectors.split(","),
+    scopes: scopes.split(","),
     status: formData.get("status"),
     gpcRefNo: formData.get("gpcRefNo"),
   };

diff --git a/app/src/components/Cards/file-data-card.tsx b/app/src/components/Cards/file-data-card.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { CheckCircleIcon } from "@chakra-ui/icons";
-import { Box, Card, Text } from "@chakra-ui/react";
+import { Box, Card, Tag, TagLabel, Text } from "@chakra-ui/react";
 import { FcGoogle } from "react-icons/fc";
 import { MdCheckCircleOutline } from "react-icons/md";
 import { ExcelFileIcon } from "../icons";
@@ -11,13 +11,19 @@ import { bytesToMB } from "@/util/helpers";
 interface FileCardDataProps {
   fileName: string;
   fileSize: number;
+  subsectors: string;
 }
 
-const FileDataCard: FC<FileCardDataProps> = ({ fileName, fileSize }) => {
+const FileDataCard: FC<FileCardDataProps> = ({
+  fileName,
+  fileSize,
+  subsectors,
+}) => {
+  const tags = subsectors.split(",").map((item: string) => item.trim());
   return (
     <Card
-      maxW="331px"
-      maxH="100px"
+      minW="200px"
+      maxH="150px"
       shadow="none"
       borderRadius="8px"
       borderWidth="1px"
@@ -54,6 +60,23 @@ const FileDataCard: FC<FileCardDataProps> = ({ fileName, fileSize }) => {
           </Text>
         </Box>
       </Box>
+      <Box w="full" className="relative pl-[50px]">
+        {tags?.map((item: any) => (
+          <Tag
+            key={item}
+            mt={2}
+            mr={2}
+            size="md"
+            borderRadius="full"
+            variant="solid"
+            color="content.alternative"
+            bg="background.neutral"
+            maxW="150px"
+          >
+            <TagLabel>{item}</TagLabel>
+          </Tag>
+        ))}
+      </Box>
     </Card>
   );
 };