leim-tools/app/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 { t } = useI18n()

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

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

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

const newEventTitle = shallowRef<HTMLInputElement>()
useFocus(newEventTitle, { initialValue: true })

const isLoading = ref(false)

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

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

  isLoading.value = true

  const { error } = await tryCatch(submitSkeleton())

  if (error) {
    formErrors.message = error.message
    isLoading.value = false
    return
  }

  emit("event-created")
  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"
          ref="newEventTitle"
          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-hidden focus-visible:border-primary invalid:border-destructive"
        >
        <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">
        <InputEditor
          disable-blocks
          v-model="eventSkeleton.description"
        />

        <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 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-hidden focus-visible:border-primary invalid:border-destructive"
            >
            <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">
            <UiCheckbox id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
            <UiLabel for="new-event-visibility">
              {{ $t('entity.calendar.event.hiddenLabel') }}
            </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>