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

feat: refactor operator dashboard and report handling, add public intervention page

Browse Source
This commit is contained in:
gabdevele
2026-06-18 17:52:57 +02:00 Unverified
parent fce0440a41
commit 2c907044a3
9 changed files with 335 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/operator/assigned.vue
+1 -1
View File
@@ -25,7 +25,7 @@ const { data: reportsRes, pending } = useAsyncData(
<h1 class="h3 font-weight-bold mb-0">Le Mie Assegnazioni</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>
<NuxtLink to="/operator" class="btn btn-outline-primary btn-sm">Segnalazioni disponibili</NuxtLink>
</div>
</div>
app/pages/operator/index.vue
+5 -18
View File
@@ -6,34 +6,22 @@ definePageMeta({
useHead({ title: 'Segnalazioni Aperte - Operatore' })
const { getOpenReports, takeReport } = useOperator()
const { getOpenReports } = useOperator()
const page = ref(1)
const perPage = ref(10)
const { data: reportsRes, pending, refresh } = useAsyncData(
const { data: reportsRes, pending } = 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) {
await refresh()
}
} catch (err) {
console.error('Failed to take report', err)
}
}
</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>
<h1 class="h3 font-weight-bold mb-0">Segnalazioni da valutare</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>
@@ -45,15 +33,14 @@ const handleTakeReport = async (id: number) => {
</div>
<div v-else-if="!reportsRes?.reports || reportsRes.reports.length === 0" class="alert alert-info">
Non ci sono segnalazioni aperte in questo momento.
Non ci sono segnalazioni disponibili in questo momento.
</div>
<div v-else>
<ReportTable
:reports="reportsRes.reports"
action-variant="manage"
detail-base-path="/operator/reports"
@take="handleTakeReport"
action-label="Visualizza"
/>
<Pagination
app/pages/operator/others.vue
+1 -1
View File
@@ -25,7 +25,7 @@ const { data: reportsRes, pending } = useAsyncData(
<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>
<NuxtLink to="/operator" class="btn btn-outline-primary btn-sm">Segnalazioni disponibili</NuxtLink>
</div>
</div>
app/pages/operator/reports/[id].vue
+179 -24
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import type { Message, ReportStatus } from '~/types/api'
import type { FlagRequest, Message, Report, ReportStatus } from '~/types/api'
definePageMeta({
middleware: 'auth',
@@ -16,8 +16,16 @@ if (!reportId) {
navigateTo('/operator')
}
const { getReportDetail, getMessages, addMessage, flagMessage } = useReports()
const { getInterventionSummary, updateReportStatus, assignTeam, getTeams, createInterventionLink, revokeInterventionLink } = useOperator()
const { getReportDetail, getMessages, addMessage, flagMessage, flagReport } = useReports()
const {
takeReport,
getInterventionSummary,
updateReportStatus,
assignTeam,
getTeams,
createInterventionLink,
revokeInterventionLink
} = useOperator()
const { user } = useAuth()
const { data: reportData, refresh: refreshReport } = await useAsyncData(`op-report-${reportId}`, () => getReportDetail(reportId))
@@ -25,14 +33,20 @@ const { data: messagesData, refresh: refreshMessages } = await useAsyncData(`op-
const { data: summaryData, refresh: refreshSummary } = await useAsyncData(`op-summary-${reportId}`, () => getInterventionSummary(reportId))
const { data: teamsData } = await useAsyncData('operator-teams', () => getTeams())
const report = computed(() => (reportData.value as any)?.report)
const report = computed<Report | undefined>(() => (reportData.value as any)?.report)
const media = computed(() => (reportData.value as any)?.media || [])
const statusHistory = computed(() => (reportData.value as any)?.history || [])
const messages = computed(() => (messagesData.value as any)?.messages || [])
const messages = computed<Message[]>(() => (messagesData.value as any)?.messages || [])
const summary = computed(() => (summaryData.value as any)?.summary)
const summaryMedia = computed(() => (summaryData.value as any)?.media || [])
const teams = computed(() => teamsData.value?.teams || [])
const currentUserId = computed(() => user.value?.id ?? null)
const isTakenByCurrentOperator = computed(() => report.value?.assigned_operator_id === currentUserId.value)
const isOpenAndUnassigned = computed(() => report.value?.status === 'OPEN' && !report.value?.assigned_operator_id)
const isReadOnlyPreview = computed(() => !isTakenByCurrentOperator.value)
const canTakeReport = computed(() => isOpenAndUnassigned.value && !isTakenByCurrentOperator.value)
const statusMeta: Record<string, string> = {
OPEN: 'Aperta',
UNDER_REVIEW: 'In revisione',
@@ -70,26 +84,30 @@ const selectableStatuses = computed(() => {
})
const canCreateInterventionLink = computed(() => {
if (isReadOnlyPreview.value) return false
if (summary.value?.assignments && Array.isArray(summary.value.assignments)) {
return summary.value.assignments.some((a: any) => !a.ended_at)
}
return ['ASSIGNED', 'IN_PROGRESS'].includes(report.value?.status)
return ['ASSIGNED', 'IN_PROGRESS'].includes(report.value?.status || '')
})
const newStatus = ref<ReportStatus>('IN_PROGRESS')
const statusNote = ref('')
const isUpdatingStatus = ref(false)
const isTakingReport = ref(false)
const isAssignModalOpen = ref(false)
const selectedTeamId = ref<number | null>(null)
const isAssigning = ref(false)
const interventionLink = ref('')
const interventionLinkExpiresAt = ref('')
const interventionPublicLink = ref('')
const isGeneratingInterventionLink = ref(false)
const isRevokingInterventionLink = ref(false)
const interventionLinkError = ref('')
const interventionLinkSuccess = ref('')
const isRevokeInterventionModalOpen = ref(false)
const copyFeedback = ref('')
const isSubmittingMessage = ref(false)
const flaggedMessageIds = ref<number[]>([])
@@ -98,6 +116,15 @@ const messageToFlag = ref<Message | null>(null)
const isFlaggingMessage = ref(false)
const isFlaggingMessageId = computed(() => isFlaggingMessage.value ? messageToFlag.value?.id : null)
const isFlagReportModalOpen = ref(false)
const isFlaggingReport = ref(false)
const reportFlagError = ref('')
const reportFlagSuccess = ref('')
const reportFlagForm = reactive<FlagRequest>({
reason: '',
details: ''
})
watch(() => report.value?.status, (val) => {
if (val) {
const allowed = statusTransitions[val] || []
@@ -107,7 +134,44 @@ watch(() => report.value?.status, (val) => {
}
}, { immediate: true })
const resetReportFlagForm = () => {
reportFlagForm.reason = ''
reportFlagForm.details = ''
reportFlagError.value = ''
}
const setPublicInterventionLink = (url?: string) => {
if (!url) {
interventionPublicLink.value = ''
return
}
try {
const rawUrl = new URL(url, runtimeConfig.public.api)
interventionPublicLink.value = `${runtimeConfig.public.url}${rawUrl.pathname.replace(/^\/api\/v1/, '')}`
} catch {
interventionPublicLink.value = url
}
}
const handleTakeReport = async () => {
if (!canTakeReport.value || !report.value) return
isTakingReport.value = true
try {
const res = await takeReport(report.value.id)
if (res.ok) {
await Promise.all([refreshReport(), refreshSummary()])
}
} catch (e) {
console.error('Failed to take report', e)
} finally {
isTakingReport.value = false
}
}
const handleStatusUpdate = async () => {
if (isReadOnlyPreview.value) return
isUpdatingStatus.value = true
try {
const res = await updateReportStatus(reportId, {
@@ -126,7 +190,7 @@ const handleStatusUpdate = async () => {
}
const handleAssignTeam = async () => {
if (isAdmin(user.value?.role)) return
if (isReadOnlyPreview.value) return
if (!selectedTeamId.value) return
isAssigning.value = true
@@ -147,15 +211,20 @@ const handleAssignTeam = async () => {
}
const copyInterventionLink = async () => {
if (!interventionLink.value || !navigator?.clipboard) return
if (!interventionPublicLink.value || !navigator?.clipboard) return
try {
await navigator.clipboard.writeText(interventionLink.value)
await navigator.clipboard.writeText(interventionPublicLink.value)
copyFeedback.value = 'Copiato'
interventionLinkSuccess.value = 'Link copiato negli appunti.'
interventionLinkError.value = ''
setTimeout(() => {
copyFeedback.value = ''
}, 2000)
} catch {
interventionLinkError.value = 'Copia automatica non riuscita.'
interventionLinkSuccess.value = ''
copyFeedback.value = ''
}
}
@@ -170,6 +239,7 @@ const handleCreateInterventionLink = async () => {
if (res.ok) {
interventionLink.value = res.url
interventionLinkExpiresAt.value = res.expires_at
setPublicInterventionLink(res.url)
interventionLinkSuccess.value = 'Link intervento generato.'
}
} catch (e: any) {
@@ -202,6 +272,7 @@ const handleRevokeInterventionLink = async () => {
if (res.ok) {
interventionLink.value = ''
interventionLinkExpiresAt.value = ''
interventionPublicLink.value = ''
interventionLinkSuccess.value = 'Link intervento revocato.'
isRevokeInterventionModalOpen.value = false
}
@@ -214,6 +285,7 @@ const handleRevokeInterventionLink = async () => {
}
const handleSendMessage = async (msgText: string, files: File[]) => {
if (isReadOnlyPreview.value) return
if (!msgText.trim() && files.length === 0) return
isSubmittingMessage.value = true
try {
@@ -228,7 +300,6 @@ const handleSendMessage = async (msgText: string, files: File[]) => {
const canFlagMessage = (message: Message) => {
if (!user.value) return false
if (isAdmin(user.value?.role)) return false
const isCitizenMessage = message.user_id !== user.value.id && message.user_id === report.value?.user_id
const isAlreadyFlagged = flaggedMessageIds.value.includes(message.id)
@@ -252,7 +323,6 @@ const executeFlagMessage = async () => {
})
flaggedMessageIds.value.push(messageToFlag.value.id)
isFlagMessageModalOpen.value = false
messageToFlag.value = null
} catch (e) {
@@ -262,6 +332,33 @@ const executeFlagMessage = async () => {
}
}
const executeFlagReport = async () => {
if (!reportFlagForm.reason.trim()) {
reportFlagError.value = 'Inserisci un motivo.'
return
}
isFlaggingReport.value = true
reportFlagError.value = ''
reportFlagSuccess.value = ''
try {
await flagReport(reportId, {
reason: reportFlagForm.reason.trim(),
details: reportFlagForm.details.trim() || undefined
})
reportFlagSuccess.value = 'Segnalazione inviata alla moderazione.'
isFlagReportModalOpen.value = false
resetReportFlagForm()
} catch (e: any) {
console.error('Failed to flag report', e)
reportFlagError.value = e?.data?.message || 'Invio segnalazione non riuscito.'
} finally {
isFlaggingReport.value = false
}
}
const formatDate = (dateString: string) => {
if (!dateString) return '-'
return new Date(dateString).toLocaleDateString('it-IT', {
@@ -288,14 +385,15 @@ const formattedInterventionLinkExpiry = computed(() =>
<div v-if="report">
<div class="report-hero py-4">
<div class="container">
<NuxtLink to="/operator/assigned" class="btn btn-sm btn-link text-decoration-none ps-0 mb-2">
&larr; Torna alle assegnazioni
<NuxtLink :to="isTakenByCurrentOperator ? '/operator/assigned' : '/operator'" class="btn btn-sm btn-link text-decoration-none ps-0 mb-2">
&larr; Torna all'elenco
</NuxtLink>
<div class="row g-3 align-items-end">
<div class="col-12 col-lg-8">
<div class="report-hero-meta mb-2">
<span class="report-id">Intervento #{{ reportId }}</span>
<span class="report-id">Segnalazione #{{ reportId }}</span>
<StatusBadge :status="report.status" />
<span v-if="isReadOnlyPreview" class="badge bg-secondary">Sola lettura</span>
</div>
<h1 class="h3 font-weight-bold mb-2">{{ report.category_name }}</h1>
<p class="mb-0 report-hero-address">{{ report.address }}</p>
@@ -308,11 +406,15 @@ const formattedInterventionLinkExpiry = computed(() =>
</div>
<div class="hero-stat">
<span class="hero-stat-label">Aperta</span>
<strong>{{ formatDate(report.created_at) }}</strong>
<strong>{{ formatDate(report.created_at || '') }}</strong>
</div>
</div>
</div>
</div>
<div v-if="isReadOnlyPreview" class="alert alert-info mt-3 mb-0">
Stai visualizzando segnalazione in sola lettura. Prendila in carico per aggiornare stato, assegnare team o scrivere al cittadino.
</div>
</div>
</div>
@@ -357,6 +459,20 @@ const formattedInterventionLinkExpiry = computed(() =>
</div>
</div>
</div>
<div class="mt-4 d-flex flex-wrap gap-2">
<button type="button" class="btn btn-outline-warning btn-sm" @click="isFlagReportModalOpen = true">
Segnala alla moderazione
</button>
<button v-if="canTakeReport" type="button" class="btn btn-primary btn-sm" :disabled="isTakingReport" @click="handleTakeReport">
<span v-if="isTakingReport" class="spinner-border spinner-border-sm me-2"></span>
Prendi in carico
</button>
</div>
<div v-if="reportFlagSuccess" class="alert alert-success mt-3 mb-0">
{{ reportFlagSuccess }}
</div>
</div>
</div>
@@ -378,7 +494,10 @@ const formattedInterventionLinkExpiry = computed(() =>
:is-flagging-message-id="isFlaggingMessageId"
@flag="handleFlagMessage"
/>
<MessageComposer @send="handleSendMessage" />
<div v-if="isReadOnlyPreview" class="alert alert-secondary mt-3 mb-0 small">
Messaggistica disponibile dopo la presa in carico.
</div>
<MessageComposer v-else @send="handleSendMessage" />
</div>
</div>
</div>
@@ -409,7 +528,7 @@ const formattedInterventionLinkExpiry = computed(() =>
</p>
</div>
</div>
<div v-if="!isAdmin(user?.role)" class="card-body pt-0">
<div class="card-body pt-0" v-if="!isReadOnlyPreview">
<button class="btn btn-outline-primary w-100" @click="isAssignModalOpen = true" :disabled="teams.length === 0">
Assegna team
</button>
@@ -428,18 +547,18 @@ const formattedInterventionLinkExpiry = computed(() =>
{{ interventionLinkSuccess }}
</div>
<template v-if="interventionLink">
<template v-if="interventionPublicLink">
<label class="form-label">URL attivo</label>
<div class="input-group mb-2">
<input type="text" class="form-control" :value="interventionLink" readonly />
<input type="text" class="form-control" :value="interventionPublicLink" readonly />
<button type="button" class="btn btn-outline-primary" @click="copyInterventionLink">
Copia
{{ copyFeedback || 'Copia' }}
</button>
</div>
<p class="small text-muted mb-3">
Scade: {{ formattedInterventionLinkExpiry || '-' }}
</p>
<div class="d-grid gap-2">
<div class="d-grid gap-2" v-if="!isReadOnlyPreview">
<button type="button" class="btn btn-outline-primary" :disabled="isGeneratingInterventionLink || !canCreateInterventionLink" @click="handleCreateInterventionLink">
<span v-if="isGeneratingInterventionLink" class="spinner-border spinner-border-sm me-2"></span>
Rigenera link
@@ -463,7 +582,7 @@ const formattedInterventionLinkExpiry = computed(() =>
</button>
<div v-if="!canCreateInterventionLink" class="text-danger small mt-2">
È necessaria un'assegnazione in corso per generare o rigenerare questo link.
È necessaria una presa in carico e un'assegnazione in corso per generare questo link.
</div>
</div>
</div>
@@ -472,7 +591,13 @@ const formattedInterventionLinkExpiry = computed(() =>
<div class="card-body">
<h2 class="h6 mb-3">Aggiorna stato</h2>
<template v-if="selectableStatuses.length > 0">
<template v-if="isReadOnlyPreview">
<div class="alert alert-secondary mb-0 small">
Aggiornamento stato disponibile dopo la presa in carico.
</div>
</template>
<template v-else-if="selectableStatuses.length > 0">
<form @submit.prevent="handleStatusUpdate">
<div class="mb-3">
<label class="form-label">Nuovo Stato</label>
@@ -559,6 +684,36 @@ const formattedInterventionLinkExpiry = computed(() =>
</div>
</div>
<div v-if="isFlagReportModalOpen" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
<div v-if="isFlagReportModalOpen" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Segnala segnalazione alla moderazione</h5>
<button type="button" class="btn-close" :disabled="isFlaggingReport" @click="isFlagReportModalOpen = false; resetReportFlagForm()"></button>
</div>
<div class="modal-body">
<div v-if="reportFlagError" class="alert alert-danger py-2">{{ reportFlagError }}</div>
<div class="mb-3">
<label class="form-label">Motivo</label>
<input v-model="reportFlagForm.reason" type="text" class="form-control" maxlength="200" />
</div>
<div>
<label class="form-label">Dettagli</label>
<textarea v-model="reportFlagForm.details" class="form-control" rows="4" placeholder="Dettagli aggiuntivi opzionali"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" :disabled="isFlaggingReport" @click="isFlagReportModalOpen = false; resetReportFlagForm()">Annulla</button>
<button type="button" class="btn btn-warning" :disabled="isFlaggingReport || !reportFlagForm.reason.trim()" @click="executeFlagReport">
<span v-if="isFlaggingReport" class="spinner-border spinner-border-sm me-2"></span>
Invia a moderazione
</button>
</div>
</div>
</div>
</div>
<ConfirmModal
:open="isRevokeInterventionModalOpen"
title="Revoca link intervento"
@@ -699,4 +854,4 @@ const formattedInterventionLinkExpiry = computed(() =>
position: static;
}
}
</style>
</style>