100 lines
2.8 KiB
Vue
100 lines
2.8 KiB
Vue
<template>
|
|
<div class="bg-surface-cards border border-outline-gray-1 rounded-lg p-6">
|
|
<div class="mb-8 flex items-center justify-between">
|
|
<h3 class="text-lg font-semibold text-ink-gray-9">{{ event.title }}</h3>
|
|
|
|
<Button
|
|
:link="`/events/${event.route}`"
|
|
icon-left="external-link"
|
|
variant="subtle"
|
|
size="sm"
|
|
>{{ __("Visit Event Page") }}
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Start Date & Time -->
|
|
<div>
|
|
<div class="flex items-center text-ink-gray-6 mb-1">
|
|
<LucideCalendarDays class="w-4 h-4 mr-2 flex-shrink-0" />
|
|
<span class="text-sm font-medium">{{ __("Start Date") }}</span>
|
|
</div>
|
|
<p class="text-ink-gray-9 font-medium">
|
|
{{ formatEventDateTime(event.start_date, event.start_time) }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- End Date & Time -->
|
|
<div v-if="event.end_date">
|
|
<div class="flex items-center text-ink-gray-6 mb-1">
|
|
<LucideCalendarDays class="w-4 h-4 mr-2 flex-shrink-0" />
|
|
<span class="text-sm font-medium">{{ __("End Date") }}</span>
|
|
</div>
|
|
<p class="text-ink-gray-9 font-medium">
|
|
{{ formatEventDateTime(event.end_date, event.end_time) }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Venue -->
|
|
<div v-if="venue">
|
|
<div class="flex items-center text-ink-gray-6 mb-1">
|
|
<LucideMapPin class="w-4 h-4 mr-2 flex-shrink-0" />
|
|
<span class="text-sm font-medium">{{ __("Venue") }}</span>
|
|
</div>
|
|
<p class="text-ink-gray-9 font-medium">{{ venue.name }}</p>
|
|
<p v-if="venue.address" class="text-sm text-ink-gray-6 mt-1">
|
|
{{ venue.address }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Event Description -->
|
|
<div v-if="event.short_description" class="pt-2 border-t border-outline-gray-1">
|
|
<p class="text-sm text-ink-gray-6">{{ event.short_description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { dayjsLocal } from "frappe-ui";
|
|
import LucideCalendarDays from "~icons/lucide/calendar-days";
|
|
import LucideMapPin from "~icons/lucide/map-pin";
|
|
|
|
defineProps({
|
|
event: {
|
|
type: Object,
|
|
required: true,
|
|
validator: (value) => {
|
|
return (
|
|
typeof value.title === "string" &&
|
|
value.start_date &&
|
|
typeof value.route === "string"
|
|
);
|
|
},
|
|
},
|
|
venue: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
// Helper function to format date and time together (matching TicketDetails.vue)
|
|
const formatEventDateTime = (date, time) => {
|
|
if (!date) return "";
|
|
|
|
// Create a date object from the date string
|
|
const dateObj = dayjsLocal(date);
|
|
|
|
// If time is provided, combine it with the date
|
|
if (time) {
|
|
// Parse the time (format: "HH:mm:ss")
|
|
const [hours, minutes] = time.split(":");
|
|
const dateTimeObj = dateObj.hour(Number.parseInt(hours)).minute(Number.parseInt(minutes));
|
|
return dateTimeObj.format("MMMM DD, YYYY [at] h:mm A");
|
|
}
|
|
|
|
// If no time, just show the date
|
|
return dateObj.format("MMMM DD, YYYY");
|
|
};
|
|
</script>
|