add functionality to allow for multiple TEC attendance picture submission

frontend/src/components/Forms/TeamEventCreditsForm/TeamEventCreditsForm.module.css

@@ -57,3 +57,7 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.modalContent {
+  max-height: 60vh !important;
+}

frontend/src/components/Forms/TeamEventCreditsForm/TeamEventCreditsForm.tsx

@@ -19,6 +19,8 @@
   const [pendingAttendance, setPendingAttendance] = useState<TeamEventAttendance[]>([]);
   const [rejectedAttendance, setRejectedAttendance] = useState<TeamEventAttendance[]>([]);
   const [isAttendanceLoading, setIsAttendanceLoading] = useState<boolean>(true);
+  const [imageIndex, setImageIndex] = useState<number[]>([0]);
+  const [images, setImages] = useState<string[]>([]);
 
   useEffect(() => {
     TeamEventsAPI.getAllTeamEventInfo().then((teamEvents) => setTeamEventInfoList(teamEvents));
@@ -30,17 +32,25 @@
     });
   }, []);
 
+  const handleAddIconClick = () => {
+    const newIndex = imageIndex.length;
+    setImageIndex([...imageIndex, newIndex]);
+  };
+
   const handleNewImage = (e: React.ChangeEvent<HTMLInputElement>): void => {
     if (!e.target.files) return;
     const newImage = URL.createObjectURL(e.target.files[0]);
     setImage(newImage);
+    setImages([...images, newImage]);
   };
 
