generated from Flycro/laravel-nuxt
96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { useBookRecommendationStore } from '~/stores/book-recommendations'
|
|
|
|
const isOpen = ref(false)
|
|
|
|
const form = ref()
|
|
|
|
const state = reactive({
|
|
book_name: null,
|
|
author: null,
|
|
description: null,
|
|
isbn: null,
|
|
pages: null,
|
|
cover_image: null,
|
|
status: null,
|
|
})
|
|
|
|
const bookRecommendationStore = useBookRecommendationStore()
|
|
|
|
const { refresh: onSubmit, status } = useFetch<any>(`book-recommendations`, {
|
|
method: 'POST',
|
|
body: state,
|
|
immediate: false,
|
|
watch: false,
|
|
async onResponse({ response }) {
|
|
if (response?.status === 422) {
|
|
form.value.setErrors(response._data?.errors)
|
|
}
|
|
else if (response.ok) {
|
|
useToast().add({
|
|
icon: 'i-heroicons-check-circle-20-solid',
|
|
title: 'Buchempfehlung wurde erfolgreich aktualisiert.',
|
|
color: 'emerald',
|
|
})
|
|
await bookRecommendationStore.fetchRecommendations()
|
|
|
|
state.book_name = null
|
|
state.author = null
|
|
state.description = null
|
|
state.isbn = null
|
|
state.pages = null
|
|
state.cover_image = null
|
|
state.status = null
|
|
|
|
isOpen.value = false
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="flex justify-end">
|
|
<UButton icon="i-heroicons-plus" label="Neues Buch" size="sm" variant="solid" color="green" square @click="isOpen = true" />
|
|
</div>
|
|
|
|
<UModal v-model="isOpen">
|
|
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
|
Neues Buch
|
|
</h3>
|
|
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
|
|
</div>
|
|
</template>
|
|
|
|
<UForm ref="form" :state="state" class="space-y-4" @submit="onSubmit">
|
|
<UFormGroup label="Name" name="book_name">
|
|
<UInput v-model="state.book_name" />
|
|
</UFormGroup>
|
|
<UFormGroup label="Autor" name="author">
|
|
<UInput v-model="state.author" />
|
|
</UFormGroup>
|
|
<UFormGroup label="Beschreibung" name="description">
|
|
<UTextarea v-model="state.description" />
|
|
</UFormGroup>
|
|
<UFormGroup label="ISBN" name="isbn">
|
|
<UInput v-model="state.isbn" />
|
|
</UFormGroup>
|
|
<UFormGroup label="Seiten" name="pages">
|
|
<UInput v-model="state.pages" type="number" />
|
|
</UFormGroup>
|
|
<UFormGroup label="Status" name="status">
|
|
<USelect v-model="state.status" :options="bookRecommendationStore.statusOptions" option-attribute="name" />
|
|
</UFormGroup>
|
|
<UButton size="md" type="submit" :loading="status === 'pending'">
|
|
Erstellen
|
|
</UButton>
|
|
<UButton size="md" class="mx-4" color="white" label="Abbrechen" @click="isOpen = false" />
|
|
</UForm>
|
|
</UCard>
|
|
</UModal>
|
|
</div>
|
|
</template>
|