Bookings UI improvements (#826)

This commit is contained in:
Omar López 2021-09-30 04:46:39 -06:00 committed by GitHub
parent 033c4835f7
commit dc6841e761
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 160 additions and 131 deletions

View file

@ -0,0 +1,130 @@
import { BanIcon, CheckIcon, ClockIcon, XIcon } from "@heroicons/react/outline";
import { BookingStatus } from "@prisma/client";
import dayjs from "dayjs";
import { useMutation } from "react-query";
import { HttpError } from "@lib/core/http/error";
import { inferQueryOutput, trpc } from "@lib/trpc";
import TableActions from "@components/ui/TableActions";
type BookingItem = inferQueryOutput<"viewer.bookings">[number];
function BookingListItem(booking: BookingItem) {
const utils = trpc.useContext();
const mutation = useMutation(
async (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) {
throw new HttpError({ statusCode: res.status });
}
},
{
async onSettled() {
await utils.invalidateQuery(["viewer.bookings"]);
},
}
);
const isUpcoming = new Date(booking.endTime) >= new Date();
const isCancelled = booking.status === BookingStatus.CANCELLED;
const pendingActions = [
{
id: "reject",
label: "Reject",
onClick: () => mutation.mutate(false),
icon: BanIcon,
disabled: mutation.isLoading,
},
{
id: "confirm",
label: "Confirm",
onClick: () => mutation.mutate(true),
icon: CheckIcon,
disabled: mutation.isLoading,
color: "primary",
},
];
const bookedActions = [
{
id: "cancel",
label: "Cancel",
href: `/cancel/${booking.uid}`,
icon: XIcon,
},
{
id: "reschedule",
label: "Reschedule",
href: `/reschedule/${booking.uid}`,
icon: ClockIcon,
},
];
const startTime = dayjs(booking.startTime).format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
return (
<tr>
<td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">{startTime}</div>
{!booking.confirmed && !booking.rejected && (
<span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
Unconfirmed
</span>
)}
</td>
<td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-500">
{dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
</div>
</td>
<td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
<div className="sm:hidden">
{!booking.confirmed && !booking.rejected && (
<span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
Unconfirmed
</span>
)}
<div className="text-sm text-gray-900 font-medium">
{startTime}:{" "}
<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-neutral-900 font-medium truncate max-w-60 md:max-w-96">
{booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
{booking.title}
</div>
{booking.description && (
<div className="text-sm text-neutral-600 truncate max-w-60 md:max-w-96">
&quot;{booking.description}&quot;
</div>
)}
{booking.attendees.length !== 0 && (
<div className="text-sm text-blue-500">
<a href={"mailto:" + booking.attendees[0].email}>{booking.attendees[0].email}</a>
</div>
)}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
{isUpcoming && !isCancelled ? (
<>
{!booking.confirmed && !booking.rejected && <TableActions actions={pendingActions} />}
{booking.confirmed && !booking.rejected && <TableActions actions={bookedActions} />}
{!booking.confirmed && booking.rejected && <div className="text-sm text-gray-500">Rejected</div>}
</>
) : null}
</td>
</tr>
);
}
export default BookingListItem;

View file

@ -12,6 +12,7 @@ type ActionType = {
icon: SVGComponent;
label: string;
disabled?: boolean;
color?: "primary" | "secondary";
} & ({ href?: never; onClick: () => any } | { href: string; onClick?: never });
interface Props {
@ -30,7 +31,7 @@ const TableActions: FC<Props> = ({ actions }) => {
onClick={action.onClick}
StartIcon={action.icon}
disabled={action.disabled}
color="secondary">
color={action.color || "secondary"}>
{action.label}
</Button>
))}

View file

@ -1,140 +1,22 @@
// TODO: replace headlessui with radix-ui
import { BanIcon, CalendarIcon, CheckIcon, ClockIcon, XIcon } from "@heroicons/react/outline";
import { BookingStatus } from "@prisma/client";
import dayjs from "dayjs";
import { CalendarIcon } from "@heroicons/react/outline";
import { useRouter } from "next/router";
import { useMutation } from "react-query";
import { HttpError } from "@lib/core/http/error";
import { inferQueryOutput, trpc } from "@lib/trpc";
import { inferQueryInput, trpc } from "@lib/trpc";
import BookingsShell from "@components/BookingsShell";
import EmptyScreen from "@components/EmptyScreen";
import Loader from "@components/Loader";
import Shell from "@components/Shell";
import BookingListItem from "@components/booking/BookingListItem";
import { Alert } from "@components/ui/Alert";
import TableActions from "@components/ui/TableActions";
type BookingItem = inferQueryOutput<"viewer.bookings">[number];
function BookingListItem(booking: BookingItem) {
const utils = trpc.useContext();
const mutation = useMutation(
async (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) {
throw new HttpError({ statusCode: res.status });
}
},
{
async onSettled() {
await utils.invalidateQuery(["viewer.bookings"]);
},
}
);
const isUpcoming = new Date(booking.endTime) >= new Date();
const isCancelled = booking.status === BookingStatus.CANCELLED;
const pendingActions = [
{
id: "confirm",
label: "Confirm",
onClick: () => mutation.mutate(true),
icon: CheckIcon,
disabled: mutation.isLoading,
},
{
id: "reject",
label: "Reject",
onClick: () => mutation.mutate(false),
icon: BanIcon,
disabled: mutation.isLoading,
},
];
const bookedActions = [
{
id: "cancel",
label: "Cancel",
href: `/cancel/${booking.uid}`,
icon: XIcon,
},
{
id: "reschedule",
label: "Reschedule",
href: `/reschedule/${booking.uid}`,
icon: ClockIcon,
},
];
return (
<tr>
<td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
{!booking.confirmed && !booking.rejected && (
<span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
Unconfirmed
</span>
)}
<div className="text-sm text-neutral-900 font-medium truncate max-w-60 md:max-w-96">
{booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
{booking.title}
</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>
{booking.description && (
<div className="text-sm text-neutral-600 truncate max-w-60 md:max-w-96">
&quot;{booking.description}&quot;
</div>
)}
{booking.attendees.length !== 0 && (
<div className="text-sm text-blue-500">
<a href={"mailto:" + booking.attendees[0].email}>{booking.attendees[0].email}</a>
</div>
)}
</td>
<td className="hidden sm:table-cell 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>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
{isUpcoming && !isCancelled ? (
<>
{!booking.confirmed && !booking.rejected && <TableActions actions={pendingActions} />}
{booking.confirmed && !booking.rejected && <TableActions actions={bookedActions} />}
{!booking.confirmed && booking.rejected && <div className="text-sm text-gray-500">Rejected</div>}
</>
) : null}
</td>
</tr>
);
}
type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
export default function Bookings() {
const router = useRouter();
const query = trpc.useQuery(["viewer.bookings"]);
const filtersByStatus = {
upcoming: (booking: BookingItem) =>
new Date(booking.endTime) >= new Date() && booking.status !== BookingStatus.CANCELLED,
past: (booking: BookingItem) => new Date(booking.endTime) < new Date(),
cancelled: (booking: BookingItem) => booking.status === BookingStatus.CANCELLED,
} as const;
const filterKey = (router.query?.status as string as keyof typeof filtersByStatus) || "upcoming";
const appliedFilter = filtersByStatus[filterKey];
const bookings = query.data?.filter(appliedFilter);
const status = router.query?.status as BookingListingStatus;
const query = trpc.useQuery(["viewer.bookings", { status }]);
const bookings = query.data;
return (
<Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links.">

View file

@ -1,4 +1,4 @@
import { Prisma } from "@prisma/client";
import { Prisma, BookingStatus } from "@prisma/client";
import { TRPCError } from "@trpc/server";
import { z } from "zod";
@ -20,8 +20,25 @@ export const viewerRouter = createProtectedRouter()
},
})
.query("bookings", {
async resolve({ ctx }) {
input: z.object({
status: z.enum(["upcoming", "past", "cancelled"]).optional(),
}),
async resolve({ ctx, input }) {
const { prisma, user } = ctx;
const bookingListingByStatus = input.status || "upcoming";
const bookingListingFilters: Record<typeof bookingListingByStatus, Prisma.BookingWhereInput[]> = {
upcoming: [{ endTime: { gte: new Date() } }],
past: [{ endTime: { lte: new Date() } }],
cancelled: [{ status: { equals: BookingStatus.CANCELLED } }],
};
const bookingListingOrderby: Record<typeof bookingListingByStatus, Prisma.BookingOrderByInput> = {
upcoming: { startTime: "desc" },
past: { startTime: "asc" },
cancelled: { startTime: "asc" },
};
const passedBookingsFilter = bookingListingFilters[bookingListingByStatus];
const orderBy = bookingListingOrderby[bookingListingByStatus];
const bookingsQuery = await prisma.booking.findMany({
where: {
OR: [
@ -36,6 +53,7 @@ export const viewerRouter = createProtectedRouter()
},
},
],
AND: passedBookingsFilter,
},
select: {
uid: true,
@ -58,9 +76,7 @@ export const viewerRouter = createProtectedRouter()
},
status: true,
},
orderBy: {
startTime: "asc",
},
orderBy,
});
const bookings = bookingsQuery.reverse().map((booking) => {