Fix #235 Add cancelling feature to events (#591)

* Added cancelling feature to events * Style tweaks Co-authored-by: Daniel Adu-Gyan <[email protected]> * Tweaks to class check * Removed unnecessary variable --------- Co-authored-by: Daniel Adu-Gyan <[email protected]>
Dsek-LTH · Nov 19, 2024 · cb6ded3 · cb6ded3
1 parent f314f16
commit cb6ded3
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 21 deletions.
diff --git a/src/database/prisma/migrations/20241118182939_add_iscancelled_to_event/migration.sql b/src/database/prisma/migrations/20241118182939_add_iscancelled_to_event/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "events" ADD COLUMN     "is_cancelled" BOOLEAN DEFAULT false;
diff --git a/src/database/prisma/schema.prisma b/src/database/prisma/schema.prisma
@@ -417,6 +417,7 @@ model Event {
     numberOfUpdates Int? @default(0) @map("number_of_updates")
     slug String? @unique(map: "events_slug_unique") @db.VarChar(255)
     alarmActive Boolean? @default(false) @map("alarm_active")
+    isCancelled Boolean? @default(false) @map("is_cancelled")
     /// @allow('update', has(auth().policies, 'event:delete'))
     removedAt DateTime? @map("removed_at") @db.Timestamptz(6)
     comments EventComment[]

diff --git a/src/database/schema.zmodel b/src/database/schema.zmodel
@@ -408,6 +408,7 @@ model Event {
   numberOfUpdates      Int?            @default(0) @map("number_of_updates")
   slug                 String?         @unique(map: "events_slug_unique") @db.VarChar(255)
   alarmActive          Boolean?        @default(false) @map("alarm_active")
+  isCancelled          Boolean?        @default(false) @map("is_cancelled")
   removedAt            DateTime?       @map("removed_at") @db.Timestamptz(6) @allow("update", has(auth().policies, "event:delete"))
   comments             EventComment[]
   going                Member[]        @relation("event_going")

diff --git a/src/database/seed/.snaplet/dataModel.json b/src/database/seed/.snaplet/dataModel.json
@@ -4227,6 +4227,20 @@
           "isId": false,
           "maxLength": null
         },
+        {
+          "id": "public.events.is_cancelled",
+          "name": "is_cancelled",
+          "columnName": "is_cancelled",
+          "type": "bool",
+          "isRequired": false,
+          "kind": "scalar",
+          "isList": false,
+          "isGenerated": false,
+          "sequence": false,
+          "hasDefaultValue": true,
+          "isId": false,
+          "maxLength": null
+        },
         {
           "name": "RecurringEvent",
           "type": "RecurringEvent",

diff --git a/src/lib/events/schema.ts b/src/lib/events/schema.ts
@@ -42,6 +42,7 @@ export const eventSchema = z
       .default([]),
 
     alarmActive: z.boolean().nullable().default(null),
+    isCancelled: z.boolean().nullable().default(null),
     isRecurring: z.boolean().default(false),
     // see comment above and in utils/events.ts why we do it like this
     recurringType: z

diff --git a/src/routes/(app)/events/Event.svelte b/src/routes/(app)/events/Event.svelte
@@ -3,6 +3,7 @@
   import MarkdownBody from "$lib/components/MarkdownBody.svelte";
   import type { Event } from "@prisma/client";
   import { getFileUrl } from "$lib/files/client";
+  import * as m from "$paraglide/messages";
   export let event: Pick<
     Event,
     | "title"
@@ -11,6 +12,7 @@
     | "shortDescription"
     | "description"
     | "imageUrl"
+    | "isCancelled"
   > &
     Partial<Pick<Event, "removedAt">>;
 </script>
@@ -21,17 +23,27 @@
   </figure>
 {/if}
 
-<h1 class="text-2xl font-bold">
-  {event.title}
-  {#if event.removedAt}
-    <span
-      class="badge badge-error badge-sm relative -top-1 !text-xs font-semibold"
-      >Raderat</span
+<div class="flex items-baseline">
+  <h1 class="text-2xl font-bold" class:line-through={event.isCancelled}>
+    {event.title}
+    {#if event.removedAt}
+      <span
+        class="badge badge-error badge-sm relative -top-1 !text-xs font-semibold"
+        >Raderat</span
+      >
+    {/if}
+  </h1>
+  {#if event.isCancelled}
+    <span class="badge badge-error badge-lg relative -top-1 ml-2 font-semibold"
+      >{m.events_cancelled()}</span
     >
   {/if}
-</h1>
+</div>
 
-<section class="flex flex-row justify-between">
+<section
+  class="flex flex-row justify-between"
+  class:line-through={event.isCancelled}
+>
   <DateSpan start={event.startDatetime} end={event.endDatetime} />
   <slot name="actions" />
 </section>

diff --git a/src/routes/(app)/events/EventEditor.svelte b/src/routes/(app)/events/EventEditor.svelte
@@ -111,13 +111,13 @@
       <FormCheckbox
         {superform}
         field="alarmActive"
-        label="{m.events_create_alarmActive()}}"
+        label={m.events_create_alarmActive()}
       />
       <FormCheckbox
         {superform}
         field="isRecurring"
         disabled={!creating}
-        label="{m.events_recurringEvent()}}"
+        label={m.events_recurringEvent()}
       />
       {#if $form.isRecurring}
         <div class="flex flex-row justify-between gap-4 [&>*]:flex-1">
@@ -141,6 +141,11 @@
           />
         </div>
       {/if}
+      <FormCheckbox
+        {superform}
+        field="isCancelled"
+        label={m.events_cancelEvent()}
+      />
 
       <div class="flex w-full flex-col items-stretch">
         <Labeled
@@ -163,9 +168,17 @@
           {m.save()}
         </button>
       {:else}
-        <FormSubmitButton {superform} class="btn btn-primary my-4">
-          {creating ? m.news_publish() : m.save()}
-        </FormSubmitButton>
+        <div class="my-4 flex items-center">
+          <FormSubmitButton {superform} class="btn btn-primary h-full">
+            {creating ? m.news_publish() : m.save()}
+          </FormSubmitButton>
+          {#if $form.isCancelled}
+            <div role="alert" class="alert alert-warning ml-4">
+              <span class="i-mdi-alert-outline size-6" />
+              <span>{m.events_cancellingAlert()}</span>
+            </div>
+          {/if}
+        </div>
       {/if}
       <dialog class="modal" bind:this={modal}>
         <div class="modal-box">

diff --git a/src/routes/(app)/events/SmallEventCard.svelte b/src/routes/(app)/events/SmallEventCard.svelte
@@ -8,6 +8,7 @@
   import type { SuperValidated } from "sveltekit-superforms";
   import { eventLink } from "$lib/utils/redirect";
   import { languageTag } from "$paraglide/runtime";
+  import * as m from "$paraglide/messages";
 
   export let event: EventWithIncludes;
   export let interestedGoingForm: SuperValidated<InterestedGoingSchema>;
@@ -26,18 +27,26 @@
 
   <div class="flex flex-col p-8">
     <a href={eventLink(event)}>
-      <h2 class="text-2xl font-bold">
-        {event.title}
-        {#if event.removedAt}
+      <div class="flex items-end">
+        <h2 class="text-2xl font-bold" class:line-through={event.isCancelled}>
+          {event.title}
+          {#if event.removedAt}
+            <span
+              class="badge badge-error badge-sm relative -top-1 !text-xs font-semibold"
+              >Raderat</span
+            >
+          {/if}
+        </h2>
+        {#if event.isCancelled}
           <span
-            class="badge badge-error badge-sm relative -top-1 !text-xs font-semibold"
-            >Raderat</span
+            class="badge badge-error badge-md relative -top-1 ml-2 font-semibold"
+            >{m.events_cancelled()}</span
           >
         {/if}
-      </h2>
+      </div>
     </a>
 
-    <section class="text-primary">
+    <section class="text-primary" class:line-through={event.isCancelled}>
       {#if Math.abs(event.startDatetime.valueOf() - event.endDatetime.valueOf()) < 24 * 60 * 60 * 1000}
         <span class="font-semibold">{relativeDate(event.startDatetime)}</span>
         <br />

diff --git a/src/routes/(app)/events/calendar/Calendar.svelte b/src/routes/(app)/events/calendar/Calendar.svelte
@@ -68,9 +68,11 @@
             start: event.startDatetime,
             end: event.endDatetime,
             url: eventLink(event),
+            color: event.isCancelled ? "rgb(250, 43, 43)" : "#f280a1",
+            className: event.isCancelled ? "!line-through" : "",
           })),
           locale: languageTag(),
-          eventColor: "#f280a1",
+
           firstDay: 1,
           headerToolbar: {
             left: "prev,next,addEvent,subscribe",

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -469,13 +469,16 @@
   "events_edit": "Edit",
   "events_editEvent": "Edit event",
   "events_eventUpdated": "Event updated",
+  "events_cancelEvent": "Cancel event",
   "events_create_alarmActive": "Alarm active during the event",
   "events_create_howOften": "How often?",
   "events_create_lastDate": "Last date",
   "events_create_invalidTags": "Invalid tags",
   "events_create_submit": "Submit",
   "events_create_submitting": "Submitting...",
   "events_create_preview": "Preview",
+  "events_cancelled": "Cancelled",
+  "events_cancellingAlert": "You are cancelling the event.",
   "events_calendar": "Calendar",
   "events_calendar_subscribe": "Subscribe",
   "events_calendar_subscribe_details": "This is an iCal link that you can use to subscribe to the calendar in your calendar app.",

diff --git a/src/translations/sv.json b/src/translations/sv.json
@@ -467,13 +467,16 @@
   "events_edit": "Redigera",
   "events_editEvent": "Redigera evenemang",
   "events_eventUpdated": "Evenemang uppdaterat",
+  "events_cancelEvent": "Ställ in event",
+  "events_cancellingAlert": "Du är på väg att ställa in eventet.",
   "events_create_alarmActive": "Larm aktivt under evenemanget",
   "events_create_howOften": "Hur ofta?",
   "events_create_lastDate": "Sista datum",
   "events_create_invalidTags": "Ogiltiga taggar",
   "events_create_submit": "Skicka in",
   "events_create_submitting": "Skickar in...",
   "events_create_preview": "Förhandsvisning",
+  "events_cancelled": "Inställt",
   "events_calendar": "Kalender",
   "events_calendar_subscribe": "Prenumerera",
   "events_calendar_subscribe_details": "Detta är en iCal-prenumeration som du kan lägga till i din kalender-app.",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		-- AlterTable
		ALTER TABLE "events" ADD COLUMN "is_cancelled" BOOLEAN DEFAULT false;