118 lines
4.5 KiB
Vue
118 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'default'
|
|
})
|
|
|
|
useHead({ title: 'Intervento pubblico - Visione' })
|
|
|
|
const route = useRoute()
|
|
const runtimeConfig = useRuntimeConfig()
|
|
const token = computed(() => String(route.params.token || ''))
|
|
const { getPublicIntervention } = useOperator()
|
|
|
|
const { data, pending, error } = await useAsyncData(
|
|
`public-intervention-${token.value}`,
|
|
() => getPublicIntervention(token.value),
|
|
)
|
|
|
|
const payload = computed<any>(() => data.value || null)
|
|
const report = computed<any>(() => payload.value?.report || payload.value?.summary || payload.value?.intervention || payload.value)
|
|
const media = computed<any[]>(() => payload.value?.media || [])
|
|
const messages = computed<any[]>(() => payload.value?.latest_messages || payload.value?.messages || [])
|
|
|
|
const formatDate = (dateString?: string) => {
|
|
if (!dateString) return '-'
|
|
return new Date(dateString).toLocaleString('it-IT', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container my-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-lg-8">
|
|
<div v-if="pending" class="text-center py-5">
|
|
<div class="spinner-border text-primary" role="status"></div>
|
|
</div>
|
|
|
|
<div v-else-if="error || !report" class="card card-bg border-0 shadow-sm">
|
|
<div class="card-body py-5 text-center">
|
|
<BIIcon name="it-close-circle" size="lg" color="danger" class="mb-3" />
|
|
<h1 class="h4 mb-2">Link non disponibile</h1>
|
|
<p class="text-muted mb-0">Questo link di intervento non è valido, è scaduto oppure è stato revocato.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-else>
|
|
<div class="card card-bg border-0 shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<h1 class="h4 mb-2">Intervento pubblico</h1>
|
|
<p class="text-muted mb-4">Scheda condivisa per team esterno.</p>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-12 col-md-6">
|
|
<small class="text-muted d-block">Segnalazione</small>
|
|
<strong>#{{ report.id || '-' }}</strong>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<small class="text-muted d-block">Categoria</small>
|
|
<strong>{{ report.category_name || '-' }}</strong>
|
|
</div>
|
|
<div class="col-12">
|
|
<small class="text-muted d-block">Indirizzo</small>
|
|
<strong>{{ report.address || '-' }}</strong>
|
|
</div>
|
|
<div class="col-12">
|
|
<small class="text-muted d-block">Descrizione</small>
|
|
<p class="mb-0">{{ report.description || '-' }}</p>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<small class="text-muted d-block">Stato</small>
|
|
<strong>{{ report.status || '-' }}</strong>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<small class="text-muted d-block">Aperta</small>
|
|
<strong>{{ formatDate(report.created_at) }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="media.length > 0" class="card card-bg border-0 shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<h2 class="h6 mb-3">Allegati</h2>
|
|
<div class="row g-2">
|
|
<div v-for="item in media" :key="item.id" class="col-6 col-md-4">
|
|
<img
|
|
v-if="item.media_kind === 'IMAGE'"
|
|
:src="runtimeConfig.public.api + item.url"
|
|
class="img-fluid rounded border"
|
|
:alt="item.original_filename || 'Allegato'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="messages.length > 0" class="card card-bg border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h2 class="h6 mb-3">Ultimi aggiornamenti</h2>
|
|
<ul class="list-unstyled mb-0">
|
|
<li v-for="message in messages" :key="message.id" class="border-bottom py-2">
|
|
<div class="small text-muted mb-1">{{ formatDate(message.created_at) }}</div>
|
|
<div>{{ message.body }}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|