feat: update authentication flow and user navigation
This commit is contained in:
@@ -9,7 +9,7 @@ const { changePassword, user, syncUser } = useAuth()
|
||||
const router = useRouter()
|
||||
|
||||
const formData = reactive({
|
||||
current_password: '', // FIX: rinominato da old_password
|
||||
current_password: '',
|
||||
new_password: '',
|
||||
confirm_password: ''
|
||||
})
|
||||
@@ -17,7 +17,6 @@ const formData = reactive({
|
||||
const isLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
|
||||
// FIX: Stati separati per la visibilità di ogni campo
|
||||
const showCurrent = ref(false)
|
||||
const showNew = ref(false)
|
||||
const showConfirm = ref(false)
|
||||
@@ -37,15 +36,14 @@ const handleSubmit = async () => {
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
// FIX: Payload con current_password come richiesto dall'API
|
||||
const res = await changePassword({
|
||||
current_password: formData.current_password,
|
||||
new_password: formData.new_password
|
||||
} as any) // Cast temporaneo se l'interfaccia types/api non è ancora aggiornata
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
await syncUser()
|
||||
await router.push('/me')
|
||||
await router.push('/profile')
|
||||
}
|
||||
} catch (error: any) {
|
||||
errorMessage.value = error.data?.message || 'Errore. Verifica la password attuale.'
|
||||
@@ -73,8 +71,6 @@ const handleSubmit = async () => {
|
||||
<h3 class="card-title h4 mb-4">Cambia la tua password</h3>
|
||||
|
||||
<form @submit.prevent="handleSubmit">
|
||||
|
||||
<!-- 1. PASSWORD ATTUALE -->
|
||||
<div class="form-group mb-3">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
@@ -185,4 +181,4 @@ const handleSubmit = async () => {
|
||||
.form-control:focus + label {
|
||||
color: #006f9d;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,6 @@ import CitizenDashboard from '~/components/dashboard/CitizenDashboard.vue'
|
||||
import OperatorDashboard from '~/components/dashboard/OperatorDashboard.vue'
|
||||
import AdminDashboard from '~/components/dashboard/AdminDashboard.vue'
|
||||
|
||||
// Normalizziamo in uppercase nel caso il backend risponda con 'citizen' o 'CITIZEN'
|
||||
const currentDashboard = computed(() => {
|
||||
const role = user.value?.role?.toUpperCase()
|
||||
if (role === 'CITIZEN') return CitizenDashboard
|
||||
@@ -18,25 +17,24 @@ const currentDashboard = computed(() => {
|
||||
return null
|
||||
})
|
||||
|
||||
// Testi dinamici per l'Hero (la fascia blu in alto) in base al ruolo
|
||||
const heroTitle = computed(() => {
|
||||
const role = user.value?.role?.toUpperCase()
|
||||
if (role === 'ADMIN') return 'Pannello di Amministrazione'
|
||||
if (role === 'OPERATOR') return 'Gestione Operativa'
|
||||
return 'Le Mie Segnalazioni' // Cittadino
|
||||
return 'Dashboard'
|
||||
})
|
||||
|
||||
const heroSubtitle = computed(() => {
|
||||
const role = user.value?.role?.toUpperCase()
|
||||
if (role === 'ADMIN') return 'Gestione del sistema, delle aree e moderazione utenti'
|
||||
if (role === 'OPERATOR') return 'Prendi in carico e gestisci le segnalazioni in corso'
|
||||
return 'Traccia lo stato di tutte le tue segnalazioni e comunica con gli operatori' // Cittadino
|
||||
return 'Riepilogo rapido delle tue segnalazioni e dei punti cittadino'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="it-hero-wrapper it-primary">
|
||||
<div class="it-hero-wrapper it-primary hero-compact">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
@@ -53,7 +51,7 @@ const heroSubtitle = computed(() => {
|
||||
|
||||
<div class="container my-5">
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<h4 class="mb-2 text-muted">
|
||||
Benvenuto, <strong>{{ user?.first_name }} {{ user?.last_name }}</strong>.
|
||||
@@ -61,7 +59,6 @@ const heroSubtitle = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Qui viene montato CitizenDashboard.vue, OperatorDashboard.vue o AdminDashboard.vue -->
|
||||
<component :is="currentDashboard" v-if="currentDashboard" />
|
||||
|
||||
<div v-else class="alert alert-warning" role="alert">
|
||||
|
||||
@@ -1,253 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
useHead({ title: 'Il Mio Profilo - Visione' })
|
||||
|
||||
const { user, fetchRewards } = useAuth()
|
||||
|
||||
// Fetch rewards/punti
|
||||
const page = ref(1)
|
||||
const perPage = ref(10)
|
||||
|
||||
const { data: rewardsData } = await useAsyncData(() =>
|
||||
fetchRewards({ page: page.value, per_page: perPage.value })
|
||||
)
|
||||
|
||||
const rewards = computed(() => (rewardsData.value as any)?.reward_events || [])
|
||||
const totalPoints = computed(() => (rewardsData.value as any)?.points || 0)
|
||||
const totalRewards = computed(() => rewards.value.length)
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
page.value = newPage
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
return new Date(dateString).toLocaleDateString('it-IT', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
useAuth().logout()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- HERO -->
|
||||
<div class="bg-light border-bottom py-4 mb-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1 class="h3 font-weight-bold mb-3">Il Mio Profilo</h1>
|
||||
<p class="text-muted">Gestisci i tuoi dati, visualizza i tuoi punti e la cronologia delle segnalazioni</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTENUTO -->
|
||||
<div class="container mb-5">
|
||||
<div class="row">
|
||||
|
||||
<!-- SINISTRA: Profilo -->
|
||||
<div class="col-12 col-lg-8">
|
||||
|
||||
<!-- DATI PERSONALI -->
|
||||
<div class="card card-bg mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h5 class="card-title font-weight-bold mb-0">
|
||||
<BIIcon name="it-user" size="sm" color="primary" class="me-2" />
|
||||
Dati Personali
|
||||
</h5>
|
||||
<NuxtLink to="/settings/profile" class="btn btn-sm btn-outline-primary">
|
||||
<BIIcon name="it-pencil" size="xs" class="me-1" />
|
||||
Modifica
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Nome</small>
|
||||
<strong>{{ user?.first_name }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Cognome</small>
|
||||
<strong>{{ user?.last_name }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Email</small>
|
||||
<strong>{{ user?.email }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Codice Fiscale</small>
|
||||
<strong>{{ user?.fiscal_code }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Telefono</small>
|
||||
<strong>{{ user?.phone || 'Non fornito' }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Ruolo</small>
|
||||
<span class="badge bg-info">{{ user?.role }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PUNTI CITTADINO -->
|
||||
<div class="card card-bg card-highlight mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title font-weight-bold mb-4">
|
||||
<BIIcon name="it-star" size="sm" color="warning" class="me-2" />
|
||||
I Tuoi Punti Cittadino
|
||||
</h5>
|
||||
|
||||
<div class="text-center p-4 bg-light rounded mb-4">
|
||||
<div class="display-3 font-weight-bold text-primary">{{ totalPoints }}</div>
|
||||
<small class="text-muted">Segnalazioni risolte completate con successo</small>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info" role="alert">
|
||||
<small>
|
||||
<strong>Come guadagni punti?</strong><br>
|
||||
Ricevi 1 punto per ogni segnalazione che risolviamo. Quando raggiungi determinati traguardi, potrai sbloccare riconoscimenti speciali!
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CRONOLOGIA PUNTI -->
|
||||
<div class="card card-bg">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title font-weight-bold mb-4">
|
||||
<BIIcon name="it-history" size="sm" color="primary" class="me-2" />
|
||||
Cronologia Punti (ultimi {{ rewards.length }})
|
||||
</h5>
|
||||
|
||||
<div v-if="rewards.length === 0" class="alert alert-info" role="alert">
|
||||
Non hai ancora accumulato punti. Crea la tua prima segnalazione!
|
||||
</div>
|
||||
|
||||
<div v-else class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" class="small">Data</th>
|
||||
<th scope="col" class="small">Segnalazione</th>
|
||||
<th scope="col" class="text-center small">Punti</th>
|
||||
<th scope="col" class="small">Motivo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="reward in rewards" :key="reward.id">
|
||||
<td class="small">
|
||||
<small class="text-muted">{{ formatDate(reward.created_at) }}</small>
|
||||
</td>
|
||||
<td class="small">
|
||||
<NuxtLink :to="`/reports/${reward.report_id}`" class="text-decoration-none">
|
||||
#{{ reward.report_id }}
|
||||
</NuxtLink>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-success">+{{ reward.points }}</span>
|
||||
</td>
|
||||
<td class="small">{{ reward.reason }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- PAGINATION -->
|
||||
<Pagination
|
||||
v-if="rewards.length > 0"
|
||||
:current-page="page"
|
||||
:per-page="perPage"
|
||||
:total-items="totalRewards"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- DESTRA: Azioni rapide -->
|
||||
<div class="col-12 col-lg-4">
|
||||
|
||||
<!-- NUOVA SEGNALAZIONE -->
|
||||
<div class="card card-bg card-highlight mb-4">
|
||||
<div class="card-body text-center">
|
||||
<BIIcon name="it-plus-circle" size="xl" color="primary" class="mb-3" />
|
||||
<h6 class="font-weight-bold mb-3">Crea una nuova segnalazione</h6>
|
||||
<p class="small text-muted mb-3">Aiutaci a migliorare il tuo quartiere</p>
|
||||
<NuxtLink to="/reports/create" class="btn btn-primary w-100">
|
||||
Segnala ora
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LE MIE SEGNALAZIONI -->
|
||||
<div class="card card-bg mb-4">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title font-weight-bold mb-3">
|
||||
<BIIcon name="it-list" size="sm" color="primary" class="me-2" />
|
||||
Le Mie Segnalazioni
|
||||
</h6>
|
||||
<NuxtLink to="/dashboard" class="btn btn-outline-primary w-100 btn-sm">
|
||||
Vai alla Dashboard
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NOTIFICHE -->
|
||||
<div class="card card-bg mb-4">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title font-weight-bold mb-3">
|
||||
<BIIcon name="it-bell" size="sm" color="primary" class="me-2" />
|
||||
Centro Notifiche
|
||||
</h6>
|
||||
<NuxtLink to="/notifications" class="btn btn-outline-primary w-100 btn-sm">
|
||||
Visualizza notifiche
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IMPOSTAZIONI & LOGOUT -->
|
||||
<div class="card card-bg">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title font-weight-bold mb-3">
|
||||
<BIIcon name="it-settings" size="sm" color="primary" class="me-2" />
|
||||
Account
|
||||
</h6>
|
||||
<NuxtLink to="/settings/password" class="btn btn-outline-secondary w-100 btn-sm mb-2">
|
||||
Cambia Password
|
||||
</NuxtLink>
|
||||
<button type="button" class="btn btn-outline-danger w-100 btn-sm" @click="handleLogout">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card-highlight {
|
||||
border-color: #ffc107;
|
||||
}
|
||||
|
||||
.table-hover tbody tr:hover {
|
||||
background-color: rgba(0, 111, 157, 0.05);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import type { Report } from '~/types/api'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
auth: { role: 'OPERATOR' }
|
||||
@@ -19,7 +17,6 @@ const { data: reportsRes, pending } = useAsyncData(
|
||||
{ watch: [page] }
|
||||
)
|
||||
|
||||
const formatDate = (dateString: string) => new Date(dateString).toLocaleDateString('it-IT')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -41,36 +38,11 @@ const formatDate = (dateString: string) => new Date(dateString).toLocaleDateStri
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover border-bottom">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" class="small">#ID</th>
|
||||
<th scope="col" class="small">Categoria</th>
|
||||
<th scope="col" class="small">Indirizzo</th>
|
||||
<th scope="col" class="small">Stato</th>
|
||||
<th scope="col" class="small">Creata il</th>
|
||||
<th scope="col" class="text-center small">Azioni</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="report in reportsRes.reports" :key="report.id" class="align-middle">
|
||||
<td class="small font-weight-semibold">#{{ report.id }}</td>
|
||||
<td class="small">{{ report.category_name }}</td>
|
||||
<td class="small">{{ report.address }}</td>
|
||||
<td class="small">
|
||||
<StatusBadge :status="report.status" />
|
||||
</td>
|
||||
<td class="small text-muted">{{ formatDate(report.created_at) }}</td>
|
||||
<td class="text-center">
|
||||
<NuxtLink :to="`/operator/reports/${report.id}`" class="btn btn-sm btn-outline-primary">
|
||||
Gestisci
|
||||
</NuxtLink>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ReportTable
|
||||
:reports="reportsRes.reports"
|
||||
detail-base-path="/operator/reports"
|
||||
action-label="Apri segnalazione"
|
||||
/>
|
||||
|
||||
<Pagination
|
||||
v-if="reportsRes.total > perPage"
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import type { Report } from '~/types/api'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
auth: { role: 'OPERATOR' }
|
||||
@@ -23,15 +21,13 @@ const handleTakeReport = async (id: number) => {
|
||||
try {
|
||||
const res = await takeReport(id)
|
||||
if (res.ok) {
|
||||
// Optimistic update or refresh
|
||||
await refresh()
|
||||
await refresh()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to take report', err)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => new Date(dateString).toLocaleDateString('it-IT')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -53,36 +49,12 @@ const formatDate = (dateString: string) => new Date(dateString).toLocaleDateStri
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover border-bottom">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" class="small">#ID</th>
|
||||
<th scope="col" class="small">Categoria</th>
|
||||
<th scope="col" class="small">Indirizzo</th>
|
||||
<th scope="col" class="small">Stato</th>
|
||||
<th scope="col" class="small">Creata il</th>
|
||||
<th scope="col" class="text-center small">Azioni</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="report in reportsRes.reports" :key="report.id" class="align-middle">
|
||||
<td class="small font-weight-semibold">#{{ report.id }}</td>
|
||||
<td class="small">{{ report.category_name }}</td>
|
||||
<td class="small">{{ report.address }}</td>
|
||||
<td class="small">
|
||||
<StatusBadge :status="report.status" />
|
||||
</td>
|
||||
<td class="small text-muted">{{ formatDate(report.created_at) }}</td>
|
||||
<td class="text-center">
|
||||
<button class="btn btn-primary btn-sm" @click="handleTakeReport(report.id)">
|
||||
Prendi in carico
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ReportTable
|
||||
:reports="reportsRes.reports"
|
||||
action-variant="manage"
|
||||
detail-base-path="/operator/reports"
|
||||
@take="handleTakeReport"
|
||||
/>
|
||||
|
||||
<Pagination
|
||||
v-if="reportsRes.total > perPage"
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import type { Report } from '~/types/api'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
auth: { role: 'OPERATOR' }
|
||||
@@ -19,7 +17,6 @@ const { data: reportsRes, pending } = useAsyncData(
|
||||
{ watch: [page] }
|
||||
)
|
||||
|
||||
const formatDate = (dateString: string) => new Date(dateString).toLocaleDateString('it-IT')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -41,36 +38,11 @@ const formatDate = (dateString: string) => new Date(dateString).toLocaleDateStri
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover border-bottom">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col" class="small">#ID</th>
|
||||
<th scope="col" class="small">Categoria</th>
|
||||
<th scope="col" class="small">Indirizzo</th>
|
||||
<th scope="col" class="small">Stato</th>
|
||||
<th scope="col" class="small">Creata il</th>
|
||||
<th scope="col" class="text-center small">Dettagli</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="report in reportsRes.reports" :key="report.id" class="align-middle">
|
||||
<td class="small font-weight-semibold">#{{ report.id }}</td>
|
||||
<td class="small">{{ report.category_name }}</td>
|
||||
<td class="small">{{ report.address }}</td>
|
||||
<td class="small">
|
||||
<StatusBadge :status="report.status" />
|
||||
</td>
|
||||
<td class="small text-muted">{{ formatDate(report.created_at) }}</td>
|
||||
<td class="text-center">
|
||||
<NuxtLink :to="`/operator/reports/${report.id}`" class="btn btn-sm btn-outline-secondary">
|
||||
Vedi
|
||||
</NuxtLink>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ReportTable
|
||||
:reports="reportsRes.reports"
|
||||
detail-base-path="/operator/reports"
|
||||
action-label="Apri segnalazione"
|
||||
/>
|
||||
|
||||
<Pagination
|
||||
v-if="reportsRes.total > perPage"
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
useHead({ title: 'Profilo - Visione' })
|
||||
|
||||
const { user, fetchRewards, logout } = useAuth()
|
||||
|
||||
const page = ref(1)
|
||||
const perPage = ref(10)
|
||||
|
||||
const { data: rewardsData } = await useAsyncData(
|
||||
'profile-rewards',
|
||||
() => fetchRewards({ page: page.value, per_page: perPage.value }),
|
||||
{ watch: [page] }
|
||||
)
|
||||
|
||||
const rewards = computed(() => rewardsData.value?.reward_events || [])
|
||||
const totalPoints = computed(() => rewardsData.value?.points || 0)
|
||||
const totalRewards = computed(() => rewards.value.length)
|
||||
|
||||
const formatDate = (dateString: string) =>
|
||||
new Date(dateString).toLocaleDateString('it-IT', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-light border-bottom py-4 mb-4">
|
||||
<div class="container">
|
||||
<h1 class="h3 font-weight-bold mb-1">Profilo</h1>
|
||||
<p class="text-muted mb-0">Dati account, punti cittadino e impostazioni personali.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mb-5">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-lg-8">
|
||||
<div class="card card-bg mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2 class="h5 card-title mb-0">Dati personali</h2>
|
||||
<NuxtLink to="/settings/profile" class="btn btn-outline-primary btn-sm">
|
||||
Modifica
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Nome</small>
|
||||
<strong>{{ user?.first_name }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Cognome</small>
|
||||
<strong>{{ user?.last_name }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Email</small>
|
||||
<strong>{{ user?.email }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Telefono</small>
|
||||
<strong>{{ user?.phone || 'Non fornito' }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-0">
|
||||
<small class="text-muted d-block">Codice fiscale</small>
|
||||
<strong>{{ user?.fiscal_code }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-0">
|
||||
<small class="text-muted d-block">Ruolo</small>
|
||||
<span class="badge bg-info">{{ user?.role }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-bg">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2 class="h5 card-title mb-0">Cronologia punti</h2>
|
||||
<span class="badge bg-primary">{{ totalPoints }} punti</span>
|
||||
</div>
|
||||
|
||||
<div v-if="rewards.length === 0" class="alert alert-info mb-0" role="alert">
|
||||
Nessun punto registrato.
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col">Data</th>
|
||||
<th scope="col">Segnalazione</th>
|
||||
<th scope="col">Motivo</th>
|
||||
<th scope="col" class="text-end">Punti</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="reward in rewards" :key="reward.id">
|
||||
<td class="text-muted">{{ formatDate(reward.created_at) }}</td>
|
||||
<td>
|
||||
<NuxtLink :to="`/reports/${reward.report_id}`">#{{ reward.report_id }}</NuxtLink>
|
||||
</td>
|
||||
<td>{{ reward.reason }}</td>
|
||||
<td class="text-end">
|
||||
<span class="badge bg-success">+{{ reward.points }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Pagination
|
||||
v-if="totalRewards > perPage"
|
||||
:current-page="page"
|
||||
:per-page="perPage"
|
||||
:total-items="totalRewards"
|
||||
@page-change="page = $event"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="card card-bg mb-4">
|
||||
<div class="card-body">
|
||||
<h2 class="h6 card-title mb-3">Azioni account</h2>
|
||||
<div class="d-grid gap-2">
|
||||
<NuxtLink to="/reports/new" class="btn btn-primary">Nuova segnalazione</NuxtLink>
|
||||
<NuxtLink to="/notifications" class="btn btn-outline-primary">Notifiche</NuxtLink>
|
||||
<NuxtLink to="/settings/password" class="btn btn-outline-secondary">Cambia password</NuxtLink>
|
||||
<button type="button" class="btn btn-outline-danger" @click="logout">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-bg">
|
||||
<div class="card-body">
|
||||
<h2 class="h6 card-title mb-2">Punti cittadino</h2>
|
||||
<div class="display-6 text-primary font-weight-bold mb-2">{{ totalPoints }}</div>
|
||||
<p class="small text-muted mb-0">
|
||||
I punti vengono accreditati sulle segnalazioni concluse con esito positivo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,144 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { CreateReportRequest } from '~/types/api'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
useHead({ title: 'Crea Segnalazione - Visione' })
|
||||
|
||||
const router = useRouter()
|
||||
const { createReport, uploadMedia } = useReports()
|
||||
const { getCategories } = useAdmin()
|
||||
const { user } = useAuth()
|
||||
|
||||
// Fetch categories
|
||||
const { data: categoriesData } = await useAsyncData('categories', () =>
|
||||
getCategories()
|
||||
)
|
||||
const categories = computed(() => categoriesData.value?.categories || [])
|
||||
|
||||
// 👇 Manteniamo una sola dichiarazione per queste variabili
|
||||
const isLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
|
||||
// 👇 Manteniamo una sola funzione handleReportSubmit
|
||||
const handleReportSubmit = async (reportData: CreateReportRequest, mediaFiles: File[]) => {
|
||||
isLoading.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
// Step 1: Carica i file media se presenti
|
||||
let uploadedMediaUrls: string[] = []
|
||||
|
||||
if (mediaFiles.length > 0) {
|
||||
console.log('📸 Media files to upload:', mediaFiles)
|
||||
}
|
||||
|
||||
// Step 2: Crea la segnalazione
|
||||
const response = await createReport({
|
||||
...reportData,
|
||||
media: uploadedMediaUrls, // Se l'API richiede stringhe pre-uploadate, va bene. Altrimenti passa array vuoto.
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
// Step 3: Se ha media, carica dopo la creazione usando l'ID
|
||||
if (mediaFiles.length > 0 && response.report_id) {
|
||||
try {
|
||||
const formData = new FormData()
|
||||
mediaFiles.forEach((file) => {
|
||||
formData.append('files', file)
|
||||
})
|
||||
|
||||
await uploadMedia(response.report_id, formData)
|
||||
console.log('✅ Media uploaded successfully')
|
||||
} catch (err) {
|
||||
console.error('⚠️ Media upload failed (non-critical):', err)
|
||||
}
|
||||
}
|
||||
|
||||
console.log('✅ Segnalazione creata:', response.report_id)
|
||||
|
||||
// Redirect al dettaglio della segnalazione
|
||||
await router.push(`/reports/${response.report_id}`)
|
||||
}
|
||||
} catch (error: any) {
|
||||
errorMessage.value = error.data?.message || 'Errore durante la creazione della segnalazione. Riprova.'
|
||||
console.error('❌ Error creating report:', error)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- HERO -->
|
||||
<div class="it-hero-wrapper it-primary-bg">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<div class="it-hero-text-wrapper p-4">
|
||||
<h1 class="text-white font-weight-bold">Segnala un problema</h1>
|
||||
<p class="text-white mt-2 lead">
|
||||
Aiutaci a migliorare la città condividendo i disservizi che noti
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTENUTO -->
|
||||
<div class="container my-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-8 offset-lg-2">
|
||||
|
||||
<!-- CALLOUT INFO -->
|
||||
<div class="callout callout-highlight callout-primary mb-4">
|
||||
<div class="callout-title">
|
||||
<BIIcon name="it-info-circle" />
|
||||
La tua segnalazione è anonima
|
||||
</div>
|
||||
<p>
|
||||
I tuoi dati personali non saranno visibili pubblicamente. La segnalazione verrà elaborata dagli operatori comunali e potrai tracciare lo stato dell'intervento in tempo reale.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- ERRORE GLOBALE -->
|
||||
<div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
{{ errorMessage }}
|
||||
<button type="button" class="btn-close" @click="errorMessage = ''"></button>
|
||||
</div>
|
||||
|
||||
<!-- INFO UTENTE -->
|
||||
<div class="card card-bg mb-4">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title font-weight-bold mb-3">
|
||||
<BIIcon name="it-user" size="sm" color="primary" class="me-2" />
|
||||
Stai segnalando come:
|
||||
</h6>
|
||||
<div class="small">
|
||||
<strong>{{ user?.first_name }} {{ user?.last_name }}</strong><br>
|
||||
<span class="text-muted">{{ user?.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FORM PRINCIPALE -->
|
||||
<ReportForm :categories="categories" :is-loading="isLoading" @submit="handleReportSubmit" />
|
||||
|
||||
<!-- NOTE LEGALI -->
|
||||
<div class="alert alert-info mt-5" role="alert">
|
||||
<small class="d-block">
|
||||
Sottoponendo questa segnalazione accetti i nostri <NuxtLink to="/privacy" target="_blank">Termini di Servizio</NuxtLink>
|
||||
e l'<NuxtLink to="/privacy" target="_blank">Informativa sulla Privacy</NuxtLink>.
|
||||
Le segnalazioni con contenuti abusivi o offensivi verranno rimosse e l'utente potrebbe essere sanzionato.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import type { Report } from '~/types/api'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
useHead({ title: 'Le mie segnalazioni - Visione' })
|
||||
|
||||
const { getReports } = useReports()
|
||||
|
||||
const page = ref(1)
|
||||
const perPage = ref(10)
|
||||
const filterStatus = ref('')
|
||||
|
||||
const { data: reportsRes, pending } = useAsyncData('citizen-reports-list', () => getReports({}))
|
||||
|
||||
const reports = computed<Report[]>(() => reportsRes.value?.reports || [])
|
||||
const filteredReports = computed(() => {
|
||||
if (!filterStatus.value) return reports.value
|
||||
if (filterStatus.value === 'IN_PROGRESS') {
|
||||
return reports.value.filter((report) => report.status === 'IN_PROGRESS' || report.status === 'ASSIGNED')
|
||||
}
|
||||
return reports.value.filter((report) => report.status === filterStatus.value)
|
||||
})
|
||||
|
||||
const paginatedReports = computed(() => {
|
||||
const start = (page.value - 1) * perPage.value
|
||||
return filteredReports.value.slice(start, start + perPage.value)
|
||||
})
|
||||
|
||||
const handleStatusFilter = (status: string) => {
|
||||
filterStatus.value = status === 'all' ? '' : status
|
||||
page.value = 1
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-light border-bottom py-4 mb-4">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
|
||||
<div>
|
||||
<h1 class="h3 font-weight-bold mb-1">Le mie segnalazioni</h1>
|
||||
<p class="text-muted mb-0">Consulta stato, cronologia e conversazioni con gli operatori.</p>
|
||||
</div>
|
||||
<NuxtLink to="/reports/new" class="btn btn-primary">
|
||||
<BIIcon name="it-plus-circle" size="sm" color="white" class="me-2" />
|
||||
Nuova segnalazione
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mb-5">
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center mb-3">
|
||||
<div class="btn-group" role="group" aria-label="Filtri segnalazioni">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm"
|
||||
:class="filterStatus === '' ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="handleStatusFilter('all')"
|
||||
>
|
||||
Tutte
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm"
|
||||
:class="filterStatus === 'OPEN' ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="handleStatusFilter('OPEN')"
|
||||
>
|
||||
Aperte
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm"
|
||||
:class="filterStatus === 'IN_PROGRESS' ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="handleStatusFilter('IN_PROGRESS')"
|
||||
>
|
||||
In corso
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm"
|
||||
:class="filterStatus === 'RESOLVED' ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="handleStatusFilter('RESOLVED')"
|
||||
>
|
||||
Risolte
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="pending" class="text-center py-5">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Caricamento...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredReports.length === 0" class="alert alert-info" role="alert">
|
||||
Nessuna segnalazione trovata.
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<ReportTable :reports="paginatedReports" action-label="Apri segnalazione" />
|
||||
<Pagination
|
||||
v-if="filteredReports.length > perPage"
|
||||
:current-page="page"
|
||||
:per-page="perPage"
|
||||
:total-items="filteredReports.length"
|
||||
@page-change="page = $event"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,102 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user