feat: implement Bari bounds validation and update UI components for admin panel

2026-06-15 13:00:22 +02:00
parent 8bf6f29561
commit d6eb7d3e9b
13 changed files with 108 additions and 34 deletions
@@ -29,6 +29,20 @@ textarea {
    font-family: var(--visione-font-sans);
 }

+select,
+.form-select {
+    background-color: #f7f9fc !important;
+    border-color: #c5d0db !important;
+    color: var(--visione-text-body) !important;
+}
+
+.form-select:focus,
+select:focus {
+    background-color: #fff !important;
+    border-color: var(--visione-primary) !important;
+    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15) !important;
+}
+
 code,
 kbd,
 pre,
@@ -18,6 +18,7 @@ const navLinks = [
 ]

 const { isAuthenticated, user, logout } = useAuth()
+const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ? 'Pannello admin' : 'Dashboard')
 </script>

 <template>
@@ -49,7 +50,7 @@ const { isAuthenticated, user, logout } = useAuth()
                    <span class="rounded-icon" aria-hidden="true">
                      <BIIcon name="it-list" color="black" />
                    </span>
-                    <span class="d-none d-lg-block">Dashboard</span>
+                    <span class="d-none d-lg-block">{{ panelLabel }}</span>
                  </NuxtLink>

                  <NuxtLink class="btn btn-primary btn-icon btn-full" to="/profile"
@@ -2,6 +2,7 @@
 import type { Category, CreateReportRequest } from '~/types/api'
 import type { LeafletMouseEvent, Map as LeafletMap, Marker as LeafletMarker } from 'leaflet'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'

 interface Props {
  isLoading?: boolean
@@ -65,18 +66,28 @@ const initMap = async () => {
  const L = await loadLeaflet()
  if (!mapContainer.value || map) return

-  // Centro Italia default
-  const defaultLat = 41.8719
-  const defaultLng = 12.5674
-  const zoom = 5
+  const bariBounds = L.latLngBounds(
+    [BARI_BOUNDS.south, BARI_BOUNDS.west],
+    [BARI_BOUNDS.north, BARI_BOUNDS.east]
+  )

-  map = L.map(mapContainer.value).setView([defaultLat, defaultLng], zoom)
+  map = L.map(mapContainer.value, {
+    maxBounds: bariBounds,
+    maxBoundsViscosity: 1,
+    minZoom: 12
+  }).setView(BARI_CENTER, 12)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
  }).addTo(map)
+  map.fitBounds(bariBounds)

  map.on('click', (e: LeafletMouseEvent) => {
+    if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
+      errors.value.location = 'Puoi inserire segnalazioni solo nel Comune di Bari.'
+      return
+    }
+
    updateLocation(e.latlng.lat, e.latlng.lng)
  })

