first commit

src/components/agenda/AgendaSlotsPorDiaCard.vue

@@ -0,0 +1,183 @@
+<!-- src/components/agenda/AgendaSlotsPorDiaCard.vue -->
+<script setup>
+import { computed, ref, watch, onMounted } from 'vue'
+import Card from 'primevue/card'
+import Button from 'primevue/button'
+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 FloatLabel from 'primevue/floatlabel'
+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>