From b72a2ef365e9f2b1ce3848e296ce24ee9d85d39a Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Wed, 17 Jun 2026 23:31:10 +0200
Subject: [PATCH] fix: chat in reports/[id]

---
 app/components/MessageList.vue  | 38 +++++++++-------
 app/pages/operator/assigned.vue |  6 +--
 app/pages/reports/[id].vue      | 79 +++++++++------------------------
 3 files changed, 46 insertions(+), 77 deletions(-)

diff --git a/app/components/MessageList.vue b/app/components/MessageList.vue
index 722df81..1df5adc 100644
--- a/app/components/MessageList.vue
+++ b/app/components/MessageList.vue
@@ -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;
 }
diff --git a/app/pages/operator/assigned.vue b/app/pages/operator/assigned.vue
index b07b73f..aed54b6 100644
--- a/app/pages/operator/assigned.vue
+++ b/app/pages/operator/assigned.vue
@@ -44,11 +44,11 @@ const { data: reportsRes, pending } = useAsyncData(
         action-label="Apri segnalazione"
       />
 
-      <Pagination 
-        v-if="reportsRes.total > perPage"
+      <Pagination
+          v-if="(reportsRes.total || 0) > perPage"
         :current-page="page"
         :per-page="perPage"
-        :total-items="reportsRes.total"
+          :total-items="reportsRes.total!"
         @page-change="page = $event"
       />
     </div>
diff --git a/app/pages/reports/[id].vue b/app/pages/reports/[id].vue
index aab8693..3e0c298 100644
--- a/app/pages/reports/[id].vue
+++ b/app/pages/reports/[id].vue
@@ -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;