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

feat(admin): add update functionality for areas, categories, and teams in admin panel

Browse Source
This commit is contained in:
gabdevele
2026-06-15 14:53:51 +02:00 Unverified
parent 486cded844
commit caa014b33f
4 changed files with 261 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/admin/areas.vue
+111 -8
View File
@@ -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>
app/pages/admin/catalog.vue
+115 -15
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { Category, Team } from '~/types/api'
definePageMeta({
middleware: 'auth',
auth: { role: 'ADMIN' }
@@ -6,7 +8,7 @@ definePageMeta({
useHead({ title: 'Categorie e Team - Admin' })
const { createCategory, getTeams, createTeam, getAreas } = useAdmin()
const { createCategory, updateCategory, getTeams, createTeam, updateTeam, getAreas } = useAdmin()
const { getCategories } = useReports()
const { data: categoriesRes, refresh: refreshCategories } = await useAsyncData('report-categories-admin-view', () => getCategories())
@@ -18,6 +20,8 @@ const categoryForm = reactive({
description: '',
})
const editingCategoryId = ref<number | null>(null)
const teamForm = reactive({
name: '',
description: '',
@@ -25,6 +29,8 @@ const teamForm = reactive({
area_id: null as number | null,
})
const editingTeamId = ref<number | null>(null)
const isSavingCategory = ref(false)
const isSavingTeam = ref(false)
const categoryError = ref('')
@@ -34,17 +40,49 @@ const categories = computed(() => categoriesRes.value?.categories || [])
const teams = computed(() => teamsRes.value?.teams || [])
const areas = computed(() => areasRes.value?.areas || [])
const resetCategoryForm = () => {
editingCategoryId.value = null
categoryForm.name = ''
categoryForm.description = ''
}
const resetTeamForm = () => {
editingTeamId.value = null
teamForm.name = ''
teamForm.description = ''
teamForm.team_category_id = null
teamForm.area_id = null
}
const editCategory = (category: Category) => {
editingCategoryId.value = category.id
categoryForm.name = category.name
categoryForm.description = category.description || ''
}
const editTeam = (team: Team) => {
editingTeamId.value = team.id
teamForm.name = team.name
teamForm.description = team.description || ''
teamForm.team_category_id = team.team_category_id
teamForm.area_id = team.area_id ?? null
}
const submitCategory = async () => {
categoryError.value = ''
isSavingCategory.value = true
try {
await createCategory({
const payload = {
name: categoryForm.name.trim(),
description: categoryForm.description.trim() || undefined,
})
categoryForm.name = ''
categoryForm.description = ''
}
if (editingCategoryId.value) {
await updateCategory(editingCategoryId.value, payload)
} else {
await createCategory(payload)
}
resetCategoryForm()
await refreshCategories()
} catch (error: any) {
categoryError.value = error?.data?.message || 'Creazione categoria non riuscita.'
@@ -60,16 +98,18 @@ const submitTeam = async () => {
isSavingTeam.value = true
try {
await createTeam({
const payload = {
name: teamForm.name.trim(),
description: teamForm.description.trim() || undefined,
team_category_id: teamForm.team_category_id,
area_id: teamForm.area_id || undefined,
})
teamForm.name = ''
teamForm.description = ''
teamForm.team_category_id = null
teamForm.area_id = null
}
if (editingTeamId.value) {
await updateTeam(editingTeamId.value, payload)
} else {
await createTeam(payload)
}
resetTeamForm()
await refreshTeams()
} catch (error: any) {
teamError.value = error?.data?.message || 'Creazione team non riuscita.'
@@ -77,6 +117,24 @@ const submitTeam = async () => {
isSavingTeam.value = false
}
}
const toggleCategoryActive = async (category: Category) => {
try {
await updateCategory(category.id, { active: category.active === false })
await refreshCategories()
} catch (error: any) {
categoryError.value = error?.data?.message || 'Aggiornamento categoria non riuscito.'
}
}
const toggleTeamActive = async (team: Team) => {
try {
await updateTeam(team.id, { active: team.active === false })
await refreshTeams()
} catch (error: any) {
teamError.value = error?.data?.message || 'Aggiornamento team non riuscito.'
}
}
</script>
<template>
@@ -113,7 +171,15 @@ const submitTeam = async () => {
</div>
<button type="submit" class="btn btn-primary" :disabled="isSavingCategory || !categoryForm.name.trim()">
<span v-if="isSavingCategory" class="spinner-border spinner-border-sm me-2"></span>
Crea categoria
{{ editingCategoryId ? 'Salva categoria' : 'Crea categoria' }}
</button>
<button
v-if="editingCategoryId"
type="button"
class="btn btn-outline-secondary ms-2"
@click="resetCategoryForm"
>
Annulla
</button>
</form>
@@ -124,6 +190,7 @@ const submitTeam = async () => {
<th>ID</th>
<th>Nome</th>
<th>Stato</th>
<th class="text-end">Azioni</th>
</tr>
</thead>
<tbody>
@@ -138,9 +205,21 @@ const submitTeam = async () => {
{{ category.active === false ? 'Inattiva' : 'Attiva' }}
</span>
</td>
<td class="text-end">
<button class="btn btn-sm btn-outline-primary me-2" @click="editCategory(category)">
Modifica
</button>
<button
class="btn btn-sm"
:class="category.active === false ? 'btn-outline-success' : 'btn-outline-secondary'"
@click="toggleCategoryActive(category)"
>
{{ category.active === false ? 'Attiva' : 'Disattiva' }}
</button>
</td>
</tr>
<tr v-if="categories.length === 0">
<td colspan="3" class="text-muted">Nessuna categoria configurata.</td>
<td colspan="4" class="text-muted">Nessuna categoria configurata.</td>
</tr>
</tbody>
</table>
@@ -191,7 +270,15 @@ const submitTeam = async () => {
<div class="col-12">
<button type="submit" class="btn btn-primary" :disabled="isSavingTeam || !teamForm.name.trim() || !teamForm.team_category_id">
<span v-if="isSavingTeam" class="spinner-border spinner-border-sm me-2"></span>
Crea team
{{ editingTeamId ? 'Salva team' : 'Crea team' }}
</button>
<button
v-if="editingTeamId"
type="button"
class="btn btn-outline-secondary ms-2"
@click="resetTeamForm"
>
Annulla
</button>
</div>
</form>
@@ -205,6 +292,7 @@ const submitTeam = async () => {
<th>Categoria</th>
<th>Area</th>
<th>Stato</th>
<th class="text-end">Azioni</th>
</tr>
</thead>
<tbody>
@@ -221,9 +309,21 @@ const submitTeam = async () => {
{{ team.active === false ? 'Inattivo' : 'Attivo' }}
</span>
</td>
<td class="text-end">
<button class="btn btn-sm btn-outline-primary me-2" @click="editTeam(team)">
Modifica
</button>
<button
class="btn btn-sm"
:class="team.active === false ? 'btn-outline-success' : 'btn-outline-secondary'"
@click="toggleTeamActive(team)"
>
{{ team.active === false ? 'Attiva' : 'Disattiva' }}
</button>
</td>
</tr>
<tr v-if="teams.length === 0">
<td colspan="5" class="text-muted">Nessun team configurato.</td>
<td colspan="6" class="text-muted">Nessun team configurato.</td>
</tr>
</tbody>
</table>