feat(admin): add update functionality for areas, categories, and teams in admin panel
This commit is contained in:
gabdevele
+111
-8
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, nextTick, onBeforeUnmount } from 'vue'
|
||||
import { ref, reactive, nextTick, onBeforeUnmount, computed } from 'vue'
|
||||
import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
|
||||
|
||||
definePageMeta({
|
||||
@@ -9,10 +9,11 @@ definePageMeta({
|
||||
|
||||
useHead({ title: 'Aree - Admin' })
|
||||
|
||||
const { getAreas, createArea } = useAdmin()
|
||||
const { getAreas, createArea, updateArea } = useAdmin()
|
||||
const { data: areasRes, pending, refresh } = useAsyncData('admin-areas', () => getAreas())
|
||||
|
||||
const isCreating = ref(false)
|
||||
const editingAreaId = ref<number | null>(null)
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
description: '',
|
||||
@@ -25,7 +26,12 @@ let map: any = null
|
||||
let polygon: any = null
|
||||
const mapPoints = ref<[number, number][]>([])
|
||||
|
||||
const modalTitle = computed(() => editingAreaId.value ? 'Modifica Area' : 'Nuova Area')
|
||||
const submitLabel = computed(() => editingAreaId.value ? 'Salva Modifiche' : 'Crea Area')
|
||||
const isEditing = computed(() => editingAreaId.value !== null)
|
||||
|
||||
const openCreateModal = () => {
|
||||
editingAreaId.value = null
|
||||
formData.name = ''
|
||||
formData.description = ''
|
||||
formData.geojson = ''
|
||||
@@ -74,6 +80,73 @@ const openCreateModal = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const loadPolygonFromGeoJson = (boundaryGeojson: any) => {
|
||||
const coordinates = boundaryGeojson?.coordinates?.[0]
|
||||
if (!Array.isArray(coordinates)) {
|
||||
mapPoints.value = []
|
||||
return
|
||||
}
|
||||
|
||||
const normalized = coordinates
|
||||
.slice(0, -1)
|
||||
.map(([longitude, latitude]: [number, number]) => [latitude, longitude] as [number, number])
|
||||
|
||||
mapPoints.value = normalized
|
||||
if (polygon) {
|
||||
polygon.setLatLngs(mapPoints.value)
|
||||
}
|
||||
}
|
||||
|
||||
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) : ''
|
||||
jsonError.value = ''
|
||||
mapPoints.value = []
|
||||
isCreating.value = true
|
||||
|
||||
nextTick(async () => {
|
||||
const L = (await import('leaflet')).default
|
||||
|
||||
if (map) {
|
||||
map.remove()
|
||||
map = null
|
||||
}
|
||||
|
||||
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)
|
||||
loadPolygonFromGeoJson(area.boundary_geojson)
|
||||
|
||||
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()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const clearMap = () => {
|
||||
mapPoints.value = []
|
||||
if (polygon) {
|
||||
@@ -100,6 +173,7 @@ const updateGeojson = () => {
|
||||
|
||||
const closeCreateModal = () => {
|
||||
isCreating.value = false
|
||||
editingAreaId.value = null
|
||||
if (map) {
|
||||
map.remove()
|
||||
map = null
|
||||
@@ -131,19 +205,35 @@ const handleCreate = async () => {
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await createArea({
|
||||
const payload = {
|
||||
name: formData.name,
|
||||
description: formData.description || undefined,
|
||||
boundary_geojson: parsedGeojson
|
||||
})
|
||||
}
|
||||
|
||||
const res = editingAreaId.value
|
||||
? await updateArea(editingAreaId.value, payload)
|
||||
: await createArea(payload)
|
||||
|
||||
if (res.ok) {
|
||||
await refresh()
|
||||
closeCreateModal()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to create area', err)
|
||||
alert('Errore durante la creazione dell\'area.')
|
||||
console.error('Failed to save area', err)
|
||||
alert('Errore durante il salvataggio dell\'area.')
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleAreaActive = async (area: any) => {
|
||||
try {
|
||||
const res = await updateArea(area.id, { active: !area.active })
|
||||
if (res.ok) {
|
||||
await refresh()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to update area status', err)
|
||||
alert('Errore durante l\'aggiornamento dello stato area.')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -178,6 +268,7 @@ const handleCreate = async () => {
|
||||
<th>Descrizione</th>
|
||||
<th>Stato</th>
|
||||
<th>GeoJSON</th>
|
||||
<th class="text-end">Azioni</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -193,6 +284,18 @@ const handleCreate = async () => {
|
||||
<span v-if="area.boundary_geojson" class="badge border border-primary text-primary">Configurato</span>
|
||||
<span v-else class="badge border border-danger text-danger">Mancante</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-outline-primary me-2" @click="openEditModal(area)">
|
||||
Modifica
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="area.active ? 'btn-outline-secondary' : 'btn-outline-success'"
|
||||
@click="handleToggleAreaActive(area)"
|
||||
>
|
||||
{{ area.active ? 'Disattiva' : 'Attiva' }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -204,7 +307,7 @@ const handleCreate = async () => {
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Nuova Area</h5>
|
||||
<h5 class="modal-title">{{ modalTitle }}</h5>
|
||||
<button type="button" class="btn-close" @click="closeCreateModal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@@ -251,7 +354,7 @@ const handleCreate = async () => {
|
||||
<div class="modal-footer d-flex justify-content-end gap-2">
|
||||
<button type="button" class="btn btn-outline-secondary" @click="closeCreateModal">Annulla</button>
|
||||
<button type="button" class="btn btn-primary" :disabled="!formData.name || !formData.geojson" @click="handleCreate">
|
||||
Crea Area
|
||||
{{ submitLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user