feat(web-admin): Add email and phone to datagrid (#325)

* participantSchema => email + phone * migration participantSchema * participant body update * merge * Add email and phone fields to participant tables --------- Co-authored-by: vaidyanath b <[email protected]>
IEDCMEC · Feb 27, 2024 · d67d8cb · d67d8cb
1 parent 2f892a3
commit d67d8cb
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 7 deletions.
diff --git a/apps/core-admin/src/controllers/participants.ts b/apps/core-admin/src/controllers/participants.ts
@@ -93,6 +93,9 @@ export const addNewParticipant = async (req: Request, res: Response) => {
               lastName: p.lastName,
               organizationId: orgId,
               eventId,
+              email: p.email,
+              phone: p.phone,
+
               participantAttributes: {
                 create: attributes
                   .map((attribute: any) => ({
@@ -125,7 +128,7 @@ export const addNewParticipant = async (req: Request, res: Response) => {
       //
       // Single participant addition
       //
-      const { firstName, lastName, attributes } = req?.body;
+      const { firstName, lastName, attributes, phone, email } = req?.body;
 
       attributes.filter((attribute: any) => {
         if (!attribute.value) {
@@ -139,6 +142,8 @@ export const addNewParticipant = async (req: Request, res: Response) => {
           lastName,
           organizationId: orgId,
           eventId,
+          email,
+          phone,
           participantAttributes: {
             create: attributes.map((attribute: any) => {
               return {
@@ -165,7 +170,7 @@ export const addNewParticipant = async (req: Request, res: Response) => {
 export const editParticipant = async (req: Request, res: Response) => {
   try {
     const { orgId, eventId, participantId } = req?.params;
-    const { firstName, lastName } = req?.body;
+    const { firstName, lastName, phone, email } = req?.body;
 
     if (!firstName || !lastName) {
       return res.status(400).json({ error: 'First name and last name are required' });
@@ -178,6 +183,8 @@ export const editParticipant = async (req: Request, res: Response) => {
       data: {
         firstName,
         lastName,
+        phone,
+        email,
       },
     });
 
@@ -217,6 +224,8 @@ export const getAllParticipants = async (req: Request, res: Response) => {
         addedAt: participant.createdAt,
         firstName: participant.firstName,
         lastName: participant.lastName,
+        phone: participant.phone,
+        email: participant.email,
         numberOfAttributesAssigned: participant.participantAttributes.length,
         numnerOfExtrasAssigned: participant.participantExtras.length,
         checkedIn: participant.participantCheckIn.length > 0 ? true : false,
@@ -260,6 +269,8 @@ export const getAllParticipantsCheckInDetails = async (req: Request, res: Respon
         participantId: participant.id,
         firstName: participant.firstName,
         lastName: participant.lastName,
+        phone: participant.phone,
+        email: participant.email,
         checkIn: {
           status: participant.participantCheckIn.length > 0 ? true : false,
           checkedInAt:
@@ -436,6 +447,8 @@ export const getParticipantById = async (req: Request, res: Response) => {
       lastName: participant.lastName,
       attributes: participant.attributes,
       extras: participant.extras,
+      email: participant.email,
+      phone: participant.phone,
       numberOfAttributesAssigned: participant.participantAttributes.length,
       numberOfExtrasAssigned: participant.participantExtras.length,
       numberOfExtrasCheckedIn: participant.participantExtrasCheckIn.length,

diff --git a/...admin/src/pages/organizations/[orgId]/events/[eventId]/attributes/[attributeId]/index.jsx b/...admin/src/pages/organizations/[orgId]/events/[eventId]/attributes/[attributeId]/index.jsx
@@ -14,6 +14,8 @@ const columns = [
   { field: 'value', headerName: 'Value', width: 200 },
   { field: 'firstName', headerName: 'First Name', width: 200 },
   { field: 'lastName', headerName: 'Last Name', width: 200 },
+  { field: 'email', headerName: 'Email', width: 200 },
+  { field: 'phone', headerName: 'Phone', width: 200 },
   { field: 'addedAt', headerName: 'Added At', width: 200 },
 ];
 

diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/extras/[extraId]/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/extras/[extraId]/index.jsx
@@ -12,6 +12,8 @@ import { useAlert } from '@/hooks/useAlert';
 const columns = [
   { field: 'firstName', headerName: 'First Name', width: 200 },
   { field: 'lastName', headerName: 'Last Name', width: 200 },
+  { field: 'email', headerName: 'Email', width: 200 },
+  { field: 'phone', headerName: 'Phone', width: 200 },
   { field: 'addedAt', headerName: 'Added At', width: 200 },
   {
     field: 'status',

diff --git a/...n/src/pages/organizations/[orgId]/events/[eventId]/participants/[participantId]/index.jsx b/...n/src/pages/organizations/[orgId]/events/[eventId]/participants/[participantId]/index.jsx
@@ -82,6 +82,8 @@ export default function ParticipantById() {
           <Text>ID: {participant.id}</Text>
           <Text>Fist Name: {participant.firstName}</Text>
           <Text>Last Name: {participant.lastName}</Text>
+          <Text>Email: {participant.email}</Text>
+          <Text>Phone: {participant.phone}</Text>
         </Flex>
         <Text>Check In</Text>
         <Flex flexDirection="column">

diff --git a/...eb-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/check-in/index.jsx b/...eb-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/check-in/index.jsx
@@ -13,6 +13,8 @@ import { useFetch } from '@/hooks/useFetch';
 const columns = [
   { field: 'firstName', headerName: 'First Name', width: 200 },
   { field: 'lastName', headerName: 'Last Name', width: 200 },
+  { field: 'email', headerName: 'Email', width: 200 },
+  { field: 'phone', headerName: 'Phone', width: 200 },
   {
     field: 'checkedInAt',
     headerName: 'Check-In At',

diff --git a/...n/src/pages/organizations/[orgId]/events/[eventId]/participants/check-in/new-in/index.jsx b/...n/src/pages/organizations/[orgId]/events/[eventId]/participants/check-in/new-in/index.jsx
@@ -117,6 +117,40 @@ export default function CheckInParticipant() {
             ))}
           </Select>
         </FormControl>
+
+        <FormControl my={4}>
+          <FormLabel>Phone Number</FormLabel>
+          <Select
+            placeholder="Select Phone Number"
+            value={participantId}
+            onChange={(e) => {
+              setParticipantId(e.target.value);
+            }}
+          >
+            {participants.map((participant) => (
+              <option key={participant.id} value={participant.id}>
+                {participant.phone}
+              </option>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl my={4}>
+          <FormLabel>Email</FormLabel>
+          <Select
+            placeholder="Select Email"
+            value={participantId}
+            onChange={(e) => {
+              setParticipantId(e.target.value);
+            }}
+          >
+            {participants.map((participant) => (
+              <option key={participant.id} value={participant.id}>
+                {participant.email}
+              </option>
+            ))}
+          </Select>
+        </FormControl>
+
         <Button type="submit" width="100%" my="4" isLoading={loading} loadingText="Please Wait">
           Check In
         </Button>

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
@@ -13,6 +13,8 @@ import { useFetch } from '@/hooks/useFetch';
 const columns = [
   { field: 'firstName', headerName: 'First Name', width: 200 },
   { field: 'lastName', headerName: 'Last Name', width: 200 },
+  { field: 'email', headerName: 'Email', width: 200 },
+  { field: 'phone', headerName: 'Phone', width: 200 },
   { field: 'checkedIn', headerName: 'CheckedIn', width: 200 },
   { field: 'numberOfAttributesAssigned', headerName: 'Attributes Assigned', width: 200 },
   { field: 'numnerOfExtrasAssigned', headerName: 'Extras Assigned', width: 200 },

diff --git a/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/new/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/events/[eventId]/participants/new/index.jsx
@@ -18,6 +18,8 @@ export default function NewParticipant() {
   const [attributes, setAttributes] = useState([]);
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
   const [attributeValues, setAttributeValues] = useState([]);
 
   const handleSubmit = async (e) => {
@@ -102,6 +104,24 @@ export default function NewParticipant() {
             }}
           />
         </FormControl>
+        <FormLabel>Email</FormLabel>
+        <Input
+          type="text"
+          name="email"
+          value={email}
+          onChange={(e) => {
+            setEmail(e.target.value);
+          }}
+        />
+        <FormLabel>Phone</FormLabel>
+        <Input
+          type="text"
+          name="phone"
+          value={phone}
+          onChange={(e) => {
+            setPhone(e.target.value);
+          }}
+        />{' '}
         {attributes.map((attribute) => (
           <FormControl my={4} key={attribute.id}>
             <FormLabel>{attribute.name}</FormLabel>

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
@@ -22,14 +22,21 @@ export default function NewParticipantByCSVUpload() {
   const [columns, setColumns] = useState([
     { field: 'firstName', headerName: 'First Name' },
     { field: 'lastName', headerName: 'Last Name' },
+    { field: 'email', headerName: 'Email' },
+    { field: 'phone', headerName: 'Phone' },
   ]);
 
   const handleFileUpload = (event) => {
     const file = event.target.files[0];
 
     Papa.parse(file, {
       header: true,
-      dynamicTyping: true,
+      dynamicTyping: (field) => {
+        // Keep 'phone' field as string
+        if (field === 'phone') return false;
+        // Convert other fields
+        return true;
+      },
       complete: (result) => {
         const filteredData = result.data.filter((row) => {
           return Object.values(row).every((value) => value !== null && value !== undefined);
@@ -48,6 +55,8 @@ export default function NewParticipantByCSVUpload() {
             (column) =>
               column.field !== 'firstName' &&
               column.field !== 'lastName' &&
+              column.field !== 'email' &&
+              column.field !== 'phone' &&
               !(column.field.startsWith('_') || column.field.startsWith('&')),
           )
         ) {
@@ -60,7 +69,15 @@ export default function NewParticipantByCSVUpload() {
           });
         }
 
-        if (columns.find((column) => column.field !== 'firstName' || column.field !== 'lastName')) {
+        if (
+          columns.find(
+            (column) =>
+              column.field !== 'firstName' ||
+              column.field !== 'lastName' ||
+              column.field !== 'email' ||
+              column.field !== 'phone',
+          )
+        ) {
           showAlert({
             title: 'Info',
             description:
@@ -88,6 +105,8 @@ export default function NewParticipantByCSVUpload() {
         (column) =>
           column.field !== 'firstName' &&
           column.field !== 'lastName' &&
+          column.field !== 'email' &&
+          column.field !== 'phone' &&
           !(column.field.startsWith('_') || column.field.startsWith('&')),
       )
     ) {
@@ -101,6 +120,8 @@ export default function NewParticipantByCSVUpload() {
       setColumns([
         { field: 'firstName', headerName: 'First Name' },
         { field: 'lastName', headerName: 'Last Name' },
+        { field: 'email', headerName: 'Email' },
+        { field: 'phone', headerName: 'Phone' },
       ]);
     }
   }, [columns]);
@@ -146,9 +167,9 @@ export default function NewParticipantByCSVUpload() {
       >
         {!csvData && (
           <Text fontSize="xl">
-            Upload a CSV file of participants. The required columns are firstName, lastName. Extra
-            attributes should be prefixed with an underscore (_) and extras to be checked-in should
-            be prefixed with and ampersand (&).
+            Upload a CSV file of participants. The required columns are firstName, lastName , phone
+            , email. Extra attributes should be prefixed with an underscore (_) and extras to be
+            checked-in should be prefixed with and ampersand (&).
           </Text>
         )}
         <Flex justifyContent="space-between" alignItems="center">