93 lines
2.4 KiB
Vue
93 lines
2.4 KiB
Vue
<template>
|
|
<div class="flex flex-column">
|
|
<div class="flex flex-row p-1 items-center">
|
|
<div class="px-2 content-center">
|
|
<img :src="message.profileImageUrl ?? '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
|
|
alt="Profile Image"
|
|
class="rounded-full"
|
|
width="32px"
|
|
height="32px">
|
|
</div>
|
|
|
|
<div class="p-2 flex-1">
|
|
<div class="flex justify-between items-center">
|
|
|
|
<div>
|
|
|
|
<span class="font-semibold font-sans mr-2">
|
|
{{ message.createdByName }}
|
|
</span>
|
|
|
|
<v-tooltip :text="new Date(message.createdAt).toLocaleString()">
|
|
<template v-slot:activator="{ props }">
|
|
<span v-bind="props" class="text-sm-caption text-gray-700">
|
|
{{ time_ago(message.createdAt) }}
|
|
</span>
|
|
</template>
|
|
</v-tooltip>
|
|
|
|
</div>
|
|
<v-menu>
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn variant="plain" icon v-bind="props">
|
|
<v-icon>mdi-dots-vertical</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-list>
|
|
<v-list-item @click="editMessage(message)">
|
|
<v-list-item-title>Edit</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item @click="deleteMessage(message)">
|
|
<v-list-item-title>Delete</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item @click="reportMessage(message)">
|
|
<v-list-item-title>Report</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</div>
|
|
|
|
<div class="font-sans">
|
|
{{ message.value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import {defineProps} from "vue"
|
|
import {time_ago} from "@/internal_time_ago.js";
|
|
|
|
const props = defineProps({
|
|
message: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
|
|
function editMessage(message) {
|
|
// Logic for editing the message
|
|
console.log('Edit message', message);
|
|
}
|
|
|
|
function deleteMessage(message) {
|
|
// Logic for deleting the message
|
|
console.log('Delete message', message);
|
|
}
|
|
|
|
function reportMessage(message) {
|
|
// Logic for reporting the message
|
|
console.log('Report message', message);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content-center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|