Skip to content

Commit

Permalink
Merge pull request #150 from Blueprint-Boulder/FixModals
Browse files Browse the repository at this point in the history 
Overhaul all Modals
  • Loading branch information
@nh602
nh602 authored Aug 28, 2024
2 parents db0775e + 40f1258 commit 2f3d662
Show file tree
Hide file tree
Showing 12 changed files with 503 additions and 556 deletions.
16 changes: 12 additions & 4 deletions frontend/src/components/EditEventModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,26 @@ import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import {Context} from '../services/context';

export default function EditEventModal({event, eventService, setShowEditModal}) {
export default function EditEventModal({event, eventService, setShowEditModal, isNewEvent}) {
const [eventInfo, setEventInfo] = useState(event);
const {setBad, setMessage} = useContext(Context);

const handleSubmit = async (e) => {
e.preventDefault();
// Call your event service here to update the event

const res = await eventService.updateEvent(event.eventId, eventInfo);
// Handle adding or updating the event
let res;
if (isNewEvent) {
res = await eventService.createEvent(eventInfo);
} else {
res = await eventService.updateEvent(event.eventId, eventInfo);
}

if (res !== undefined) {
// Toast with success message
setMessage('Event updated successfully');
// Close modal
setShowEditModal(false);
} else {
setBad(true);
setMessage('Failed to update event');
Expand All @@ -34,7 +42,7 @@ export default function EditEventModal({event, eventService, setShowEditModal})
<div className='w-80'>
<div className='flex flex-row justify-between items-center w-full mb-4'>
<div className='w-5'>&nbsp;</div>
<p className='font-bold'>Edit Event</p>
<p className='font-bold'>{isNewEvent ? "Add" : "Edit"} Event</p>
<button className='w-5 bg-black text-white drop-shadow-xl' onClick={()=>setShowEditModal(false)}>X</button>
</div>
<form className='w-full text-left items-left flex flex-col gap-4' onSubmit={handleSubmit}>
Expand Down
179 changes: 109 additions & 70 deletions frontend/src/components/EditProfileModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, {useState} from 'react';
import React, { useState } from 'react';

import Modal from './Modal';

import {faCaretDown} from '@fortawesome/free-solid-svg-icons';
import {faCaretUp} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { faCaretDown } from '@fortawesome/free-solid-svg-icons';
import { faCaretUp } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';


export default function EditModal({handleSubmit, setEditModal, vendorData, setVendorData, user, setShowUploadModal}) {
export default function EditModal({ handleSubmit, setEditModal, vendorData, setVendorData, user, setShowUploadModal }) {
const [badLocal, setBadLocal] = useState(false);
const [validEmail, setValidEmail] = useState(true);
const [validWebsite, setValidWebsite] = useState(true);
Expand All @@ -23,7 +23,7 @@ export default function EditModal({handleSubmit, setEditModal, vendorData, setVe
}
if (pattern.test(website)) {
// The website input matches the pattern
setVendorData({...vendorData, website: website});
setVendorData({ ...vendorData, website: website });
setBadLocal(false);
setValidWebsite(true);
} else {
Expand All @@ -42,7 +42,7 @@ export default function EditModal({handleSubmit, setEditModal, vendorData, setVe
return;
}
if (pattern.test(email)) {
setVendorData({...vendorData, email: email});
setVendorData({ ...vendorData, email: email });
setBadLocal(false);
setValidEmail(true);
} else {
Expand Down Expand Up @@ -72,71 +72,110 @@ export default function EditModal({handleSubmit, setEditModal, vendorData, setVe
}
}

const inputClassnames = `w-5/6 h-10 border-2 border-grey-1 rounded-md p-2 basis-2/3`;
const labelNames = 'flex flex-row justify-between';

const btnClassnames = `basis-1/3 h-20 rounded-md font-semibold text-base py-1 px-1 drop-shadow-xl`;
const activebuttonstyle = `text-white font-semibold py-2 px-1 drop-shadow-xl rounded-md bg-whitegrey`;
const disabledbuttonstyle = `text-white font-semibold py-2 px-1 drop-shadow-xl rounded-md bg-grey-1`;


return (
<div className='absolute bg-white rounded-md p-5 drop-shadow-lg w-11/12 h-5/6 overflow-scroll'>
<div className='flex flex-col h-full'>
<form action="" onSubmit={(e) => {
if (badLocal) {
e.preventDefault();
return;
}
e.preventDefault(); // Prevents the default form submission behavior
handleSubmit();
setEditModal(false);
}} className='flex flex-col'>
<label htmlFor="legalName" className='py-4' >Name:</label>
<input type="text" id='legalName' placeholder = {vendorData.name} name='legalName'onChange={(e) => setVendorData({...vendorData, name: e.target.value})}/>
{!validEmail && <div className="bg-red text-white text-center pt-2 h-10 w-full z-50">Must be a valid email.</div>}
<label htmlFor="email" className='py-4'>Email:</label>
<input type="text" id='email' placeholder = {vendorData.email} name='email'onChange={(e) => handleEmailChange(e)}/>
{user.isadmin &&
<div className='py-4 w-full flex'>
<div>Reset Password</div>
<div onClick= {() => handleChecked()} className='mx-4' >
<FontAwesomeIcon icon = {checked? faCaretUp: faCaretDown}/>
</div>
<Modal backgroundColor={'bg-greywhite h-5/6 w-5/6 z-20'} blurOnClick={() => setEditModal(false)}>
<form action="" onSubmit={e => {
if (badLocal) {
e.preventDefault();
return;
}
e.preventDefault(); // Prevents the default form submission behavior
handleSubmit();
setEditModal(false);
}} className='flex flex-col gap-2'>
<label htmlFor="legalName" className={`${labelNames}`} >
Name:
<input className={`${inputClassnames}`} type="text" id='legalName' placeholder={vendorData.name} name='legalName' onChange={(e) => setVendorData({ ...vendorData, name: e.target.value })} />
</label>
{
!validEmail &&
<div className="bg-red text-white text-center pt-2 h-10 w-full ">Must be a valid email.</div>
}
<label htmlFor="email" className={`${labelNames}`}>
Email:
<input className={`${inputClassnames}`} type="text" id='email' placeholder={vendorData.email} name='email' onChange={(e) => handleEmailChange(e)} />
</label>
{
user.isadmin &&
<div className='py-4 w-full flex'>
<div>Reset Password</div>
<div onClick={() => handleChecked()} className='mx-4' >
<FontAwesomeIcon icon={checked ? faCaretUp : faCaretDown} />
</div>
}
{checked &&
<>
<label htmlFor="email" className='py-4'>New Password:</label>
<input type="password" id='email' name='email'onChange={(e) => setVendorData({...vendorData, password: e.target.value})}/>
<label htmlFor="email" className='py-4'>ReEnter Password:</label>
<input type="password" id='email' name='email'onChange={(e) => handlePassValid(e)}/>
{!validPass && <div className="bg-red text-white text-center pt-2 h-10 w-full z-50">Passwords do not match.</div>}
</>
}
<label htmlFor="phoneNum" className='py-4'>Phone Number:</label>
<input type="text" id='phoneNum' placeholder = {vendorData.phoneNumber} name='phoneNum'onChange={(e) => setVendorData({...vendorData, phoneNumber: e.target.value})}/>
{!validWebsite && <div className="bg-red text-white text-center pt-2 h-10 w-full z-50">Must be a valid website.</div>}
<label htmlFor="website" className='py-4'>Website:</label>
<input type="text" id='website' placeholder = {vendorData.website} name='website'onChange={(e) => handleWebsiteChange(e)}/>
<label htmlFor = 'instagram' className='py-4'>Instagram:</label>
<input type="text" id='instagram' placeholder = {vendorData.instagram} name='instagram'onChange={(e) => setVendorData({...vendorData, instagram: e.target.value})}/>
<label htmlFor = 'facebook' className='py-4'>Facebook:</label>
<input type="text" id='facebook' placeholder = {vendorData.facebook} name='facebook'onChange={(e) => setVendorData({...vendorData, facebook: e.target.value})}/>
<label htmlFor = 'twitter' className='py-4'>Twitter:</label>
<input type="text" id='twitter' placeholder = {vendorData.twitter} name='twitter'onChange={(e) => setVendorData({...vendorData, twitter: e.target.value})}/>
<label htmlFor = 'youtube' className='py-4'>Youtube:</label>
<input type="text" id='youtube' placeholder = {vendorData.youtube} name='youtube'onChange={(e) => setVendorData({...vendorData, youtube: e.target.value})}/>
<label htmlFor = 'pinterest' className='py-4'>Pinterest:</label>
<input type="text" id='pinterest' placeholder = {vendorData.pinterest} name='pinterest'onChange={(e) => setVendorData({...vendorData, pinterest: e.target.value})}/>
<label htmlFor = 'tiktok' className='py-4'>Tiktok:</label>
<input type="text" id='tiktok' placeholder = {vendorData.tiktok} name='tiktok'onChange={(e) => setVendorData({...vendorData, tiktok: e.target.value})}/>
<div className='flex justify-between bottom-0'>
<button type={badLocal ? '': 'submit'} className={`${badLocal ? 'bg-grey-1': 'bg-blue'} text-white p-5 mt-8 mb-4`}>Save Changes</button>
<button className='bg-grey-1 text-black p-5 mt-8 mb-4' onClick={() => {
setEditModal(false);
setShowUploadModal(true);
}}>Upload Profile Photo</button>
<button onClick={()=>{
setEditModal(false);
}} className='bg-red text-white p-5 mt-8 mb-4 '>Cancel</button>
</div>
</form>

</div>
</div>
}
{
checked &&
<>
<label htmlFor="email" className={`${labelNames}`}>
New Password:
<input className={`${inputClassnames}`} type="password" id='email' name='email' onChange={(e) => setVendorData({ ...vendorData, password: e.target.value })} />
</label>
<label htmlFor="email" className={`${labelNames}`}>
Re-enter Password:
<input className={`${inputClassnames}`} type="password" id='email' name='email' onChange={(e) => handlePassValid(e)} />
</label>
{
!validPass &&
<div className="bg-red text-white text-center pt-2 h-10 w-full ">Passwords do not match.</div>
}
</>
}
<label htmlFor="phoneNum" className={`${labelNames}`}>
Phone:
<input className={`${inputClassnames}`} type="text" id='phoneNum' placeholder={vendorData.phoneNumber} name='phoneNum' onChange={(e) => setVendorData({ ...vendorData, phoneNumber: e.target.value })} />
</label>
{
!validWebsite &&
<div className="bg-red text-white text-center pt-2 h-10 w-full ">Must be a valid website.</div>
}
<label htmlFor="website" className={`${labelNames}`}>
Website:
<input className={`${inputClassnames}`} type="text" id='website' placeholder={vendorData.website} name='website' onChange={(e) => handleWebsiteChange(e)} />
</label>
<label htmlFor='instagram' className={`${labelNames}`}>
Instagram:
<input className={`${inputClassnames}`} type="text" id='instagram' placeholder={vendorData.instagram} name='instagram' onChange={(e) => setVendorData({ ...vendorData, instagram: e.target.value })} />
</label>
<label htmlFor='facebook' className={`${labelNames}`}>
Facebook:
<input className={`${inputClassnames}`} type="text" id='facebook' placeholder={vendorData.facebook} name='facebook' onChange={(e) => setVendorData({ ...vendorData, facebook: e.target.value })} />
</label>
<label htmlFor='twitter' className={`${labelNames}`}>
Twitter:
<input className={`${inputClassnames}`} type="text" id='twitter' placeholder={vendorData.twitter} name='twitter' onChange={(e) => setVendorData({ ...vendorData, twitter: e.target.value })} />
</label>
<label htmlFor='youtube' className={`${labelNames}`}>
Youtube:
<input className={`${inputClassnames}`} type="text" id='youtube' placeholder={vendorData.youtube} name='youtube' onChange={(e) => setVendorData({ ...vendorData, youtube: e.target.value })} />
</label>
<label htmlFor='pinterest' className={`${labelNames}`}>
Pinterest:
<input className={`${inputClassnames}`} type="text" id='pinterest' placeholder={vendorData.pinterest} name='pinterest' onChange={(e) => setVendorData({ ...vendorData, pinterest: e.target.value })} />
</label>
<label htmlFor='tiktok' className={`${labelNames}`}>
Tiktok:
<input className={`${inputClassnames}`} type="text" id='tiktok' placeholder={vendorData.tiktok} name='tiktok' onChange={(e) => setVendorData({ ...vendorData, tiktok: e.target.value })} />
</label>
<div className='flex flex-row gap-3 mt-3'>
<button type={badLocal ? '' : 'submit'} className={`${btnClassnames} ${badLocal ? 'bg-grey-1 text-grey-3 border-2 border-red' : `bg-black text-white`}`}>Save Changes</button>
<button className={`bg-black text-white ${btnClassnames}`} onClick={() => {
setEditModal(false);
setShowUploadModal(true);
}}>Upload Profile Photo</button>
<button onClick={() => {
setEditModal(false);
}} className={`bg-black text-white ${btnClassnames}`}>Cancel</button>
</div>
</form>
</Modal>
);
}
4 changes: 2 additions & 2 deletions frontend/src/components/Modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types';
export default function Modal({children, backgroundColor, blurOnClick}) {
return (<>
<div className='absolute backdrop-blur-md w-full h-full z-10' onClick={blurOnClick ? blurOnClick : ()=>{}}></div>
<div className={`absolute ${backgroundColor} z-20 rounded-lg drop-shadow-2xl flex flex-col gap-5 p-10 items-center top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 overflow-y-scroll`}>
<div className='fixed top-0 w-screen h-screen z-10 backdrop-blur-md' onClick={blurOnClick ? blurOnClick : ()=>{}}></div>
<div className={`fixed z-20 rounded-lg drop-shadow-2xl flex flex-col gap-5 p-10 items-center top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 overflow-y-scroll ${backgroundColor}`}>
{children}
</div>
</>);
Expand Down
Loading

0 comments on commit 2f3d662

Please sign in to comment.