mirror of https://github.com/Lukibeg/OmniBoard.git
102 lines
3.4 KiB
Vue
102 lines
3.4 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useForm, usePage } from '@inertiajs/vue3';
|
|
import Modal from '@/Components/Modal.vue';
|
|
import SecondaryButton from '@/Components/SecondaryButton.vue';
|
|
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
|
import TextInput from '@/Components/TextInput.vue';
|
|
import InputLabel from '@/Components/InputLabel.vue';
|
|
|
|
const showModal = ref(false);
|
|
const page = usePage();
|
|
|
|
// Inicializamos o form vazio
|
|
const form = useForm({
|
|
queues: []
|
|
});
|
|
|
|
// Função que o Pai vai chamar
|
|
const openModal = () => {
|
|
const currentQueues = page.props.queues || [];
|
|
|
|
form.queues = currentQueues.map(queue => ({
|
|
id: queue.id,
|
|
name: queue.name,
|
|
sector: queue.sector || ''
|
|
}));
|
|
|
|
showModal.value = true;
|
|
};
|
|
|
|
const submit = () => {
|
|
form.put(route('queues.update-sectors'), {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
showModal.value = false;
|
|
form.reset();
|
|
},
|
|
});
|
|
};
|
|
|
|
const closeModal = () => {
|
|
showModal.value = false;
|
|
form.reset();
|
|
};
|
|
|
|
defineExpose({ openModal });
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
|
|
<Modal :show="showModal" @close="closeModal">
|
|
<div class="p-6">
|
|
<h2 class="text-lg font-medium text-gray-900 mb-2">
|
|
Organizar Setores
|
|
</h2>
|
|
<p class="text-sm text-gray-500 mb-6">
|
|
Defina em qual setor (pasta) cada fila deve aparecer no Dashboard.
|
|
Deixe em branco para "Geral".
|
|
</p>
|
|
|
|
<div v-if="form.queues.length > 0" class="max-h-[60vh] overflow-y-auto pr-2 flex flex-col gap-3">
|
|
|
|
<div v-for="(queue, index) in form.queues" :key="queue.id"
|
|
class="flex items-center justify-between p-3 bg-gray-50 rounded border border-gray-200">
|
|
|
|
<div class="flex flex-col w-1/2 pr-4">
|
|
<span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Fila /
|
|
Canal</span>
|
|
<span class="text-sm font-semibold text-gray-800 truncate" :title="queue.name">
|
|
{{ queue.name }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="w-1/2">
|
|
<InputLabel :for="'sector-' + index" value="Nome do Setor" class="sr-only" />
|
|
<TextInput :id="'sector-' + index" v-model="queue.sector" type="text"
|
|
class="mt-1 block w-full py-1.5 text-sm" placeholder="Ex: Financeiro"
|
|
@keyup.enter="submit" />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-else class="text-center py-8 text-gray-400 italic">
|
|
Nenhuma fila carregada nesta página.
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end gap-3">
|
|
<SecondaryButton @click="closeModal">
|
|
Cancelar
|
|
</SecondaryButton>
|
|
|
|
<PrimaryButton @click="submit" class="bg-indigo-600 hover:bg-indigo-700"
|
|
:class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
|
Salvar Setores
|
|
</PrimaryButton>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
</template> |