Merge pull request #17 from AlexisNP/features/add-a-location-option-for-events

Location option for events

components/calendar/CalendarEventDetails.vue

@@ -8,6 +8,7 @@ import {
   PhAlarm,
   PhHourglassHigh,
   PhHourglassLow,
+  PhMapPinArea,
   PhDotsThreeOutlineVertical
 } from '@phosphor-icons/vue'
 
@@ -108,6 +109,11 @@ function deployDeleteModal() {
       </header>
 
       <div class="mb-1 space-y-1">
+        <template v-if="event.location">
+          <p class="text-sm italic opacity-75 flex items-center gap-1">
+            <PhMapPinArea size="16" weight="fill" /> {{ event.location }}
+          </p>
+        </template>
         <p class="text-sm italic opacity-75 flex items-center gap-1">
           <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
         </p>

components/calendar/form/CreateEvent.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 import type { RPGDate } from '~/models/Date';
 
-import {
+import { PhAlarm, PhMapPinArea } from '@phosphor-icons/vue'
-  PhAlarm
-} from '@phosphor-icons/vue'
 
 const { eventSkeleton } = storeToRefs(useCalendarEvents())
 const { resetSkeleton, submitSkeleton } = useCalendarEvents()
@@ -74,7 +72,7 @@ async function handleSubmit() {
               id="new-event-description"
               v-model="eventSkeleton.description"
               name="new-event-description"
-              placeholder="Description brève de l'évènement"
+              placeholder="Ajouter une description"
               class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
             />
           </div>
@@ -100,6 +98,20 @@ async function handleSubmit() {
             </div>
           </div>
 
+          <div class="col-span-2">
+            <div class="flex items-center gap-2">
+              <PhMapPinArea size="18" weight="fill" />
+
+              <input
+                id="new-event-location"
+                v-model="eventSkeleton.location"
+                type="text"
+                name="new-event-location"
+                placeholder="Ajouter un endroit"
+                class="w-full -my-1 py-1 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
+            </div>
+          </div>
+
           <div class="text-red-500 pl-8">
             <span class="text-sm">
               {{ formErrors.message }}

components/calendar/form/UpdateEvent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhAlarm } from '@phosphor-icons/vue'
+import { PhAlarm, PhMapPinArea } from '@phosphor-icons/vue'
 import { VisuallyHidden } from 'radix-vue'
 
 const { isEditEventModalOpen } = storeToRefs(useCalendarEvents())
@@ -69,7 +69,7 @@ async function handleAction() {
               id="new-event-description"
               v-model="eventSkeleton.description"
               name="new-event-description"
-              placeholder="Description brève de l'évènement"
+              placeholder="Ajouter une description"
               class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
             />
           </div>
@@ -95,6 +95,20 @@ async function handleAction() {
             </div>
           </div>
 
+          <div class="col-span-2">
+            <div class="flex items-center gap-2">
+              <PhMapPinArea size="18" weight="fill" />
+
+              <input
+                id="new-event-location"
+                v-model="eventSkeleton.location"
+                type="text"
+                name="new-event-location"
+                placeholder="Ajouter un endroit"
+                class="w-full -my-1 py-1 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
+            </div>
+          </div>
+
           <div class="text-red-500 ml-8">
             <span class="text-sm">
               {{ formErrors.message }}

components/calendar/search/lists/EventCallout.vue

@@ -3,7 +3,7 @@ import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/CalendarEvent'
 import { useCalendar } from '@/stores/CalendarStore'
 
-import { PhArrowSquareOut, PhHourglassMedium, PhAlarm } from '@phosphor-icons/vue'
+import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea } from '@phosphor-icons/vue'
 
 const props = defineProps<{
   event: CalendarEvent
@@ -78,6 +78,11 @@ const dateDuration: string | null = props.event.endDate
     </div>
 
     <div class="mb-1 flex gap-x-2 items-center">
+      <template v-if="event.location">
+        <p class="w-fit text-sm italic opacity-75 flex items-center gap-1">
+          <PhMapPinArea size="16" weight="fill" /> {{ event.location }}
+        </p>
+      </template>
       <p class="w-fit text-sm italic opacity-75 flex items-center gap-1">
         <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
       </p>

components/calendar/state/monthly/DayTile.vue

@@ -168,7 +168,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
 .event-move,
 .event-leave-active {
   position: absolute;
-  transition: all 100ms ease-in-out;
+  transition: all 200ms ease-in-out;
 }
 .event-enter-from,
 .event-leave-to {

models/CalendarEvent.ts

@@ -5,6 +5,7 @@ import { dateSchema, type RPGDate } from './Date'
 export interface CalendarEvent {
   id?: number
   title: string
+  location?: string
   startDate: RPGDate
   endDate?: RPGDate
   description?: string
@@ -21,6 +22,7 @@ export const postEventBodySchema = z.object({
   event: z.object({
     title: z.string(),
     description: z.string().optional().nullable(),
+    location: z.string().optional().nullable(),
     startDate: dateSchema.required(),
     endDate: dateSchema.optional().nullable()
   }),

server/api/calendars/events/[id].patch.ts

@@ -34,12 +34,22 @@ export default defineEventHandler(async (event) => {
   try {
     const { data, error } = await client
       .from('calendar_events')
-      .update({ start_date: bodyData?.event.startDate, end_date: bodyData.event.endDate, title: bodyData?.event.title, description: bodyData.event.description, calendar_id: bodyData?.calendarId } as never)
+      .update(
+        {
+          start_date: bodyData?.event.startDate,
+          end_date: bodyData.event.endDate,
+          title: bodyData?.event.title,
+          description: bodyData.event.description,
+          location: bodyData.event.location,
+          calendar_id: bodyData?.calendarId
+        } as never
+      )
       .eq('id', params.id)
       .select(`
         id,
         title,
         description,
+        location,
         hidden,
         startDate:start_date,
         endDate:end_date,

server/api/calendars/events/create.post.ts

@@ -18,11 +18,21 @@ export default defineEventHandler(async (event) => {
   try {
     const { data, error } = await client
       .from('calendar_events')
-      .insert({ start_date: bodyData?.event.startDate, end_date: bodyData.event.endDate, title: bodyData?.event.title, description: bodyData.event.description, calendar_id: bodyData?.calendarId } as never)
+      .insert(
+        {
+          start_date: bodyData?.event.startDate,
+          end_date: bodyData.event.endDate,
+          title: bodyData?.event.title,
+          description: bodyData.event.description,
+          location: bodyData.event.location,
+          calendar_id: bodyData?.calendarId
+        } as never
+      )
       .select(`
         id,
         title,
         description,
+        location,
         hidden,
         startDate:start_date,
         endDate:end_date,

server/api/calendars/events/query.get.ts

@@ -16,6 +16,7 @@ export default defineEventHandler(async (event) => {
       id,
       title,
       description,
+      location,
       world_calendars (id, world_id)
     `)
 

server/api/calendars/query.get.ts

@@ -21,6 +21,7 @@ export default defineEventHandler(async (event) => {
         id,
         title,
         description,
+        location,
         hidden,
         startDate:start_date,
         endDate:end_date,

supabase/migrations/202401_init.sql

@@ -63,7 +63,7 @@ create table public.calendar_months (
 );
 comment on table public.calendar_months is 'A calendar month.';
 
--- Event categories
+-- Calendar Event categories
 create table public.calendar_event_categories (
   id        bigint generated by default as identity primary key,
   name      text not null,
@@ -71,11 +71,12 @@ create table public.calendar_event_categories (
 );
 comment on table public.calendar_event_categories is 'Categories describing events.';
 
--- Events
+-- Calendar Events
 create table public.calendar_events (
   id            bigint generated by default as identity primary key,
   title         text not null,
   description   text,
+  location      text,
   start_date    json not null,
   end_date      json,
   category      bigint references public.calendar_event_categories on delete cascade,

supabase/seed.sql

@@ -208,19 +208,17 @@ insert into public.calendar_events (title, description, start_date, end_date, ca
   'https://alexcreates.fr/leim/index.php/Tivian_Rodhus',
   1
 );
-insert into public.calendar_events (title, description, start_date, end_date, category, hidden, wiki, calendar_id) values (
+insert into public.calendar_events (title, start_date, category, hidden, calendar_id) values (
   'Sulvan et Anastael atteignent Bamast',
-  null,
   '{ "day": 19, "month": 2, "year": 3210 }',
-  null,
   10,
   false,
-  null,
   1
 );
-insert into public.calendar_events (title, description, start_date, end_date, category, hidden, wiki, calendar_id) values (
+insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
   'Jugement de Bormis Griloup',
   'Bormis Griloup est jugé coupable d''escroquerie et sabotage aux Cours d''Acier de Tourgrise. Il purgera une peine de 10 ans au sein des prisons royales.',
+  'Tourgrise',
   '{ "day": 4, "month": 8, "year": 3209 }',
   null,
   18,
@@ -229,9 +227,10 @@ insert into public.calendar_events (title, description, start_date, end_date, ca
   1
 );
 
-insert into public.calendar_events (title, description, start_date, end_date, category, hidden, wiki, calendar_id) values (
+insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
   'Inauguration de la Cloche du Pilier',
   'Le Moine Premier inaugure la grande cloche d''argent au sommet du Pilier d''Ikami.',
+  'Cantane',
   '{ "day": 29, "month": 5, "year": 3209 }',
   null,
   6,
@@ -239,9 +238,10 @@ insert into public.calendar_events (title, description, start_date, end_date, ca
   null,
   1
 );
-insert into public.calendar_events (title, description, start_date, end_date, category, hidden, wiki, calendar_id) values (
+insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '1ère disparation à Cantane',
+  '1ère disparation',
   'Taleb Vaht décède dans une grotte à la suite d''une attaque d''ischiels enragées.',
+  'Cantane',
   '{ "day": 28, "month": 7, "year": 3209 }',
   null,
   2,
@@ -249,9 +249,10 @@ insert into public.calendar_events (title, description, start_date, end_date, ca
   null,
   1
 );
-insert into public.calendar_events (title, description, start_date, end_date, category, hidden, wiki, calendar_id) values (
+insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '2ème disparation à Cantane',
+  '2ème disparation',
   'Donovane le mineur kéturien disparait sans laisser de traces.',
+  'Cantane',
   '{ "day": 32, "month": 7, "year": 3209 }',
   null,
   2,
@@ -259,9 +260,10 @@ insert into public.calendar_events (title, description, start_date, end_date, ca
   null,
   1
 );
-insert into public.calendar_events (title, description, start_date, end_date, category, hidden, wiki, calendar_id) values (
+insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '3ème disparation à Cantane',
+  '3ème disparation',
   'Disparition de Sébastien, gredin sauride.',
+  'Cantane',
   '{ "day": 10, "month": 8, "year": 3209 }',
   null,
   2,
@@ -269,9 +271,10 @@ insert into public.calendar_events (title, description, start_date, end_date, ca
   null,
   1
 );
-insert into public.calendar_events (title, description, start_date, end_date, category, hidden, wiki, calendar_id) values (
+insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '4ème disparation à Cantane',
+  '4ème disparation',
   'Disparition de Thérence, patrouilleur sauride de la Vieille Garde.',
+  'Cantane',
   '{ "day": 19, "month": 8, "year": 3209 }',
   null,
   2,
@@ -279,9 +282,10 @@ insert into public.calendar_events (title, description, start_date, end_date, ca
   null,
   1
 );
-insert into public.calendar_events (title, description, start_date, end_date, category, hidden, wiki, calendar_id) values (
+insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '5ème disparation à Cantane',
+  '5ème disparation',
   'Disparition de Mathilda Boulais, vendeuse de pierres.',
+  'Cantane',
   '{ "day": 22, "month": 8, "year": 3209 }',
   null,
   2,
@@ -289,9 +293,10 @@ insert into public.calendar_events (title, description, start_date, end_date, ca
   null,
   1
 );
-insert into public.calendar_events (title, description, start_date, end_date, category, hidden, wiki, calendar_id) values (
+insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  'Grande Banque Minérale de Cantane',
+  'Grande Banque Minérale',
-  'Les artisans et mineurs de Rougefer se réunissent à Cantane pour vendre le fruit de leur dur labeur.',
+  'Les artisans et mineurs de Rougefer se réunissent pour vendre le fruit de leur dur labeur.',
+  'Cantane',
   '{ "day": 23, "month": 8, "year": 3209 }',
   '{ "day": 26, "month": 8, "year": 3209 }',
   17,