128 lines
4.9 KiB
Vue
128 lines
4.9 KiB
Vue
<script setup>
|
|
import { useForm, apiURL } from '@Services/Api';
|
|
|
|
import Modal from '@Holos/Modal.vue';
|
|
import FormInput from '@Holos/Form/Input.vue';
|
|
import FormError from '@Holos/Form/Elements/Error.vue';
|
|
|
|
/** Eventos */
|
|
const emit = defineEmits(['close', 'created']);
|
|
|
|
/** Propiedades */
|
|
const props = defineProps({
|
|
show: Boolean
|
|
});
|
|
|
|
/** Formulario */
|
|
const form = useForm({
|
|
name: '',
|
|
description: '',
|
|
is_active: true
|
|
});
|
|
|
|
/** Métodos */
|
|
const createCategory = () => {
|
|
form.post(apiURL('categorias'), {
|
|
onSuccess: () => {
|
|
Notify.success('Categoría creada exitosamente');
|
|
emit('created');
|
|
closeModal();
|
|
},
|
|
onError: () => {
|
|
Notify.error('Error al crear la categoría');
|
|
}
|
|
});
|
|
};
|
|
|
|
const closeModal = () => {
|
|
form.reset();
|
|
emit('close');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Modal :show="show" max-width="md" @close="closeModal">
|
|
<div class="p-6">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
|
|
Crear Categoría
|
|
</h3>
|
|
<button
|
|
@click="closeModal"
|
|
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Formulario -->
|
|
<form @submit.prevent="createCategory" class="space-y-4">
|
|
<!-- Nombre -->
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
|
NOMBRE
|
|
</label>
|
|
<FormInput
|
|
v-model="form.name"
|
|
type="text"
|
|
placeholder="Nombre de la categoría"
|
|
required
|
|
/>
|
|
<FormError :message="form.errors?.name" />
|
|
</div>
|
|
|
|
<!-- Descripción -->
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
|
DESCRIPCIÓN
|
|
</label>
|
|
<textarea
|
|
v-model="form.description"
|
|
rows="3"
|
|
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100"
|
|
placeholder="Descripción de la categoría"
|
|
></textarea>
|
|
<FormError :message="form.errors?.description" />
|
|
</div>
|
|
|
|
<!-- Estado -->
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
|
ESTADO
|
|
</label>
|
|
<select
|
|
v-model="form.is_active"
|
|
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100"
|
|
>
|
|
<option :value="true">Activo</option>
|
|
<option :value="false">Inactivo</option>
|
|
</select>
|
|
<FormError :message="form.errors?.is_active" />
|
|
</div>
|
|
|
|
<!-- Botones -->
|
|
<div class="flex items-center justify-end gap-3 mt-6">
|
|
<button
|
|
type="button"
|
|
@click="closeModal"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
:disabled="form.processing"
|
|
class="px-4 py-2 text-sm font-semibold text-white bg-gray-900 rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
<span v-if="form.processing">Guardando...</span>
|
|
<span v-else>Guardar</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Modal>
|
|
</template>
|