237 lines
8.9 KiB
Vue
237 lines
8.9 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
auth: { role: 'ADMIN' }
|
|
})
|
|
|
|
useHead({ title: 'Categorie e Team - Admin' })
|
|
|
|
const { createCategory, getTeams, createTeam, 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 teamForm = reactive({
|
|
name: '',
|
|
description: '',
|
|
team_category_id: null as number | null,
|
|
area_id: null as number | null,
|
|
})
|
|
|
|
const isSavingCategory = ref(false)
|
|
const isSavingTeam = ref(false)
|
|
const categoryError = ref('')
|
|
const teamError = ref('')
|
|
|
|
const categories = computed(() => categoriesRes.value?.categories || [])
|
|
const teams = computed(() => teamsRes.value?.teams || [])
|
|
const areas = computed(() => areasRes.value?.areas || [])
|
|
|
|
const submitCategory = async () => {
|
|
categoryError.value = ''
|
|
isSavingCategory.value = true
|
|
|
|
try {
|
|
await createCategory({
|
|
name: categoryForm.name.trim(),
|
|
description: categoryForm.description.trim() || undefined,
|
|
})
|
|
categoryForm.name = ''
|
|
categoryForm.description = ''
|
|
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 {
|
|
await createTeam({
|
|
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
|
|
await refreshTeams()
|
|
} catch (error: any) {
|
|
teamError.value = error?.data?.message || 'Creazione team non riuscita.'
|
|
} finally {
|
|
isSavingTeam.value = false
|
|
}
|
|
}
|
|
</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>
|
|
Crea categoria
|
|
</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>
|
|
</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>
|
|
</tr>
|
|
<tr v-if="categories.length === 0">
|
|
<td colspan="3" 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>
|
|
Crea team
|
|
</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>
|
|
</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>
|
|
</tr>
|
|
<tr v-if="teams.length === 0">
|
|
<td colspan="5" class="text-muted">Nessun team configurato.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|