441 lines
16 KiB
Vue
441 lines
16 KiB
Vue
<script setup lang="ts">
|
|
import type { Category, Team } from '~/types/api'
|
|
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
auth: { role: 'ADMIN' }
|
|
})
|
|
|
|
useHead({ title: 'Categorie e Team - Admin' })
|
|
|
|
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())
|
|
const { data: teamsRes, refresh: refreshTeams } = await useAsyncData('admin-teams', () => getTeams())
|
|
const { data: areasRes } = await useAsyncData('admin-team-areas', () => getAreas())
|
|
|
|
const categoryForm = reactive({
|
|
name: '',
|
|
description: '',
|
|
})
|
|
|
|
const editingCategoryId = ref<number | null>(null)
|
|
|
|
const teamForm = reactive({
|
|
name: '',
|
|
description: '',
|
|
team_category_id: null as number | null,
|
|
area_id: null as number | null,
|
|
})
|
|
|
|
const editingTeamId = ref<number | null>(null)
|
|
|
|
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 || [])
|
|
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 {
|
|
const payload = {
|
|
name: categoryForm.name.trim(),
|
|
description: categoryForm.description.trim() || undefined,
|
|
}
|
|
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.'
|
|
} finally {
|
|
isSavingCategory.value = false
|
|
}
|
|
}
|
|
|
|
const submitTeam = async () => {
|
|
if (!teamForm.team_category_id) return
|
|
|
|
teamError.value = ''
|
|
isSavingTeam.value = true
|
|
|
|
try {
|
|
const payload = {
|
|
name: teamForm.name.trim(),
|
|
description: teamForm.description.trim() || undefined,
|
|
team_category_id: teamForm.team_category_id,
|
|
area_id: teamForm.area_id || undefined,
|
|
}
|
|
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.'
|
|
} finally {
|
|
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 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 })
|
|
await refreshTeams()
|
|
} catch (error: any) {
|
|
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>
|
|
<div class="container my-5">
|
|
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
|
|
<div>
|
|
<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 al pannello admin</NuxtLink>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-12 col-xl-5">
|
|
<div class="card card-bg border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<h2 class="h5 mb-0">Categorie</h2>
|
|
<span class="badge bg-light text-dark border">{{ categories.length }}</span>
|
|
</div>
|
|
|
|
<div v-if="categoryError" class="alert alert-danger py-2" role="alert">
|
|
{{ categoryError }}
|
|
</div>
|
|
|
|
<form class="mb-4" @submit.prevent="submitCategory">
|
|
<div class="mb-3">
|
|
<label class="form-label">Nome categoria</label>
|
|
<input v-model="categoryForm.name" type="text" class="form-control" required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Descrizione</label>
|
|
<textarea v-model="categoryForm.description" class="form-control" rows="3"></textarea>
|
|
</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>
|
|
{{ editingCategoryId ? 'Salva categoria' : 'Crea categoria' }}
|
|
</button>
|
|
<button
|
|
v-if="editingCategoryId"
|
|
type="button"
|
|
class="btn btn-outline-secondary ms-2"
|
|
@click="resetCategoryForm"
|
|
>
|
|
Annulla
|
|
</button>
|
|
</form>
|
|
|
|
<div class="table-responsive report-table-wrapper">
|
|
<table class="table table-hover report-table mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Nome</th>
|
|
<th>Stato</th>
|
|
<th class="text-end">Azioni</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="category in categories" :key="category.id">
|
|
<td class="report-table-id">#{{ category.id }}</td>
|
|
<td>
|
|
<strong>{{ category.name }}</strong>
|
|
<div v-if="category.description" class="small text-muted mt-1">{{ category.description }}</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge" :class="category.active === false ? 'bg-secondary' : 'bg-success'">
|
|
{{ 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>
|
|
<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">
|
|
<td colspan="4" class="text-muted">Nessuna categoria configurata.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-xl-7">
|
|
<div class="card card-bg border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<h2 class="h5 mb-0">Team di intervento</h2>
|
|
<span class="badge bg-light text-dark border">{{ teams.length }}</span>
|
|
</div>
|
|
|
|
<div v-if="teamError" class="alert alert-danger py-2" role="alert">
|
|
{{ teamError }}
|
|
</div>
|
|
|
|
<form class="row g-3 mb-4" @submit.prevent="submitTeam">
|
|
<div class="col-12 col-md-6">
|
|
<label class="form-label">Nome team</label>
|
|
<input v-model="teamForm.name" type="text" class="form-control" required />
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<label class="form-label">Categoria coperta</label>
|
|
<select v-model.number="teamForm.team_category_id" class="form-select" required>
|
|
<option :value="null">Seleziona categoria</option>
|
|
<option v-for="category in categories" :key="category.id" :value="category.id">
|
|
{{ category.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<label class="form-label">Area</label>
|
|
<select v-model.number="teamForm.area_id" class="form-select">
|
|
<option :value="null">Tutte le aree</option>
|
|
<option v-for="area in areas" :key="area.id" :value="area.id">
|
|
{{ area.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<label class="form-label">Descrizione</label>
|
|
<input v-model="teamForm.description" type="text" class="form-control" />
|
|
</div>
|
|
<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>
|
|
{{ 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>
|
|
|
|
<div class="table-responsive report-table-wrapper">
|
|
<table class="table table-hover report-table mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Team</th>
|
|
<th>Categoria</th>
|
|
<th>Area</th>
|
|
<th>Stato</th>
|
|
<th class="text-end">Azioni</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="team in teams" :key="team.id">
|
|
<td class="report-table-id">#{{ team.id }}</td>
|
|
<td>
|
|
<strong>{{ team.name }}</strong>
|
|
<div v-if="team.description" class="small text-muted mt-1">{{ team.description }}</div>
|
|
</td>
|
|
<td>{{ team.category_name || '-' }}</td>
|
|
<td>{{ team.area_name || 'Tutte' }}</td>
|
|
<td>
|
|
<span class="badge" :class="team.active === false ? 'bg-secondary' : 'bg-success'">
|
|
{{ 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>
|
|
<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">
|
|
<td colspan="6" class="text-muted">Nessun team configurato.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</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>
|