updated meeting event functionality and added availability
This commit is contained in:
parent
3f517220bd
commit
8d3dc33e21
6 changed files with 155 additions and 2 deletions
37
scheduler_app/app/(routes)/dashboard/availability/page.js
Normal file
37
scheduler_app/app/(routes)/dashboard/availability/page.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import DaysList from '@/app/_utils/DaysList'
|
||||
import React from 'react'
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
|
||||
const Availability = () => {
|
||||
return (
|
||||
<div className='px-5'>
|
||||
<p className='font-semibold text-xl'>Availability</p><hr className='my-5'/>
|
||||
<div>
|
||||
<p className='my-5 font-semibold'>Available days & time</p>
|
||||
<div className='flex flex-col'>
|
||||
{DaysList.map((item, index) => (
|
||||
<div key={index} className='grid grid-cols-3 border-b mb-2'>
|
||||
<p className='flex items-center gap-2 text-sm sm:text-base'><Checkbox />{item.day}</p>
|
||||
<div className='flex gap-2 mb-2'>
|
||||
<div>
|
||||
<p className='mb-1 text-xs font-semibold text-gray-700'>Start time</p>
|
||||
<p className='flex gap-1 sm:gap-2 items-center'><Input type='time'/> - </p>
|
||||
</div>
|
||||
<div>
|
||||
<p className='mb-1 text-xs font-semibold text-gray-700'>End time</p>
|
||||
<Input type="time"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Button className="mt-5">Save</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Availability
|
||||
|
|
@ -2,11 +2,13 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { app } from '@/config/FirebaseConfig'
|
||||
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
|
||||
import { collection, getDocs, getFirestore, orderBy, query, where } from 'firebase/firestore'
|
||||
import { collection, deleteDoc, doc, getDocs, getFirestore, orderBy, query, where } from 'firebase/firestore'
|
||||
import { GoClock } from "react-icons/go";
|
||||
import { PiMapPinLight, PiCopyLight, PiShareFatLight } from 'react-icons/pi'
|
||||
import { IoSettingsOutline } from "react-icons/io5";
|
||||
import { toast } from 'sonner'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"
|
||||
|
||||
|
||||
const MeetingEventList = () => {
|
||||
const [eventList, setEventList] = useState([]);
|
||||
|
|
@ -23,6 +25,14 @@ const MeetingEventList = () => {
|
|||
});
|
||||
}
|
||||
|
||||
//Delete event functionality
|
||||
const onDeleteEvent = async (event) => {
|
||||
await deleteDoc(doc(db, "MeetingEvent", event?.id)).then(res => {
|
||||
toast('Meeting/Event is deleted');
|
||||
getEventList();
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
user && getEventList()
|
||||
}, [user])
|
||||
|
|
@ -43,7 +53,17 @@ const MeetingEventList = () => {
|
|||
<button onClick={() => {navigator.clipboard.writeText(event.urlMeeting), toast('Copied')}} className='text-lg'><PiCopyLight/></button>
|
||||
<button className="text-lg"><PiShareFatLight/></button>
|
||||
</div>
|
||||
<IoSettingsOutline className='cursor-pointer'/>
|
||||
<div className='flex'>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<IoSettingsOutline className='cursor-pointer'/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>Edit</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => onDeleteEvent(event)}>Delete</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)): <p className='font-semibold text-green-800'>Loading...</p>
|
||||
|
|
|
|||
23
scheduler_app/app/_utils/DaysList.js
Normal file
23
scheduler_app/app/_utils/DaysList.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
export default[
|
||||
{
|
||||
day: 'Sunday'
|
||||
},
|
||||
{
|
||||
day: 'Monday'
|
||||
},
|
||||
{
|
||||
day: 'Tuesday'
|
||||
},
|
||||
{
|
||||
day: 'Wednesday'
|
||||
},
|
||||
{
|
||||
day: 'Thursday'
|
||||
},
|
||||
{
|
||||
day: 'Friday'
|
||||
},
|
||||
{
|
||||
day: 'Saturday'
|
||||
}
|
||||
]
|
||||
24
scheduler_app/components/ui/checkbox.jsx
Normal file
24
scheduler_app/components/ui/checkbox.jsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { Check } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
<CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
))
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
||||
|
||||
export { Checkbox }
|
||||
48
scheduler_app/package-lock.json
generated
48
scheduler_app/package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@kinde-oss/kinde-auth-nextjs": "^2.2.4",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
|
|
@ -2538,6 +2539,36 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-checkbox": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz",
|
||||
"integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/primitive": "1.0.1",
|
||||
"@radix-ui/react-compose-refs": "1.0.1",
|
||||
"@radix-ui/react-context": "1.0.1",
|
||||
"@radix-ui/react-presence": "1.0.1",
|
||||
"@radix-ui/react-primitive": "1.0.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.0.1",
|
||||
"@radix-ui/react-use-previous": "1.0.1",
|
||||
"@radix-ui/react-use-size": "1.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collection": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
|
||||
|
|
@ -2992,6 +3023,23 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-previous": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
|
||||
"integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-rect": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@kinde-oss/kinde-auth-nextjs": "^2.2.4",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue