Added post component for events

This needs RLS disabled, will work on that later, I don't like postgre

components/calendar/form/CreateEvent.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { RPGDate } from '~/models/Date';
+
+import {
+  PhAlarm
+} from '@phosphor-icons/vue'
+
+const { eventSkeleton } = storeToRefs(useCalendarEvents())
+const { resetSkeleton, submitSkeleton } = useCalendarEvents()
+const popoverOpen = ref(false)
+
+const formErrors = reactive<{ message: string | null }>({
+  message: null
+})
+
+const props = defineProps<{
+  date?: RPGDate
+  btnClass?: string
+}>()
+
+/**
+ * Opens event creation's popover
+ */
+function openEventCreatePopover() {
+  resetSkeleton()
+
+  popoverOpen.value = true
+
+  // Set skeleton initial startDate if it's known
+  if (props.date) {
+    eventSkeleton.value.startDate = { ...props.date } // We need to clone it otherwise the props ends up mutating (?)
+  }
+}
+
+// Watch the popover state
+// And reset the skeleton if it has been dismissed
+watch(popoverOpen, (hasOpened, _o) => {
+  if (!hasOpened) {
+    resetSkeleton()
+  }
+})
+
+async function handleSubmit() {
+  try {
+    await submitSkeleton()
+
+    popoverOpen.value = false
+  } catch (err) {
+    if (err instanceof Error) {
+      formErrors.message = err.message
+    }
+  }
+}
+</script>
+
+<template>
+  <UiPopover v-model:open="popoverOpen">
+    <UiPopoverTrigger as-child>
+      <button :class="btnClass" @click="openEventCreatePopover()" />
+    </UiPopoverTrigger>
+    <UiPopoverContent
+      :align="'center'"
+      :side="'right'"
+      :collision-padding="60"
+      class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+    >
+      <form @submit.prevent="handleSubmit">
+        <div class="grid grid-cols-2 gap-y-4">
+          <div class="col-span-2 pl-8">
+            <input
+              id="new-event-title"
+              v-model="eventSkeleton.title"
+              type="text"
+              name="new-event-title"
+              required
+              placeholder="Titre de l'évènement"
+              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
+          </div>
+
+          <div class="col-span-2 pl-8">
+            <textarea
+              id="new-event-description"
+              v-model="eventSkeleton.description"
+              name="new-event-description"
+              placeholder="Description brève de l'évènement"
+              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>
+
+          <div class="col-span-2">
+            <div class="flex items-center gap-2">
+              <PhAlarm size="18" weight="fill" />
+
+              <CalendarInputRPGDate
+                v-model:model-value="eventSkeleton.startDate"
+                placeholder="Date de début"
+                :initial-date="props.date"
+                :required="true"
+              />
+
+              <span>—</span>
+
+              <CalendarInputRPGDate
+                v-model:model-value="eventSkeleton.endDate"
+                placeholder="Date de fin"
+                :initial-date="props.date"
+              />
+            </div>
+          </div>
+
+          <div class="text-red-500 pl-8">
+            <span class="text-sm">
+              {{ formErrors.message }}
+            </span>
+          </div>
+
+          <div class="text-right">
+            <UiButton size="sm">
+              Sauvegarder
+            </UiButton>
+          </div>
+        </div>
+      </form>
+    </UiPopoverContent>
+  </UiPopover>
+</template>