97 lines
3.1 KiB
Vue
97 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import type { Report } from '~/types/api'
|
|
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
auth: { role: 'OPERATOR' }
|
|
})
|
|
|
|
useHead({ title: 'Segnalazioni Aperte - Operatore' })
|
|
|
|
const { getOpenReports, takeReport } = useOperator()
|
|
|
|
const page = ref(1)
|
|
const perPage = ref(10)
|
|
|
|
const { data: reportsRes, pending, refresh } = useAsyncData(
|
|
'operator-open-reports',
|
|
() => getOpenReports({ page: page.value, per_page: perPage.value }),
|
|
{ watch: [page] }
|
|
)
|
|
|
|
const handleTakeReport = async (id: number) => {
|
|
try {
|
|
const res = await takeReport(id)
|
|
if (res.ok) {
|
|
// Optimistic update or refresh
|
|
await refresh()
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to take report', err)
|
|
}
|
|
}
|
|
|
|
const formatDate = (dateString: string) => new Date(dateString).toLocaleDateString('it-IT')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container my-5">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="h3 font-weight-bold mb-0">Segnalazioni da prendere in carico (OPEN)</h1>
|
|
<div>
|
|
<NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Dashboard</NuxtLink>
|
|
<NuxtLink to="/operator/assigned" class="btn btn-outline-primary btn-sm">Le mie assegnazioni</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="pending" class="text-center py-5">
|
|
<div class="spinner-border text-primary" role="status"></div>
|
|
</div>
|
|
|
|
<div v-else-if="!reportsRes?.reports || reportsRes.reports.length === 0" class="alert alert-info">
|
|
Non ci sono segnalazioni aperte in questo momento.
|
|
</div>
|
|
|
|
<div v-else>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover border-bottom">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col" class="small">#ID</th>
|
|
<th scope="col" class="small">Categoria</th>
|
|
<th scope="col" class="small">Indirizzo</th>
|
|
<th scope="col" class="small">Stato</th>
|
|
<th scope="col" class="small">Creata il</th>
|
|
<th scope="col" class="text-center small">Azioni</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="report in reportsRes.reports" :key="report.id" class="align-middle">
|
|
<td class="small font-weight-semibold">#{{ report.id }}</td>
|
|
<td class="small">{{ report.category_name }}</td>
|
|
<td class="small">{{ report.address }}</td>
|
|
<td class="small">
|
|
<StatusBadge :status="report.status" />
|
|
</td>
|
|
<td class="small text-muted">{{ formatDate(report.created_at) }}</td>
|
|
<td class="text-center">
|
|
<button class="btn btn-primary btn-sm" @click="handleTakeReport(report.id)">
|
|
Prendi in carico
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<Pagination
|
|
v-if="reportsRes.total > perPage"
|
|
:current-page="page"
|
|
:per-page="perPage"
|
|
:total-items="reportsRes.total"
|
|
@page-change="page = $event"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|