-  const requestTeamEventCredit = async (eventCreditRequest: TeamEventAttendance) => {
+  const requestTeamEventCredit = async (
+    eventCreditRequest: TeamEventAttendance,
+    uploadedImage: string
+  ) => {
     const createdAttendance = await TeamEventsAPI.requestTeamEventCredit(eventCreditRequest);
-
     // upload image
-    const blob = await fetch(image).then((res) => res.blob());
+    const blob = await fetch(uploadedImage).then((res) => res.blob());
     const imageURL: string = window.URL.createObjectURL(blob);
     await ImagesAPI.uploadEventProofImage(blob, eventCreditRequest.image).then(() =>
       setImage(imageURL)
@@ -70,7 +80,25 @@
         contentMsg: 'Team events must be logged for at least 0.5 hours!'
       });
     } else {
+
+      images.map(async (image, index) => {
+        const newTeamEventAttendance: TeamEventAttendance = {
+          member: userInfo,
+          hoursAttended: teamEvent.hasHours ? Number(hours) : undefined,
+          image: `eventProofs/${getNetIDFromEmail(userInfo.email)}/${new Date().toISOString()}`,
+          eventUuid: teamEvent.uuid,
+          pending: true,
+          status: 'pending' as Status,
+          reason: '',
+          uuid: ''
+        };
+
+        const createdAttendance = await requestTeamEventCredit(
+          newTeamEventAttendance,
+          images[index]
+        );
+
       const newTeamEventAttendance: TeamEventAttendance = {
         member: userInfo,
         hoursAttended: teamEvent.hasHours ? Number(hours) : undefined,
         image: `eventProofs/${getNetIDFromEmail(userInfo.email)}/${new Date().toISOString()}`,
@@ -80,7 +108,7 @@
         uuid: ''
       };
 
-      requestTeamEventCredit(newTeamEventAttendance).then((createdAttendance) => {
+
         if (createdAttendance) {
           const updatedAttendance = { ...newTeamEventAttendance, uuid: createdAttendance.uuid };
           setPendingAttendance((pending) => [...pending, updatedAttendance]);
@@ -198,15 +226,27 @@
             Please include a picture of yourself (and others) and/or an email chain only if the
             former is not possible.
           </p>
-          <input
-            id="newImage"
-            type="file"
-            accept="image/png, image/jpeg"
-            defaultValue=""
-            value={image ? undefined : ''}
-            onChange={handleNewImage}
-          />
+          {imageIndex.map((item, index) => (
+            <div className="input_container" style={{ marginBottom: '10px' }} key={index}>
+              <input
+                id="newImage"
+                type="file"
+                accept="image/png, image/jpeg"
+                defaultValue=""
+                value={image ? undefined : ''}
+                onChange={handleNewImage}
+              />
+            </div>
+          ))}
         </div>
+        <Form.Button
+          floated="right"
+          size="mini"
+          style={{ marginBottom: '10px' }}
+          onClick={handleAddIconClick}
+        >
+          +
+        </Form.Button>
         <Form.Button floated="right" onClick={submitTeamEventCredit}>
           Submit
         </Form.Button>

frontend/src/components/Forms/TeamEventCreditsForm/TeamEventsCreditDashboard.tsx

@@ -1,5 +1,5 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import { Card, Loader, Message, Button } from 'semantic-ui-react';
+import React, { Dispatch, SetStateAction, useState } from 'react';
+import { Card, Loader, Message, Button, Modal, Header, Image } from 'semantic-ui-react';
 import { useSelf } from '../../Common/FirestoreDataProvider';
 import styles from './TeamEventCreditsForm.module.css';
 import { TeamEventsAPI } from '../../../API/TeamEventsAPI';
@@ -28,6 +28,9 @@ const TeamEventCreditDashboard = (props: {
     isAttendanceLoading,
     setPendingAttendance
   } = props;
+  const [image, setImage] = useState('');
+  const [open, setOpen] = useState(false);
+  const [isLoading, setLoading] = useState(true);
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const userRole = useSelf()!.role;
@@ -41,6 +44,14 @@ const TeamEventCreditDashboard = (props: {
     return 1;
   };
 
+  const getTeamEventImage = (attendance: TeamEventAttendance) => {
+    setLoading(true);
+    ImagesAPI.getEventProofImage(attendance.image).then((url: string) => {
+      setImage(url);
+      setLoading(false);
+    });
+  };
+
   const deleteTECAttendanceRequest = (attendance: TeamEventAttendance) => {
     TeamEventsAPI.deleteTeamEventAttendance(attendance.uuid)
       .then(() => {
@@ -121,15 +132,53 @@ const TeamEventCreditDashboard = (props: {
                   {attendance.reason ? <Card.Meta>Reason: {attendance.reason}</Card.Meta> : null}
                   <Card.Meta>
                     {attendance.status === 'pending' && (
-                      <Button
-                        basic
-                        color="red"
-                        onClick={() => {
-                          deleteTECAttendanceRequest(attendance);
-                        }}
-                      >
-                        Cancel
-                      </Button>
+                      <div>
+                        <Button
+                          basic
+                          color="red"
+                          floated="right"
+                          size="small"
+                          onClick={() => {
+                            deleteTECAttendanceRequest(attendance);
+                          }}
+                        >
+                          Cancel
+                        </Button>
+
+                        <Modal
+                          closeIcon
+                          onClose={() => setOpen(false)}
+                          onOpen={() => {
+                            getTeamEventImage(attendance);
+                            setOpen(true);
+                          }}
+                          open={open}
+                          trigger={
+                            <Button basic color="green" floated="left" size="small">
+                              Preview
+                            </Button>
+                          }
+                        >
+                          <Modal.Header>Team Event Credit Preview</Modal.Header>
+                          <Modal.Content className={styles.modalContent} scrolling>
+                            <Modal.Description>
+                              <Header>
+                                {attendance.member.firstName} {attendance.member.lastName}
+                              </Header>
+                              <p>Team Event: {teamEvent.name}</p>
+                              <p>Number of Credits: {teamEvent.numCredits}</p>
+                              {teamEvent.hasHours && (
+                                <p> Hours Attended: {attendance.hoursAttended}</p>
+                              )}
+                              {isLoading ? (
+                                <Loader className="modalLoader" active inline />
+                              ) : (
+                                <Image src={image} />
+                              )}
+                            </Modal.Description>
+                          </Modal.Content>
+                        </Modal>
+                      </div>
                     )}
                   </Card.Meta>
                   {COMMUNITY_EVENTS && (