Added location to database, model, and event templates

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 {
-  PhAlarm
-} from '@phosphor-icons/vue'
+import { PhAlarm, PhMapPinArea } 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,21 @@ 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"
+                required
+                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>