109 lines
3.4 KiB
Vue
109 lines
3.4 KiB
Vue
<script setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
import ToggleButton from 'primevue/togglebutton'
|
|
|
|
const props = defineProps({
|
|
title: { type: String, default: 'Agenda' },
|
|
|
|
// 'day' | 'week'
|
|
view: { type: String, default: 'day' },
|
|
|
|
// 'full_24h' | 'work_hours'
|
|
mode: { type: String, default: 'work_hours' },
|
|
|
|
showSearch: { type: Boolean, default: true },
|
|
searchPlaceholder: { type: String, default: ' ' },
|
|
|
|
// controla se exibe botões de ação
|
|
showActions: { type: Boolean, default: true }
|
|
})
|
|
|
|
const emit = defineEmits([
|
|
'today',
|
|
'prev',
|
|
'next',
|
|
'changeView',
|
|
'toggleMode',
|
|
'createSession',
|
|
'createBlock',
|
|
'search'
|
|
])
|
|
|
|
const viewOptions = [
|
|
{ label: 'Dia', value: 'day' },
|
|
{ label: 'Semana', value: 'week' }
|
|
]
|
|
|
|
const search = ref('')
|
|
|
|
watch(search, (v) => emit('search', v))
|
|
|
|
const modeLabel = computed(() => (props.mode === 'full_24h' ? '24h' : 'Horário'))
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-4 overflow-hidden rounded-[1.5rem] border border-[var(--surface-border)] bg-[var(--surface-card)]">
|
|
<div class="p-4 md:p-5 flex flex-col gap-3">
|
|
<!-- topo -->
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<div class="text-lg md:text-xl font-semibold truncate">{{ title }}</div>
|
|
<div class="text-sm opacity-70">Operação do dia com visão e ação.</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<Button label="Hoje" icon="pi pi-calendar" severity="secondary" outlined @click="$emit('today')" />
|
|
<Button icon="pi pi-chevron-left" severity="secondary" outlined @click="$emit('prev')" />
|
|
<Button icon="pi pi-chevron-right" severity="secondary" outlined @click="$emit('next')" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- controles -->
|
|
<div class="flex flex-col md:flex-row md:items-center gap-3 md:justify-between">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<SelectButton
|
|
:modelValue="view"
|
|
:options="viewOptions"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
@update:modelValue="$emit('changeView', $event)"
|
|
/>
|
|
|
|
<ToggleButton
|
|
:modelValue="mode === 'full_24h'"
|
|
onLabel="24h"
|
|
offLabel="Horário"
|
|
@update:modelValue="$emit('toggleMode', $event ? 'full_24h' : 'work_hours')"
|
|
/>
|
|
|
|
<div class="text-sm opacity-70">
|
|
Modo: <b>{{ modeLabel }}</b>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row items-stretch md:items-center gap-2">
|
|
<template v-if="showActions">
|
|
<Button label="Nova sessão" icon="pi pi-plus" @click="$emit('createSession')" />
|
|
<Button label="Bloquear" icon="pi pi-lock" severity="secondary" outlined @click="$emit('createBlock')" />
|
|
</template>
|
|
|
|
<div v-if="showSearch" class="md:w-72 w-full">
|
|
<FloatLabel>
|
|
<IconField>
|
|
<InputIcon class="pi pi-search" />
|
|
<InputText
|
|
id="agendaSearch"
|
|
class="w-full"
|
|
v-model="search"
|
|
:placeholder="searchPlaceholder"
|
|
/>
|
|
</IconField>
|
|
<label for="agendaSearch">Buscar por paciente/título</label>
|
|
</FloatLabel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |