81 lines
2.4 KiB
Vue
81 lines
2.4 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 { 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 justify-content-center">
|
|
<div class="col-12 col-xl-10">
|
|
<div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show mb-4" 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|