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/pages/reports/[id].vue
+22 -57
View File
@@ -6,7 +6,6 @@ definePageMeta({
useHead({ title: 'Dettaglio Segnalazione - Visione' })
const runtimeConfig = useRuntimeConfig()
const route = useRoute()
const { getReportDetail, getMessages, addMessage, addFeedback } = useReports()
const { user } = useAuth()
@@ -29,35 +28,17 @@ const media = computed(() => (reportData.value as any)?.media || [])
const statusHistory = computed(() => (reportData.value as any)?.history || [])
const messages = computed(() => (messagesData.value as any)?.messages || [])
const newMessage = ref('')
const fileInput = ref<HTMLInputElement | null>(null)
const selectedFiles = ref<File[]>([])
const isSubmittingMessage = ref(false)
const isFeedbackOpen = ref(false)
const feedbackRating = ref(5)
const feedbackComment = ref('')
const isSubmittingFeedback = ref(false)
const selectedMediaIndex = ref(0)
const isGalleryOpen = ref(false)
const handleFileSelect = (event: Event) => {
const target = event.target as HTMLInputElement
if (target.files) {
selectedFiles.value = Array.from(target.files)
}
}
const handleSendMessage = async () => {
if (!newMessage.value.trim() && selectedFiles.value.length === 0) return
const handleSendMessage = async (messageText: string, files: File[]) => {
isSubmittingMessage.value = true
try {
await addMessage(reportId, { body: newMessage.value })
newMessage.value = ''
selectedFiles.value = []
if (fileInput.value) fileInput.value.value = ''
await addMessage(reportId, { body: messageText })
await refreshMessages()
} catch (error) {
@@ -86,7 +67,6 @@ const handleSubmitFeedback = async () => {
}
const isOwner = computed(() => report.value?.user_id === user.value?.id)
const canFeedback = computed(() => report.value?.status === 'RESOLVED')
const statusMeta: Record<string, { label: string; tone: string }> = {
@@ -118,7 +98,7 @@ const formatDate = (dateString: string): string => {
<div class="col-12 col-lg-8">
<div class="report-hero-meta mb-2">
<span class="report-id">Segnalazione #{{ report.id }}</span>
<StatusBadge :status="report.status" />
<StatusBadge :status="report.status"/>
</div>
<h1 class="h3 font-weight-bold mb-2">{{ report.category_name }}</h1>
<p class="mb-0 report-hero-address">{{ report.address }}</p>
@@ -145,7 +125,7 @@ const formatDate = (dateString: string): string => {
<div class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<div class="report-section-head mb-3">
<BIIcon name="it-map-marker-circle" size="sm" color="primary" class="me-2" />
<BIIcon class="me-2" color="primary" name="it-map-marker-circle" size="sm"/>
<h2 class="h6 mb-0">Posizione e dettagli</h2>
</div>
<dl class="report-detail-grid mb-0">
@@ -177,16 +157,19 @@ const formatDate = (dateString: string): string => {
<div v-if="media.length > 0" class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<div class="report-section-head mb-3">
<BIIcon name="it-camera" size="sm" color="primary" class="me-2" />
<BIIcon class="me-2" color="primary" name="it-camera" size="sm"/>
<h2 class="h6 mb-0">Allegati ({{ media.length }})</h2>
</div>
<div class="row g-3">
<div v-for="(m, idx) in media" :key="m.id" class="col-6 col-md-4 mb-3">
<div v-if="m.media_kind === 'IMAGE'" class="ratio ratio-1x1 bg-light rounded overflow-hidden report-media-frame">
<img :src="runtimeConfig.public.api + m.url" :alt="`Allegato ${Number(idx) + 1}`" class="object-fit-cover" />
<div v-if="m.media_kind === 'IMAGE'"
class="ratio ratio-1x1 bg-light rounded overflow-hidden report-media-frame">
<img :alt="`Allegato ${Number(idx) + 1}`" :src="runtimeConfig.public.api + m.url"
class="object-fit-cover"/>
</div>
<div v-else class="ratio ratio-1x1 bg-dark rounded d-flex align-items-center justify-content-center report-media-frame">
<BIIcon name="it-video" size="xl" color="white" />
<div v-else
class="ratio ratio-1x1 bg-dark rounded d-flex align-items-center justify-content-center report-media-frame">
<BIIcon color="white" name="it-video" size="xl"/>
</div>
</div>
</div>
@@ -201,9 +184,9 @@ const formatDate = (dateString: string): string => {
<li v-for="item in statusHistory" :key="item.id" class="mb-3 border-start border-primary border-3 ps-3">
<small class="text-muted d-block">{{ formatDate(item.created_at) }}</small>
<div class="d-flex align-items-center gap-2 mt-1">
<StatusBadge :status="item.old_status" />
<BIIcon name="it-arrow-right" size="xs" />
<StatusBadge :status="item.new_status" />
<StatusBadge :status="item.old_status"/>
<BIIcon name="it-arrow-right" size="xs"/>
<StatusBadge :status="item.new_status"/>
</div>
<div v-if="item.note" class="small mt-1 bg-light p-1 rounded">{{ item.note }}</div>
</li>
@@ -216,17 +199,18 @@ const formatDate = (dateString: string): string => {
<div class="report-chat-header mb-3">
<div>
<div class="report-section-head mb-1">
<BIIcon name="it-comment" size="sm" color="primary" class="me-2" />
<BIIcon class="me-2" color="primary" name="it-comment" size="sm"/>
<h2 class="h6 mb-0">Chat segnalazione</h2>
</div>
<p class="text-muted small mb-0">Usa chat per chiarimenti, aggiornamenti operativi e richieste rapide.</p>
<p class="text-muted small mb-0">Usa chat per chiarimenti, aggiornamenti operativi e richieste
rapide.</p>
</div>
<span class="badge bg-light text-dark border">{{ messages.length }} messaggi</span>
</div>
<MessageList :messages="messages" />
<MessageList :messages="messages"/>
<MessageComposer @send=handleSendMessage />
<MessageComposer @send="handleSendMessage"/>
</div>
</div>
</div>
@@ -291,7 +275,8 @@ const formatDate = (dateString: string): string => {
</div>
<div class="d-grid gap-2">
<button type="button" class="btn btn-primary" @click="handleSubmitFeedback" :disabled="isSubmittingFeedback">
<button :disabled="isSubmittingFeedback" class="btn btn-primary" type="button"
@click="handleSubmitFeedback">
<span v-if="isSubmittingFeedback" class="spinner-border spinner-border-sm me-2"></span>
Invia
</button>
@@ -414,26 +399,6 @@ const formatDate = (dateString: string): string => {
justify-content: space-between;
}
.chat-textarea {
resize: none !important;
height: 48px;
min-height: 48px;
overflow-y: auto;
padding-top: 12px;
padding-bottom: 12px;
border-radius: 6px;
}
.btn-square {
width: 48px;
height: 48px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
.ratio {
position: relative;
display: block;