josedario87
cb846d0c56
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m8s
- Backend: Nuevo soporte en endpoint /send para tipos contact, poll, event - UI: Modales para crear y enviar contactos, encuestas y eventos - Visualización: Componentes MessagePoll y MessageEvent para mostrar mensajes recibidos - Tipos: Agregar PollInfo, EventInfo y tipo 'event' a MessageType
127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
<template>
|
|
<div class="min-w-[200px] max-w-[280px]">
|
|
<!-- Event header -->
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<UIcon name="i-lucide-calendar" class="w-5 h-5" :class="iconClass" />
|
|
<span class="font-medium" :class="textClass">Evento</span>
|
|
</div>
|
|
|
|
<!-- Event name -->
|
|
<p class="font-medium text-lg mb-2" :class="textClass">
|
|
{{ event.name }}
|
|
</p>
|
|
|
|
<!-- Date and time -->
|
|
<div class="space-y-1 mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-lucide-clock" class="w-4 h-4" :class="mutedTextClass" />
|
|
<span class="text-sm" :class="textClass">
|
|
{{ formatDate(event.startDate) }}
|
|
</span>
|
|
</div>
|
|
<div v-if="event.endDate" class="flex items-center gap-2">
|
|
<UIcon name="i-lucide-arrow-right" class="w-4 h-4" :class="mutedTextClass" />
|
|
<span class="text-sm" :class="textClass">
|
|
{{ formatDate(event.endDate) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<p v-if="event.description" class="text-sm mb-2" :class="mutedTextClass">
|
|
{{ event.description }}
|
|
</p>
|
|
|
|
<!-- Location -->
|
|
<div
|
|
v-if="event.location"
|
|
class="flex items-start gap-2 p-2 rounded-lg"
|
|
:class="locationBgClass"
|
|
>
|
|
<UIcon name="i-lucide-map-pin" class="w-4 h-4 mt-0.5" :class="iconClass" />
|
|
<div class="flex-1 min-w-0">
|
|
<p v-if="event.location.name" class="text-sm font-medium" :class="textClass">
|
|
{{ event.location.name }}
|
|
</p>
|
|
<p v-if="event.location.address" class="text-xs" :class="mutedTextClass">
|
|
{{ event.location.address }}
|
|
</p>
|
|
<a
|
|
v-if="event.location.latitude && event.location.longitude"
|
|
:href="mapsUrl"
|
|
target="_blank"
|
|
class="text-xs underline"
|
|
:class="linkClass"
|
|
>
|
|
Ver en mapa
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface EventLocation {
|
|
name?: string
|
|
address?: string
|
|
latitude?: number
|
|
longitude?: number
|
|
}
|
|
|
|
interface EventInfo {
|
|
name: string
|
|
startDate: string
|
|
endDate?: string
|
|
description?: string
|
|
location?: EventLocation
|
|
}
|
|
|
|
interface Props {
|
|
event: EventInfo
|
|
fromMe?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
fromMe: false
|
|
})
|
|
|
|
const formatDate = (dateStr: string): string => {
|
|
const date = new Date(dateStr)
|
|
return date.toLocaleString('es-AR', {
|
|
weekday: 'short',
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
}
|
|
|
|
const mapsUrl = computed(() => {
|
|
if (!props.event.location?.latitude || !props.event.location?.longitude) return ''
|
|
const lat = props.event.location.latitude
|
|
const lng = props.event.location.longitude
|
|
return `https://www.google.com/maps?q=${lat},${lng}`
|
|
})
|
|
|
|
const textClass = computed(() =>
|
|
props.fromMe ? 'text-white' : 'text-[var(--wa-text)]'
|
|
)
|
|
|
|
const iconClass = computed(() =>
|
|
props.fromMe ? 'text-white/80' : 'text-[var(--wa-green)]'
|
|
)
|
|
|
|
const mutedTextClass = computed(() =>
|
|
props.fromMe ? 'text-white/60' : 'text-[var(--wa-text-muted)]'
|
|
)
|
|
|
|
const locationBgClass = computed(() =>
|
|
props.fromMe ? 'bg-white/10' : 'bg-[var(--wa-bg-light)]'
|
|
)
|
|
|
|
const linkClass = computed(() =>
|
|
props.fromMe ? 'text-white/80 hover:text-white' : 'text-[var(--wa-blue)] hover:text-[var(--wa-green)]'
|
|
)
|
|
</script>
|