111 lines
3.0 KiB
Vue
111 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { MessageObject } from '@MailManager/models/message'
|
|
|
|
interface Props {
|
|
message: MessageObject
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
// Format date for display
|
|
const formatDate = (date: Date | string | null | undefined): string => {
|
|
if (!date) return ''
|
|
|
|
const messageDate = new Date(date)
|
|
return messageDate.toLocaleString('en-US', {
|
|
weekday: 'short',
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
hour12: true
|
|
})
|
|
}
|
|
|
|
// Format file size for display
|
|
const formatFileSize = (bytes: number | undefined): string => {
|
|
if (!bytes) return ''
|
|
|
|
if (bytes < 1024) return bytes + ' B'
|
|
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
|
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="message-header pa-6">
|
|
<div class="text-h5 mb-4">{{ message?.subject || '(No subject)' }}</div>
|
|
|
|
<div class="d-flex align-center mb-3">
|
|
<v-avatar size="48" color="primary" class="mr-3">
|
|
<span class="text-white text-h6">
|
|
{{ (message?.from?.label || message?.from?.address || 'U')[0].toUpperCase() }}
|
|
</span>
|
|
</v-avatar>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="text-body-1 font-weight-medium">
|
|
{{ message?.from?.label || message?.from?.address || 'Unknown Sender' }}
|
|
</div>
|
|
<div class="text-caption text-medium-emphasis">
|
|
{{ formatDate(message?.date) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recipients -->
|
|
<div v-if="message?.to && message?.to.length > 0" class="text-body-2 mb-1">
|
|
<span class="text-medium-emphasis">To:</span>
|
|
{{ message?.to.map(t => t.label || t.address).join(', ') }}
|
|
</div>
|
|
|
|
<div v-if="message?.cc && message?.cc.length > 0" class="text-body-2 mb-1">
|
|
<span class="text-medium-emphasis">Cc:</span>
|
|
{{ message?.cc.map(c => c.label || c.address).join(', ') }}
|
|
</div>
|
|
|
|
<!-- Attachments -->
|
|
<div v-if="message?.attachments && message?.attachments.length > 0" class="mt-4">
|
|
<div class="text-body-2 text-medium-emphasis mb-2">
|
|
Attachments ({{ message?.attachments.length }})
|
|
</div>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<v-chip
|
|
v-for="(attachment, index) in message?.attachments"
|
|
:key="index"
|
|
prepend-icon="mdi-paperclip"
|
|
size="small"
|
|
variant="outlined"
|
|
class="attachment-chip"
|
|
>
|
|
<span class="attachment-name">{{ attachment.name || 'Untitled' }}</span>
|
|
<span v-if="attachment.size" class="text-caption text-medium-emphasis ml-1">
|
|
({{ formatFileSize(attachment.size) }})
|
|
</span>
|
|
</v-chip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.message-header {
|
|
background-color: rgba(var(--v-theme-surface));
|
|
}
|
|
|
|
.gap-2 {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.attachment-chip {
|
|
max-width: 300px;
|
|
|
|
.attachment-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
</style>
|