SnitchItaly/frontend
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: chat in reports/[id]

Browse Source
This commit is contained in:
reloia
2026-06-17 23:31:10 +02:00 Unverified
parent edf7b4b329
commit b72a2ef365
3 changed files with 46 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/MessageList.vue
+21 -17
View File
@@ -38,7 +38,7 @@ const auth = useAuth()
const isCurrentUser = (userId: number): boolean => auth.user.value?.id === userId
const senderInitials = (msg: Message): string =>
`${msg.first_name?.[0] || ''}${msg.last_name?.[0] || ''}`.toUpperCase() || '?'
`${msg.first_name?.[0] || ''}${msg.last_name?.[0] || ''}`.toUpperCase() || '?'
</script>
<template>
@@ -50,27 +50,27 @@ const senderInitials = (msg: Message): string =>
</div>
<div v-else-if="messages.length === 0" class="message-empty-state" role="alert">
<BIIcon name="it-comment" size="lg" color="primary" class="mb-2" />
<BIIcon class="mb-2" color="primary" name="it-comment" size="lg"/>
<strong class="d-block mb-1">Nessun messaggio</strong>
<span>Usa chat per aggiornamenti rapidi tra cittadino e operatori.</span>
</div>
<div v-else class="messages-container">
<div
v-for="msg in messages"
:key="msg.id"
class="message-row"
:class="{ 'is-current-user': isCurrentUser(msg.user_id) }"
v-for="msg in messages"
:key="msg.id"
:class="{ 'is-current-user': isCurrentUser(msg.user_id) }"
class="message-row"
>
<div v-if="!isCurrentUser(msg.user_id)" class="message-avatar" aria-hidden="true">
{{ senderInitials(msg) }}
</div>
<div
class="message-bubble-content"
:class="{
:class="{
'message-bubble-outgoing': isCurrentUser(msg.user_id),
'message-bubble-incoming': !isCurrentUser(msg.user_id)
}"
class="message-bubble-content"
>
<div class="message-meta">
<span v-if="!isCurrentUser(msg.user_id)" class="message-author">
@@ -90,15 +90,16 @@ const senderInitials = (msg: Message): string =>
{{ msg.body }}
</div>
<div v-if="canFlagMessage(msg)" class="message-actions">
<div v-if="canFlagMessage?.(msg)" class="message-actions">
<button
type="button"
class="btn btn-link btn-xs px-0"
:disabled="isFlaggingMessageId === msg.id"
@click="emit('flag', msg)"
:disabled="isFlaggingMessageId === msg.id"
class="btn btn-link btn-xs px-0"
type="button"
@click="emit('flag', msg)"
>
<span v-if="isFlaggingMessageId === msg.id" class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
<BIIcon v-else name="it-flag" size="xs" class="me-1" />
<span v-if="isFlaggingMessageId === msg.id" aria-hidden="true"
class="spinner-border spinner-border-sm me-1"></span>
<BIIcon v-else class="me-1" name="it-flag" size="xs"/>
Segnala messaggio
</button>
</div>
@@ -112,9 +113,12 @@ const senderInitials = (msg: Message): string =>
.message-list {
border: 1px solid #d9e3ee;
border-radius: 4px;
max-height: 34rem;
height: 34rem;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
}
.messages-container {
@@ -129,7 +133,7 @@ const senderInitials = (msg: Message): string =>
display: flex;
flex-direction: column;
justify-content: center;
min-height: 14rem;
flex: 1;
padding: 2rem 1rem;
text-align: center;
}