Adds expandable event card
Improves the Scheduled Event Card component by adding an expandable view. This change introduces a collapsed view that shows the event time and title, and an expanded view which displays all event details. This allows users to quickly scan the scheduled events and expand those they are interested in.
This commit is contained in:
parent
661b700092
commit
4bf1da7331
1 changed files with 109 additions and 48 deletions
|
|
@ -33,6 +33,9 @@ const emit = defineEmits<Emits>()
|
|||
// Confirmation dialog state
|
||||
const showConfirmDialog = ref(false)
|
||||
|
||||
// Collapsed state (collapsed by default)
|
||||
const isExpanded = ref(false)
|
||||
|
||||
// Event address for tracking completion
|
||||
const eventAddress = computed(() => `31922:${props.event.pubkey}:${props.event.dTag}`)
|
||||
|
||||
|
|
@ -113,69 +116,127 @@ function confirmMarkComplete() {
|
|||
function cancelMarkComplete() {
|
||||
showConfirmDialog.value = false
|
||||
}
|
||||
|
||||
// Toggle expanded/collapsed state
|
||||
function toggleExpanded() {
|
||||
isExpanded.value = !isExpanded.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="border-b md:border md:rounded-lg bg-card p-4 md:p-6 transition-all"
|
||||
<div class="border-b md:border md:rounded-lg bg-card transition-all"
|
||||
:class="{ 'opacity-60': isCompletable && isCompleted }">
|
||||
<!-- Event Details -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Title and badges -->
|
||||
<div class="flex items-start gap-2 mb-2 flex-wrap">
|
||||
<h3 class="font-semibold text-base md:text-lg flex-1"
|
||||
:class="{ 'line-through': isCompletable && isCompleted }">
|
||||
{{ event.title }}
|
||||
</h3>
|
||||
<Badge v-if="isAdminEvent" variant="secondary" class="shrink-0">
|
||||
|
||||
<!-- Collapsed View (Default) -->
|
||||
<div v-if="!isExpanded"
|
||||
class="flex items-center gap-3 p-3 md:p-4">
|
||||
<!-- Time -->
|
||||
<div @click="toggleExpanded" class="flex items-center gap-1.5 text-sm text-muted-foreground shrink-0 cursor-pointer">
|
||||
<Clock class="h-3.5 w-3.5" />
|
||||
<span class="font-medium">{{ formattedTimeRange || formattedDate }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h3 @click="toggleExpanded"
|
||||
class="font-semibold text-sm md:text-base flex-1 truncate cursor-pointer hover:text-foreground/80 transition-colors"
|
||||
:class="{ 'line-through': isCompletable && isCompleted }">
|
||||
{{ event.title }}
|
||||
</h3>
|
||||
|
||||
<!-- Badges and Actions -->
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<!-- Mark Complete Button (for uncompleted tasks) -->
|
||||
<Button
|
||||
v-if="isCompletable && !isCompleted"
|
||||
@click.stop="handleMarkComplete"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-7 w-7 p-0"
|
||||
>
|
||||
<CheckCircle class="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<!-- Completed Badge -->
|
||||
<Badge v-if="isCompletable && isCompleted" variant="secondary" class="text-xs">
|
||||
✓
|
||||
</Badge>
|
||||
|
||||
<!-- Admin Badge -->
|
||||
<Badge v-if="isAdminEvent" variant="secondary" class="text-xs">
|
||||
Admin
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date/Time -->
|
||||
<div class="flex items-center gap-4 text-sm text-muted-foreground mb-2 flex-wrap">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Calendar class="h-4 w-4" />
|
||||
<span>{{ formattedDate }}</span>
|
||||
<!-- Expanded View -->
|
||||
<div v-else class="p-4 md:p-6">
|
||||
<!-- Event Details -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Title and badges with close button -->
|
||||
<div class="flex items-start gap-2 mb-2 flex-wrap">
|
||||
<h3 class="font-semibold text-base md:text-lg flex-1"
|
||||
:class="{ 'line-through': isCompletable && isCompleted }">
|
||||
{{ event.title }}
|
||||
</h3>
|
||||
<Badge v-if="isAdminEvent" variant="secondary" class="shrink-0">
|
||||
Admin
|
||||
</Badge>
|
||||
<Button
|
||||
@click="toggleExpanded"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-6 w-6 p-0 shrink-0"
|
||||
>
|
||||
✕
|
||||
</Button>
|
||||
</div>
|
||||
<div v-if="formattedTimeRange" class="flex items-center gap-1.5">
|
||||
<Clock class="h-4 w-4" />
|
||||
<span>{{ formattedTimeRange }}</span>
|
||||
|
||||
<!-- Date/Time -->
|
||||
<div class="flex items-center gap-4 text-sm text-muted-foreground mb-2 flex-wrap">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Calendar class="h-4 w-4" />
|
||||
<span>{{ formattedDate }}</span>
|
||||
</div>
|
||||
<div v-if="formattedTimeRange" class="flex items-center gap-1.5">
|
||||
<Clock class="h-4 w-4" />
|
||||
<span>{{ formattedTimeRange }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div v-if="event.location" class="flex items-center gap-1.5 text-sm text-muted-foreground mb-3">
|
||||
<MapPin class="h-4 w-4" />
|
||||
<span>{{ event.location }}</span>
|
||||
</div>
|
||||
<!-- Location -->
|
||||
<div v-if="event.location" class="flex items-center gap-1.5 text-sm text-muted-foreground mb-3">
|
||||
<MapPin class="h-4 w-4" />
|
||||
<span>{{ event.location }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Description/Content -->
|
||||
<div v-if="event.description || event.content" class="text-sm mb-3">
|
||||
<p class="whitespace-pre-wrap break-words">{{ event.description || event.content }}</p>
|
||||
</div>
|
||||
<!-- Description/Content -->
|
||||
<div v-if="event.description || event.content" class="text-sm mb-3">
|
||||
<p class="whitespace-pre-wrap break-words">{{ event.description || event.content }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Completion info (only for completable events) -->
|
||||
<div v-if="isCompletable && isCompleted && getCompletion(eventAddress)" class="text-xs text-muted-foreground mb-3">
|
||||
✓ Completed by {{ getDisplayName(getCompletion(eventAddress)!.pubkey) }}
|
||||
<span v-if="getCompletion(eventAddress)!.notes"> - {{ getCompletion(eventAddress)!.notes }}</span>
|
||||
</div>
|
||||
<!-- Completion info (only for completable events) -->
|
||||
<div v-if="isCompletable && isCompleted && getCompletion(eventAddress)" class="text-xs text-muted-foreground mb-3">
|
||||
✓ Completed by {{ getDisplayName(getCompletion(eventAddress)!.pubkey) }}
|
||||
<span v-if="getCompletion(eventAddress)!.notes"> - {{ getCompletion(eventAddress)!.notes }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Author (if not admin) -->
|
||||
<div v-if="!isAdminEvent" class="text-xs text-muted-foreground mb-3">
|
||||
Posted by {{ getDisplayName(event.pubkey) }}
|
||||
</div>
|
||||
<!-- Author (if not admin) -->
|
||||
<div v-if="!isAdminEvent" class="text-xs text-muted-foreground mb-3">
|
||||
Posted by {{ getDisplayName(event.pubkey) }}
|
||||
</div>
|
||||
|
||||
<!-- Mark Complete Button (only for completable task events) -->
|
||||
<div v-if="isCompletable && !isCompleted" class="mt-3">
|
||||
<Button
|
||||
@click="handleMarkComplete"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="gap-2"
|
||||
>
|
||||
<CheckCircle class="h-4 w-4" />
|
||||
Mark Complete
|
||||
</Button>
|
||||
<!-- Mark Complete Button (only for completable task events) -->
|
||||
<div v-if="isCompletable && !isCompleted" class="mt-3">
|
||||
<Button
|
||||
@click.stop="handleMarkComplete"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="gap-2"
|
||||
>
|
||||
<CheckCircle class="h-4 w-4" />
|
||||
Mark Complete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue