77 lines
2.0 KiB
Vue
77 lines
2.0 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.portrait"
|
|
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.createdBy }}</span>
|
|
<span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
|
|
</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>
|
|
export default {
|
|
props: {
|
|
message: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
methods: {
|
|
editMessage(message) {
|
|
// Logic for editing the message
|
|
console.log('Edit message', message);
|
|
},
|
|
deleteMessage(message) {
|
|
// Logic for deleting the message
|
|
console.log('Delete message', message);
|
|
},
|
|
reportMessage(message) {
|
|
// Logic for reporting the message
|
|
console.log('Report message', message);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content-center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|