leim-tools/components/calendar/form/CreateEvent.vue

<script lang="ts" setup>
import type { RPGDate } from "~/models/Date";
import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from "@phosphor-icons/vue"

const emit = defineEmits(["event-created"])

const { eventSkeleton } = storeToRefs(useCalendar())
const { submitSkeleton, cancelLatestRequest } = useCalendar()

const { t } = useI18n()

const isLoading = ref(false)

const formErrors = reactive<{ message: string | null }>({
  message: null
})

const props = defineProps<{
  date?: RPGDate
  btnClass?: string
}>()

async function handleSubmit() {
  // Prevent form submission if already loading
  if (isLoading.value) return

  isLoading.value = true

  try {
    await submitSkeleton()

    emit("event-created")
  } catch (err) {
    if (err instanceof Error) {
      formErrors.message = err.message
    }
  } finally {
    isLoading.value = false
  }
}

/**
 * Click on the cancel button
 *
 * Must cancel the abortController in the store, and stop the loading
 */
function handleCancel() {
  cancelLatestRequest()
  isLoading.value = false
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <div class="grid grid-cols-2 gap-y-3">
      <div class="col-span-2 pl-8">
        <input
          id="new-event-title"
          v-model="eventSkeleton.title"
          type="text"
          name="new-event-title"
          required
          :placeholder="$t('entity.calendar.event.title')"
          :maxlength="120"
          pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,120}"
          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 invalid:border-red-500"
        >
        <div class="mt-2 mb-1 text-xs opacity-50">
          {{ t('entity.calendar.event.patterns.title') }}
        </div>
      </div>

      <div class="col-span-2 my-2 pl-8">
        <textarea
          id="new-event-description"
          v-model="eventSkeleton.description"
          name="new-event-description"
          :placeholder="$t('entity.addDescription')"
          :maxlength="1200"
          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 invalid:border-red-500"
        />
        <div class="mt-2 mb-1 text-xs opacity-50">
          {{ t('entity.calendar.event.patterns.description') }}
        </div>
      </div>

      <div class="col-span-2">
        <div class="flex items-center gap-4">
          <PhAlarm size="18" weight="fill" />

          <CalendarInputRPGDate
            v-model:model-value="eventSkeleton.startDate"
            :placeholder="$t('entity.calendar.date.start')"
            :initial-date="props.date"
            :required="true"
          />

          <span>—</span>

          <CalendarInputRPGDate
            v-model:model-value="eventSkeleton.endDate"
            :placeholder="$t('entity.calendar.date.end')"
            :initial-date="props.date"
          />
        </div>
      </div>

      <div class="col-span-2">
        <div class="flex items-center gap-4">
          <PhTag size="18" weight="fill" />

          <CalendarInputEventCategory
            v-model="eventSkeleton.category"
            :placeholder="$t('entity.category.addPrimary')"
          />
        </div>
      </div>

      <!-- <div class="col-span-2">
        <div class="flex items-center gap-4">
          <PhTag size="18" weight="fill" />

          <CalendarInputEventCategories v-model="eventSkeleton.secondaryCategories" :placeholder="$t('entity.category.addSecondaries')" />
        </div>
      </div> -->

      <div class="col-span-2 mb-2">
        <div class="flex items-center gap-4">
          <PhMapPinArea size="18" weight="fill" />

          <div class="grow">
            <input
              id="new-event-location"
              v-model="eventSkeleton.location"
              type="text"
              name="new-event-location"
              :placeholder="$t('entity.calendar.event.addLocation')"
              :maxlength="160"
              pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,160}"
              class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
            >
            <div class="mt-2 mb-1 text-xs opacity-50">
              {{ t('entity.calendar.event.patterns.location') }}
            </div>
          </div>
        </div>
      </div>

      <div class="col-span-2">
        <div class="flex items-center gap-4">
          <PhEye v-if="!eventSkeleton.hidden" size="18" weight="fill" />
          <PhEyeClosed v-else size="18" />

          <div class="flex items-center gap-x-2">
            <UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
            <UiLabel for="new-event-visibility">
              <template v-if="!eventSkeleton.hidden">
                {{ $t('entity.calendar.event.isPublic') }}
              </template>
              <template v-else>
                {{ $t('entity.calendar.event.isHidden') }}
              </template>
            </UiLabel>
          </div>
        </div>
      </div>

      <div class="text-red-500 pl-8">
        <span class="text-sm">
          {{ formErrors.message }}
        </span>
      </div>

      <div class="flex gap-2 justify-end">
        <Transition name="fade-delay">
          <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
            {{ $t('ui.action.cancel') }}
          </UiButton>
        </Transition>

        <UiButton size="sm" :disabled="isLoading">
          <Transition name="fade">
            <PhCircleNotch v-if="isLoading" size="20" class="opacity-50 animate-spin"/>
          </Transition>

          {{ $t('ui.action.save') }}
        </UiButton>
      </div>
    </div>
  </form>
</template>