Files
frontend/app/pages/operator/others.vue
T

57 lines
1.5 KiB
Vue

<script setup lang="ts">
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] }
)
</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>
<ReportTable
:reports="reportsRes.reports"
detail-base-path="/operator/reports"
action-label="Apri segnalazione"
/>
<Pagination
v-if="reportsRes.total > perPage"
:current-page="page"
:per-page="perPage"
:total-items="reportsRes.total"
@page-change="page = $event"
/>
</div>
</div>
</template>