109 lines
2.5 KiB
Vue
Executable File
109 lines
2.5 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import { format } from 'date-fns'
|
|
import type { Activity } from '~/types'
|
|
|
|
defineProps<{
|
|
activity: Activity
|
|
}>()
|
|
|
|
const emits = defineEmits(['close'])
|
|
|
|
const dropdownItems = [[{
|
|
label: 'Mark as unread',
|
|
icon: 'i-lucide-check-circle'
|
|
}, {
|
|
label: 'Mark as important',
|
|
icon: 'i-lucide-triangle-alert'
|
|
}], [{
|
|
label: 'Star thread',
|
|
icon: 'i-lucide-star'
|
|
}, {
|
|
label: 'Mute thread',
|
|
icon: 'i-lucide-circle-pause'
|
|
}]]
|
|
|
|
const toast = useToast()
|
|
|
|
const reply = ref('')
|
|
const loading = ref(false)
|
|
|
|
const meilisearch = useMeiliSearchRef()
|
|
|
|
const body = computed(async() => {
|
|
// let item = meilisearch.index('activities_ES').getDocument(activity.value._id)
|
|
// return await item.body
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel id="inbox-2">
|
|
<UDashboardNavbar :title="activity.title" :toggle="false">
|
|
<template #leading>
|
|
<UButton
|
|
icon="i-lucide-x"
|
|
color="neutral"
|
|
variant="ghost"
|
|
class="-ms-1.5"
|
|
@click="emits('close')"
|
|
/>
|
|
</template>
|
|
|
|
<template #right>
|
|
<UTooltip text="Archive">
|
|
<UButton
|
|
icon="i-lucide-inbox"
|
|
color="neutral"
|
|
variant="ghost"
|
|
/>
|
|
</UTooltip>
|
|
|
|
<UTooltip text="Reply">
|
|
<UButton icon="i-lucide-reply" color="neutral" variant="ghost" />
|
|
</UTooltip>
|
|
|
|
<UDropdownMenu :items="dropdownItems">
|
|
<UButton
|
|
icon="i-lucide-ellipsis-vertical"
|
|
color="neutral"
|
|
variant="ghost"
|
|
/>
|
|
</UDropdownMenu>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<div class="flex flex-col sm:flex-row justify-between gap-1 p-4 sm:px-6 border-b border-default">
|
|
<div class="flex items-start gap-4 sm:my-1.5">
|
|
<!-- <UAvatar
|
|
v-bind="activity.from.avatar"
|
|
:alt="activity.from.name"
|
|
size="3xl"
|
|
/> -->
|
|
|
|
<div class="min-w-0">
|
|
<p class="font-semibold text-muted text-sm text-highlighted">
|
|
{{ formatDate(new Date(activity.date).getTime()/1000) }}
|
|
</p>
|
|
<p class="text-muted">
|
|
<!-- {{ activity.email }} -->
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="max-sm:pl-16 text-muted text-sm sm:mt-2">
|
|
{{ formatLocation( activity ) }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex-1 p-4 sm:p-6 overflow-y-auto">
|
|
|
|
{{ activity._id }}
|
|
<p class="whitespace-pre-wrap" v-html="body">
|
|
|
|
</p>
|
|
</div>
|
|
|
|
|
|
</UDashboardPanel>
|
|
</template>
|