45 lines
1.5 KiB
Vue
45 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { FormSubmitEvent } from '@nuxt/ui'
|
|
|
|
const emit = defineEmits<{ saved: [] }>()
|
|
|
|
const mediumOptions = MEDIUM_KEYS.map(medium => ({
|
|
label: MEDIUMS[medium].label,
|
|
value: medium,
|
|
icon: MEDIUM_ICONS[medium]
|
|
}))
|
|
|
|
const state = reactive({ medium: 'book' as Medium, date: todayIso(), title: '', author: '', text: '' })
|
|
const { saving, save } = useSaveEntry({ url: '/api/reviews', dataKey: 'reviews', noun: 'review', onSaved: () => emit('saved') })
|
|
|
|
function onSubmit(event: FormSubmitEvent<NewReviewInput>) {
|
|
return save(event.data)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UForm :schema="newReviewSchema" :state="state" class="space-y-5" @submit="onSubmit">
|
|
<UFormField label="Medium" name="medium" required>
|
|
<URadioGroup v-model="state.medium" :items="mediumOptions" orientation="horizontal" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Date" name="date" required>
|
|
<UInput v-model="state.date" type="date" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Title" name="title" required>
|
|
<UInput v-model="state.title" class="w-full" autofocus />
|
|
</UFormField>
|
|
|
|
<UFormField :label="MEDIUMS[state.medium].creator" name="author">
|
|
<UInput v-model="state.author" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Review" name="text" required>
|
|
<UTextarea v-model="state.text" :rows="8" autoresize :maxrows="18" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UButton type="submit" label="Save review" :icon="REVIEW_ICON" :loading="saving" />
|
|
</UForm>
|
|
</template>
|