feat: add author and logged-in user (me) as props for Message component
This commit is contained in:
parent
b28920898c
commit
c746f816d8
2 changed files with 7 additions and 5 deletions
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div @click="emitId" v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :data-message-id="props.messageId">
|
||||
<div class="left-column">
|
||||
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" />
|
||||
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />
|
||||
<Icon v-else name="lucide:user" class="message-author-avatar" />
|
||||
</div>
|
||||
<div class="message-data">
|
||||
<div class="message-metadata">
|
||||
<span class="message-author-username" tabindex="0">
|
||||
{{ username }}
|
||||
{{ author?.display_name || author?.username }}
|
||||
</span>
|
||||
<span class="message-date" :title="date.toString()">
|
||||
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
|
||||
|
@ -52,7 +52,7 @@ const dateHidden = ref<boolean>(true);
|
|||
const date = new Date(props.timestamp);
|
||||
|
||||
console.log("message:", props.text);
|
||||
console.log("author:", props.username);
|
||||
console.log("author:", props.author);
|
||||
|
||||
const sanitized = ref<string>();
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
|
||||
format="12" :type="messagesType[message.uuid]"
|
||||
:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
|
||||
:last="i == messages.length - 1" :message-id="message.uuid" />
|
||||
:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me" />
|
||||
</div>
|
||||
<div id="message-box" class="rounded-corners">
|
||||
<form id="message-form" @submit="sendMessage">
|
||||
|
@ -20,11 +20,13 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { MessageResponse, ScrollPosition } from '~/types/interfaces';
|
||||
import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/interfaces';
|
||||
import scrollToBottom from '~/utils/scrollToBottom';
|
||||
|
||||
const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
|
||||
|
||||
const me = await fetchWithApi("/me") as UserResponse;
|
||||
|
||||
const messageTimestamps = ref<Record<string, number>>({});
|
||||
const messagesType = ref<Record<string, "normal" | "grouped">>({});
|
||||
const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue