From 107cb61ea43ca9941796fc27ada21adf5481caa6 Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Mon, 15 Jun 2026 23:12:40 +0200
Subject: [PATCH] feat(dashboard): add loading state for report assignment and
 truncate addresses

---
 app/components/ReportTable.vue                | 75 ++++++++++---------
 .../dashboard/OperatorDashboard.vue           | 13 +++-
 2 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/app/components/ReportTable.vue b/app/components/ReportTable.vue
index 236c1be..3c5e41d 100644
--- a/app/components/ReportTable.vue
+++ b/app/components/ReportTable.vue
@@ -9,6 +9,7 @@ interface Props {
   actionVariant?: ActionVariant
   actionLabel?: string
   showAssignee?: boolean
+  processingIds?: number[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -16,6 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
   actionVariant: 'open',
   actionLabel: 'Open report',
   showAssignee: false,
+  processingIds: () => [],
 })
 
 const emit = defineEmits<{
@@ -38,53 +40,56 @@ const reportHref = (report: Report) => `${props.detailBasePath}/${report.id}`
   <div class="table-responsive report-table-wrapper">
     <table class="table table-hover report-table mb-0">
       <thead>
-        <tr>
-          <th scope="col">ID</th>
-          <th scope="col">Categoria</th>
-          <th scope="col">Indirizzo</th>
-          <th scope="col">Stato</th>
-          <th v-if="showAssignee" scope="col">Operatore</th>
-          <th scope="col">Creazione</th>
-          <th scope="col" class="text-end">Azioni</th>
-        </tr>
+      <tr>
+        <th scope="col">ID</th>
+        <th scope="col">Categoria</th>
+        <th scope="col">Indirizzo</th>
+        <th scope="col">Stato</th>
+        <th v-if="showAssignee" scope="col">Operatore</th>
+        <th scope="col">Creazione</th>
+        <th scope="col" class="text-end">Azioni</th>
+      </tr>
       </thead>
       <tbody>
-        <tr v-for="report in reports" :key="report.id" class="align-middle">
-          <td class="report-table-id">#{{ report.id }}</td>
-          <td class="text-nowrap">{{ report.category_name || '-' }}</td>
-          <td>
-            <span class="report-address" :title="report.address">
+      <tr v-for="report in reports" :key="report.id" class="align-middle">
+        <td class="report-table-id">#{{ report.id }}</td>
+        <td class="text-nowrap">{{ report.category_name || '-' }}</td>
+        <td>
+          <!-- Added inline-block, text-truncate (for ellipsis), and max-width 10ch -->
+          <span class="report-address d-inline-block text-truncate align-middle" style="max-width: 10ch;" :title="report.address">
               {{ report.address || '-' }}
             </span>
-          </td>
-          <td>
-            <StatusBadge :status="report.status" />
-          </td>
-          <td v-if="showAssignee" class="text-muted">
-            {{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}
-          </td>
-          <td class="text-muted text-nowrap">{{ formatDate(report.created_at) }}</td>
-          <td class="text-end">
-            <button
+        </td>
+        <td>
+          <StatusBadge :status="report.status" />
+        </td>
+        <td v-if="showAssignee" class="text-muted">
+          {{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}
+        </td>
+        <td class="text-muted text-nowrap">{{ formatDate(report.created_at) }}</td>
+        <td class="text-end">
+          <button
               v-if="actionVariant === 'manage'"
               type="button"
               class="btn btn-primary btn-xs"
+              :disabled="processingIds.includes(report.id)"
               @click="emit('take', report.id)"
-            >
-              Prendi in carico
-            </button>
-            <NuxtLink
+          >
+            <span v-if="processingIds.includes(report.id)" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+            Prendi in carico
+          </button>
+          <NuxtLink
               v-else
               :to="reportHref(report)"
-              class="btn btn-outline-primary btn-xs btn-icon"
+              class="btn btn-outline-primary btn-xs btn-icon d-inline-flex align-items-center justify-content-center"
               :aria-label="actionLabel"
               :title="actionLabel"
-            >
-              <BIIcon name="it-arrow-right" size="xs" />
-            </NuxtLink>
-          </td>
-        </tr>
+          >
+            <BIIcon name="it-arrow-right" size="xs" />
+          </NuxtLink>
+        </td>
+      </tr>
       </tbody>
     </table>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/app/components/dashboard/OperatorDashboard.vue b/app/components/dashboard/OperatorDashboard.vue
index 020ce89..3ea9c2a 100644
--- a/app/components/dashboard/OperatorDashboard.vue
+++ b/app/components/dashboard/OperatorDashboard.vue
@@ -4,10 +4,17 @@ const { getOpenReports, getAssignedReports, takeReport } = useOperator()
 const { data: openReportsRes, refresh: refreshOpen } = useAsyncData('open-reports', () => getOpenReports({ per_page: 5 }))
 const { data: assignedReportsRes, refresh: refreshAssigned } = useAsyncData('assigned-reports', () => getAssignedReports({ per_page: 5 }))
 
+const processingIds = ref<number[]>([])
+
 const handleTakeReport = async (id: number) => {
-  const res = await takeReport(id)
-  if (res.ok) {
-    await Promise.all([refreshOpen(), refreshAssigned()])
+  processingIds.value.push(id)
+  try {
+    const res = await takeReport(id)
+    if (res.ok) {
+      await Promise.all([refreshOpen(), refreshAssigned()])
+    }
+  } finally {
+    processingIds.value = processingIds.value.filter(pid => pid !== id)
   }
 }
 </script>