diff --git a/src/components/events/IndividualEventModal.jsx b/src/components/events/IndividualEventModal.jsx index e87c07c..e6b3a2c 100644 --- a/src/components/events/IndividualEventModal.jsx +++ b/src/components/events/IndividualEventModal.jsx @@ -16,12 +16,13 @@ import CustomAlert from '../customcomponents/CustomAlert' import { uploadToCloudinary } from '../../utils/uploadToCloudinary' import { + Container, RegisterCompleteCardText, RegisterCompleteCardTextContainer } from './teamRegistrationModal' import { RegistrationSchema } from '../../config/content/teamRegistration/registerSchema' -export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload }) => { +export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload, handleScroll }) => { const [aicheID, setAicheID] = useState('') const [show, setShow] = useState(true) const [error, setError] = useState(null) @@ -117,7 +118,7 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload }) = return ( <> {show ? ( -
+ {EventTitle} (*single member Participation*) User ID @@ -145,7 +146,7 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload }) = {errorContent && {errorContent}} {hasPdfUpload && ( - Upload PDF + Submit your abstracts here {loading ? 'Registering...' : 'Register'} -
+ ) : ( Hurray! Ur Registration Completed @@ -175,5 +176,6 @@ IndiEventModal.propTypes = { EventTitle: PropTypes.string.isRequired, closeRegisterModal: PropTypes.func, mongoId: PropTypes.string, - hasPdfUpload: PropTypes.bool + hasPdfUpload: PropTypes.bool, + handleScroll: PropTypes.func } diff --git a/src/components/events/Register2Modal.jsx b/src/components/events/Register2Modal.jsx index afc6716..66d4a9d 100644 --- a/src/components/events/Register2Modal.jsx +++ b/src/components/events/Register2Modal.jsx @@ -3,25 +3,45 @@ import { Button2, Container, Section } from './registerModal.style' import TeamEventModal from './TeamEventModal' import { IndiEventModal } from './IndividualEventModal' import { eventsWithPdfs } from '../../config/content/events/events' +import { useState } from 'react' +import { ProgressBar } from './eventModal.styles' -export const RegisterModal = ({ event: { id, name, isTeamEvent }, closeModal, mongoId }) => { +export const RegisterModal = ({ + event: { id, name, isTeamEvent, maxTeamSize }, + closeModal, + mongoId +}) => { + const [scrollPosition, setScrollPosition] = useState(0) + + function handleScroll(e) { + const element = e.target + const scrollTop = element.scrollTop + const scrollHeight = element.scrollHeight - element.clientHeight + const scrollPercentage = (scrollTop / scrollHeight) * 100 + setScrollPosition(scrollPercentage) + } const hasPdfUpload = eventsWithPdfs.includes(name) return (
+ Back {isTeamEvent ? ( ) : ( )} @@ -34,7 +54,8 @@ RegisterModal.propTypes = { event: PropTypes.shape({ id: PropTypes.string.isRequired, name: PropTypes.string.isRequired, - isTeamEvent: PropTypes.bool + isTeamEvent: PropTypes.bool, + maxTeamSize: PropTypes.number }), closeModal: PropTypes.func, mongoId: PropTypes.string diff --git a/src/components/events/TeamEventModal.jsx b/src/components/events/TeamEventModal.jsx index 620ca3f..004b914 100644 --- a/src/components/events/TeamEventModal.jsx +++ b/src/components/events/TeamEventModal.jsx @@ -1,6 +1,6 @@ import { useState } from 'react' import PropTypes from 'prop-types' -import { Button1 } from './registerModal.style' +// import { Button1 } from './registerModal.style' import { useMutation } from '@apollo/client' import { CREATE_TEAM_REGISTRATIONS } from '../../graphQL/mutations/teamRegistration' import CustomAlert from '../customcomponents/CustomAlert' @@ -18,15 +18,24 @@ import { IconButtonContainer, RegisterCompleteCardText, RegisterCompleteCardTextContainer, - Container + Container, + Button1 } from './teamRegistrationModal' import { TeamRegistrationSchema } from '../../config/content/teamRegistration/registerSchema' import { toast } from 'react-toastify' import { MinusButtonUrl, PlusButtonUrl } from '../../config/content/teamRegistration/registermodal' import { InputContainer1, FileUpload } from './registerModal.style' import { uploadToCloudinary } from '../../utils/uploadToCloudinary' +import { edpEvents, edpLink } from '../../config/content/events/events' -export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) => { +export const TeamEventModal = ({ + EventId, + EventTitle, + maxTeamSize, + hasPdfUpload, + mongoId, + handleScroll +}) => { const [formData, setFormData] = useState({ teamname: '', teamleadid: '', @@ -40,6 +49,8 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) = const [teamRegisterEvent] = useMutation(CREATE_TEAM_REGISTRATIONS) + const maxUsers = maxTeamSize + const handleChange = (key, value) => { setFormData({ ...formData, @@ -48,8 +59,6 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) = setError(null) } - console.log(mongoId) - const handleUserIdChange = (index, value) => { const newUserIds = [...formData.userIds] newUserIds[index] = value @@ -60,7 +69,7 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) = } const addUserId = () => { - if (formData.userIds.length > 4) { + if (formData.userIds.length > maxUsers - 2) { return toast.error("you've reached maximum team limit") } setFormData({ @@ -169,10 +178,11 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) = return id.split('-')[1] } + const doesContainEDP = edpEvents.includes(EventTitle) return ( <> {show ? ( - + {EventTitle} (*Team Participation*) @@ -218,6 +228,15 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) = ))} + {doesContainEDP && ( + { + window.open(edpLink, '_blank') + }} + > + Click to submit your EDPs here + + )} {hasPdfUpload && ( @@ -246,7 +265,9 @@ TeamEventModal.propTypes = { EventTitle: PropTypes.string.isRequired, closeRegisterModal: PropTypes.func, hasPdfUpload: PropTypes.bool, - mongoId: PropTypes.string + mongoId: PropTypes.string, + maxTeamSize: PropTypes.number, + handleScroll: PropTypes.func } export default TeamEventModal diff --git a/src/components/events/eventModal.styles.jsx b/src/components/events/eventModal.styles.jsx index 16a6d1e..b67ddd6 100644 --- a/src/components/events/eventModal.styles.jsx +++ b/src/components/events/eventModal.styles.jsx @@ -17,7 +17,7 @@ export const Container = styled.main` ` export const Section = styled.section` - ${tw`bg-black-1 text-brown-2 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins h-[97vh] h-auto overflow-scroll`} + ${tw`bg-black-1 text-brown-2 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins max-h-[97vh] overflow-scroll`} padding-top: 10px; scrollbar-width: none; ` @@ -25,7 +25,7 @@ export const Section = styled.section` export const ProgressBar = styled.div` ${tw`fixed top-0 left-0 h-1 bg-orange-500`} width: ${({ width }) => width}%; - transition: width 0.1s ease-out; + transition: width 0.5s linear; ` export const ContentWrapper = styled.div` diff --git a/src/components/events/registerModal.style.jsx b/src/components/events/registerModal.style.jsx index f10ec09..68b0e49 100644 --- a/src/components/events/registerModal.style.jsx +++ b/src/components/events/registerModal.style.jsx @@ -27,8 +27,10 @@ export const FileUpload = styled.input` ` export const Section = styled.section` - ${tw`bg-brown-2 border-4 border-black-1 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins max-h-[100vh] h-auto overflow-y-auto `} + ${tw`bg-brown-2 border-4 border-black-1 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins max-h-[97vh] overflow-scroll `} + scrollbar-width: none; ` + export const Text = styled.div` ${tw`text-[34px] 0.8xsm:text-[37px] 0.9xsm:text-[40px] text-center w-full mt-7 font-bold font-Poppins`} @@ -98,7 +100,7 @@ export const Button1 = styled.button` export const Button2 = styled.button` ${tw`p-1 - mt-6 ml-6 mr-6 + m-6 w-[20%] diff --git a/src/components/events/teamRegistrationModal.jsx b/src/components/events/teamRegistrationModal.jsx index daede66..144c929 100644 --- a/src/components/events/teamRegistrationModal.jsx +++ b/src/components/events/teamRegistrationModal.jsx @@ -3,6 +3,7 @@ import tw from 'twin.macro' export const Container = styled.div` ${tw`max-h-[85vh] overflow-scroll`} + scrollbar-width: none; ` export const GridContainer = styled.div` @@ -83,3 +84,28 @@ export const RemoveButton = styled.button` export const IconButtonContainer = styled.div` ${tw`flex justify-center`} ` + +export const Button1 = styled.button` + ${tw` px-2 + mt-10 + mb-12 + w-[80%] + ml-[10%] + py-2 + rounded-[11.53px] + bg-orange-1 + text-brown-5 + font-semibold + text-1.5lg + md:text-2xl + border-brown-5 + border-2 + transition + duration-300 + ease-in-out + active:transform + active:translate-x-[3px] + active:translate-y-[3px] + active:shadow-none + shadow-[3px 3px 0px #1d1d1d ]`} +` diff --git a/src/graphQL/queries/getEvents.js b/src/graphQL/queries/getEvents.js index 61ba7dd..a185f88 100644 --- a/src/graphQL/queries/getEvents.js +++ b/src/graphQL/queries/getEvents.js @@ -12,6 +12,7 @@ export const GET_EVENTS_BY_ORGID = gql` status id subHeading + maxTeamSize } } `