muayjtp/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated craete evnt form functionality

Browse source
This commit is contained in:
Juthatip McDevitt 2024-04-27 13:50:09 -05:00
parent 9196c241d0
commit db5ea0770e
4 changed files with 77 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js
View file

@ -1,45 +1,80 @@
"use client"
import { Input } from '@/components/ui/input'
import { ChevronLeft } from 'lucide-react'
import React from 'react'
import React, { useEffect, useState } from 'react'
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
import LocationOption from '@/app/_utils/LocationOption'
import Image from 'next/image'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import ThemeOption from '@/app/_utils/ThemeOption'
const MeetingForm = ({setFormEvent}) => {
const [themeColor, setThemeColor] = useState();
//set state for each event
const [eventName, setEventName] = useState();
const [timeDuration, setTimeDuration] = useState(30);
const [locationMeeting, setLocationMeeting] = useState();
const [urlMeeting, setUrlMeeting] = useState();
const MeetingForm = () => {
useEffect(() => {
setFormEvent({
eventName: eventName,
timeDuration: timeDuration,
locationMeeting: locationMeeting,
urlMeeting: urlMeeting,
themeColor: themeColor
})
}, [eventName, timeDuration, locationMeeting, urlMeeting, themeColor])
return (
<div className='px-5 lg:px-10 py-10'>
<p className='flex gap-1 text-red-500 hover:text-red-600'><ChevronLeft/>Go back</p>
<Link href={'/dashboard'}><p className='flex gap-1 text-red-500 hover:text-red-600'><ChevronLeft/>Go back</p></Link>
<div className='mt-5'>
<p className='text-xl font-semibold mb-2'>Create New Event</p><hr/>
</div>
<div className='flex flex-col gap-2'>
<p className='font-semibold mt-5'>Event Name <span className='text-red-500'>*</span></p>
<Input placeholder="Enter your event/meeting name" className='text-sm'/>
<p className='font-semibold'>Meeting Length <span className='text-red-500'>*</span></p>
<Input onChange={(ev) => setEventName(ev.target.value)} placeholder="Enter your event/meeting name" className='text-sm'/>
<p className='font-semibold'>Time Duration <span className='text-red-500'>*</span></p>
<DropdownMenu>
<DropdownMenuTrigger asChild className='outline-none'>
<button className='max-w-20 border rounded-md px-2 py-2 text-sm'>Select</button>
<button className=' max-w-[100px] border rounded-md px-2 py-2 text-sm'>{timeDuration} minutes</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>15 minutes</DropdownMenuItem>
<DropdownMenuItem>30 minutes</DropdownMenuItem>
<DropdownMenuItem>45 minutes</DropdownMenuItem>
<DropdownMenuItem>60 minutes</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTimeDuration(15)}>15 minutes</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTimeDuration(30)}>30 minutes</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTimeDuration(45)}>45 minutes</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTimeDuration(60)}>60 minutes</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<p className='font-semibold'>Location <span className='text-red-500'>*</span></p>
<div className='grid grid-cols-4 gap-2'>
{LocationOption.map((option, index) => (
<div className='border rounded-md flex flex-col justify-center items-center text-center p-2 hover:bg-gray-200 cursor-pointer'>
<div onClick={() => setLocationMeeting(option.name)} className={`border rounded-md flex flex-col justify-center items-center text-center p-2 hover:bg-gray-200 cursor-pointer ${locationMeeting == option.name && 'bg-gray-200'}`}>
<Image src={option.icon} width={20} height={20} alt={option.name}/>
<p className='text-xs mt-2 font-semibold'>{option.name}</p>
</div>
))}
</div>
<p className='font-semibold'>Add url</p>
<Input placeholder='Add url' className='text-sm'/>
{locationMeeting &&
<div>
<p className='font-semibold'> Add {locationMeeting} url <span className='text-red-500'>*</span></p>
<Input onChange={(ev) => setUrlMeeting(ev.target.value)} placeholder='Add url' className='text-sm'/>
</div>
}
<p className='font-semibold'>Select Color</p>
<div className='flex justify-evenly'>
{ThemeOption.map((color,index) => (
<div onClick={() => setThemeColor(color)} className={`h-6 w-6 rounded-full ${themeColor == color && 'border-2 border-black'}`} style={{backgroundColor:color}}></div>
))}
</div>
</div>
<Button disabled={(!eventName || !timeDuration || !locationMeeting || !urlMeeting)} className='w-full mt-10'>Create Event</Button>
</div>
)
}

9
scheduler_app/app/(routes)/create_meeting/_components/previewMeeting.js Normal file
View file

@ -0,0 +1,9 @@
import React from 'react'
const PreviewMeeting = () => {
return (
<div>This is a preview meeting section</div>
)
}
export default PreviewMeeting

12
scheduler_app/app/(routes)/create_meeting/page.js
View file

@ -1,13 +1,19 @@
import React from 'react'
"use client"
import React, { useState } from 'react'
import MeetingForm from './_components/meetingForm'
import PreviewMeeting from './_components/previewMeeting';
const CreateMeeting = () => {
const [formEvent, setFormEvent] = useState();
return (
<div className='grid grid-cols-1 md:grid-cols-3'>
<div className='h-screen shadow-md'>
<MeetingForm/>
<MeetingForm setFormEvent={(value) => setFormEvent(value)}/>
</div>
<div className='md:col-span-2'>
<PreviewMeeting/>
</div>
<div className='md:col-span-2'></div>
</div>
)
}

11
scheduler_app/app/_utils/ThemeOption.js Normal file
View file

@ -0,0 +1,11 @@
export default [
'#E90133',
'#0072B1',
'#FFC82D',
'#EB7124',
'#55A61D',
'#7F139A',
'#E97FA7',
'#94774D',
'#84898C',
]