67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<template>
|
|
<div class="flex flex-col h-full">
|
|
<!-- Notes History (Top) -->
|
|
<div class="flex-1 overflow-y-auto p-4 space-y-3">
|
|
<div v-if="notes.length === 0" class="flex flex-col items-center justify-center h-full text-muted-foreground">
|
|
<MessageSquarePlus class="h-10 w-10 mb-2 opacity-50" />
|
|
<p class="text-sm">No notes yet for this asset's tasks.</p>
|
|
</div>
|
|
|
|
<div
|
|
v-for="note in notes"
|
|
:key="note.id"
|
|
class="border rounded-lg p-4 space-y-2 hover:bg-muted/50 transition-colors"
|
|
>
|
|
<!-- Note Header -->
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<span class="text-sm font-medium">{{ note.author_name }}</span>
|
|
<Badge variant="outline" class="text-xs">
|
|
{{ formatTaskType(note.task_type) }}
|
|
</Badge>
|
|
</div>
|
|
<p class="text-xs text-muted-foreground mt-1">
|
|
{{ note.task_name }} • {{ formatDate(note.created_at) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Note Content -->
|
|
<p class="text-sm whitespace-pre-wrap">{{ note.content }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { MessageSquarePlus } from 'lucide-vue-next'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
const props = defineProps<{
|
|
assetId: number
|
|
notes: any[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
notesUpdated: []
|
|
}>()
|
|
|
|
function formatTaskType(taskType: string): string {
|
|
return taskType.split('_').map(word =>
|
|
word.charAt(0).toUpperCase() + word.slice(1)
|
|
).join(' ')
|
|
}
|
|
|
|
function formatDate(dateString: string): string {
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
}
|
|
</script>
|