@@ -87,6 +98,11 @@ const initMap = async () => {
 }

 const updateLocation = (lat: number, lng: number, zoomTo = false) => {
+  if (!isWithinBariBounds(lat, lng)) {
+    errors.value.location = 'Puoi inserire segnalazioni solo nel Comune di Bari.'
+    return
+  }
+
  form.value.latitude = Number(lat.toFixed(6))
  form.value.longitude = Number(lng.toFixed(6))

@@ -125,6 +141,8 @@ const validateForm = (): boolean => {
  }
  if (!form.value.latitude || !form.value.longitude) {
    errors.value.location = 'Imposta la posizione sulla mappa'
+  } else if (!isWithinBariBounds(form.value.latitude, form.value.longitude)) {
+    errors.value.location = 'La posizione deve essere nel Comune di Bari'
  }
  if (!form.value.address?.trim()) {
    errors.value.address = 'Inserisci l\'indirizzo'
@@ -186,7 +204,7 @@ const resetForm = () => {
  if (marker && map) {
    map.removeLayer(marker)
    marker = null
-    map.setView([41.8719, 12.5674], 5)
+    map.setView(BARI_CENTER, 12)
  }
 }

@@ -246,6 +264,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
          <BIIcon name="it-map-marker-circle" size="sm" color="primary" class="me-2" />
          Posizione *
        </label>
+        <p class="small text-muted mb-2">Le segnalazioni sono abilitate solo entro confini del Comune di Bari.</p>

        <button
          type="button"
@@ -275,7 +294,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
              step="0.000001"
              class="form-control form-control-sm"
              :class="{ 'is-invalid': errors.location }"
-              placeholder="Latitudine (es. 45.5)"
+              placeholder="Latitudine (Bari)"
              required
            />
          </div>
@@ -286,7 +305,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
              step="0.000001"
              class="form-control form-control-sm"
              :class="{ 'is-invalid': errors.location }"
-              placeholder="Longitudine (es. 10.2)"
+              placeholder="Longitudine (Bari)"
              required
            />
          </div>
@@ -307,7 +326,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
          type="text"
          class="form-control"
          :class="{ 'is-invalid': errors.address }"
-          placeholder="Es. Via Roma 123, Milano"
+          placeholder="Es. Via Sparano 12, Bari"
          required
        />
        <div v-if="errors.address" class="invalid-feedback">
@@ -393,4 +412,3 @@ textarea {
 </style>


-
@@ -7,7 +7,7 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
 <template>
  <div>
    <div class="callout callout-highlight callout-danger mb-4">
-      <div class="callout-title">Pannello di Amministrazione</div>
+      <div class="callout-title">Pannello Admin</div>
      <p>Accesso di livello 1. Da qui puoi gestire le configurazioni di sistema, le categorie e moderare le segnalazioni.</p>
    </div>

@@ -48,7 +48,7 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
      <div class="col-12 col-md-4 mb-3">
        <NuxtLink to="/admin/areas" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
          <BIIcon name="it-map-marker" size="sm" color="primary" class="mb-2" />
-          Aree GeoJSON
+          Aree
        </NuxtLink>
      </div>
      <div class="col-12 col-md-4 mb-3">
@@ -63,12 +63,6 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
          Moderazione Abusi
        </NuxtLink>
      </div>
-      <div class="col-12 col-md-6 mb-3">
-        <NuxtLink to="/open-data" class="btn btn-outline-secondary w-100 py-3 d-flex flex-column align-items-center">
-          <BIIcon name="it-chart-line" size="sm" class="mb-2" />
-          Vista Open Data
-        </NuxtLink>
-      </div>
    </div>
  </div>
 </template>
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ref, reactive, nextTick, onBeforeUnmount } from 'vue'
+import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'

 definePageMeta({
  middleware: 'auth',
  auth: { role: 'ADMIN' }
 })

-useHead({ title: 'Gestione Aree - Admin' })
+useHead({ title: 'Aree - Admin' })

 const { getAreas, createArea } = useAdmin()
 const { data: areasRes, pending, refresh } = useAsyncData('admin-areas', () => getAreas())
@@ -41,15 +42,31 @@ const openCreateModal = () => {
      map = null
    }

-    map = L.map('areaMap').setView([41.9028, 12.4964], 6)
+    const bariBounds = L.latLngBounds(
+      [BARI_BOUNDS.south, BARI_BOUNDS.west],
+      [BARI_BOUNDS.north, BARI_BOUNDS.east]
+    )
+
+    map = L.map('areaMap', {
+      maxBounds: bariBounds,
+      maxBoundsViscosity: 1,
+      minZoom: 12
+    }).setView(BARI_CENTER, 12)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© OpenStreetMap'
    }).addTo(map)

    polygon = L.polygon([], { color: 'red' }).addTo(map)
+    map.fitBounds(bariBounds)

    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.'
+        return
+      }
+
+      jsonError.value = ''
      mapPoints.value.push([e.latlng.lat, e.latlng.lng])
      polygon.setLatLngs(mapPoints.value)
      updateGeojson()
