From 98bc1ac115efc299095c2821442aae33ad5a055b Mon Sep 17 00:00:00 2001
From: Daniel Adu-Gyan <26229521+danieladugyan@users.noreply.github.com>
Date: Wed, 21 Aug 2024 23:25:37 +0200
Subject: [PATCH] Change booking system

- Replace calendar with table
- Implement booking deletion
---
 src/database/prisma/schema.prisma           |   1 +
 src/database/schema.zmodel                  |   1 +
 src/lib/components/ConfirmDialog.svelte     | 102 ++++++++++++++++++++
 src/lib/utils/client/member.ts              |   7 +-
 src/routes/(app)/booking/+page.server.ts    |  50 +++++++++-
 src/routes/(app)/booking/+page.svelte       |  97 ++++++++++++++++++-
 src/routes/(app)/booking/Calendar.svelte    |  76 ---------------
 src/routes/(app)/booking/admin/+page.svelte |  74 ++++++++++++--
 src/translations/en.json                    |   8 ++
 src/translations/sv.json                    |   8 ++
 10 files changed, 332 insertions(+), 92 deletions(-)
 create mode 100644 src/lib/components/ConfirmDialog.svelte
 delete mode 100644 src/routes/(app)/booking/Calendar.svelte

diff --git a/src/database/prisma/schema.prisma b/src/database/prisma/schema.prisma
index eb4a9acdf..46255c1c8 100644
--- a/src/database/prisma/schema.prisma
+++ b/src/database/prisma/schema.prisma
@@ -218,6 +218,7 @@ model Bookable {
 /// @@allow('read', has(auth().policies, 'booking_request:read'))
 /// @@allow('update', has(auth().policies, 'booking_request:update'))
 /// @@allow('delete', has(auth().policies, 'booking_request:delete'))
+/// @@allow('delete', auth().memberId == bookerId)
 /// This model or at least one of its fields has comments in the database, and requires an additional setup for migrations: Read more: https://pris.ly/d/database-comments
 model BookingRequest {
     id String @id() @default(dbgenerated("gen_random_uuid()")) @db.Uuid()
diff --git a/src/database/schema.zmodel b/src/database/schema.zmodel
index 2aa25b458..45b6d6dec 100644
--- a/src/database/schema.zmodel
+++ b/src/database/schema.zmodel
@@ -212,6 +212,7 @@ model BookingRequest {
   @@allow("read", has(auth().policies, "booking_request:read"))
   @@allow("update", has(auth().policies, "booking_request:update"))
   @@allow("delete", has(auth().policies, "booking_request:delete"))
+  @@allow("delete", auth().memberId == bookerId)
   @@map("booking_requests")
 }
 
diff --git a/src/lib/components/ConfirmDialog.svelte b/src/lib/components/ConfirmDialog.svelte
new file mode 100644
index 000000000..bdb803958
--- /dev/null
+++ b/src/lib/components/ConfirmDialog.svelte
@@ -0,0 +1,102 @@
+<!--
+  @component
+
+  This component shows a confirmation dialog with a `title`, `description`,
+  and two buttons. For a basic HTML dialog form, you can use the `formTarget`
+  and `formData` props to submit a form with a confirm button.
+  
+  If you need to customize the dialog, you can use the slots to
+  provide a custom `title`, `description`, and `action` buttons.
+
+  @slot `title`
+    The title of the dialog. Defaults to `h1`
+  
+  @slot `description`
+    The description of the dialog. Defaults to `p`
+  
+  @slot `action`
+    The action buttons of the dialog. Defaults to two buttons:
+    - A cancel button that closes the dialog
+    - A confirm button in a form that submits the form and closes the dialog
+
+-->
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import * as m from "$paraglide/messages";
+  import { twMerge } from "tailwind-merge";
+
+  /** The title of the dialog displayed at the top. */
+  export let title = "Are you sure?";
+
+  /** The description of the dialog displayed below the title. */
+  export let description = "";
+
+  /** The text of the confirm button. */
+  export let confirmText = m.ok();
+
+  /** The text of the cancel button. */
+  export let cancelText = m.cancel();
+
+  /** The target URL for the confirm button. */
+  export let formTarget: string | undefined = undefined;
+
+  /** The form data to submit with the confirm button. */
+  export let formData: Record<string, string> = {};
+
+  /** Not recommended. Prefer using `formTarget` and `formData`. */
+  export let onClose: (() => void) | undefined = undefined;
+
+  /** Not recommended. Prefer using `formTarget` and `formData`. */
+  export let onConfirm: (() => void) | undefined = undefined;
+
+  /** Classes to apply to the confirm button. */
+  export let confirmClass: string | undefined = undefined;
+
+  /** The dialog element. */
+  export let modal: HTMLDialogElement;
+</script>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle">
+  <div class="modal-box">
+    <slot name="title">
+      <h1 class="mb-4 text-lg font-bold">{title}</h1>
+    </slot>
+
+    <slot name="description">
+      <p>{description}</p>
+    </slot>
+
+    <div class="modal-action">
+      <slot name="action">
+        <button
+          class="btn"
+          on:click={() => {
+            modal?.close();
+            onClose?.();
+          }}
+        >
+          {cancelText}
+        </button>
+        <form method="POST" action={formTarget} use:enhance>
+          {#each Object.entries(formData) as [name, value]}
+            <input type="hidden" {name} {value} />
+          {/each}
+          <button
+            type="submit"
+            class={twMerge("btn btn-primary", confirmClass)}
+            on:click={() => {
+              modal?.close();
+              onConfirm?.();
+            }}
+          >
+            {confirmText}
+          </button>
+        </form>
+      </slot>
+    </div>
+  </div>
+
+  <form method="dialog" class="modal-backdrop">
+    <button class="cursor-auto" />
+  </form>
+</dialog>
diff --git a/src/lib/utils/client/member.ts b/src/lib/utils/client/member.ts
index 4ba412189..3212eb631 100644
--- a/src/lib/utils/client/member.ts
+++ b/src/lib/utils/client/member.ts
@@ -6,8 +6,11 @@ import type {
   Position,
 } from "@prisma/client";
 export type MemberNames = Pick<Member, "firstName" | "nickname" | "lastName">;
-export const getFullName = (member: MemberNames) => {
-  if (member.nickname) {
+type Options = {
+  hideNickname?: boolean;
+};
+export const getFullName = (member: MemberNames, options: Options = {}) => {
+  if (member.nickname && !options.hideNickname) {
     if (member.firstName && member.lastName)
       return `${member.firstName} "${member.nickname}" ${member.lastName}`;
     return `"${member.nickname}"`;
diff --git a/src/routes/(app)/booking/+page.server.ts b/src/routes/(app)/booking/+page.server.ts
index fbcdc6f46..e8a79cada 100644
--- a/src/routes/(app)/booking/+page.server.ts
+++ b/src/routes/(app)/booking/+page.server.ts
@@ -1,10 +1,56 @@
-export const load = async ({ locals }) => {
-  const { prisma } = locals;
+import apiNames from "$lib/utils/apiNames";
+import * as m from "$paraglide/messages";
+import { isAuthorized } from "$lib/utils/authorization";
+import { redirect } from "$lib/utils/redirect";
+import { error } from "@sveltejs/kit";
+
+export const load = async (event) => {
+  const { prisma, user } = event.locals;
   const bookingRequests = await prisma.bookingRequest.findMany({
+    where: {
+      bookerId: user.memberId,
+    },
     include: {
       bookables: true,
     },
   });
 
+  if (bookingRequests.length === 0) {
+    const isAdmin = isAuthorized(apiNames.BOOKINGS.UPDATE, user);
+    if (isAdmin) {
+      return redirect(
+        "/booking/admin",
+        {
+          message: m.booking_noBookings(),
+          type: "info",
+        },
+        event,
+      );
+    }
+    redirect(
+      "/booking/create",
+      {
+        message: m.booking_noBookings(),
+        type: "info",
+      },
+      event,
+    );
+  }
+
   return { bookingRequests };
 };
+
+export const actions = {
+  delete: async ({ request, locals }) => {
+    const { prisma } = locals;
+    const formData = await request.formData();
+    const id = formData.get("id");
+    if (id && typeof id === "string") {
+      await prisma.bookingRequest.delete({
+        where: { id },
+      });
+    } else {
+      error(422, "Invalid booking request id");
+    }
+  },
+};
diff --git a/src/routes/(app)/booking/+page.svelte b/src/routes/(app)/booking/+page.svelte
index 4b3980d30..a36099e7d 100644
--- a/src/routes/(app)/booking/+page.svelte
+++ b/src/routes/(app)/booking/+page.svelte
@@ -1,11 +1,104 @@
 <script lang="ts">
   import SetPageTitle from "$lib/components/nav/SetPageTitle.svelte";
-  import Calendar from "./Calendar.svelte";
   import * as m from "$paraglide/messages";
+  import { isAuthorized } from "$lib/utils/authorization";
+  import { page } from "$app/stores";
+  import apiNames from "$lib/utils/apiNames";
+  import StatusComponent from "./admin/StatusComponent.svelte";
+  import dayjs from "dayjs";
+  import ConfirmDialog from "$lib/components/ConfirmDialog.svelte";
 
   export let data;
+  let deleteModal: HTMLDialogElement;
+  let selectedBooking: (typeof data.bookingRequests)[number] | undefined =
+    undefined;
 </script>
 
 <SetPageTitle title={m.bookings()} />
 
-<Calendar bookingRequests={data.bookingRequests} />
+<div class="mb-8 flex gap-4">
+  <a class="btn" href="/booking/create">
+    {m.booking_createBooking()}
+  </a>
+
+  {#if isAuthorized(apiNames.BOOKINGS.UPDATE, $page.data.user)}
+    <a class="btn" href="/booking/admin">
+      {m.booking_manageBookings()}
+    </a>
+  {/if}
+</div>
+
+<div class="overflow-x-auto">
+  <table class="table">
+    <thead>
+      <tr class="bg-base-200">
+        <th>{m.booking_booking()}</th>
+        <th>{m.booking_from()}</th>
+        <th>{m.booking_until()}</th>
+        <th>{m.booking_event()}</th>
+        <th>{m.booking_status()}</th>
+        <th />
+      </tr>
+    </thead>
+
+    <tbody>
+      {#each data.bookingRequests as bookingRequest (bookingRequest.id)}
+        <tr>
+          <td>
+            {#each bookingRequest.bookables.map((a) => a.name) as bookable}
+              <p class="min-w-max">{bookable}</p>
+            {/each}
+          </td>
+          <td>{dayjs(bookingRequest.start).format("YYYY-MM-DD HH:MM")}</td>
+          <td>{dayjs(bookingRequest.end).format("YYYY-MM-DD HH:MM")}</td>
+          <td>{bookingRequest.event}</td>
+          <td>
+            <StatusComponent
+              bind:bookingRequest
+              bind:bookingRequests={data.bookingRequests}
+            />
+          </td>
+          <td>
+            <div class="form-control gap-2">
+              <!-- <a
+                href="/booking/{bookingRequest.id}/edit"
+                class="btn btn-xs px-8"
+              >
+                {m.booking_edit()}
+              </a> -->
+              <button
+                class="btn btn-xs px-8"
+                on:click={() => {
+                  deleteModal?.showModal();
+                  selectedBooking = bookingRequest;
+                }}
+              >
+                {m.booking_delete()}
+              </button>
+            </div>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<ConfirmDialog
+  bind:modal={deleteModal}
+  title={m.booking_deleteTitle()}
+  confirmText={m.booking_delete()}
+  confirmClass="btn-error"
+  formTarget="/booking?/delete"
+  formData={{ id: selectedBooking?.id ?? "" }}
+>
+  <p slot="description">
+    {#if selectedBooking}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+      {@html m.booking_deleteMyAreYouSure({
+        bookables: selectedBooking?.bookables
+          .map(({ name }) => name)
+          .join(", "),
+      })}
+    {/if}
+  </p>
+</ConfirmDialog>
diff --git a/src/routes/(app)/booking/Calendar.svelte b/src/routes/(app)/booking/Calendar.svelte
deleted file mode 100644
index 356f8e8f0..000000000
--- a/src/routes/(app)/booking/Calendar.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { Calendar } from "@fullcalendar/core";
-  import daygridPlugin from "@fullcalendar/daygrid";
-  import type { Bookable, BookingRequest } from "@prisma/client";
-  import { goto } from "$lib/utils/redirect";
-  import "$lib/FullCalendar.css";
-  import { isAuthorized } from "$lib/utils/authorization";
-  import { page } from "$app/stores";
-  import apiNames from "$lib/utils/apiNames";
-  import * as m from "$paraglide/messages";
-  import { languageTag } from "$paraglide/runtime";
-
-  export let bookingRequests: Array<
-    BookingRequest & { bookables: Bookable[] }
-  > = [];
-
-  let calendarEl: HTMLElement;
-  let calendar: Calendar;
-
-  const admin = isAuthorized(apiNames.BOOKINGS.UPDATE, $page.data.user);
-
-  onMount(() => {
-    calendar = new Calendar(calendarEl, {
-      initialView: "dayGridMonth",
-      plugins: [daygridPlugin],
-      events: bookingRequests.map((booking) => ({
-        title: booking.event ?? "",
-        start: booking.start ?? new Date(),
-        end: booking.end ?? new Date(),
-      })),
-      locale: languageTag(),
-      eventColor: "#f280a1",
-      firstDay: 1,
-      headerToolbar: {
-        left: "prev,next,addBooking" + (admin ? ",admin" : ""),
-        center: "title",
-        right: "dayGridDay,dayGridWeek,dayGridMonth",
-      },
-      customButtons: {
-        addBooking: {
-          text: m.booking_createBooking(),
-          click: () => {
-            void goto("/booking/create");
-          },
-        },
-        admin: {
-          text: m.booking_manageBookings(),
-          click: () => {
-            void goto("/booking/admin");
-          },
-        },
-        subscribe: {
-          text: m.booking_subscribe(),
-          click: () => {
-            void goto("/events/subscribe");
-          },
-        },
-      },
-      buttonText: {
-        today: m.booking_today(),
-        month: m.booking_month(),
-        week: m.booking_week(),
-        day: m.booking_day(),
-      },
-    });
-    calendar.render();
-
-    return () => calendar?.destroy();
-  });
-</script>
-
-<div
-  class="min-w-0 flex-col break-words rounded-2xl border-0 bg-clip-border p-4 shadow-xl"
-  bind:this={calendarEl}
-></div>
diff --git a/src/routes/(app)/booking/admin/+page.svelte b/src/routes/(app)/booking/admin/+page.svelte
index c0f43e0f1..6010e9893 100644
--- a/src/routes/(app)/booking/admin/+page.svelte
+++ b/src/routes/(app)/booking/admin/+page.svelte
@@ -6,15 +6,25 @@
   import MemberAvatar from "$lib/components/socials/MemberAvatar.svelte";
   import * as m from "$paraglide/messages";
   import SetPageTitle from "$lib/components/nav/SetPageTitle.svelte";
+  import ConfirmDialog from "$lib/components/ConfirmDialog.svelte";
   export let data;
+
+  let deleteModal: HTMLDialogElement;
+  let selectedBooking: (typeof data.bookingRequests)[number] | undefined =
+    undefined;
 </script>
 
 <SetPageTitle title={m.bookings()} />
 
-<a class="btn mb-4" href="/booking">
-  <span class="i-mdi-arrow-expand-left" />
-  {m.booking_goBack()}
-</a>
+<div class="mb-8 flex gap-4">
+  <a class="btn" href="/booking">
+    <span class="i-mdi-arrow-expand-left" />
+    {m.booking_goBack()}
+  </a>
+  <a class="btn" href="/booking/create">
+    {m.booking_createBooking()}
+  </a>
+</div>
 
 <div class="overflow-x-auto">
   <table class="table">
@@ -51,7 +61,7 @@
                 <a
                   href="/members/{bookingRequest.booker.studentId}"
                   class="link-hover link"
-                  >{getFullName(bookingRequest.booker)}
+                  >{getFullName(bookingRequest.booker, { hideNickname: true })}
                 </a>
               {/if}
             </div>
@@ -66,7 +76,7 @@
             <form
               method="POST"
               use:enhance
-              class="form-control gap-2"
+              class="flex gap-2"
               id={`form-${bookingRequest.id}`}
             >
               <input
@@ -77,17 +87,40 @@
               />
               <button
                 formaction="?/accept"
-                class="btn btn-xs px-8"
+                class="btn btn-outline btn-xs"
                 class:btn-disabled={bookingRequest.status === "ACCEPTED"}
+                aria-label={m.booking_accept()}
               >
-                {m.booking_accept()}
+                <span class="i-mdi-check" />
               </button>
               <button
                 formaction="?/reject"
-                class="btn btn-xs px-8"
+                class="btn btn-outline btn-xs"
                 class:btn-disabled={bookingRequest.status === "DENIED"}
+                aria-label={m.booking_deny()}
               >
-                {m.booking_deny()}
+                <span class="i-mdi-close" />
+              </button>
+
+              <hr class="mx-2" />
+
+              <!-- <a
+                href="/booking/{bookingRequest.id}/edit"
+                class="btn btn-outline btn-xs"
+                aria-label={m.booking_edit()}
+              >
+                <span class="i-mdi-edit" />
+              </a> -->
+              <button
+                class="btn btn-outline btn-xs"
+                type="button"
+                aria-label={m.booking_delete()}
+                on:click={() => {
+                  deleteModal?.showModal();
+                  selectedBooking = bookingRequest;
+                }}
+              >
+                <span class="i-mdi-delete" />
               </button>
             </form>
           </td>
@@ -96,3 +129,24 @@
     </tbody>
   </table>
 </div>
+
+<ConfirmDialog
+  bind:modal={deleteModal}
+  title={m.booking_deleteTitle()}
+  confirmText={m.booking_delete()}
+  confirmClass="btn-error"
+  formTarget="/booking?/delete"
+  formData={{ id: selectedBooking?.id ?? "" }}
+>
+  <p slot="description">
+    {#if selectedBooking}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+      {@html m.booking_deleteAreYouSure({
+        name: selectedBooking?.booker?.firstName ?? "",
+        bookables: selectedBooking?.bookables
+          .map(({ name }) => name)
+          .join(", "),
+      })}
+    {/if}
+  </p>
+</ConfirmDialog>
diff --git a/src/translations/en.json b/src/translations/en.json
index d78b07360..26e4d1c1b 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -3,6 +3,8 @@
   "no": "No",
   "yes": "Yes",
   "save": "Save",
+  "cancel": "Cancel",
+  "ok": "Ok",
   "errors_notImplemented": "Not implemented yet",
   "errors_missingPermissions": "You do not have permission, have you logged in? Required policy:",
   "home": "Home",
@@ -265,6 +267,7 @@
   "committees_stopEditing": "Stop editing",
   "booking_createBooking": "Create booking",
   "booking_manageBookings": "Manage bookings",
+  "booking_noBookings": "No bookings found!",
   "booking_subscribe": "Subscribe",
   "booking_today": "Today",
   "booking_month": "Month",
@@ -287,6 +290,11 @@
   "booking_requestSent": "Booking request sent!",
   "booking_goBack": "Go back",
   "booking_create": "Create",
+  "booking_edit": "Edit",
+  "booking_delete": "Delete",
+  "booking_deleteTitle": "Delete booking",
+  "booking_deleteAreYouSure": "Are you sure you want to delete <strong>{name}'s</strong> request to book: <strong>{bookables}</strong>?",
+  "booking_deleteMyAreYouSure": "Are you sure you want to delete your request to book: <strong>{bookables}</strong>?",
   "notifications_notificationsRead": "Notifications read",
   "notifications_notificationsRemoved": "Notifications removed",
   "notifications_notificationRemoved": "Notification removed",
diff --git a/src/translations/sv.json b/src/translations/sv.json
index 928773ae4..1d10da75a 100644
--- a/src/translations/sv.json
+++ b/src/translations/sv.json
@@ -3,6 +3,8 @@
   "no": "Nej",
   "yes": "Ja",
   "save": "Spara",
+  "cancel": "Avbryt",
+  "ok": "Ok",
   "errors_notImplemented": "Inte implementerat än",
   "errors_missingPermissions": "Du har inte access, har du loggat in? Policy som krävs:",
   "home": "Hem",
@@ -267,6 +269,7 @@
   "committees_stopEditing": "Sluta redigera",
   "booking_createBooking": "Skapa bokning",
   "booking_manageBookings": "Hantera bokningar",
+  "booking_noBookings": "Du har inga bokningar!",
   "booking_subscribe": "Prenumerera",
   "booking_today": "Idag",
   "booking_month": "Månad",
@@ -289,6 +292,11 @@
   "booking_requestSent": "Bokningsförfrågan skickad!",
   "booking_goBack": "Tillbaka",
   "booking_create": "Skapa",
+  "booking_edit": "Redigera",
+  "booking_delete": "Ta bort",
+  "booking_deleteTitle": "Ta bort bokning",
+  "booking_deleteAreYouSure": "Är du säker på att du vill ta bort <strong>{name}s</strong> bokning av: <strong>{bookables}</strong>?",
+  "booking_deleteMyAreYouSure": "Är du säker på att du vill ta bort din bokning av: <strong>{bookables}</strong>?",
   "notifications_notificationsRead": "Notiser lästa",
   "notifications_notificationsRemoved": "Notiser borttagna",
   "notifications_notificationRemoved": "Notis borttagen",