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

app/pages/admin/catalog.vue

@@ -8,7 +8,7 @@ definePageMeta({
 
 useHead({ title: 'Categorie e Team - Admin' })
 
-const { createCategory, updateCategory, getTeams, createTeam, updateTeam, getAreas } = useAdmin()
+const { createCategory, updateCategory, deleteCategory, getTeams, createTeam, updateTeam, deleteTeam, getAreas } = useAdmin()
 const { getCategories } = useReports()
 
 const { data: categoriesRes, refresh: refreshCategories } = await useAsyncData('report-categories-admin-view', () => getCategories())
@@ -35,6 +35,10 @@ const isSavingCategory = ref(false)
 const isSavingTeam = ref(false)
 const categoryError = ref('')
 const teamError = ref('')
+const deletingCategoryId = ref<number | null>(null)
+const deletingTeamId = ref<number | null>(null)
+const categoryPendingDelete = ref<Category | null>(null)
+const teamPendingDelete = ref<Team | null>(null)
 
 const categories = computed(() => categoriesRes.value?.categories || [])
 const teams = computed(() => teamsRes.value?.teams || [])
@@ -127,6 +131,37 @@ const toggleCategoryActive = async (category: Category) => {
   }
 }
 
+const askDeleteCategory = (category: Category) => {
+  categoryPendingDelete.value = category
+}
+
+const closeDeleteCategoryModal = () => {
+  if (deletingCategoryId.value) return
+  categoryPendingDelete.value = null
+}
+
+const handleDeleteCategory = async () => {
+  if (!categoryPendingDelete.value) return
+
+  const category = categoryPendingDelete.value
+
+  deletingCategoryId.value = category.id
+  categoryError.value = ''
+
+  try {
+    await deleteCategory(category.id)
+    if (editingCategoryId.value === category.id) {
+      resetCategoryForm()
+    }
+    await refreshCategories()
+    categoryPendingDelete.value = null
+  } catch (error: any) {
+    categoryError.value = error?.data?.message || 'Eliminazione categoria non riuscita.'
+  } finally {
+    deletingCategoryId.value = null
+  }
+}
+
 const toggleTeamActive = async (team: Team) => {
   try {
     await updateTeam(team.id, { active: team.active === false })
@@ -135,6 +170,37 @@ const toggleTeamActive = async (team: Team) => {
     teamError.value = error?.data?.message || 'Aggiornamento team non riuscito.'
   }
 }
+
+const askDeleteTeam = (team: Team) => {
+  teamPendingDelete.value = team
+}
+
+const closeDeleteTeamModal = () => {
+  if (deletingTeamId.value) return
+  teamPendingDelete.value = null
+}
+
+const handleDeleteTeam = async () => {
+  if (!teamPendingDelete.value) return
+
+  const team = teamPendingDelete.value
+
+  deletingTeamId.value = team.id
+  teamError.value = ''
+
+  try {
+    await deleteTeam(team.id)
+    if (editingTeamId.value === team.id) {
+      resetTeamForm()
+    }
+    await refreshTeams()
+    teamPendingDelete.value = null
+  } catch (error: any) {
+    teamError.value = error?.data?.message || 'Eliminazione team non riuscita.'
+  } finally {
+    deletingTeamId.value = null
+  }
+}
 </script>
 
 <template>
@@ -216,6 +282,14 @@ const toggleTeamActive = async (team: Team) => {
                       >
                         {{ category.active === false ? 'Attiva' : 'Disattiva' }}
                       </button>
+                      <button
+                        class="btn btn-sm btn-outline-danger ms-2"
+                        :disabled="deletingCategoryId === category.id"
+                        @click="askDeleteCategory(category)"
+                      >
+                        <span v-if="deletingCategoryId === category.id" class="spinner-border spinner-border-sm me-1"></span>
+                        Elimina
+                      </button>
                     </td>
                   </tr>
                   <tr v-if="categories.length === 0">
@@ -320,6 +394,14 @@ const toggleTeamActive = async (team: Team) => {
                       >
                         {{ team.active === false ? 'Attiva' : 'Disattiva' }}
                       </button>
+                      <button
+                        class="btn btn-sm btn-outline-danger ms-2"
+                        :disabled="deletingTeamId === team.id"
+                        @click="askDeleteTeam(team)"
+                      >
+                        <span v-if="deletingTeamId === team.id" class="spinner-border spinner-border-sm me-1"></span>
+                        Elimina
+                      </button>
                     </td>
                   </tr>
                   <tr v-if="teams.length === 0">
@@ -332,5 +414,27 @@ const toggleTeamActive = async (team: Team) => {
         </div>
       </div>
     </div>
+
+    <ConfirmModal
+      :open="categoryPendingDelete !== null"
+      title="Elimina categoria"
+      :message="categoryPendingDelete ? `Vuoi eliminare categoria \\\"${categoryPendingDelete.name}\\\"? Operazione irreversibile.` : ''"
+      confirm-label="Elimina categoria"
+      confirm-class="btn-danger"
+      :pending="deletingCategoryId !== null"
+      @cancel="closeDeleteCategoryModal"
+      @confirm="handleDeleteCategory"
+    />
+
+    <ConfirmModal
+      :open="teamPendingDelete !== null"
+      title="Elimina team"
+      :message="teamPendingDelete ? `Vuoi eliminare team \\\"${teamPendingDelete.name}\\\"? Operazione irreversibile.` : ''"
+      confirm-label="Elimina team"
+      confirm-class="btn-danger"
+      :pending="deletingTeamId !== null"
+      @cancel="closeDeleteTeamModal"
+      @confirm="handleDeleteTeam"
+    />
   </div>
 </template>