2021-06-24 13:36:31 +00:00
|
|
|
import Head from "next/head";
|
|
|
|
|
import prisma from "../../lib/prisma";
|
|
|
|
|
import { getSession, useSession } from "next-auth/client";
|
|
|
|
|
import Shell from "../../components/Shell";
|
2021-07-17 12:30:29 +00:00
|
|
|
import { useRouter } from "next/router";
|
2021-08-03 00:22:17 +00:00
|
|
|
import dayjs from "dayjs";
|
|
|
|
|
|
2021-06-24 13:36:31 +00:00
|
|
|
|
|
|
|
|
export default function Bookings({ bookings }) {
|
2021-07-07 10:43:13 +00:00
|
|
|
const [, loading] = useSession();
|
2021-07-17 12:30:29 +00:00
|
|
|
const router = useRouter();
|
2021-06-24 13:36:31 +00:00
|
|
|
|
|
|
|
|
if (loading) {
|
|
|
|
|
return <p className="text-gray-400">Loading...</p>;
|
|
|
|
|
}
|
|
|
|
|
|
2021-07-17 12:30:29 +00:00
|
|
|
async function confirmBookingHandler(booking, confirm: boolean) {
|
|
|
|
|
const res = await fetch("/api/book/confirm", {
|
|
|
|
|
method: "PATCH",
|
|
|
|
|
body: JSON.stringify({ id: booking.id, confirmed: confirm }),
|
|
|
|
|
headers: {
|
|
|
|
|
"Content-Type": "application/json",
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
if (res.ok) {
|
|
|
|
|
await router.replace(router.asPath);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-06-24 13:36:31 +00:00
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Bookings | Calendso</title>
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
2021-08-02 14:10:24 +00:00
|
|
|
<Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links.">
|
2021-08-02 16:54:27 +00:00
|
|
|
<div className="-mx-4 sm:mx-auto flex flex-col">
|
2021-06-24 13:36:31 +00:00
|
|
|
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
|
|
|
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
2021-07-30 23:05:38 +00:00
|
|
|
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-sm">
|
2021-06-24 13:36:31 +00:00
|
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
|
|
|
<thead className="bg-gray-50">
|
|
|
|
|
<tr>
|
|
|
|
|
<th
|
|
|
|
|
scope="col"
|
|
|
|
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
2021-06-30 14:14:10 +00:00
|
|
|
Person
|
2021-06-24 13:36:31 +00:00
|
|
|
</th>
|
|
|
|
|
<th
|
|
|
|
|
scope="col"
|
|
|
|
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
2021-06-30 14:14:10 +00:00
|
|
|
Event
|
2021-06-24 13:36:31 +00:00
|
|
|
</th>
|
2021-08-03 00:22:17 +00:00
|
|
|
<th
|
2021-06-24 13:36:31 +00:00
|
|
|
scope="col"
|
|
|
|
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
2021-06-30 14:14:10 +00:00
|
|
|
Date
|
2021-08-03 00:22:17 +00:00
|
|
|
</th>
|
2021-06-24 13:36:31 +00:00
|
|
|
<th scope="col" className="relative px-6 py-3">
|
2021-06-30 14:14:10 +00:00
|
|
|
<span className="sr-only">Actions</span>
|
2021-06-24 13:36:31 +00:00
|
|
|
</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
2021-07-17 12:30:29 +00:00
|
|
|
{bookings
|
|
|
|
|
.filter((booking) => !booking.confirmed && !booking.rejected)
|
|
|
|
|
.concat(bookings.filter((booking) => booking.confirmed || booking.rejected))
|
|
|
|
|
.map((booking) => (
|
|
|
|
|
<tr key={booking.id}>
|
2021-08-02 16:54:27 +00:00
|
|
|
<td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
|
2021-07-17 12:30:29 +00:00
|
|
|
{!booking.confirmed && !booking.rejected && (
|
2021-07-30 23:05:38 +00:00
|
|
|
<span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
|
2021-07-17 12:30:29 +00:00
|
|
|
Unconfirmed
|
|
|
|
|
</span>
|
|
|
|
|
)}
|
|
|
|
|
<div className="text-sm font-medium text-gray-900">
|
|
|
|
|
{booking.attendees[0].name}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="text-sm text-gray-500">{booking.attendees[0].email}</div>
|
2021-08-02 16:54:27 +00:00
|
|
|
<div
|
|
|
|
|
style={{ maxWidth: 150 }}
|
|
|
|
|
className="block lg:hidden font-medium text-xs text-gray-900 truncate">
|
|
|
|
|
{booking.title}
|
|
|
|
|
</div>
|
2021-07-17 12:30:29 +00:00
|
|
|
</td>
|
|
|
|
|
<td
|
|
|
|
|
className={
|
2021-07-30 09:53:21 +00:00
|
|
|
"px-6 py-4 max-w-20 w-full" + (booking.rejected ? " line-through" : "")
|
2021-07-17 12:30:29 +00:00
|
|
|
}>
|
2021-08-02 16:54:27 +00:00
|
|
|
<div className="hidden lg:block text-sm text-neutral-900 font-medium">
|
|
|
|
|
{booking.title}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="hidden lg:block text-sm text-neutral-500">
|
2021-08-02 14:10:24 +00:00
|
|
|
You and {booking.attendees[0].name}
|
|
|
|
|
</div>
|
2021-07-17 12:30:29 +00:00
|
|
|
</td>
|
2021-08-03 00:22:17 +00:00
|
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
|
|
|
<div className="text-sm text-gray-900">
|
|
|
|
|
{dayjs(booking.startTime).format("D MMMM YYYY")}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="text-sm text-gray-500">
|
|
|
|
|
{dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
2021-07-17 12:30:29 +00:00
|
|
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
|
|
|
{!booking.confirmed && !booking.rejected && (
|
|
|
|
|
<>
|
2021-08-02 16:54:27 +00:00
|
|
|
<button
|
2021-07-17 12:30:29 +00:00
|
|
|
onClick={() => confirmBookingHandler(booking, true)}
|
2021-08-02 16:54:27 +00:00
|
|
|
className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
|
2021-07-17 12:30:29 +00:00
|
|
|
Confirm
|
2021-08-02 16:54:27 +00:00
|
|
|
</button>
|
|
|
|
|
<button
|
2021-07-17 12:30:29 +00:00
|
|
|
onClick={() => confirmBookingHandler(booking, false)}
|
2021-08-02 16:54:27 +00:00
|
|
|
className="text-xs sm:text-sm ml-4 inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
|
2021-07-17 12:30:29 +00:00
|
|
|
Reject
|
2021-08-02 16:54:27 +00:00
|
|
|
</button>
|
2021-07-17 12:30:29 +00:00
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
{booking.confirmed && !booking.rejected && (
|
|
|
|
|
<>
|
|
|
|
|
<a
|
|
|
|
|
href={window.location.href + "/../cancel/" + booking.uid}
|
2021-08-02 16:54:27 +00:00
|
|
|
className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
|
2021-07-17 12:30:29 +00:00
|
|
|
Cancel
|
|
|
|
|
</a>
|
2021-07-30 23:05:38 +00:00
|
|
|
<a
|
|
|
|
|
href={window.location.href + "/../reschedule/" + booking.uid}
|
2021-08-02 16:54:27 +00:00
|
|
|
className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
|
2021-07-30 23:05:38 +00:00
|
|
|
Reschedule
|
|
|
|
|
</a>
|
2021-07-17 12:30:29 +00:00
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
{!booking.confirmed && booking.rejected && (
|
|
|
|
|
<div className="text-sm text-gray-500">Rejected</div>
|
|
|
|
|
)}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
))}
|
2021-06-24 13:36:31 +00:00
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</Shell>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function getServerSideProps(context) {
|
|
|
|
|
const session = await getSession(context);
|
|
|
|
|
|
|
|
|
|
if (!session) {
|
|
|
|
|
return { redirect: { permanent: false, destination: "/auth/login" } };
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const user = await prisma.user.findFirst({
|
|
|
|
|
where: {
|
|
|
|
|
email: session.user.email,
|
|
|
|
|
},
|
|
|
|
|
select: {
|
|
|
|
|
id: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
2021-08-03 00:29:38 +00:00
|
|
|
const b = await prisma.booking.findMany({
|
2021-06-24 13:36:31 +00:00
|
|
|
where: {
|
|
|
|
|
userId: user.id,
|
|
|
|
|
},
|
|
|
|
|
select: {
|
|
|
|
|
uid: true,
|
|
|
|
|
title: true,
|
|
|
|
|
description: true,
|
|
|
|
|
attendees: true,
|
2021-07-17 12:30:29 +00:00
|
|
|
confirmed: true,
|
|
|
|
|
rejected: true,
|
|
|
|
|
id: true,
|
2021-08-03 00:22:17 +00:00
|
|
|
startTime: true,
|
|
|
|
|
endTime: true,
|
2021-06-24 13:36:31 +00:00
|
|
|
},
|
2021-06-30 14:14:10 +00:00
|
|
|
orderBy: {
|
2021-08-03 00:22:17 +00:00
|
|
|
startTime: "asc",
|
2021-06-30 14:14:10 +00:00
|
|
|
},
|
2021-06-24 13:36:31 +00:00
|
|
|
});
|
|
|
|
|
|
2021-08-03 00:22:17 +00:00
|
|
|
const bookings = b.map(booking=>{
|
|
|
|
|
return ({...booking, startTime:booking.startTime.toISOString(), endTime:booking.endTime.toISOString(),})
|
|
|
|
|
});
|
|
|
|
|
|
2021-06-24 13:36:31 +00:00
|
|
|
return { props: { bookings } };
|
|
|
|
|
}
|
