pichunt/app/pages/admin/hunt/create.vue

<script setup lang="ts">
import { sluggy } from '#imports';

definePageMeta({
  middleware: ['auth']
});

const { t } = useI18n();
const { user } = useUserSession();
const localePath = useLocalePath();
const router = useRouter();
const { init } = useToast();
const validation = useValidation();

const canCreate = computed(
  () => user.value?.role === 'CREATOR' || user.value?.role === 'ADMIN'
);

const form = reactive({
  name_de: '',
  name_en: '',
  description_de: '',
  description_en: '',
  virtual: false,
  start: null as Date | null,
  end: null as Date | null,
  allowJoin: false,
  revealQuests: false,
  revealAnswers: false,
  public: true
});

const loading = ref(false);
const formError = ref('');

async function submit() {
  loading.value = true;
  formError.value = '';

  try {
    const hunt = await $fetch('/api/admin/hunt', {
      method: 'POST',
      body: {
        ...form,
        start: form.start?.toISOString() ?? null,
        end: form.end?.toISOString() ?? null
      }
    });

    init({
      message: t('page.create_hunt.success'),
      color: 'success'
    });

    await router.push(
      localePath(`/hunt/${sluggy({ id: hunt.id, name: hunt.name_de })}/admin`)
    );
  } catch (e) {
    formError.value = parseError(e);
  }

  loading.value = false;
}
</script>

<template>
  <div class="mx-auto max-w-2xl">
    <VaAlert v-if="!canCreate" color="warning" class="mb-4">
      {{ t('page.create_hunt.not_allowed') }}
    </VaAlert>
    <VaCard v-else stripe stripe-color="success">
      <VaCardTitle>{{ t('page.create_hunt.title') }}</VaCardTitle>
      <VaCardContent>
        <VaForm class="flex flex-col gap-4">
          <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
            <h3 class="hidden text-center md:block">
              {{ t('page.create_hunt.de') }}
            </h3>
            <h3 class="hidden text-center md:block">
              {{ t('page.create_hunt.en') }}
            </h3>
            <VaInput
              v-model="form.name_de"
              :label="t('page.create_hunt.name_de')"
              :rules="[
                validation.required(t('page.create_hunt.name_de')),
                validation.max(t('page.create_hunt.name_de'), 256)
              ]"
              counter
              max-length="256"
            />
            <VaInput
              v-model="form.name_en"
              :label="t('page.create_hunt.name_en')"
              :rules="[
                validation.required(t('page.create_hunt.name_en')),
                validation.max(t('page.create_hunt.name_en'), 256)
              ]"
              counter
              max-length="256"
            />
            <VaTextarea
              v-model="form.description_de"
              :label="t('page.create_hunt.description_de')"
              max-length="1000"
            />
            <VaTextarea
              v-model="form.description_en"
              :label="t('page.create_hunt.description_en')"
              max-length="1000"
            />
          </div>
          <VaCheckbox
            v-model="form.virtual"
            :label="t('page.create_hunt.virtual')"
          />
          <VaCheckbox
            v-model="form.public"
            :label="t('page.create_hunt.public')"
          />
          <VaCheckbox
            v-model="form.allowJoin"
            :label="t('page.create_hunt.allow_join')"
          />
          <VaCheckbox
            v-model="form.revealQuests"
            :label="t('page.create_hunt.reveal_quests')"
          />
          <VaCheckbox
            v-model="form.revealAnswers"
            :label="t('page.create_hunt.reveal_answers')"
          />
          <VaDivider />
          <div class="flex flex-row gap-2">
            <VaCheckbox
              :label="t('page.create_hunt.has_start')"
              :model-value="!!form.start"
              @update:model-value="
                (newVal: boolean) => (form.start = newVal ? new Date() : null)
              "
            />
            <VaDateInput
              v-if="form.start"
              v-model="form.start"
              :label="t('page.create_hunt.start')"
              manual-input
            />
            <VaTimeInput
              v-if="form.start"
              v-model="form.start"
              :label="t('page.create_hunt.start')"
              view="seconds"
              manual-input
            />
          </div>
          <div class="flex flex-row gap-2">
            <VaCheckbox
              :label="t('page.create_hunt.has_end')"
              :model-value="!!form.end"
              @update:model-value="
                (newVal: boolean) => (form.end = newVal ? new Date() : null)
              "
            />
            <VaDateInput
              v-if="form.end"
              v-model="form.end"
              :label="t('page.create_hunt.end')"
              manual-input
            />
            <VaTimeInput
              v-if="form.end"
              v-model="form.end"
              :label="t('page.create_hunt.end')"
              view="seconds"
              manual-input
            />
          </div>
          <VaAlert
            v-if="formError.length > 0"
            color="danger"
            class="w-full text-center"
            >{{ t(formError) }}</VaAlert
          >
          <VaButton
            :loading="loading"
            :disabled="
              loading || form.name_de.length < 1 || form.name_en.length < 1
            "
            color="success"
            icon="add"
            @click="submit"
            >{{ t('page.create_hunt.create_btn') }}</VaButton
          >
        </VaForm>
      </VaCardContent>
    </VaCard>
  </div>
</template>