85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import type { Report } from '~/types/api'
|
|
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
auth: { role: 'OPERATOR' }
|
|
})
|
|
|
|
useHead({ title: 'Gestite da Altri - Operatore' })
|
|
|
|
const { getOtherOperatorReports } = useOperator()
|
|
|
|
const page = ref(1)
|
|
const perPage = ref(10)
|
|
|
|
const { data: reportsRes, pending } = useAsyncData(
|
|
'operator-other-reports',
|
|
() => getOtherOperatorReports({ page: page.value, per_page: perPage.value }),
|
|
{ watch: [page] }
|
|
)
|
|
|
|
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">Gestite da altri Operatori</h1>
|
|
<div>
|
|
<NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Dashboard</NuxtLink>
|
|
<NuxtLink to="/operator" class="btn btn-outline-primary btn-sm">Coda Open</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 gestite da altri.
|
|
</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">Dettagli</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">
|
|
<NuxtLink :to="`/operator/reports/${report.id}`" class="btn btn-sm btn-outline-secondary">
|
|
Vedi
|
|
</NuxtLink>
|
|
</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>
|