Events Navbar persistent (#579)

IEDCMEC · Dec 13, 2024 · 1107145 · 1107145
1 parent dbdbb40
commit 1107145
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 4 deletions.
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/index.jsx
@@ -105,6 +105,7 @@ import { useAlert } from '@/hooks/useAlert';
 import DataDisplay from '@/components/DataDisplay';
 import NewAttributeForm from './new';
 import useWrapper from '@/hooks/useWrapper';
+import NavigationMenu from '../navigationmenu';
 
 const columns = [
   { field: 'name', headerName: 'Name', width: 200 },
@@ -149,12 +150,13 @@ export default function Attributes() {
       headerButton={
         <>
           <Button onClick={onOpen} isLoading={loading}>
-            Add Attribute
+             Attribute
           </Button>
         </>
       }
       debugInfo={JSON.stringify(attributes)}
     >
+      <NavigationMenu orgId={orgId} eventId={eventId} />
       <DataDisplay
         loading={loading}
         columns={columns}

diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/index.jsx
@@ -111,6 +111,7 @@ import { useAlert } from '@/hooks/useAlert';
 import DataDisplay from '@/components/DataDisplay';
 import NewExtraForm from './new'; // Import the form component
 import useWrapper from '@/hooks/useWrapper';
+import NavigationMenu from '../navigationmenu';
 
 const columns = [
   { field: 'name', headerName: 'Name', width: 200 },
@@ -166,6 +167,7 @@ export default function Extras() {
       }
       debugInfo={extras}
     >
+      <NavigationMenu orgId={orgId} eventId={eventId} />
       <DataDisplay
         loading={loading}
         columns={columns}

diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/index.jsx
@@ -28,6 +28,7 @@ import DashboardLayout from '@/layouts/DashboardLayout';
 // import { useFetch } from '@/hooks/useFetch';
 import { useAlert } from '@/hooks/useAlert';
 import useWrapper from '@/hooks/useWrapper';
+import NavigationMenu from './navigationmenu';
 
 export default function EventById() {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -134,7 +135,7 @@ export default function EventById() {
       }
     >
       <Flex flexDirection="column" height="100%" px={{ base: 4, md: 0 }}>
-        <Box
+        {/*<Box
           width="100%"
           backgroundColor="#e6f7f5"
           py={2}
@@ -185,7 +186,9 @@ export default function EventById() {
               </Button>
             ))}
           </Flex>
-        </Box>
+        </Box> */}
+
+        <NavigationMenu orgId={orgId} eventId={eventId} />
 
         <Flex
           height="100%"
@@ -196,7 +199,7 @@ export default function EventById() {
           py={6}
         >
           <Text fontSize={{ base: 'xl', md: '3xl' }}>
-            Total Participants:{' '}
+             Participants:{' '}
             <span style={{ fontWeight: 'bold' }}>{event.numberOfParticipants}</span>
           </Text>
 

diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/navigationmenu.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/navigationmenu.jsx
@@ -0,0 +1,91 @@
+/*
+ // the idea with menu
+import { Menu, MenuButton, MenuList, MenuItem, Button } from '@chakra-ui/react';
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import { useRouter } from 'next/router';
+
+const NavigationMenu = ({ orgId, eventId }) => {
+  const router = useRouter();
+  const menuLabels = ['Participants', 'Participants Check In', 'Attributes', 'Extras'];
+  console.log("navigation menu loaded")
+  return (
+    <>
+    <Menu>
+      <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+        Go to ...
+      </MenuButton>
+      <MenuList>
+        {menuLabels.map((label) => {
+            const path = `/${orgId}/events/${eventId}/${
+            label === 'Participants Check In' ? 'participants/check-in' : label.toLowerCase()
+            }`;
+            return (
+            <MenuItem key={label} onClick={() => router.push(path)}>
+                {label}
+            </MenuItem>
+            );
+        })}
+      </MenuList>
+    </Menu>
+    </>
+  );
+};*/
+
+
+const NavigationMenu = ({orgId, eventId}) => {
+  return (
+    <Box
+          width="100%"
+          backgroundColor="#e6f7f5"
+          py={2}
+          px={2}
+          borderRadius="8px"
+          display={{ base: 'block', md: 'flex' }}
+        >
+          <VStack spacing={2} align="stretch" display={{ base: 'flex', md: 'none' }}>
+            {['participants', 'check-in', 'attributes', 'extras'].map((tab) => (
+              <Button
+                key={tab}
+                style={tabStyle(activeTab === tab)}
+                onClick={() => {
+                  setActiveTab(tab);
+                  const element = tab === 'check-in' ? 'participants/check-in' : tab;
+                  router.push(`/${orgId}/events/${eventId}/${element}`);
+                }}
+              >
+                {tab === 'check-in'
+                  ? 'Participant Check In'
+                  : tab.replace(/(^\w|\s\w)/g, (m) => m.toUpperCase())}
+              </Button>
+            ))}
+          </VStack>
+
+          <Flex
+            justifyContent="space-evenly"
+            alignItems="center"
+            width="100%"
+            display={{ base: 'none', md: 'flex' }} // Horizontal layout on desktop
+          >
+            {['participants', 'check-in', 'attributes', 'extras'].map((tab) => (
+              <Button
+                key={tab}
+                style={tabStyle(activeTab === tab)}
+                onClick={() => {
+                  setActiveTab(tab);
+                  const element = tab === 'check-in' ? 'participants/check-in' : tab;
+                  router.push(
+                    `/${orgId}/events/${eventId}/${element}
+                `,
+                  );
+                }}
+              >
+                {tab === 'check-in'
+                  ? 'Participant Check In'
+                  : tab.replace(/(^\w|\s\w)/g, (m) => m.toUpperCase())}
+              </Button>
+            ))}
+          </Flex>
+        </Box>
+  )
+}
+export default NavigationMenu;
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/check-in/index.jsx
@@ -11,6 +11,8 @@ import { useAlert } from '@/hooks/useAlert';
 import { useFetch } from '@/hooks/useFetch';
 import useWrapper from '@/hooks/useWrapper';
 
+import NavigationMenu from '../../navigationmenu';
+
 const columns = [
   { field: 'firstName', headerName: 'First Name', width: 200 },
   { field: 'lastName', headerName: 'Last Name', width: 200 },
@@ -95,10 +97,12 @@ export default function ParticipantsCheckIn() {
               Open Scanner
             </Button>
           </Flex>
+         {/* <NavigationMenu orgId={orgId} eventId={eventId} />*/} 
         </>
       }
       debugInfo={participantsCheckIn}
     >
+      <NavigationMenu orgId={orgId} eventId={eventId} />
       <DataDisplay
         loading={loading}
         rows={participantsCheckIn}

diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/participants/index.jsx
@@ -12,6 +12,7 @@ import { useContext } from 'react';
 import { account } from '@/contexts/MyContext';
 import axios from 'axios';
 import useWrapper from '@/hooks/useWrapper';
+import NavigationMenu from '../navigationmenu';
 
 const columns = [
   { field: 'firstName', headerName: 'First Name', width: 200 },
@@ -172,6 +173,7 @@ export default function Participants() {
       }
       debugInfo={participants}
     >
+      <NavigationMenu orgId={orgId} eventId={eventId} />
       <DataDisplay loading={loading} rows={participants} columns={columns} />
       <MultiStepModal
         isOpen={qrIsOpen}