merged main

ctc-uci · Apr 17, 2024 · 2d7bfc3 · 2d7bfc3
2 parents 80b96cd + 689e799
commit 2d7bfc3
Show file tree

Hide file tree

Showing 24 changed files with 7,199 additions and 8,870 deletions.
diff --git a/src/components/Checkin/CheckinStatsDashboard.jsx b/src/components/Checkin/CheckinStatsDashboard.jsx
@@ -1,14 +1,17 @@
 /* eslint-disable react/prop-types */
 
-import { Text, Flex, Button, Box, VStack } from '@chakra-ui/react';
-
-import { FaLocationDot, FaNewspaper } from 'react-icons/fa6';
+import { Text, Flex, Button, Box, VStack, HStack, useDisclosure } from '@chakra-ui/react';
+import { FaPen } from 'react-icons/fa';
+import { FaLocationDot } from 'react-icons/fa6';
 import { IoDocumentText } from 'react-icons/io5';
 import { IoMdPeople } from 'react-icons/io';
 import { CalendarIcon, TimeIcon } from '@chakra-ui/icons';
 import HappeningInChip from '../HappeningInChip/HappeningInChip';
+import EditEventModal from '../EventsModal/EditEventModal';
 
 const CheckinStatsDashboard = ({ event, registered, checkin }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
   // formats dbms date into Month Day, Year
   const getDateString = () => {
     const dateObject = new Date(Date.parse(event['date']));
@@ -19,6 +22,7 @@ const CheckinStatsDashboard = ({ event, registered, checkin }) => {
       // on page load, prevents displaying "Undefined" as date
       return '';
     }
+
     return dateString;
   };
 
@@ -31,6 +35,7 @@ const CheckinStatsDashboard = ({ event, registered, checkin }) => {
     if (value > 12) {
       return (value - 12).toString() + time.substring(2);
     }
+
     return time;
   };
 
@@ -39,9 +44,22 @@ const CheckinStatsDashboard = ({ event, registered, checkin }) => {
       <Flex direction={{ base: 'column', md: 'row' }} w={'full'}>
         <Flex flexDir={'column'} w={'50%'}>
           <Box>{event && <HappeningInChip date={new Date(Date.parse(event['date']))} />}</Box>
-          <Text fontSize={40} fontWeight="bold" color={'rgba(0, 0, 0, 0.75)'}>
-            {event?.name}
-          </Text>
+          <HStack>
+            <Text fontSize={40} fontWeight="bold" color={'rgba(0, 0, 0, 0.75)'}>
+              {event?.name}
+            </Text>
+            <Button
+              leftIcon={<FaPen />}
+              onClick={onOpen}
+              size="sm"
+              ml="3"
+              variant="outline"
+              colorScheme="blue"
+            >
+              Edit
+            </Button>
+            <EditEventModal event={event} isOpen={isOpen} onClose={onClose} />
+          </HStack>
           <Flex mt={3} w="70%" justify={'space-between'}>
             <Flex flexDir={'column'} gap={3}>
               <Flex alignItems={'center'} gap={2}>
@@ -71,18 +89,6 @@ const CheckinStatsDashboard = ({ event, registered, checkin }) => {
                 </Text>
               </Flex>
             </Flex>
-            <Button
-              variant="outline"
-              fontSize={'lg'}
-              fontWeight={'medium'}
-              size="sm"
-              bg={'rgba(170, 170, 170, 0.25)'}
-              color={'#7B7C7D'}
-              gap={2}
-            >
-              <FaNewspaper />
-              Event flyer
-            </Button>
           </Flex>
         </Flex>
 

diff --git a/src/components/Checkin/VolunteerEventsTable.jsx b/src/components/Checkin/VolunteerEventsTable.jsx
@@ -136,34 +136,33 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage, isVie
             </>
           ) : (
             <>
-            {
-              isViewEventPage ?
-              <Tag
-              onClick={() => changeIsCheckedIn(volunteer)}
-              cursor={'pointer'}
-              borderRadius={10}
-              p={2}
-              color={'#0075FF'}
-              bg={'white'}
-              border={'2px solid #0075FF'}
-              gap={1}
-              >
-              <MdCheck />
-              <Text fontSize={'md'}>Check-In</Text>
-            </Tag> 
-            :
-            <Tag
-            borderRadius={10}
-            p={2}
-            color={'#0075FF'}
-            bg={'white'}
-            border={'2px solid #0075FF'}
-            gap={1}
-            >
-            <MdCheck />
-            <Text fontSize={'md'}>Check-In</Text>
-            </Tag> 
-            }
+              {isViewEventPage ? (
+                <Tag
+                  borderRadius={10}
+                  p={2}
+                  color={'#0075FF'}
+                  bg={'white'}
+                  border={'2px solid #0075FF'}
+                  gap={1}
+                >
+                  <MdCheck />
+                  <Text fontSize={'md'}>Check-In</Text>
+                </Tag>
+              ) : (
+                <Tag
+                  onClick={() => changeIsCheckedIn(volunteer)}
+                  cursor={'pointer'}
+                  borderRadius={10}
+                  p={2}
+                  color={'#0075FF'}
+                  bg={'white'}
+                  border={'2px solid #0075FF'}
+                  gap={1}
+                >
+                  <MdCheck />
+                  <Text fontSize={'md'}>Check-In</Text>
+                </Tag>
+              )}
             </>
           )}
         </Flex>
@@ -172,7 +171,12 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage, isVie
   );
 };
 
-const VolunteerEventsTable = ({ volunteers, changeIsCheckedIn, isCheckinPage }) => {
+const VolunteerEventsTable = ({
+  volunteers,
+  changeIsCheckedIn,
+  isCheckinPage,
+  isViewEventPage,
+}) => {
   return (
     <TableContainer border={'2px solid #E2E8F0'} borderRadius={'15px'}>
       <Table
@@ -230,6 +234,7 @@ const VolunteerEventsTable = ({ volunteers, changeIsCheckedIn, isCheckinPage })
               volunteer={volunteer}
               changeIsCheckedIn={changeIsCheckedIn}
               isCheckinPage={isCheckinPage}
+              isViewEventPage={isViewEventPage}
             />
           ))}
         </Tbody>