181 lines
7.0 KiB
Vue
181 lines
7.0 KiB
Vue
<!-- src/components/agenda/AgendaSlotsPorDiaCard.vue -->
|
|
<script setup>
|
|
import { computed, ref, watch, onMounted } from 'vue'
|
|
import TabView from 'primevue/tabview'
|
|
import TabPanel from 'primevue/tabpanel'
|
|
import Dropdown from 'primevue/dropdown'
|
|
import InputNumber from 'primevue/inputnumber'
|
|
import InputSwitch from 'primevue/inputswitch'
|
|
import { useToast } from 'primevue/usetoast'
|
|
|
|
import { fetchSlotsRegras, upsertSlotRegra } from '@/services/agendaConfigService'
|
|
|
|
const toast = useToast()
|
|
|
|
const props = defineProps({
|
|
ownerId: { type: String, required: true }
|
|
})
|
|
|
|
const loading = ref(false)
|
|
const saving = ref(false)
|
|
|
|
const diasSemana = [
|
|
{ label: 'Dom', value: 0 },
|
|
{ label: 'Seg', value: 1 },
|
|
{ label: 'Ter', value: 2 },
|
|
{ label: 'Qua', value: 3 },
|
|
{ label: 'Qui', value: 4 },
|
|
{ label: 'Sex', value: 5 },
|
|
{ label: 'Sáb', value: 6 }
|
|
]
|
|
|
|
const passos = [15, 20, 30, 45, 60, 75, 90, 120].map(v => ({ label: `${v} min`, value: v }))
|
|
const offsets = [0, 15, 30, 45].map(v => ({ label: v === 0 ? ':00' : `:${String(v).padStart(2, '0')}`, value: v }))
|
|
|
|
const model = ref({
|
|
0: { dia_semana: 0, ativo: false, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
|
|
1: { dia_semana: 1, ativo: true, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
|
|
2: { dia_semana: 2, ativo: true, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
|
|
3: { dia_semana: 3, ativo: true, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
|
|
4: { dia_semana: 4, ativo: true, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
|
|
5: { dia_semana: 5, ativo: true, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
|
|
6: { dia_semana: 6, ativo: true, passo_minutos: 60, offset_minutos: 30, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 }
|
|
})
|
|
|
|
function applyRows(rows) {
|
|
for (const r of rows || []) {
|
|
model.value[r.dia_semana] = {
|
|
dia_semana: r.dia_semana,
|
|
ativo: !!r.ativo,
|
|
passo_minutos: r.passo_minutos,
|
|
offset_minutos: r.offset_minutos,
|
|
buffer_antes_min: r.buffer_antes_min,
|
|
buffer_depois_min: r.buffer_depois_min,
|
|
min_antecedencia_horas: r.min_antecedencia_horas
|
|
}
|
|
}
|
|
}
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
try {
|
|
const rows = await fetchSlotsRegras(props.ownerId)
|
|
applyRows(rows)
|
|
} catch (e) {
|
|
console.error(e)
|
|
toast.add({ severity: 'error', summary: 'Falha', detail: e?.message || 'Não foi possível carregar slots por dia.', life: 3200 })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function salvarDia(dia) {
|
|
saving.value = true
|
|
try {
|
|
const p = model.value[dia]
|
|
await upsertSlotRegra(props.ownerId, p)
|
|
toast.add({ severity: 'success', summary: 'Salvo', detail: `Slots do ${diasSemana.find(x => x.value === dia)?.label} atualizados.`, life: 1600 })
|
|
} catch (e) {
|
|
console.error(e)
|
|
toast.add({ severity: 'error', summary: 'Falha', detail: e?.message || 'Não foi possível salvar.', life: 3200 })
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
async function salvarTudo() {
|
|
saving.value = true
|
|
try {
|
|
for (const d of diasSemana.map(x => x.value)) {
|
|
await upsertSlotRegra(props.ownerId, model.value[d])
|
|
}
|
|
toast.add({ severity: 'success', summary: 'Salvo', detail: 'Slots por dia atualizados.', life: 1800 })
|
|
} catch (e) {
|
|
console.error(e)
|
|
toast.add({ severity: 'error', summary: 'Falha', detail: e?.message || 'Não foi possível salvar tudo.', life: 3200 })
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(load)
|
|
</script>
|
|
|
|
<template>
|
|
<Card class="overflow-hidden">
|
|
<template #title>
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<i class="pi pi-clock" />
|
|
<span>Organização de slots (por dia)</span>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<Button icon="pi pi-refresh" text rounded :disabled="loading" @click="load" />
|
|
<Button label="Salvar tudo" icon="pi pi-check" size="small" :loading="saving" @click="salvarTudo" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #content>
|
|
<div class="text-600 text-sm mb-3 leading-relaxed">
|
|
Aqui você define <b>de quanto em quanto</b> os horários aparecem e <b>em qual minuto</b> eles alinham (ex.: :00 ou :30).
|
|
<span class="ml-1">Ex.: sábado com passo 60 e offset 30 gera 08:30, 09:30, 10:30…</span>
|
|
</div>
|
|
|
|
<TabView>
|
|
<TabPanel v-for="d in diasSemana" :key="d.value" :header="d.label">
|
|
<div class="grid grid-cols-12 gap-4">
|
|
<div class="col-span-12 flex items-center gap-3">
|
|
<InputSwitch v-model="model[d.value].ativo" />
|
|
<div>
|
|
<div class="text-900 font-medium">Ativo</div>
|
|
<div class="text-600 text-sm">Se desligado, o online não oferece horários nesse dia.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-12 md:col-span-4">
|
|
<FloatLabel>
|
|
<Dropdown v-model="model[d.value].passo_minutos" :options="passos" optionLabel="label" optionValue="value" class="w-full" inputId="passo" />
|
|
<label for="passo">Passo (min)</label>
|
|
</FloatLabel>
|
|
</div>
|
|
|
|
<div class="col-span-12 md:col-span-4">
|
|
<FloatLabel>
|
|
<Dropdown v-model="model[d.value].offset_minutos" :options="offsets" optionLabel="label" optionValue="value" class="w-full" inputId="offset" />
|
|
<label for="offset">Alinhamento</label>
|
|
</FloatLabel>
|
|
</div>
|
|
|
|
<div class="col-span-12 md:col-span-4">
|
|
<FloatLabel>
|
|
<InputNumber v-model="model[d.value].min_antecedencia_horas" class="w-full" :min="0" :max="720" inputId="ante" />
|
|
<label for="ante">Antecedência (h)</label>
|
|
</FloatLabel>
|
|
</div>
|
|
|
|
<div class="col-span-12 md:col-span-4">
|
|
<FloatLabel>
|
|
<InputNumber v-model="model[d.value].buffer_antes_min" class="w-full" :min="0" :max="240" inputId="ba" />
|
|
<label for="ba">Buffer antes (min)</label>
|
|
</FloatLabel>
|
|
</div>
|
|
|
|
<div class="col-span-12 md:col-span-4">
|
|
<FloatLabel>
|
|
<InputNumber v-model="model[d.value].buffer_depois_min" class="w-full" :min="0" :max="240" inputId="bd" />
|
|
<label for="bd">Buffer depois (min)</label>
|
|
</FloatLabel>
|
|
</div>
|
|
|
|
<div class="col-span-12 md:col-span-4 flex items-end">
|
|
<Button class="w-full" label="Salvar este dia" icon="pi pi-check" :loading="saving" @click="salvarDia(d.value)" />
|
|
</div>
|
|
</div>
|
|
</TabPanel>
|
|
</TabView>
|
|
</template>
|
|
</Card>
|
|
</template>
|