fix: Fix issues with csv upload participants insertion (#284)

IEDCMEC · Feb 7, 2024 · 390c5a0 · 390c5a0
1 parent 69464ad
commit 390c5a0
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 42 deletions.
diff --git a/apps/core-admin/src/controllers/participants.ts b/apps/core-admin/src/controllers/participants.ts
@@ -5,22 +5,40 @@ import prisma from '../utils/database';
 export const addNewParticipant = async (req: Request, res: Response) => {
   try {
     const { orgId, eventId } = req?.params;
-    const { firstName, lastName } = req?.body;
+    const { isBulk } = req?.query;
+
+    if (isBulk === 'true') {
+      const { participants } = req?.body;
+
+      const newParticipants = await prisma.participant.createMany({
+        data: participants.map((p: any) => {
+          return {
+            firstName: p.firstName,
+            lastName: p.lastName,
+            organizationId: orgId,
+            eventId,
+          };
+        }),
+      });
+      return res.status(200).json({ newParticipants });
+    } else {
+      const { firstName, lastName } = req?.body;
+
+      const newParticipant = await prisma.participant.create({
+        data: {
+          firstName,
+          lastName,
+          organizationId: orgId,
+          eventId,
+        },
+      });
 
-    const newParticipant = await prisma.participant.create({
-      data: {
-        firstName,
-        lastName,
-        organizationId: orgId,
-        eventId,
-      },
-    });
+      if (!newParticipant) {
+        return res.status(500).json({ error: 'Something went wrong' });
+      }
 
-    if (!newParticipant) {
-      return res.status(500).json({ error: 'Something went wrong' });
+      return res.status(200).json({ newParticipant });
     }
-
-    return res.status(200).json({ newParticipant });
   } catch (err: any) {
     console.error(err);
     return res.status(500).json({ error: 'Something went wrong' });
@@ -48,7 +66,8 @@ export const addNewParticipantInBulk = async (req: Request, res: Response) => {
     return res.status(500).json({ error: 'Something went wrong' });
   }
 };
-// export const addNewParticipantInBulk = async (req: Request, res: Response) => {
+
+// export const addParticipantsInBulk = async (req: Request, res: Response) => {
 //   try {
 //     const { orgId, eventId } = req?.params;
 //     const { participants } = req?.body;
@@ -70,20 +89,26 @@ export const addNewParticipantInBulk = async (req: Request, res: Response) => {
 //         });
 //         newParticipants.push(newParticipant);
 //       } catch (error) {
-//         console.error(`Failed to add participant: ${participant.firstName} ${participant.lastName}`);
+//         console.error(
+//           `Failed to add participant: ${participant.firstName} ${participant.lastName}`,
+//         );
 //         failedParticipants.push(participant);
 //       }
 //     }
 
 //     if (failedParticipants.length > 0) {
-//       return res.status(201).json({ message: 'Some participants were not added', success: newParticipants, failed: failedParticipants });
+//       return res.status(201).json({
+//         message: 'Some participants were not added',
+//         success: newParticipants,
+//         failed: failedParticipants,
+//       });
 //     }
 //     return res.status(200).json({ newParticipants });
 //   } catch (err: any) {
 //     console.error(err);
 //     return res.status(500).json({ error: 'Something went wrong' });
 //   }
-// }
+// };
 
 export const getAllParticipants = async (req: Request, res: Response) => {
   try {

diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/index.jsx
@@ -62,26 +62,28 @@ export default function Events() {
           <Text fontSize="4xl" fontWeight="bold">
             Participants
           </Text>
-          <Button
-            padding="4"
-            minWidth="-moz-initial"
-            bgColor="rgb(128, 90, 213)"
-            color="white"
-            _hover={{ bgColor: 'rgb(100, 70, 183)' }}
-            onClick={handleClick}
-          >
-            Add Participant
-          </Button>
-          <Button
-            padding="4"
-            minWidth="-moz-initial"
-            bgColor="rgb(128, 90, 213)"
-            color="white"
-            _hover={{ bgColor: 'rgb(100, 70, 183)' }}
-            onClick={handleClick1}
-          >
-            Add Bulk
-          </Button>
+          <Box display="flex" gap={4}>
+            <Button
+              padding="4"
+              minWidth="-moz-initial"
+              bgColor="rgb(128, 90, 213)"
+              color="white"
+              _hover={{ bgColor: 'rgb(100, 70, 183)' }}
+              onClick={handleClick}
+            >
+              Add Participant
+            </Button>
+            <Button
+              padding="4"
+              minWidth="-moz-initial"
+              bgColor="rgb(128, 90, 213)"
+              color="white"
+              _hover={{ bgColor: 'rgb(100, 70, 183)' }}
+              onClick={handleClick1}
+            >
+              Upload CSV
+            </Button>
+          </Box>
         </Box>
         <Box width="100%" height="100%">
           <TableContainer width="100%" height="100%">

diff --git a/...in/src/pages/organizations/[orgId]/events/[eventId]/participants/new/upload-csv/index.jsx b/...in/src/pages/organizations/[orgId]/events/[eventId]/participants/new/upload-csv/index.jsx
@@ -2,14 +2,22 @@ import { useState } from 'react';
 import Papa from 'papaparse';
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
 
-import { Flex } from '@chakra-ui/react';
+import { useFetch } from '@/hooks/useFetch';
+
+import { useRouter } from 'next/router';
+import { Flex, Button } from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 import { ThemeProvider, createTheme } from '@mui/material';
 
 const MuiTheme = createTheme({});
 
 export default function NewOrganization() {
+  const { loading, post } = useFetch();
+  const router = useRouter();
+
+  const { orgId, eventId } = router.query;
+
   const [csvData, setCSVData] = useState(null);
 
   const handleFileUpload = (event) => {
@@ -19,19 +27,38 @@ export default function NewOrganization() {
       header: true,
       dynamicTyping: true,
       complete: (result) => {
-        const dataWithId = result.data.map((row, index) => ({ ...row, id: index + 1 }));
+        const filteredData = result.data.filter((row) => {
+          return Object.values(row).every((value) => value !== null && value !== undefined);
+        });
+
+        const dataWithId = filteredData.map((row, index) => ({ ...row, id: index + 1 }));
         setCSVData(dataWithId);
-        console.log('CSV Data as JSON:', dataWithId);
       },
       error: (error) => {
         console.error('Error parsing CSV:', error);
       },
     });
   };
 
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const { data, status } = await post(
+      `/core/organizations/${orgId}/events/${eventId}/participants?isBulk=true`,
+      {},
+      {
+        participants: csvData,
+      },
+    );
+    if (status === 200) {
+      router.push(`/organizations/${orgId}/events/${eventId}/participants`);
+    } else {
+      alert(data.error);
+    }
+  };
+
   const columns = [
-    { field: 'FirstName', headerName: 'First Name', width: 150 },
-    { field: 'LastName', headerName: 'Last Name', width: 150 },
+    { field: 'firstName', headerName: 'First Name', width: 150 },
+    { field: 'lastName', headerName: 'Last Name', width: 150 },
   ];
 
   return (
@@ -67,6 +94,7 @@ export default function NewOrganization() {
             </ThemeProvider>
           )}
         </div>
+        <Button onClick={handleSubmit}>Confirm and Add</Button>
       </Flex>
     </DashboardLayout>
   );