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

feat(dashboard): add loading state for report assignment and truncate addresses

Browse Source
This commit is contained in:
reloia
2026-06-15 23:12:40 +02:00 Unverified
parent b6e7cc5b71
commit 107cb61ea4
2 changed files with 50 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ReportTable.vue
+39 -34
View File
@@ -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,52 +40,55 @@ 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>
app/components/dashboard/OperatorDashboard.vue
+10 -3
View File
@@ -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>