<template>
<TransitionRoot :show="this.open" as="template">
<Dialog :open="this.open" as="div" class="fixed z-10 inset-0 overflow-y-auto" static>
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0"
enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100"
leave-to="opacity-0">
<DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"/>
</TransitionChild>
<!-- This element is to trick the browser into centering the modal contents. -->
<span aria-hidden="true" class="hidden sm:inline-block sm:align-middle sm:h-screen">​</span>
<TransitionChild as="template" enter="ease-out duration-300"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<form @submit.prevent="submit"
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
<PlusIcon aria-hidden="true" class="h-6 w-6 text-green-600"/>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<DialogTitle as="h3" class="text-lg leading-6 font-medium text-gray-900">
Создать категорию
</DialogTitle>
<div class="mt-2">
<div>
<label class="block text-sm font-medium text-gray-700"
for="name">Название</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input
class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-md"
id="name" name="name"
placeholder="Название"
type="text" v-model="form.name"/>
</div>
<validation-errors field="name"></validation-errors>
</div>
<div class="mt-3">
<label class="block text-sm font-medium text-gray-700"
for="description">Описание</label>
<div class="mt-1 relative rounded-md shadow-sm">
<textarea
class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-md"
id="description" name="description"
placeholder="description"
type="text"
v-model="form.description"></textarea>
</div>
<validation-errors field="description"></validation-errors>
</div>
<div class="mt-3">
<label class="block text-sm font-medium text-gray-700"
for="icon">Иконка (класс
font-awesome)</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input
class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-md"
id="icon" name="icon"
placeholder="fas fa-taxi"
type="text" v-model="form.icon"/>
</div>
<validation-errors field="icon"></validation-errors>
</div>
<div class="mt-3">
<label class="block text-sm font-medium text-gray-700"
for="color">Цвет (hex)</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input
class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-md"
id="color" name="color"
placeholder="#f0f0f0"
type="text" v-model="form.color"/>
</div>
<validation-errors field="color"></validation-errors>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm"
type="submit">
Создать
</button>
<button @click="open = false"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
ref="cancelButtonRef" type="button">
Отмена
</button>
</div>
</form>
</TransitionChild>
</div>
</Dialog>
</TransitionRoot>
</template>
<script>
import {Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot} from '@headlessui/vue'
import {PlusIcon} from '@heroicons/vue/outline'
import {Inertia} from '@inertiajs/inertia'
import {reactive} from 'vue'
import ValidationErrors from '@/Jetstream/ValidationErrors'
export default {
components: {
Dialog,
DialogOverlay,
DialogTitle,
TransitionChild,
TransitionRoot,
PlusIcon,
ValidationErrors,
},
data() {
return {
open: false,
form: this.$inertia.form({
name: null,
description: null,
icon: null,
color: null,
}),
}
},
methods: {
triggerModal() {
this.open = true;
},
submit() {
this.form
.transform((data) => ({
...data,
}))
.patch('/categories/create', {
onSuccess: () => this.open = false,
})
}
},
}
</script>