95 lines
2.8 KiB
Vue
95 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import type { Report } from '~/types/api'
|
|
|
|
type ActionVariant = 'open' | 'manage'
|
|
|
|
interface Props {
|
|
reports: Report[]
|
|
detailBasePath?: string
|
|
actionVariant?: ActionVariant
|
|
actionLabel?: string
|
|
showAssignee?: boolean
|
|
processingIds?: number[]
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
detailBasePath: '/reports',
|
|
actionVariant: 'open',
|
|
actionLabel: 'Open report',
|
|
showAssignee: false,
|
|
processingIds: () => [],
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'take', id: number): void
|
|
}>()
|
|
|
|
const formatDate = (dateString?: string): string => {
|
|
if (!dateString) return '-'
|
|
return new Date(dateString).toLocaleDateString('it-IT', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: '2-digit',
|
|
})
|
|
}
|
|
|
|
const reportHref = (report: Report) => `${props.detailBasePath}/${report.id}`
|
|
</script>
|
|
|
|
<template>
|
|
<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>
|
|
</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 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
|
|
v-if="actionVariant === 'manage'"
|
|
type="button"
|
|
class="btn btn-primary btn-xs"
|
|
:disabled="processingIds.includes(report.id)"
|
|
@click="emit('take', report.id)"
|
|
>
|
|
<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"
|
|
:aria-label="actionLabel"
|
|
:title="actionLabel"
|
|
>
|
|
{{ actionLabel }}
|
|
</NuxtLink>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|