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 17:06:12 +02:00
committed by reloia
Unverified
parent 98e1f006af
commit 00b0f97505
4 changed files with 261 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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>