mirror of https://github.com/Lukibeg/OmniBoard.git
107 lines
4.4 KiB
Vue
107 lines
4.4 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useForm } from '@inertiajs/vue3';
|
|
|
|
const showModal = ref(false);
|
|
|
|
const form = useForm({
|
|
queue_number: '',
|
|
friendly_name: '',
|
|
});
|
|
|
|
const openModal = () => {
|
|
showModal.value = true;
|
|
// Pequeno delay para garantir que o elemento foi "teleportado" antes de focar
|
|
setTimeout(() => document.getElementById('queue_number')?.focus(), 100);
|
|
};
|
|
|
|
const closeModal = () => {
|
|
showModal.value = false;
|
|
form.reset();
|
|
form.clearErrors();
|
|
};
|
|
|
|
const submitQueueInfo = () => {
|
|
form.post(route('queues.store'), {
|
|
preserveScroll: true,
|
|
onSuccess: () => closeModal(),
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
type="button"
|
|
class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
|
|
@click="openModal"
|
|
>
|
|
Configurar Filas
|
|
</button>
|
|
|
|
<Teleport to="body">
|
|
<div v-if="showModal" class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0 flex items-center justify-center">
|
|
|
|
<div class="fixed inset-0 transform transition-all" @click="closeModal">
|
|
<div class="absolute inset-0 bg-gray-900 opacity-75"></div>
|
|
</div>
|
|
|
|
<div class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:max-w-lg sm:mx-auto z-50">
|
|
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-medium text-gray-900">
|
|
Vincular Fila ao Nome
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="px-6 py-4">
|
|
<div class="grid grid-cols-1 gap-4">
|
|
<div>
|
|
<label for="queue_number" class="block font-medium text-sm text-gray-700">ID da Fila (Asterisk)</label>
|
|
<input
|
|
id="queue_number"
|
|
v-model="form.queue_number"
|
|
type="text"
|
|
placeholder="Ex: 900"
|
|
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full"
|
|
/>
|
|
<div v-if="form.errors.queue_number" class="text-red-600 text-sm mt-1">{{ form.errors.queue_number }}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="friendly_name" class="block font-medium text-sm text-gray-700">Nome de Exibição</label>
|
|
<input
|
|
id="friendly_name"
|
|
v-model="form.friendly_name"
|
|
type="text"
|
|
placeholder="Ex: Comercial"
|
|
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full"
|
|
@keyup.enter="submitQueueInfo"
|
|
/>
|
|
<div v-if="form.errors.friendly_name" class="text-red-600 text-sm mt-1">{{ form.errors.friendly_name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-6 py-4 bg-gray-100 text-right flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 transition ease-in-out duration-150"
|
|
@click="closeModal"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 transition ease-in-out duration-150"
|
|
:class="{ 'opacity-25': form.processing }"
|
|
:disabled="form.processing"
|
|
@click="submitQueueInfo"
|
|
>
|
|
Salvar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template> |