@@ -102,6 +119,12 @@ const handleCreate = async () => {
    if (!parsedGeojson.type || !parsedGeojson.coordinates) {
      throw new Error('GeoJSON non valido. Richiesto "type" e "coordinates".')
    }
+
+    const coordinates = parsedGeojson.coordinates?.[0] || []
+    const outsideBari = coordinates.some(([longitude, latitude]: [number, number]) => !isWithinBariBounds(latitude, longitude))
+    if (outsideBari) {
+      throw new Error('Area non valida. Tutti i punti devono essere nel Comune di Bari.')
+    }
  } catch (e: any) {
    jsonError.value = e.message || 'Formato JSON non valido.'
    return
@@ -128,9 +151,9 @@ const handleCreate = async () => {
 <template>
  <div class="container my-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
-      <h1 class="h3 font-weight-bold mb-0">Gestione Aree GeoJSON</h1>
+      <h1 class="h3 font-weight-bold mb-0">Gestione Aree</h1>
      <div>
-        <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Torna alla Dashboard</NuxtLink>
+        <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Torna al pannello admin</NuxtLink>
        <button class="btn btn-primary btn-sm" @click="openCreateModal">
          <BIIcon name="it-plus" size="xs" class="me-1" />
          Nuova Area
@@ -218,7 +241,7 @@ const handleCreate = async () => {
                    </button>
                  </div>
                  <div class="alert alert-light border small mb-2 p-2">
-                    Clicca sulla mappa per aggiungere vertici al poligono. Sono necessari almeno 3 punti.
+                    Clicca sulla mappa per aggiungere vertici al poligono. Sono necessari almeno 3 punti. Sono ammessi solo punti nel Comune di Bari.
                  </div>
                  <div id="areaMap" class="rounded border" style="height: 400px; width: 100%; z-index: 1;"></div>
                </div>
@@ -86,7 +86,7 @@ const submitTeam = async () => {
        <h1 class="h3 font-weight-bold mb-1">Categorie e Team</h1>
        <p class="text-muted mb-0">Gestione dati di riferimento per segnalazioni e interventi.</p>
      </div>
-      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna alla Dashboard</NuxtLink>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
    </div>

    <div class="row g-4">
@@ -65,7 +65,7 @@ const formatDate = (dateStr: string) => {
  <div class="container my-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h1 class="h3 font-weight-bold mb-0">Moderazione Abusi</h1>
-      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna alla Dashboard</NuxtLink>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
    </div>

    <div class="row mb-4">
@@ -76,7 +76,7 @@ const saveRoles = async () => {
  <div class="container my-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h1 class="h3 font-weight-bold mb-0">Gestione Utenti</h1>
-      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna alla Dashboard</NuxtLink>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
    </div>

    <div class="row mb-4">
@@ -162,6 +162,7 @@ const saveRoles = async () => {
                type="checkbox" 
                :value="role" 
                :id="'role-'+role"
+                :checked="selectedRoles.includes(role)"
                v-model="selectedRoles"
              >
              <label class="form-check-label" :for="'role-'+role">
@@ -19,14 +19,14 @@ const currentDashboard = computed(() => {

 const heroTitle = computed(() => {
  const role = user.value?.role?.toUpperCase()
-  if (role === 'ADMIN') return 'Pannello di Amministrazione'
+  if (role === 'ADMIN') return 'Pannello Admin'
  if (role === 'OPERATOR') return 'Gestione Operativa'
  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 === 'ADMIN') return 'Accesso amministrativo per configurazioni, utenti e moderazione'
  if (role === 'OPERATOR') return 'Prendi in carico e gestisci le segnalazioni in corso'
  return 'Riepilogo rapido delle tue segnalazioni e dei punti cittadino'
 })
@@ -87,7 +87,7 @@ useHead({
                  <BIIcon name="it-settings" size="xl" color="primary" class="mb-3" />
                  <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.
                  </p>
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { isWithinBariBounds } from '~/utils/bari'

 // 1. API Fetching Logic
 const { getOpenDataReports } = usePublic()
@@ -15,6 +16,10 @@ const { data: openDataResponse, pending } = await useAsyncData(
    { watch: [currentPage] } // Nuxt will re-fetch when currentPage changes
 )

+const visibleReports = computed(() =>
+  (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
@@ -102,7 +107,7 @@ const getStatusBadge = (status: string) => {
      <!-- GRID VIEW -->
      <div v-else-if="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 openDataResponse.reports" :key="report.id">
+          <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">
@@ -179,7 +184,7 @@ const getStatusBadge = (status: string) => {
          <div class="text-center text-muted">
            <BIIcon name="it-map" size="xl" class="mb-3 opacity-50" />
            <h4 class="h5">Mappa Interattiva</h4>
-            <p>Caricamento dei {{ openDataResponse?.reports?.length || 0 }} punti geografici in corso...</p>
+            <p>Caricamento dei {{ visibleReports.length || 0 }} punti geografici in corso...</p>
          </div>
        </div>
      </div>
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Report } from '~/types/api'
+import { isWithinBariBounds } from '~/utils/bari'

 definePageMeta({
  middleware: 'auth',
@@ -15,7 +16,9 @@ const filterStatus = ref('')

 const { data: reportsRes, pending } = useAsyncData('citizen-reports-list', () => getReports({}))

-const reports = computed<Report[]>(() => reportsRes.value?.reports || [])
+const reports = computed<Report[]>(() =>
+  (reportsRes.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
+)
 const filteredReports = computed(() => {
  if (!filterStatus.value) return reports.value
  if (filterStatus.value === 'IN_PROGRESS') {
@@ -0,0 +1,15 @@
+export const BARI_BOUNDS = {
+  south: 41.0160584,
+  north: 41.1697837,
+  west: 16.7172376,
+  east: 17.0334109,
+}
+
+export const BARI_CENTER: [number, number] = [41.1257843, 16.8620293]
+
+export const isWithinBariBounds = (latitude: number, longitude: number) =>
+  latitude >= BARI_BOUNDS.south &&
+  latitude <= BARI_BOUNDS.north &&
+  longitude >= BARI_BOUNDS.west &&
+  longitude <= BARI_BOUNDS.east
+