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

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
gabdevele
2026-06-17 18:07:50 +02:00 Unverified
parent 4c42c7963c 43ea5a1d97
commit 65f2bb9c52
22 changed files with 643 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Header.vue
+1 -1
View File
@@ -34,7 +34,7 @@ const navLinks = [
]
const { isAuthenticated, user, logout } = useAuth()
const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ? 'Pannello' : 'Dashboard')
const panelLabel = computed(() => isAdmin(user.value?.role) ? 'Pannello' : 'Dashboard')
</script>
<template>
app/components/Pagination.vue
-4
View File
@@ -57,7 +57,6 @@ const pageNumbers = computed(() => {
<template>
<nav v-if="totalPages > 1" class="d-flex justify-content-center mt-5 mb-5">
<ul class="pagination mb-0">
<!-- Pagina Precedente -->
<li class="page-item" :class="{ disabled: currentPage === 1 }">
<button
class="page-link"
@@ -69,7 +68,6 @@ const pageNumbers = computed(() => {
</button>
</li>
<!-- Numeri Pagine -->
<li v-for="page in pageNumbers" :key="`page-${page}`" class="page-item" :class="{ active: page === currentPage }">
<template v-if="page === '...'">
<span class="page-link">...</span>
@@ -86,7 +84,6 @@ const pageNumbers = computed(() => {
</template>
</li>
<!-- Pagina Successiva -->
<li class="page-item" :class="{ disabled: currentPage === totalPages }">
<button
class="page-link"
@@ -100,7 +97,6 @@ const pageNumbers = computed(() => {
</ul>
</nav>
<!-- Info Pagina -->
<div v-if="totalPages > 1" class="text-center text-muted small mt-3">
Pagina {{ currentPage }} di {{ totalPages }} ({{ totalItems }} elementi totali)
</div>
app/components/ReportForm.vue
+1 -5
View File
@@ -45,7 +45,6 @@ const isResolvingAddress = ref(false)
const addressSearchError = ref('')
const showAddressSuggestions = ref(false)
// Map variables
const mapContainer = ref<HTMLElement | null>(null)
let leaflet: typeof import('leaflet') | null = null
let map: LeafletMap | null = null
@@ -62,7 +61,6 @@ const loadLeaflet = async () => {
const leafletModule = await import('leaflet')
// Fix per le icone di Leaflet in Nuxt/Vite
const defaultIcon = leafletModule.icon({
iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
iconRetinaUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png',
@@ -276,7 +274,6 @@ const initMap = async () => {
void updateLocation(e.latlng.lat, e.latlng.lng)
})
// Se c'è già una posizione, imposta il marker
if (form.value.latitude && form.value.longitude) {
void updateLocation(form.value.latitude, form.value.longitude, { zoomTo: true })
}
@@ -435,7 +432,6 @@ watch(() => form.value.address, (newAddress) => {
}, 350)
})
// Sincronizza input manuali con la mappa
watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]) => {
if (newLat && newLng && map && leaflet) {
if (!marker || marker.getLatLng().lat !== newLat || marker.getLatLng().lng !== newLng) {
@@ -663,7 +659,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
.map-container {
height: 300px;
width: 100%;
z-index: 1; /* Fix for Bootstrap elements overlapping map */
z-index: 1;
}
.address-suggestions {
app/components/dashboard/AdminDashboard.vue
-1
View File
@@ -11,7 +11,6 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
<p>Accesso di livello 1. Da qui puoi gestire le configurazioni di sistema, le categorie e moderare le segnalazioni.</p>
</div>
<!-- Statistiche Globali (Mock o Reali) -->
<div class="row mb-5" v-if="!pending && statsRes?.ok">
<div class="col-6 col-md-3 mb-3">
<div class="card-wrapper card-space">
app/middleware/auth.ts
+3 -15
View File
@@ -1,7 +1,6 @@
export default defineNuxtRouteMiddleware(async (to) => {
const auth = useAuth()
// Se c'è un token ma l'utente non è ancora caricato e non stiamo già sincronizzando, sincronizza
if ((auth.token.value || auth.tokenState.value) && !auth.user.value && !auth.isSyncingUser.value) {
try {
await auth.syncUser({ currentPath: to.path })
@@ -11,28 +10,17 @@ export default defineNuxtRouteMiddleware(async (to) => {
}
}
// Se non autenticato, redirige al login
if (!auth.isAuthenticated.value) {
return navigateTo('/auth/login')
}
// Verifica ruoli se richiesto
const requiredRole = to.meta.auth?.role
if (requiredRole && auth.user.value) {
const userRole = auth.user.value.role.toUpperCase()
const userRole = auth.user.value.role
const roleLevels: Record<string, number> = {
'CITIZEN': 1,
'OPERATOR': 2,
'ADMIN': 3
}
const userLevel = roleLevels[userRole] || 0
const requiredLevel = roleLevels[requiredRole] || 0
if (userLevel < requiredLevel) {
console.warn(`[Auth] User role ${userRole} (level ${userLevel}) insufficient for required ${requiredRole} (level ${requiredLevel})`)
if (!hasMinimumRole(userRole, requiredRole)) {
console.warn(`[Auth] User role ${userRole} insufficient for required ${requiredRole}`)
return navigateTo('/')
}
}
app/pages/admin/areas.vue
+151 -44
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive, nextTick, onBeforeUnmount, computed } from 'vue'
import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue'
import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
definePageMeta({
@@ -24,8 +24,8 @@ const actionError = ref('')
const deletingAreaId = ref<number | null>(null)
const areaPendingDelete = ref<any | null>(null)
// Map variables
let map: any = null
let mainMap: any = null
let polygon: any = null
const mapPoints = ref<[number, number][]>([])
@@ -34,9 +34,98 @@ const submitLabel = computed(() => editingAreaId.value ? 'Salva Modifiche' : 'Cr
const isEditing = computed(() => editingAreaId.value !== null)
const areas = computed(() => areasRes.value?.areas || [])
const areaDeleteMessage = computed(() =>
areaPendingDelete.value ? `Vuoi eliminare area "${areaPendingDelete.value.name}"? Operazione irreversibile.` : ''
areaPendingDelete.value ? `Vuoi eliminare area "${areaPendingDelete.value.name}"? Operazione irreversibile.` : ''
)
const initMainMap = async () => {
const mapElement = document.getElementById('mainMap')
if (!mapElement) return
const L = (await import('leaflet')).default
if (mainMap) {
mainMap.remove()
mainMap = null
}
const bariBounds = L.latLngBounds(
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
)
mainMap = L.map('mainMap', {
maxBounds: bariBounds,
maxBoundsViscosity: 1,
minZoom: 11
}).setView(BARI_CENTER, 12)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(mainMap)
const featureGroup = L.featureGroup().addTo(mainMap)
let hasLayers = false
areas.value.forEach((area: any) => {
if (area.boundary_geojson) {
try {
const layer = L.geoJSON(JSON.parse(area.boundary_geojson), {
style: {
color: '#0d6efd',
weight: 2,
fillOpacity: 0.2
}
}).bindPopup(`<strong>${area.name}</strong><br/>${area.description || ''}`)
layer.addTo(featureGroup)
hasLayers = true
} catch (e) {
console.error('Invalid geojson for area', area.id, e)
}
}
})
if (hasLayers) {
mainMap.fitBounds(featureGroup.getBounds())
} else {
mainMap.fitBounds(bariBounds)
}
}
watch([areas, pending], () => {
if (!pending.value) {
if (areas.value.length > 0) {
nextTick(() => {
initMainMap()
})
} else if (mainMap) {
mainMap.remove()
mainMap = null
}
}
}, { immediate: true })
const renderExistingAreasInModal = (L: any, currentMap: any) => {
areas.value.forEach((area: any) => {
if (area.id === editingAreaId.value) return
if (area.boundary_geojson) {
try {
L.geoJSON(JSON.parse(area.boundary_geojson), {
style: {
color: '#6c757d',
weight: 2,
dashArray: '5, 5',
fillOpacity: 0.1
},
interactive: false
}).addTo(currentMap)
} catch(e) {}
}
})
}
const openCreateModal = () => {
actionError.value = ''
editingAreaId.value = null
@@ -48,7 +137,6 @@ const openCreateModal = () => {
isCreating.value = true
nextTick(async () => {
// Import leaflet solo client-side
const L = (await import('leaflet')).default
if (map) {
@@ -57,8 +145,8 @@ const openCreateModal = () => {
}
const bariBounds = L.latLngBounds(
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
)
map = L.map('areaMap', {
@@ -74,6 +162,8 @@ const openCreateModal = () => {
polygon = L.polygon([], { color: 'red' }).addTo(map)
map.fitBounds(bariBounds)
renderExistingAreasInModal(L, map)
map.on('click', (e: any) => {
if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
jsonError.value = 'Puoi disegnare aree solo entro confini del Comune di Bari.'
@@ -96,8 +186,8 @@ const loadPolygonFromGeoJson = (boundaryGeojson: any) => {
}
const normalized = coordinates
.slice(0, -1)
.map(([longitude, latitude]: [number, number]) => [latitude, longitude] as [number, number])
.slice(0, -1)
.map(([longitude, latitude]: [number, number]) => [latitude, longitude] as [number, number])
mapPoints.value = normalized
if (polygon) {
@@ -110,7 +200,7 @@ const openEditModal = (area: any) => {
editingAreaId.value = area.id
formData.name = area.name || ''
formData.description = area.description || ''
formData.geojson = area.boundary_geojson ? JSON.stringify(area.boundary_geojson, null, 2) : ''
formData.geojson = area.boundary_geojson || ''
jsonError.value = ''
mapPoints.value = []
isCreating.value = true
@@ -124,8 +214,8 @@ const openEditModal = (area: any) => {
}
const bariBounds = L.latLngBounds(
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
)
map = L.map('areaMap', {
@@ -137,9 +227,20 @@ const openEditModal = (area: any) => {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map)
console.log(JSON.parse(area.boundary_geojson))
L.geoJSON(JSON.parse(area.boundary_geojson), {
style: {
color: '#0d6efd',
weight: 2,
fillOpacity: 0.2
}
}).addTo(map)
polygon = L.polygon([], { color: 'red' }).addTo(map)
map.fitBounds(bariBounds)
renderExistingAreasInModal(L, map)
loadPolygonFromGeoJson(area.boundary_geojson)
map.on('click', (e: any) => {
@@ -171,7 +272,7 @@ const updateGeojson = () => {
}
const coords = mapPoints.value.map(p => [p[1], p[0]] as [number, number]) // Lng, Lat
if (coords[0]) {
coords.push([...coords[0]]) // Chiudi poligono
coords.push([...coords[0]])
}
formData.geojson = JSON.stringify({
@@ -191,6 +292,7 @@ const closeCreateModal = () => {
onBeforeUnmount(() => {
if (map) map.remove()
if (mainMap) mainMap.remove()
})
const handleCreate = async () => {
@@ -221,8 +323,8 @@ const handleCreate = async () => {
}
const res = editingAreaId.value
? await updateArea(editingAreaId.value, payload)
: await createArea(payload)
? await updateArea(editingAreaId.value, payload)
: await createArea(payload)
if (res.ok) {
await refresh()
@@ -291,13 +393,18 @@ const handleDeleteArea = async () => {
Nessuna area configurata.
</div>
<div v-if="actionError" class="alert alert-danger">
{{ actionError }}
</div>
<template v-else>
<div class="card mb-4 shadow-sm border-0">
<div id="mainMap" class="rounded" style="height: 400px; width: 100%; z-index: 1;"></div>
</div>
<div v-else class="table-responsive">
<table class="table table-hover align-middle bg-white shadow-sm rounded">
<thead class="table-light">
<div v-if="actionError" class="alert alert-danger">
{{ actionError }}
</div>
<div v-else class="table-responsive">
<table class="table table-hover align-middle bg-white shadow-sm rounded">
<thead class="table-light">
<tr>
<th>ID</th>
<th>Nome</th>
@@ -305,8 +412,8 @@ const handleDeleteArea = async () => {
<th>GeoJSON</th>
<th class="text-end">Azioni</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
<tr v-for="area in areas" :key="area.id">
<td>{{ area.id }}</td>
<td><strong>{{ area.name }}</strong></td>
@@ -320,20 +427,20 @@ const handleDeleteArea = async () => {
Modifica
</button>
<button
class="btn btn-sm btn-outline-danger ms-2"
:disabled="deletingAreaId === area.id"
@click="askDeleteArea(area)"
class="btn btn-sm btn-outline-danger ms-2"
:disabled="deletingAreaId === area.id"
@click="askDeleteArea(area)"
>
<span v-if="deletingAreaId === area.id" class="spinner-border spinner-border-sm me-1"></span>
Elimina
</button>
</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</template>
<!-- Modale Creazione -->
<div v-if="isCreating" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
<div v-if="isCreating" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
@@ -357,12 +464,12 @@ const handleDeleteArea = async () => {
<div class="mb-3">
<label class="form-label">GeoJSON Generato</label>
<textarea
class="form-control font-monospace text-sm"
rows="6"
v-model="formData.geojson"
required
readonly
placeholder='{ "type": "Polygon", "coordinates": [...] }'
class="form-control font-monospace text-sm"
rows="6"
v-model="formData.geojson"
required
readonly
placeholder='{ "type": "Polygon", "coordinates": [...] }'
></textarea>
<div v-if="jsonError" class="form-text text-danger mt-1">{{ jsonError }}</div>
</div>
@@ -394,20 +501,20 @@ const handleDeleteArea = async () => {
</div>
<ConfirmModal
:open="areaPendingDelete !== null"
title="Elimina area"
:message="areaDeleteMessage"
confirm-label="Elimina area"
confirm-class="btn-danger"
:pending="deletingAreaId !== null"
@cancel="closeDeleteAreaModal"
@confirm="handleDeleteArea"
:open="areaPendingDelete !== null"
title="Elimina area"
:message="areaDeleteMessage"
confirm-label="Elimina area"
confirm-class="btn-danger"
:pending="deletingAreaId !== null"
@cancel="closeDeleteAreaModal"
@confirm="handleDeleteArea"
/>
</div>
</template>
<style scoped>
#areaMap {
#areaMap, #mainMap {
background: #e9ecef;
}
app/pages/admin/catalog.vue
+7
View File
@@ -444,3 +444,10 @@ const handleDeleteTeam = async () => {
/>
</div>
</template>
<style>
.text-end .btn {
margin: 0 !important;
width: 120px;
}
</style>
app/pages/admin/moderation.vue
+71 -36
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { reactive, ref } from 'vue'
definePageMeta({
middleware: 'auth',
@@ -28,9 +28,9 @@ const dismissModal = reactive({
})
const { data: flagsRes, pending, refresh } = useAsyncData(
'admin-moderation-flags',
() => getModerationFlags({ page: page.value, per_page: perPage.value, status: statusFilter.value || undefined }),
{ watch: [page, statusFilter] }
'admin-moderation-flags',
() => getModerationFlags({ page: page.value, per_page: perPage.value, status: statusFilter.value || undefined }),
{ watch: [page, statusFilter] }
)
const openResolveModal = (id: number, rejectReport: boolean) => {
@@ -54,15 +54,14 @@ const handleResolve = async () => {
actionError.value = ''
try {
const res = await updateModerationFlag(resolveModal.flagId, {
await updateModerationFlag(resolveModal.flagId, {
status: 'RESOLVED',
reject_report: resolveModal.rejectReport,
resolution_note: resolveModal.note || undefined
})
if (res.ok) {
await refresh()
closeResolveModal()
}
await refresh()
closeResolveModal()
} catch (err) {
console.error('Failed to resolve flag', err)
actionError.value = 'Errore durante la risoluzione della segnalazione.'
@@ -89,11 +88,10 @@ const handleDismiss = async () => {
actionError.value = ''
try {
const res = await updateModerationFlag(dismissModal.flagId, { status: 'DISMISSED' })
if (res.ok) {
await refresh()
closeDismissModal()
}
await updateModerationFlag(dismissModal.flagId, { status: 'DISMISSED' })
await refresh()
closeDismissModal()
} catch (err) {
console.error('Failed to dismiss flag', err)
actionError.value = 'Errore durante l\'aggiornamento.'
@@ -129,21 +127,26 @@ const formatDate = (dateStr: string) => {
</div>
</div>
<div v-if="actionError" class="alert alert-danger mb-4">
{{ actionError }}
</div>
<div v-if="pending" class="text-center py-5">
<div class="spinner-border text-danger" role="status"></div>
</div>
<div v-else-if="!flagsRes?.flags || flagsRes.flags.length === 0" class="alert alert-success">
<div v-else-if="!flagsRes || !flagsRes.flags || flagsRes.flags.length === 0" class="alert alert-success">
Nessun elemento da moderare al momento.
</div>
<div v-if="actionError" class="alert alert-danger">
{{ actionError }}
</div>
<div v-else>
<div class="card mb-3 shadow-sm border-0" v-for="flag in flagsRes.flags" :key="flag.id">
<div class="card-header bg-light d-flex justify-content-between align-items-center">
<div
class="card mb-3 border-0"
:class="flag.status === 'DISMISSED' ? 'dismissed-card shadow-none' : 'shadow-sm'"
v-for="flag in flagsRes.flags"
:key="flag.id"
>
<div class="card-header d-flex justify-content-between align-items-center" :class="flag.status === 'DISMISSED' ? 'bg-transparent' : 'bg-light'">
<div>
<strong>Flag #{{ flag.id }}</strong> -
<span class="badge" :class="{
@@ -162,7 +165,7 @@ const formatDate = (dateStr: string) => {
{{ flag.details || 'Nessun dettaglio aggiuntivo fornito.' }}
</p>
<div class="mt-3">
<div class="mt-info">
<span class="badge bg-info me-2">{{ flag.content_type }}</span>
<span v-if="flag.report_id">
Rif:
@@ -175,7 +178,7 @@ const formatDate = (dateStr: string) => {
</span>
</div>
<div class="mt-3 small">
<div class="mt-info small text-muted">
Segnalato da: {{ flag.created_by_email }} (ID: {{ flag.created_by_user_id }})
</div>
@@ -203,11 +206,11 @@ const formatDate = (dateStr: string) => {
</div>
<Pagination
v-if="(flagsRes.total || flagsRes.flags.length) > perPage"
:current-page="page"
:per-page="perPage"
:total-items="flagsRes.total || (page * perPage + 1)"
@page-change="page = $event"
v-if="(flagsRes.total || flagsRes.flags.length) > perPage"
:current-page="page"
:per-page="perPage"
:total-items="flagsRes.total || (page * perPage + 1)"
@page-change="page = $event"
/>
</div>
@@ -235,14 +238,46 @@ const formatDate = (dateStr: string) => {
</div>
<ConfirmModal
:open="dismissModal.open"
title="Ignora flag"
message="Vuoi ignorare questo flag? Azione registrata in moderazione."
confirm-label="Ignora flag"
confirm-class="btn-outline-secondary"
:pending="dismissModal.pending"
@cancel="closeDismissModal"
@confirm="handleDismiss"
:open="dismissModal.open"
title="Ignora flag"
message="Vuoi ignorare questo flag? Azione registrata in moderazione."
confirm-label="Ignora flag"
confirm-class="btn-outline-secondary"
:pending="dismissModal.pending"
@cancel="closeDismissModal"
@confirm="handleDismiss"
/>
</div>
</template>
<style scoped>
.dismissed-card {
background-color: #f8f9fa;
opacity: 0.7;
border: 1px solid #e9ecef !important;
}
.dismissed-card .card-header {
padding-top: 0.35rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.dismissed-card .card-body {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
.dismissed-card h5.card-title {
font-size: 1rem;
margin-bottom: 0.2rem;
}
.mt-info {
margin-top: 1rem;
}
.dismissed-card .mt-info {
margin-top: 0.4rem;
}
</style>
app/pages/admin/users.vue
+1 -2
View File
@@ -17,7 +17,7 @@ const banError = ref('')
const roleError = ref('')
const pendingBanUser = ref<any | null>(null)
const isUpdatingBan = ref(false)
const parseRoles = (roles?: string) => roles ? roles.split(',').map((r) => r.trim().toUpperCase()).filter(Boolean) : []
const parseRoles = (roles?: string) => roles ? roles.split(',').map(normalizeRole).filter(Boolean) : []
const banConfirmMessage = computed(() =>
pendingBanUser.value
? `Vuoi ${pendingBanUser.value.banned ? 'sbloccare' : 'bannare'} utente ${pendingBanUser.value.first_name} ${pendingBanUser.value.last_name}?`
@@ -68,7 +68,6 @@ const handleToggleBan = async () => {
}
}
// Modal per i ruoli
const editingUserId = ref<number | null>(null)
const selectedRoles = ref<string[]>([])
const availableRoles = ['CITIZEN', 'OPERATOR', 'ADMIN']
app/pages/auth/login.vue
-1
View File
@@ -10,7 +10,6 @@ useHead({ title: 'Accedi - Visione' })
const runtimeConfig = useRuntimeConfig()
const { requestOtp, verifyOtp, handleLoginSuccess, startCieLogin } = useAuth()
// UI State
const otpStep = ref<1 | 2>(1)
const isLoading = ref(false)
const isCieLoading = ref(false)
app/pages/auth/register.vue
-2
View File
@@ -97,7 +97,6 @@ const handleRegister = async () => {
<h2 class="h5 text-primary font-weight-bold mb-4 border-bottom pb-2">Dati Anagrafici</h2>
<!-- FIX LAYOUT: form-group separato da col -->
<div class="row mb-4">
<div class="col-12 col-md-6 mb-4 mb-md-0">
<div class="form-group">
@@ -136,7 +135,6 @@ const handleRegister = async () => {
<small class="form-text text-muted">Faciliterà il contatto da parte degli operatori comunali in caso di intervento.</small>
</div>
<!-- Privacy Checkbox -->
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="privacyCheck" v-model="form.privacy" required>
<label class="form-check-label small" for="privacyCheck">
app/pages/dashboard/index.vue
+7 -10
View File
@@ -10,24 +10,21 @@ import OperatorDashboard from '~/components/dashboard/OperatorDashboard.vue'
import AdminDashboard from '~/components/dashboard/AdminDashboard.vue'
const currentDashboard = computed(() => {
const role = user.value?.role?.toUpperCase()
if (role === 'CITIZEN') return CitizenDashboard
if (role === 'OPERATOR') return OperatorDashboard
if (role === 'ADMIN') return AdminDashboard
if (isCitizen(user.value?.role)) return CitizenDashboard
if (isOperator(user.value?.role)) return OperatorDashboard
if (isAdmin(user.value?.role)) return AdminDashboard
return null
})
const heroTitle = computed(() => {
const role = user.value?.role?.toUpperCase()
if (role === 'ADMIN') return 'Pannello Admin'
if (role === 'OPERATOR') return 'Gestione Operativa'
if (isAdmin(user.value?.role)) return 'Pannello Admin'
if (isOperator(user.value?.role)) return 'Gestione Operativa'
return 'Dashboard'
})
const heroSubtitle = computed(() => {
const role = user.value?.role?.toUpperCase()
if (role === 'ADMIN') return 'Accesso amministrativo per configurazioni, utenti e moderazione'
if (role === 'OPERATOR') return 'Prendi in carico e gestisci le segnalazioni in corso'
if (isAdmin(user.value?.role)) return 'Accesso amministrativo per configurazioni, utenti e moderazione'
if (isOperator(user.value?.role)) return 'Prendi in carico e gestisci le segnalazioni in corso'
return 'Riepilogo rapido delle tue segnalazioni e dei punti cittadino'
})
</script>
app/pages/info.vue
+38 -31
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
// La pagina è statica, usiamo solo i componenti UI
useHead({
title: 'Informazioni sul Progetto - Visione',
})
@@ -7,7 +6,6 @@ useHead({
<template>
<div>
<!-- HERO SECTION (Senza pt-5/mt-5 come richiesto) -->
<div class="it-hero-wrapper it-primary">
<div class="container">
<div class="row">
@@ -24,72 +22,79 @@ useHead({
</div>
</div>
<!-- OBIETTIVO DEL PROGETTO -->
<div class="container my-5 py-3">
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2">
<h2 class="mb-4 font-weight-bold">Migliorare la qualità della vita in città</h2>
<p class="lead text-muted">
Visione nasce dall'esigenza di fornire alle amministrazioni comunali uno strumento moderno per mappare, gestire e risolvere disservizi presenti sul territorio (buche stradali, illuminazione guasta, rifiuti abbandonati).
Visione nasce dall'esigenza di fornire alle amministrazioni comunali uno strumento moderno per mappare,
gestire e risolvere disservizi presenti sul territorio (buche stradali, illuminazione guasta, rifiuti
abbandonati).
</p>
<p>
Il sistema non si limita a raccogliere dati, ma automatizza l'assegnazione alle squadre operative competenti tramite logiche geospaziali, traccia l'intero ciclo di vita della segnalazione e restituisce trasparenza ai cittadini tramite un portale Open Data dedicato.
Il sistema non si limita a raccogliere dati, ma automatizza l'assegnazione alle squadre operative competenti
tramite logiche geospaziali, traccia l'intero ciclo di vita della segnalazione e restituisce trasparenza ai
cittadini tramite un portale Open Data dedicato.
</p>
</div>
</div>
</div>
<!-- RUOLI E FUNZIONALITÀ (Card Grid) -->
<div class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-5 font-weight-bold">Come funziona il sistema</h2>
<div class="row">
<!-- Cittadino -->
<div class="col-12 col-md-4 mb-4">
<div class="card-wrapper card-space h-100">
<div class="card card-bg h-100">
<div class="card-body">
<BIIcon name="it-user" size="xl" color="primary" class="mb-3" />
<BIIcon class="mb-3" color="primary" name="it-user" size="xl"/>
<h3 class="card-title h5 font-weight-bold">Cittadini</h3>
<p class="card-text text-muted">
Tramite autenticazione sicura (OTP via email o CIE), i cittadini possono inviare segnalazioni geolocalizzate complete di foto.
Tramite autenticazione sicura (OTP via email o CIE), i cittadini possono inviare segnalazioni
geolocalizzate complete di foto.
<br><br>
Per incentivare la partecipazione, è integrato un sistema di <strong>gamification</strong>: ogni segnalazione valida e risolta fa guadagnare Punti Cittadino, premiando la cittadinanza attiva. Possono inoltre chattare con gli operatori e lasciare un feedback finale.
Per incentivare la partecipazione, è integrato un sistema di <strong>gamification</strong>: ogni
segnalazione valida e risolta fa guadagnare Punti Cittadino, premiando la cittadinanza attiva.
Possono inoltre chattare con gli operatori e lasciare un feedback finale.
</p>
</div>
</div>
</div>
</div>
<!-- Operatore -->
<div class="col-12 col-md-4 mb-4">
<div class="card-wrapper card-space h-100">
<div class="card card-bg h-100">
<div class="card-body">
<BIIcon name="it-tool" size="xl" color="primary" class="mb-3" />
<BIIcon class="mb-3" color="primary" name="it-tool" size="xl"/>
<h3 class="card-title h5 font-weight-bold">Operatori e Squadre</h3>
<p class="card-text text-muted">
Il personale comunale visualizza una dashboard con le segnalazioni in ingresso. Possono prenderle in carico, comunicare con l'utente e assegnarle alle squadre di intervento sul territorio.
Il personale comunale visualizza una dashboard con le segnalazioni in ingresso. Possono prenderle in
carico, comunicare con l'utente e assegnarle alle squadre di intervento sul territorio.
<br><br>
Il sistema gestisce l'intero flusso di stato: da <em>Aperta</em> a <em>In Revisione</em>, fino a <em>In Lavorazione</em> e <em>Risolta</em>.
Il sistema gestisce l'intero flusso di stato: da <em>Aperta</em> a <em>In Revisione</em>, fino a
<em>In Lavorazione</em> e <em>Risolta</em>.
</p>
</div>
</div>
</div>
</div>
<!-- Amministratore -->
<div class="col-12 col-md-4 mb-4">
<div class="card-wrapper card-space h-100">
<div class="card card-bg h-100">
<div class="card-body">
<BIIcon name="it-settings" size="xl" color="primary" class="mb-3" />
<BIIcon class="mb-3" color="primary" name="it-settings" size="xl"/>
<h3 class="card-title h5 font-weight-bold">Amministrazione</h3>
<p class="card-text text-muted">
Gli amministratori hanno il controllo completo della piattaforma. Possono definire le aree urbane tramite poligoni GeoJSON, gestire i permessi degli utenti, supervisionare i feedback e moderare eventuali abusi.
Gli amministratori hanno il controllo completo della piattaforma. Possono definire le aree urbane
tramite poligoni GeoJSON, gestire i permessi degli utenti, supervisionare i feedback e moderare
eventuali abusi.
<br><br>
Hanno inoltre accesso a statistiche avanzate per individuare le criticità sul territorio e monitorare i tempi medi di risoluzione.
Hanno inoltre accesso a statistiche avanzate per individuare le criticità sul territorio e
monitorare i tempi medi di risoluzione.
</p>
</div>
</div>
@@ -100,44 +105,46 @@ useHead({
</div>
</div>
<!-- STACK TECNOLOGICO E FILOSOFIA -->
<div class="container my-5 py-4">
<div class="row align-items-center">
<div class="col-12 col-lg-6 mb-4 mb-lg-0">
<h2 class="font-weight-bold mb-4">Tecnologia e Indipendenza</h2>
<ul class="it-list">
<li>
<BIIcon name="it-code-circle" color="primary" class="me-2" />
<strong>Architettura:</strong> Frontend reattivo e multipiattaforma sviluppato in <em>Vue.js/Nuxt 3</em>. Backend ad altissime prestazioni scritto in <em>C++</em> utilizzando il framework <em>Drogon</em>.
<BIIcon class="me-2" color="primary" name="it-code-circle"/>
<strong>Architettura:</strong> Frontend reattivo e multipiattaforma sviluppato in <em>Vue.js/Nuxt 3</em>.
Backend ad altissime prestazioni scritto in <em>C++</em> utilizzando il framework <em>Drogon</em>.
</li>
<li class="mt-3">
<BIIcon name="it-lock" color="primary" class="me-2" />
<BIIcon class="me-2" color="primary" name="it-lock"/>
<strong>Sicurezza:</strong> Accesso con OTP e sistema di autorizzazione Role-Based basato su token JWT.
</li>
<li class="mt-3">
<BIIcon name="it-piu" color="primary" class="me-2" />
<strong>Open Data:</strong> Piena aderenza alle linee guida AGID sulla trasparenza, con esportazione di dati anonimizzati accessibili al pubblico.
<BIIcon class="me-2" color="primary" name="it-piu"/>
<strong>Open Data:</strong> Piena aderenza alle linee guida AGID sulla trasparenza, con esportazione di
dati anonimizzati accessibili al pubblico.
</li>
</ul>
</div>
<div class="col-12 col-lg-5 offset-lg-1">
<!-- Callout Ribellione Gitea -->
<div class="callout callout-highlight callout-warning">
<div class="callout-title">
<BIIcon name="it-warning-circle" />
<BIIcon name="it-warning-circle"/>
Un approccio etico al codice sorgente
</div>
<p>
In risposta alle policy sempre più aggressive delle grandi piattaforme commerciali riguardo l'addestramento non consensuale di modelli di Intelligenza Artificiale sui repository privati, lo sviluppo di questo progetto è ospitato su un'istanza <strong>self-hosted di Gitea</strong>.
In risposta alle policy sempre più aggressive delle grandi piattaforme commerciali riguardo
l'addestramento non consensuale di modelli di Intelligenza Artificiale sui repository privati, lo sviluppo
di questo progetto è ospitato su un'istanza <strong>self-hosted di Gitea</strong>.
<br><br>
Una scelta di principio per garantire il controllo totale, la privacy e la vera sovranità sui dati e sul codice.
Una scelta di principio per garantire il controllo totale, la privacy e la vera sovranità sui dati e sul
codice.
</p>
</div>
</div>
</div>
</div>
<!-- CREDITI ACCADEMICI (Footer Style Callout) -->
<div class="container mb-5 pb-5">
<div class="card-wrapper card-space">
<div class="card card-bg border-start border-primary border-5">
@@ -146,7 +153,8 @@ useHead({
<div class="col-12 col-md-8">
<h4 class="h5 font-weight-bold text-primary mb-2">Crediti Accademici</h4>
<p class="mb-1">
Questo progetto è stato realizzato nell'ambito del corso di <strong>Laboratorio di Programmazione</strong> (tenuto dal Prof. Vessio).
Questo progetto è stato realizzato nell'ambito del corso di <strong>Laboratorio di
Programmazione</strong> (tenuto dal Prof. Vessio).
</p>
<p class="text-muted small mb-0">
Università degli Studi di Bari "Aldo Moro" - Dipartimento di Informatica.
@@ -170,7 +178,6 @@ useHead({
</template>
<style scoped>
/* Leggere correzioni stilistiche per le liste */
.it-list {
list-style-type: none;
padding-left: 0;
app/pages/note-legali.vue
-3
View File
@@ -6,7 +6,6 @@ useHead({
<template>
<div>
<!-- HERO SECTION -->
<div class="it-hero-wrapper it-primary">
<div class="container">
<div class="row">
@@ -22,7 +21,6 @@ useHead({
</div>
</div>
<!-- CONTENUTO PRINCIPALE -->
<div class="container my-5 py-4">
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2">
@@ -53,7 +51,6 @@ useHead({
Gli operatori e gli amministratori di sistema si riservano il diritto di moderare, nascondere o rimuovere segnalazioni contenenti materiale inappropriato, offensivo, non pertinente o illegale. L'abuso ripetuto del sistema comporterà il ban permanente dell'account dell'utente, associato al proprio Codice Fiscale.
</p>
<!-- DISCLAIMER ACCADEMICO -->
<div class="callout callout-highlight callout-info mt-5">
<div class="callout-title">
<BIIcon name="it-info-circle" />
app/pages/notifications.vue
-9
View File
@@ -92,7 +92,6 @@ const getNotificationColor = (type: string): string => {
<template>
<div>
<!-- HERO -->
<div class="bg-light border-bottom py-4 mb-4">
<div class="container">
<div class="row">
@@ -109,18 +108,15 @@ const getNotificationColor = (type: string): string => {
</div>
</div>
<!-- CONTENUTO -->
<div class="container mb-5">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<!-- FILTRI (Opzionale) -->
<div class="d-flex gap-2 mb-4">
<button class="btn btn-sm btn-outline-primary active">Tutti</button>
<button class="btn btn-sm btn-outline-secondary">Solo non letti</button>
</div>
<!-- LISTA NOTIFICHE -->
<div v-if="notifications.length === 0" class="text-center py-5">
<BIIcon name="it-bell" size="xl" color="info" class="mb-3 d-block" />
<h6 class="text-muted">Nessuna notifica</h6>
@@ -140,14 +136,12 @@ const getNotificationColor = (type: string): string => {
@click="handleNotificationClick(notification)"
>
<div class="d-flex align-items-start gap-3">
<!-- ICONA -->
<div class="flex-shrink-0 mt-1">
<div class="rounded-circle p-2" :class="`bg-${getNotificationColor(notification.type)}`" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
<BIIcon :name="getNotificationIcon(notification.type)" size="sm" color="white" />
</div>
</div>
<!-- CONTENUTO -->
<div class="flex-grow-1">
<div class="d-flex align-items-start justify-content-between">
<div>
@@ -162,13 +156,11 @@ const getNotificationColor = (type: string): string => {
</small>
</div>
<!-- INDICATORE NON LETTO -->
<div v-if="!notification.read_at" class="flex-shrink-0">
<span class="badge bg-primary rounded-pill">Nuovo</span>
</div>
</div>
<!-- AZIONI RAPIDE -->
<div v-if="notification.report_id" class="mt-2 d-flex gap-2">
<NuxtLink :to="`/reports/${notification.report_id}`" class="btn btn-sm btn-outline-primary">
<BIIcon name="it-arrow-right" size="xs" class="me-1" />
@@ -188,7 +180,6 @@ const getNotificationColor = (type: string): string => {
</button>
</div>
<!-- PAGINATION -->
<Pagination
v-if="notifications.length > 0"
:current-page="page"
app/pages/open-data.vue
+34 -39
View File
@@ -1,26 +1,22 @@
<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
import type { Map as LeafletMap, CircleMarker, LatLngBoundsExpression } from 'leaflet'
import type { CircleMarker, LatLngBoundsExpression, Map as LeafletMap } from 'leaflet'
import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
const { getOpenDataReports } = usePublic()
// Reactive pagination state
const currentPage = ref(1)
const perPage = ref(9)
// Fetch data automatically when currentPage changes
const { data: openDataResponse, pending } = await useAsyncData(
'open-data-reports',
() => getOpenDataReports({ page: currentPage.value, per_page: perPage.value }),
{ watch: [currentPage] } // Nuxt will re-fetch when currentPage changes
{ watch: [currentPage] }
)
const visibleReports = computed(() =>
(openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
(openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
)
// Pagination logic: If we receive less items than `perPage`, we are on the last page.
const isLastPage = computed(() => {
if (!openDataResponse.value?.reports) return true
return openDataResponse.value.reports.length < perPage.value
@@ -41,9 +37,12 @@ let markers: CircleMarker[] = []
const getStatusBadge = (status: string) => {
switch (status) {
case 'RESOLVED': return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
case 'CLOSED': return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
default: return { class: 'bg-info', text: status, icon: 'it-info-circle' }
case 'RESOLVED':
return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
case 'CLOSED':
return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
default:
return { class: 'bg-info', text: status, icon: 'it-info-circle' }
}
}
@@ -103,8 +102,8 @@ const initMap = async () => {
const L = await loadLeaflet()
const bariBounds = L.latLngBounds(
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
)
map = L.map(mapContainer.value, {
@@ -123,9 +122,13 @@ const initMap = async () => {
watch(currentView, async (view) => {
if (view !== 'map') return
await nextTick()
await initMap()
map?.invalidateSize()
await renderMapMarkers()
// Inizializza la mappa se non esiste, altrimenti aggiornane solo dimensioni e dati
if (!map) {
await initMap()
} else {
map.invalidateSize()
await renderMapMarkers()
}
})
watch(visibleReports, async () => {
@@ -143,7 +146,6 @@ onBeforeUnmount(() => {
<template>
<div>
<!-- HERO SECTION (Small version for internal pages) -->
<div class="it-hero-wrapper it-primary">
<div class="container">
<div class="row">
@@ -159,19 +161,15 @@ onBeforeUnmount(() => {
</div>
</div>
<!-- MAIN CONTENT -->
<div class="container my-5">
<!-- TOOLBAR: View Toggles & Export -->
<div class="row align-items-center mb-5 pb-3 border-bottom">
<div class="col-12 col-md-6 mb-3 mb-md-0 d-flex gap-2">
<!-- View Toggle Buttons -->
<button
class="btn btn-sm"
:class="currentView === 'grid' ? 'btn-primary' : 'btn-outline-primary'"
@click="currentView = 'grid'"
>
<BIIcon name="it-grid" size="sm" class="me-1" :color="currentView === 'grid' ? 'white' : 'primary'" />
<BIIcon :color="currentView === 'grid' ? 'white' : 'primary'" class="me-1" name="it-grid" size="sm"/>
Griglia Dati
</button>
<button
@@ -179,39 +177,37 @@ onBeforeUnmount(() => {
:class="currentView === 'map' ? 'btn-primary' : 'btn-outline-primary'"
@click="currentView = 'map'"
>
<BIIcon name="it-map-marker" size="sm" class="me-1" :color="currentView === 'map' ? 'white' : 'primary'" />
<BIIcon :color="currentView === 'map' ? 'white' : 'primary'" class="me-1" name="it-map-marker" size="sm"/>
Mappa
</button>
</div>
<div class="col-12 col-md-6 text-md-end">
<!-- Fake Export CTA (Very common in Open Data portals) -->
<button class="btn btn-sm btn-outline-secondary" title="Scarica dataset in formato JSON">
<BIIcon name="it-download" size="sm" class="me-1" />
<BIIcon class="me-1" name="it-download" size="sm"/>
Scarica JSON
</button>
</div>
</div>
<!-- LOADER -->
<!-- Sostituito v-else-if con v-show -->
<div v-if="pending" class="d-flex justify-content-center my-5 py-5">
<div class="progress-spinner progress-spinner-active" role="status">
<span class="visually-hidden">Caricamento in corso...</span>
</div>
</div>
<!-- GRID VIEW -->
<div v-else-if="currentView === 'grid'">
<div v-show="!pending && currentView === 'grid'">
<div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
<div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in visibleReports" :key="report.id">
<!-- Strict BI Card -->
<div class="card-wrapper card-space h-100">
<div class="card card-bg h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-start mb-3">
<div class="category-top m-0">
<span class="badge rounded-pill text-white px-3 py-1" :class="getStatusBadge(report.status).class">
<BIIcon :name="getStatusBadge(report.status).icon" size="xs" color="white" class="me-1" />
<span :class="getStatusBadge(report.status).class"
class="badge rounded-pill text-white px-3 py-1">
<BIIcon :name="getStatusBadge(report.status).icon" class="me-1" color="white" size="xs"/>
{{ getStatusBadge(report.status).text }}
</span>
</div>
@@ -221,7 +217,7 @@ onBeforeUnmount(() => {
<h3 class="card-title h5 font-weight-bold">{{ report.category_name }}</h3>
<p class="card-text text-muted mb-4">
<BIIcon name="it-map-marker-circle" size="sm" class="me-1" />
<BIIcon class="me-1" name="it-map-marker-circle" size="sm"/>
{{ report.area_name || 'Area comunale non specificata' }}
</p>
@@ -248,12 +244,11 @@ onBeforeUnmount(() => {
Nessun dato pubblico disponibile al momento.
</div>
<!-- BOOTSTRAP ITALIA PAGINATION -->
<nav class="pagination-wrapper justify-content-center mt-5" aria-label="Navigazione pagine open data">
<ul class="pagination">
<li class="page-item" :class="{ disabled: currentPage === 1 }">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true" @click.prevent="prevPage">
<BIIcon name="it-chevron-left" size="sm" />
<BIIcon name="it-chevron-left" size="sm"/>
<span class="visually-hidden">Pagina precedente</span>
</a>
</li>
@@ -263,15 +258,14 @@ onBeforeUnmount(() => {
<li class="page-item" :class="{ disabled: isLastPage }">
<a class="page-link" href="#" @click.prevent="nextPage">
<span class="visually-hidden">Pagina successiva</span>
<BIIcon name="it-chevron-right" size="sm" />
<BIIcon name="it-chevron-right" size="sm"/>
</a>
</li>
</ul>
</nav>
</div>
<!-- MAP VIEW -->
<div v-else-if="currentView === 'map'" class="map-view-wrapper">
<div v-show="!pending && currentView === 'map'" class="map-view-wrapper">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
<p class="text-muted mb-0">Mappa pubblica delle segnalazioni nell'area di Bari.</p>
<span class="badge bg-light text-dark border">{{ visibleReports.length }} punti</span>
@@ -286,17 +280,18 @@ onBeforeUnmount(() => {
</template>
<style scoped>
/* Ensures the cards inside the grid stretch to equal heights */
.card-wrapper {
height: 100%;
}
.card-bg {
border: 1px solid rgba(0,0,0,0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-bg:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
.open-data-map {
app/pages/operator/reports/[id].vue
+5 -5
View File
@@ -20,7 +20,6 @@ const { getReportDetail, getMessages, addMessage, flagMessage } = useReports()
const { getInterventionSummary, updateReportStatus, assignTeam, getTeams, createInterventionLink, revokeInterventionLink } = useOperator()
const { user } = useAuth()
// Dati principali
const { data: reportData, refresh: refreshReport } = await useAsyncData(`op-report-${reportId}`, () => getReportDetail(reportId))
const { data: messagesData, refresh: refreshMessages } = await useAsyncData(`op-messages-${reportId}`, () => getMessages(reportId))
const { data: summaryData, refresh: refreshSummary } = await useAsyncData(`op-summary-${reportId}`, () => getInterventionSummary(reportId))
@@ -81,7 +80,6 @@ const newStatus = ref<ReportStatus>('IN_PROGRESS')
const statusNote = ref('')
const isUpdatingStatus = ref(false)
// Form Assegna Squadra
const isAssignModalOpen = ref(false)
const selectedTeamId = ref<number | null>(null)
const isAssigning = ref(false)
@@ -93,7 +91,6 @@ const interventionLinkError = ref('')
const interventionLinkSuccess = ref('')
const isRevokeInterventionModalOpen = ref(false)
// Messaggi
const isSubmittingMessage = ref(false)
const flaggedMessageIds = ref<number[]>([])
const isFlagMessageModalOpen = ref(false)
@@ -129,7 +126,9 @@ const handleStatusUpdate = async () => {
}
const handleAssignTeam = async () => {
if (isAdmin(user.value?.role)) return
if (!selectedTeamId.value) return
isAssigning.value = true
try {
const res = await assignTeam(reportId, {
@@ -229,6 +228,8 @@ 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)
return isCitizenMessage && !isAlreadyFlagged
@@ -408,7 +409,7 @@ const formattedInterventionLinkExpiry = computed(() =>
</p>
</div>
</div>
<div class="card-body pt-0">
<div v-if="!isAdmin(user?.role)" class="card-body pt-0">
<button class="btn btn-outline-primary w-100" @click="isAssignModalOpen = true" :disabled="teams.length === 0">
Assegna team
</button>
@@ -522,7 +523,6 @@ const formattedInterventionLinkExpiry = computed(() =>
</div>
</div>
<!-- Modale Assegnazione -->
<div v-if="isAssignModalOpen" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
<div v-if="isAssignModalOpen" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
<div class="modal-dialog modal-dialog-centered">
app/pages/privacy.vue
-2
View File
@@ -6,7 +6,6 @@ useHead({
<template>
<div>
<!-- HERO SECTION -->
<div class="it-hero-wrapper it-primary">
<div class="container">
<div class="row">
@@ -22,7 +21,6 @@ useHead({
</div>
</div>
<!-- CONTENUTO PRINCIPALE -->
<div class="container my-5 py-4">
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2">
app/pages/profile.vue
+1 -1
View File
@@ -71,7 +71,7 @@ const formatDate = (dateString: string) =>
</div>
<div class="col-md-6 mb-0">
<small class="text-muted d-block">Ruolo</small>
<span class="badge bg-info">{{ user?.role }}</span>
<span class="badge bg-info">{{ normalizeRole(user?.role) }}</span>
</div>
</div>
</div>
app/pages/reports/[id].vue
-6
View File
@@ -16,7 +16,6 @@ if (!reportId) {
navigateTo('/')
}
// Fetch dati
const { data: reportData, refresh: refreshReport } = await useAsyncData(`report-${reportId}`, () =>
getReportDetail(reportId)
)
@@ -42,7 +41,6 @@ const isSubmittingFeedback = ref(false)
const selectedMediaIndex = ref(0)
const isGalleryOpen = ref(false)
// Gestione selezione file
const handleFileSelect = (event: Event) => {
const target = event.target as HTMLInputElement
if (target.files) {
@@ -50,7 +48,6 @@ const handleFileSelect = (event: Event) => {
}
}
// Invia messaggio
const handleSendMessage = async () => {
if (!newMessage.value.trim() && selectedFiles.value.length === 0) return
@@ -58,7 +55,6 @@ const handleSendMessage = async () => {
try {
await addMessage(reportId, { body: newMessage.value })
// Pulisci i campi
newMessage.value = ''
selectedFiles.value = []
if (fileInput.value) fileInput.value.value = ''
@@ -71,7 +67,6 @@ const handleSendMessage = async () => {
}
}
// Invia feedback (solo se risolta)
const handleSubmitFeedback = async () => {
isSubmittingFeedback.value = true
try {
@@ -92,7 +87,6 @@ const handleSubmitFeedback = async () => {
const isOwner = computed(() => report.value?.user_id === user.value?.id)
// Valutazione solo se lo stato è specificamente "RESOLVED"
const canFeedback = computed(() => report.value?.status === 'RESOLVED')
const statusMeta: Record<string, { label: string; tone: string }> = {
app/types/api.d.ts
Vendored
+264 -278
View File
@@ -4,465 +4,451 @@ export type FlagStatus = 'OPEN' | 'RESOLVED' | 'DISMISSED';
export type FlagContentType = 'REPORT' | 'MESSAGE';
export interface GeoJsonObject {
type: string;
coordinates: any[];
[key: string]: any;
type: string;
coordinates: any[];
[key: string]: any;
}
export interface ErrorResponse {
error: string;
message?: string;
fields?: string[];
error: string;
message?: string;
fields?: string[];
}
export interface OkResponse {
ok: boolean;
ok: boolean;
}
/**
* USER & AUTHENTICATION
*/
export interface CurrentUser {
id: number;
first_name: string;
last_name: string;
email: string;
fiscal_code: string;
points: number;
role: string;
roles: string[];
permissions: string[];
phone?: string;
id: number;
first_name: string;
last_name: string;
email: string;
fiscal_code: string;
points: number;
role: string;
roles: string[];
permissions: string[];
phone?: string;
}
export interface AdminUser {
id: number;
email: string;
first_name: string;
last_name: string;
fiscal_code: string;
phone?: string;
banned?: boolean;
points?: number;
roles?: string; // Comma-separated
id: number;
email: string;
first_name: string;
last_name: string;
fiscal_code: string;
phone?: string;
banned?: boolean;
points?: number;
roles?: string;
}
export interface TokenResponse {
ok: boolean;
token: string;
token_type: string;
expires_in_hours: number;
ok: boolean;
token: string;
token_type: string;
expires_in_hours: number;
}
export interface CieStartRequest {
frontend_redirect_uri: string;
frontend_redirect_uri: string;
}
export interface CieStartResponse {
ok: boolean;
authorization_url: string;
state: string;
status: string;
ok: boolean;
authorization_url: string;
state: string;
status: string;
}
export interface CieExchangeRequest {
state: string;
issuer: string;
subject: string;
fiscal_code: string;
first_name?: string;
last_name?: string;
email?: string;
state: string;
issuer: string;
subject: string;
fiscal_code: string;
first_name?: string;
last_name?: string;
email?: string;
}
export interface CieSessionAuth {
token?: string;
token_type?: string;
expires_in_hours?: number;
[key: string]: any;
token?: string;
token_type?: string;
expires_in_hours?: number;
[key: string]: any;
}
export interface CieSessionResponse {
ok: boolean;
status: string;
user_id?: number;
auth?: CieSessionAuth;
ok: boolean;
status: string;
user_id?: number;
auth?: CieSessionAuth;
}
/**
* REPORTS & MEDIA
*/
export interface Report {
id: number;
category_id: number;
latitude: number;
longitude: number;
address: string;
description: string;
status: ReportStatus;
area_id?: number;
area_name?: string;
category_name?: string;
assigned_operator_id?: number;
created_at?: string;
updated_at?: string;
user_id?: number;
id: number;
category_id: number;
latitude: number;
longitude: number;
address: string;
description: string;
status: ReportStatus;
area_id?: number;
area_name?: string;
category_name?: string;
assigned_operator_id?: number;
created_at?: string;
updated_at?: string;
user_id?: number;
}
export interface OpenDataReport {
id: number;
category_id: number;
category_name: string;
latitude: number;
longitude: number;
status: ReportStatus;
created_at: string;
updated_at: string;
area_id?: number | null;
area_name?: string | null;
id: number;
category_id: number;
category_name: string;
latitude: number;
longitude: number;
status: ReportStatus;
created_at: string;
updated_at: string;
area_id?: number | null;
area_name?: string | null;
}
export interface Media {
id: number;
report_id: number;
url: string;
media_kind: MediaKind;
content_type: string;
original_filename: string;
size_bytes: number;
created_at: string;
id: number;
report_id: number;
url: string;
media_kind: MediaKind;
content_type: string;
original_filename: string;
size_bytes: number;
created_at: string;
}
export interface StatusHistoryItem {
id: number;
report_id: number;
changed_by_user_id: number;
old_status: ReportStatus;
new_status: ReportStatus;
note?: string;
created_at: string;
id: number;
report_id: number;
changed_by_user_id: number;
old_status: ReportStatus;
new_status: ReportStatus;
note?: string;
created_at: string;
}
export interface Message {
id: number;
report_id: number;
user_id: number;
first_name: string;
last_name: string;
body: string;
created_at: string;
id: number;
report_id: number;
user_id: number;
first_name: string;
last_name: string;
body: string;
created_at: string;
}
/**
* ENTITIES (Areas, Teams, Categories, Notifications, Rewards, Moderation)
*/
export interface Area {
id: number;
name: string;
description?: string;
active?: boolean;
boundary_geojson?: GeoJsonObject;
id: number;
name: string;
description?: string;
active?: boolean;
boundary_geojson?: GeoJsonObject;
}
export interface Category {
id: number;
name: string;
description?: string;
active?: boolean;
id: number;
name: string;
description?: string;
active?: boolean;
}
export interface Team {
id: number;
name: string;
description?: string;
team_category_id: number;
area_id?: number;
active?: boolean;
area_name?: string;
category_name?: string;
id: number;
name: string;
description?: string;
team_category_id: number;
area_id?: number;
active?: boolean;
area_name?: string;
category_name?: string;
}
export interface Notification {
id: number;
title: string;
body: string;
type: string;
created_at: string;
report_id?: number | null;
read_at?: string | null;
id: number;
title: string;
body: string;
type: string;
created_at: string;
report_id?: number | null;
read_at?: string | null;
}
export interface RewardEvent {
id: number;
report_id: number;
points: number;
reason: string;
created_at: string;
id: number;
report_id: number;
points: number;
reason: string;
created_at: string;
}
export interface ModerationFlag {
id: number;
report_id: number;
message_id?: number | null;
reason: string;
details?: string;
status: FlagStatus;
content_type: FlagContentType;
created_by_user_id: number;
created_by_email: string;
created_at: string;
resolved_by_user_id?: number | null;
resolved_by_email?: string | null;
resolution_note?: string | null;
resolved_at?: string | null;
id: number;
report_id: number;
message_id?: number | null;
reason: string;
details?: string;
status: FlagStatus;
content_type: FlagContentType;
created_by_user_id: number;
created_by_email: string;
created_at: string;
resolved_by_user_id?: number | null;
resolved_by_email?: string | null;
resolution_note?: string | null;
resolved_at?: string | null;
}
/**
* REQUEST BODIES
*/
export interface RegisterCitizenRequest {
first_name: string;
last_name: string;
email: string;
fiscal_code: string;
phone?: string;
birth_date?: string;
birth_place?: string;
first_name: string;
last_name: string;
email: string;
fiscal_code: string;
phone?: string;
birth_date?: string;
birth_place?: string;
}
export interface UpdateProfileRequest {
first_name?: string;
last_name?: string;
phone?: string;
first_name?: string;
last_name?: string;
phone?: string;
}
export interface EmailRequest {
email: string;
email: string;
}
export interface VerifyOtpRequest {
email: string;
code: string;
email: string;
code: string;
}
export interface CreateReportRequest {
category_id: number;
latitude: number;
longitude: number;
address: string;
description: string;
media?: string[]; // Array of URLs if already uploaded
category_id: number;
latitude: number;
longitude: number;
address: string;
description: string;
media?: string[];
}
export interface UpdateStatusRequest {
status: ReportStatus;
note?: string;
status: ReportStatus;
note?: string;
}
export interface AssignTeamRequest {
team_id: number;
team_id: number;
}
export interface MessageRequest {
body: string;
body: string;
}
export interface FeedbackRequest {
rating: number; // 1 to 5
comment?: string;
rating: number;
comment?: string;
}
export interface FlagRequest {
reason: string;
details?: string;
reason: string;
details?: string;
}
export interface UpdateModerationRequest {
status: 'RESOLVED' | 'DISMISSED';
reject_report?: boolean;
resolution_note?: string;
status: 'RESOLVED' | 'DISMISSED';
reject_report?: boolean;
resolution_note?: string;
}
export interface CreateAreaRequest {
name: string;
boundary_geojson: GeoJsonObject;
description?: string;
name: string;
boundary_geojson: GeoJsonObject;
description?: string;
}
export interface UpdateAreaRequest {
name?: string;
boundary_geojson?: GeoJsonObject;
description?: string;
active?: boolean;
name?: string;
boundary_geojson?: GeoJsonObject;
description?: string;
active?: boolean;
}
export interface CreateCategoryRequest {
name: string;
description?: string;
name: string;
description?: string;
}
export interface UpdateCategoryRequest {
name?: string;
description?: string;
active?: boolean;
name?: string;
description?: string;
active?: boolean;
}
export interface CreateTeamRequest {
team_category_id: number;
name: string;
description?: string;
area_id?: number;
team_category_id: number;
name: string;
description?: string;
area_id?: number;
}
export interface UpdateTeamRequest {
team_category_id?: number;
name?: string;
description?: string;
area_id?: number | null;
active?: boolean;
team_category_id?: number;
name?: string;
description?: string;
area_id?: number | null;
active?: boolean;
}
export interface UpdateUserBanRequest {
banned: boolean;
banned: boolean;
}
export interface UpdateUserRolesRequest {
roles: string[];
roles: string[];
}
/**
* RESPONSE BODIES
*/
export interface CurrentUserResponse {
ok: boolean;
user: CurrentUser;
ok: boolean;
user: CurrentUser;
}
export interface RegisterCitizenResponse {
ok: boolean;
user_id: number;
ok: boolean;
user_id: number;
}
export interface OtpRequestResponse {
ok: boolean;
delivery: string;
expires_in_minutes: number;
ok: boolean;
delivery: string;
expires_in_minutes: number;
}
export interface CreateReportResponse {
ok: boolean;
report_id: number;
area_id?: number;
ok: boolean;
report_id: number;
area_id?: number;
}
export interface ReportListResponse {
ok: boolean;
reports: Report[];
ok: boolean;
reports: Report[];
}
export interface PagedReportListResponse {
ok: boolean;
page: number;
per_page: number;
total?: number;
reports: Report[];
ok: boolean;
page: number;
per_page: number;
total?: number;
reports: Report[];
}
export interface OpenDataReportListResponse {
ok: boolean;
page: number;
per_page: number;
reports: OpenDataReport[];
ok: boolean;
page: number;
per_page: number;
reports: OpenDataReport[];
}
export interface ReportDetailResponse {
ok: boolean;
report: Report;
history: StatusHistoryItem[];
media: Media[];
ok: boolean;
report: Report;
history: StatusHistoryItem[];
media: Media[];
}
export interface InterventionSummaryResponse {
ok: boolean;
summary: Report;
media: Media[];
latest_messages: Message[];
ok: boolean;
summary: Report;
media: Media[];
latest_messages: Message[];
}
export interface AssignmentLinkResponse {
ok: boolean;
url: string;
expires_at: string;
ok: boolean;
url: string;
expires_at: string;
}
export interface MediaUploadResponse {
ok: boolean;
media: Media[];
ok: boolean;
media: Media[];
}
export interface MessageListResponse {
ok: boolean;
messages: Message[];
ok: boolean;
messages: Message[];
}
export interface FlagResponse {
ok: boolean;
flag_id: number;
ok: boolean;
flag_id: number;
}
export interface RewardsResponse {
ok: boolean;
points: number;
page: number;
per_page: number;
reward_events: RewardEvent[];
ok: boolean;
points: number;
page: number;
per_page: number;
reward_events: RewardEvent[];
}
export interface NotificationListResponse {
ok: boolean;
page: number;
per_page: number;
notifications: Notification[];
ok: boolean;
page: number;
per_page: number;
notifications: Notification[];
}
export interface AreaListResponse {
ok: boolean;
areas: Area[];
ok: boolean;
areas: Area[];
}
export interface CategoryListResponse {
ok: boolean;
categories: Category[];
ok: boolean;
categories: Category[];
}
export interface TeamListResponse {
ok: boolean;
teams: Team[];
ok: boolean;
teams: Team[];
}
export interface UserListResponse {
ok: boolean;
users: AdminUser[];
ok: boolean;
users: AdminUser[];
}
export interface ModerationListResponse {
ok: boolean;
page: number;
per_page: number;
total?: number;
flags: ModerationFlag[];
ok: boolean;
page: number;
per_page: number;
total?: number;
flags: ModerationFlag[];
}
export interface OverviewStatsResponse {
ok: boolean;
reports_by_status: { status: ReportStatus; total: number }[];
reports_by_area: { area: string; total: number }[];
avg_resolution_hours: { value: number }[];
reports_by_category: { category: string; total: number }[];
reports_by_team: { team: string; total: number }[];
monthly_reports: { month: string; total: number }[];
avg_resolution_hours_by_category: { category: string; value: number }[];
avg_resolution_hours_by_area: { area: string; value: number }[];
total_users?: number;
open_reports?: number;
ok: boolean;
reports_by_status: { status: ReportStatus; total: number }[];
reports_by_area: { area: string; total: number }[];
avg_resolution_hours: { value: number }[];
reports_by_category: { category: string; total: number }[];
reports_by_team: { team: string; total: number }[];
monthly_reports: { month: string; total: number }[];
avg_resolution_hours_by_category: { category: string; value: number }[];
avg_resolution_hours_by_area: { area: string; value: number }[];
total_users?: number;
open_reports?: number;
}
app/utils/roles.ts
+43
View File
@@ -0,0 +1,43 @@
export const ROLES = {
CITIZEN: 'CITIZEN',
OPERATOR: 'OPERATOR',
ADMIN: 'ADMIN'
} as const
export type Role = keyof typeof ROLES
export const ROLE_LEVELS: Record<string, number> = {
[ROLES.CITIZEN]: 1,
[ROLES.OPERATOR]: 2,
[ROLES.ADMIN]: 3
}
export function normalizeRole(role?: string | null): string {
return role?.trim().toUpperCase() ?? ''
}
export function isRole(userRole: string | undefined | null, targetRole: string): boolean {
return normalizeRole(userRole) === targetRole.toUpperCase()
}
export function hasMinimumRole(userRole: string | undefined | null, requiredRole: string): boolean {
const userLvl = ROLE_LEVELS[normalizeRole(userRole)] || 0
const reqLvl = ROLE_LEVELS[requiredRole.toUpperCase()] || 0
return userLvl >= reqLvl
}
export function isAdmin(userRole?: string | null): boolean {
return isRole(userRole, ROLES.ADMIN)
}
export function isOperator(userRole?: string | null): boolean {
return isRole(userRole, ROLES.OPERATOR)
}
export function isCitizen(userRole?: string | null): boolean {
return isRole(userRole, ROLES.CITIZEN)
}
export function canAccess(userRole: string | undefined | null, requiredRole: string): boolean {
return hasMinimumRole(userRole, requiredRole)
}