mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

UI for rescheduling

Browse source
This commit is contained in:
nicolas 2021-06-09 20:28:39 +02:00
parent 72a07770e8
commit e92b2e01fc
3 changed files with 65 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
pages/[user]/[type].tsx
View file

@ -82,7 +82,7 @@ export default function Type(props) {
// Get router variables // Get router variables
const router = useRouter(); const router = useRouter();
const { user } = router.query; const { user, rescheduleUid } = router.query;
// Handle month changes // Handle month changes
const incrementMonth = () => { const incrementMonth = () => {
@ -180,7 +180,7 @@ export default function Type(props) {
// Display available times // Display available times
const availableTimes = times.map((time) => const availableTimes = times.map((time) =>
<div key={dayjs(time).utc().format()}> <div key={dayjs(time).utc().format()}>
<Link href={`/${props.user.username}/book?date=${dayjs(time).utc().format()}&type=${props.eventType.id}`}> <Link href={`/${props.user.username}/book?date=${dayjs(time).utc().format()}&type=${props.eventType.id}` + (rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "")}>
<a key={dayjs(time).format("hh:mma")} className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">{dayjs(time).tz(selectedTimeZone).format(is24h ? "HH:mm" : "hh:mma")}</a> <a key={dayjs(time).format("hh:mma")} className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">{dayjs(time).tz(selectedTimeZone).format(is24h ? "HH:mm" : "hh:mma")}</a>
</Link> </Link>
</div> </div>
@ -190,7 +190,7 @@ export default function Type(props) {
<div> <div>
<Head> <Head>
<title> <title>
{props.eventType.title} | {props.user.name || props.user.username} | {rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username} |
Calendso Calendso
</title> </title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
@ -413,7 +413,7 @@ export async function getServerSideProps(context) {
return { return {
props: { props: {
user, user,
eventType eventType,
}, },
} }
} }

39
pages/[user]/book.tsx
View file

@ -19,7 +19,7 @@ dayjs.extend(timezone);
export default function Book(props) { export default function Book(props) {
const router = useRouter(); const router = useRouter();
const { date, user } = router.query; const { date, user, rescheduleUid } = router.query;
const [ is24h, setIs24h ] = useState(false); const [ is24h, setIs24h ] = useState(false);
const [ preferredTimeZone, setPreferredTimeZone ] = useState(''); const [ preferredTimeZone, setPreferredTimeZone ] = useState('');
@ -57,6 +57,7 @@ export default function Book(props) {
notes: event.target.notes.value, notes: event.target.notes.value,
timeZone: preferredTimeZone, timeZone: preferredTimeZone,
eventName: props.eventType.title, eventName: props.eventType.title,
rescheduleUid: rescheduleUid
}; };
if (selectedLocation) { if (selectedLocation) {
@ -75,7 +76,7 @@ export default function Book(props) {
} }
); );
let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${props.user.username}`; let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${props.user.username}&reschedule=1`;
if (payload['location']) { if (payload['location']) {
successUrl += "&location=" + encodeURIComponent(payload['location']); successUrl += "&location=" + encodeURIComponent(payload['location']);
} }
@ -86,7 +87,7 @@ export default function Book(props) {
return ( return (
<div> <div>
<Head> <Head>
<title>Confirm your {props.eventType.title} with {props.user.name || props.user.username} | Calendso</title> <title>{rescheduleUid ? 'Reschedule' : 'Confirm'} your {props.eventType.title} with {props.user.name || props.user.username} | Calendso</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
@ -116,13 +117,13 @@ export default function Book(props) {
<div className="mb-4"> <div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium text-gray-700">Your name</label> <label htmlFor="name" className="block text-sm font-medium text-gray-700">Your name</label>
<div className="mt-1"> <div className="mt-1">
<input type="text" name="name" id="name" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="John Doe" /> <input type="text" name="name" id="name" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="John Doe" defaultValue={props.booking.attendees[0].name} />
</div> </div>
</div> </div>
<div className="mb-4"> <div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">Email address</label> <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email address</label>
<div className="mt-1"> <div className="mt-1">
<input type="email" name="email" id="email" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com" /> <input type="email" name="email" id="email" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com" defaultValue={props.booking.attendees[0].email} />
</div> </div>
</div> </div>
{locations.length > 1 && ( {locations.length > 1 && (
@ -144,11 +145,11 @@ export default function Book(props) {
</div>)} </div>)}
<div className="mb-4"> <div className="mb-4">
<label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">Additional notes</label> <label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">Additional notes</label>
<textarea name="notes" id="notes" rows={3} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting."></textarea> <textarea name="notes" id="notes" rows={3} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting." defaultValue={props.booking.description}></textarea>
</div> </div>
<div className="flex items-start"> <div className="flex items-start">
<Button type="submit" className="btn btn-primary">Confirm</Button> <Button type="submit" className="btn btn-primary">{rescheduleUid ? 'Reschedule' : 'Confirm'}</Button>
<Link href={"/" + props.user.username + "/" + props.eventType.slug}> <Link href={"/" + props.user.username + "/" + props.eventType.slug + (rescheduleUid ? "?rescheduleUid=" + rescheduleUid : "")}>
<a className="ml-2 btn btn-white">Cancel</a> <a className="ml-2 btn btn-white">Cancel</a>
</Link> </Link>
</div> </div>
@ -190,10 +191,30 @@ export async function getServerSideProps(context) {
} }
}); });
let booking = undefined;
if(context.query.rescheduleUid) {
booking = await prisma.booking.findFirst({
where: {
uid: context.query.rescheduleUid
},
select: {
description: true,
attendees: {
select: {
email: true,
name: true
}
}
}
});
}
return { return {
props: { props: {
user, user,
eventType eventType,
booking
}, },
} }
} }

31
pages/reschedule/[uid].tsx Normal file
View file

@ -0,0 +1,31 @@
import prisma from '../../lib/prisma';
export default function Type(props) {
// Just redirect to the schedule page to reschedule it.
return null;
}
export async function getServerSideProps(context) {
const booking = await prisma.booking.findFirst({
where: {
uid: context.query.uid,
},
select: {
id: true,
user: {select: {username: true}},
eventType: {select: {slug: true}},
title: true,
description: true,
startTime: true,
endTime: true,
attendees: true
}
});
return {
redirect: {
destination: '/' + booking.user.username + '/' + booking.eventType.slug + '?rescheduleUid=' + context.query.uid,
permanent: false,
},
}
}