103 lines
3.2 KiB
Vue
103 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import type { CreateReportRequest } from '~/types/api'
|
|
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
})
|
|
|
|
useHead({ title: 'Nuova segnalazione - Visione' })
|
|
|
|
const router = useRouter()
|
|
const { createReport, uploadMedia } = useReports()
|
|
const { getCategories } = useAdmin()
|
|
const { user } = useAuth()
|
|
|
|
const { data: categoriesData } = await useAsyncData('categories', () => getCategories())
|
|
const categories = computed(() => categoriesData.value?.categories || [])
|
|
|
|
const isLoading = ref(false)
|
|
const errorMessage = ref('')
|
|
|
|
const handleReportSubmit = async (reportData: CreateReportRequest, mediaFiles: File[]) => {
|
|
isLoading.value = true
|
|
errorMessage.value = ''
|
|
|
|
try {
|
|
const response = await createReport({
|
|
...reportData,
|
|
media: [],
|
|
})
|
|
|
|
if (response.ok && response.report_id) {
|
|
if (mediaFiles.length > 0) {
|
|
try {
|
|
const formData = new FormData()
|
|
mediaFiles.forEach((file) => formData.append('files', file))
|
|
await uploadMedia(response.report_id, formData)
|
|
} catch (error) {
|
|
console.error('Media upload failed:', error)
|
|
}
|
|
}
|
|
|
|
await router.push(`/reports/${response.report_id}`)
|
|
}
|
|
} catch (error: any) {
|
|
errorMessage.value = error.data?.message || 'Errore durante la creazione della segnalazione. Riprova.'
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="it-hero-wrapper it-primary-bg hero-compact">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="it-hero-text-wrapper p-4">
|
|
<h1 class="text-white font-weight-bold">Nuova segnalazione</h1>
|
|
<p class="text-white mt-2 lead">
|
|
Descrivi il problema urbano, indica la posizione e allega eventuali media.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-5">
|
|
<div class="row g-4">
|
|
<div class="col-12 col-lg-8">
|
|
<div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
{{ errorMessage }}
|
|
<button type="button" class="btn-close" aria-label="Chiudi" @click="errorMessage = ''"></button>
|
|
</div>
|
|
|
|
<ReportForm :categories="categories" :is-loading="isLoading" @submit="handleReportSubmit" />
|
|
</div>
|
|
|
|
<aside class="col-12 col-lg-4">
|
|
<div class="card card-bg mb-4">
|
|
<div class="card-body">
|
|
<h2 class="h6 card-title mb-3">Account segnalante</h2>
|
|
<p class="mb-1"><strong>{{ user?.first_name }} {{ user?.last_name }}</strong></p>
|
|
<p class="small text-muted mb-0">{{ user?.email }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="callout callout-highlight callout-primary">
|
|
<div class="callout-title d-flex align-items-center">
|
|
<BIIcon name="it-info-circle" size="sm" color="primary" class="me-2" />
|
|
Privacy
|
|
</div>
|
|
<p>
|
|
I tuoi dati personali non saranno pubblicati. Gli operatori li useranno solo per gestire la segnalazione.
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|