cal.pub0.org/pages/bookings/index.tsx

250 lines
13 KiB
TypeScript
Raw Normal View History

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-08-03 08:34:43 +00:00
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { DotsHorizontalIcon } from "@heroicons/react/solid";
import classNames from "@lib/classNames";
import { ClockIcon, XIcon } from "@heroicons/react/outline";
2021-06-24 13:36:31 +00:00
export default function Bookings({ bookings }) {
2021-08-03 10:29:51 +00:00
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession();
2021-08-03 10:29:51 +00:00
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>
<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">
<div className="border border-gray-200 overflow-hidden border-b rounded-sm">
2021-06-24 13:36:31 +00:00
<table className="min-w-full divide-y divide-gray-200">
<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 text-neutral-900 font-medium truncate max-w-60 md:max-w-96">
{booking.title}
2021-08-02 16:54:27 +00:00
</div>
<div className="sm:hidden">
<div className="text-sm text-gray-900">
{dayjs(booking.startTime).format("D MMMM YYYY")}:{" "}
<small className="text-sm text-gray-500">
{dayjs(booking.startTime).format("HH:mm")} -{" "}
{dayjs(booking.endTime).format("HH:mm")}
</small>
</div>
</div>
<div className="text-sm text-blue-500">
<a href={"mailto:" + booking.attendees[0].email}>
{booking.attendees[0].email}
</a>
</div>
2021-07-17 12:30:29 +00:00
</td>
<td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
2021-08-03 00:22:17 +00:00
<div className="text-sm text-gray-900">
{dayjs(booking.startTime).format("D MMMM YYYY")}
</div>
<div className="text-sm text-gray-500">
2021-08-03 08:30:35 +00:00
{dayjs(booking.startTime).format("HH:mm")} -{" "}
{dayjs(booking.endTime).format("HH:mm")}
2021-08-03 00:22:17 +00:00
</div>
2021-08-03 08:30:35 +00:00
</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)}
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
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-03 08:34:43 +00:00
className="hidden text-xs sm:text-sm lg: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">
<XIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
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-03 08:34:43 +00:00
className="hidden text-xs sm:text-sm lg: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">
<ClockIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
2021-07-30 23:05:38 +00:00
Reschedule
</a>
2021-08-03 08:34:43 +00:00
<Menu as="div" className="inline-block lg:hidden text-left ">
{({ open }) => (
<>
<div>
<Menu.Button className="text-neutral-400 mt-1">
<span className="sr-only">Open options</span>
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button>
</div>
2021-08-03 08:30:35 +00:00
2021-08-03 08:34:43 +00:00
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
<Menu.Items
static
className="origin-top-right absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none divide-y divide-neutral-100">
<div className="py-1">
<Menu.Item>
{({ active }) => (
<a
href={window.location.href + "/../cancel/" + booking.uid}
className={classNames(
active
? "bg-neutral-100 text-neutral-900"
: "text-neutral-700",
"group flex items-center px-4 py-2 text-sm font-medium"
)}>
<XIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
2021-08-03 08:34:43 +00:00
Cancel
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
href={
window.location.href + "/../reschedule/" + booking.uid
}
className={classNames(
active
? "bg-neutral-100 text-neutral-900"
: "text-neutral-700",
"group flex items-center px-4 py-2 text-sm w-full font-medium"
)}>
<ClockIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
2021-08-03 08:34:43 +00:00
Reschedule
</a>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</>
)}
</Menu>
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 08:34:43 +00:00
const bookings = b.reverse().map((booking) => {
return { ...booking, startTime: booking.startTime.toISOString(), endTime: booking.endTime.toISOString() };
2021-08-03 00:22:17 +00:00
});
2021-06-24 13:36:31 +00:00
return { props: { bookings } };
}