feat(admin): add delete functionality for areas, categories, and teams in admin panel
This commit is contained in:
gabdevele
+58
-18
@@ -9,7 +9,7 @@ definePageMeta({
|
||||
|
||||
useHead({ title: 'Aree - Admin' })
|
||||
|
||||
const { getAreas, createArea, updateArea } = useAdmin()
|
||||
const { getAreas, createArea, updateArea, deleteArea } = useAdmin()
|
||||
const { data: areasRes, pending, refresh } = useAsyncData('admin-areas', () => getAreas())
|
||||
|
||||
const isCreating = ref(false)
|
||||
@@ -20,6 +20,9 @@ const formData = reactive({
|
||||
geojson: ''
|
||||
})
|
||||
const jsonError = ref('')
|
||||
const actionError = ref('')
|
||||
const deletingAreaId = ref<number | null>(null)
|
||||
const areaPendingDelete = ref<any | null>(null)
|
||||
|
||||
// Map variables
|
||||
let map: any = null
|
||||
@@ -29,8 +32,10 @@ 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 areas = computed(() => areasRes.value?.areas || [])
|
||||
|
||||
const openCreateModal = () => {
|
||||
actionError.value = ''
|
||||
editingAreaId.value = null
|
||||
formData.name = ''
|
||||
formData.description = ''
|
||||
@@ -98,6 +103,7 @@ const loadPolygonFromGeoJson = (boundaryGeojson: any) => {
|
||||
}
|
||||
|
||||
const openEditModal = (area: any) => {
|
||||
actionError.value = ''
|
||||
editingAreaId.value = area.id
|
||||
formData.name = area.name || ''
|
||||
formData.description = area.description || ''
|
||||
@@ -218,22 +224,45 @@ const handleCreate = async () => {
|
||||
if (res.ok) {
|
||||
await refresh()
|
||||
closeCreateModal()
|
||||
actionError.value = ''
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to save area', err)
|
||||
alert('Errore durante il salvataggio dell\'area.')
|
||||
actionError.value = 'Errore durante il salvataggio dell\'area.'
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleAreaActive = async (area: any) => {
|
||||
const askDeleteArea = (area: any) => {
|
||||
areaPendingDelete.value = area
|
||||
}
|
||||
|
||||
const closeDeleteAreaModal = () => {
|
||||
if (deletingAreaId.value) return
|
||||
areaPendingDelete.value = null
|
||||
}
|
||||
|
||||
const handleDeleteArea = async () => {
|
||||
if (!areaPendingDelete.value) return
|
||||
|
||||
const area = areaPendingDelete.value
|
||||
|
||||
deletingAreaId.value = area.id
|
||||
actionError.value = ''
|
||||
|
||||
try {
|
||||
const res = await updateArea(area.id, { active: !area.active })
|
||||
const res = await deleteArea(area.id)
|
||||
if (res.ok) {
|
||||
if (editingAreaId.value === area.id) {
|
||||
closeCreateModal()
|
||||
}
|
||||
await refresh()
|
||||
areaPendingDelete.value = null
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to update area status', err)
|
||||
alert('Errore durante l\'aggiornamento dello stato area.')
|
||||
} catch (err: any) {
|
||||
console.error('Failed to delete area', err)
|
||||
actionError.value = err?.data?.message || 'Errore durante eliminazione area.'
|
||||
} finally {
|
||||
deletingAreaId.value = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -255,10 +284,14 @@ const handleToggleAreaActive = async (area: any) => {
|
||||
<div class="spinner-border text-primary" role="status"></div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!areasRes?.areas || areasRes.areas.length === 0" class="alert alert-info">
|
||||
<div v-else-if="areas.length === 0" class="alert alert-info">
|
||||
Nessuna area configurata.
|
||||
</div>
|
||||
|
||||
<div v-if="actionError" class="alert alert-danger">
|
||||
{{ actionError }}
|
||||
</div>
|
||||
|
||||
<div v-else class="table-responsive">
|
||||
<table class="table table-hover align-middle bg-white shadow-sm rounded">
|
||||
<thead class="table-light">
|
||||
@@ -266,20 +299,15 @@ const handleToggleAreaActive = async (area: any) => {
|
||||
<th>ID</th>
|
||||
<th>Nome</th>
|
||||
<th>Descrizione</th>
|
||||
<th>Stato</th>
|
||||
<th>GeoJSON</th>
|
||||
<th class="text-end">Azioni</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="area in areasRes.areas" :key="area.id">
|
||||
<tr v-for="area in areas" :key="area.id">
|
||||
<td>{{ area.id }}</td>
|
||||
<td><strong>{{ area.name }}</strong></td>
|
||||
<td>{{ area.description || '-' }}</td>
|
||||
<td>
|
||||
<span v-if="area.active" class="badge bg-success">Attiva</span>
|
||||
<span v-else class="badge bg-secondary">Inattiva</span>
|
||||
</td>
|
||||
<td>
|
||||
<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>
|
||||
@@ -289,11 +317,12 @@ const handleToggleAreaActive = async (area: any) => {
|
||||
Modifica
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="area.active ? 'btn-outline-secondary' : 'btn-outline-success'"
|
||||
@click="handleToggleAreaActive(area)"
|
||||
class="btn btn-sm btn-outline-danger ms-2"
|
||||
:disabled="deletingAreaId === area.id"
|
||||
@click="askDeleteArea(area)"
|
||||
>
|
||||
{{ area.active ? 'Disattiva' : 'Attiva' }}
|
||||
<span v-if="deletingAreaId === area.id" class="spinner-border spinner-border-sm me-1"></span>
|
||||
Elimina
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -360,6 +389,17 @@ const handleToggleAreaActive = async (area: any) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmModal
|
||||
:open="areaPendingDelete !== null"
|
||||
title="Elimina area"
|
||||
:message="areaPendingDelete ? `Vuoi eliminare area \\\"${areaPendingDelete.name}\\\"? Operazione irreversibile.` : ''"
|
||||
confirm-label="Elimina area"
|
||||
confirm-class="btn-danger"
|
||||
:pending="deletingAreaId !== null"
|
||||
@cancel="closeDeleteAreaModal"
|
||||
@confirm="handleDeleteArea"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
+105
-1
@@ -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>
|
||||
|
||||
+104
-17
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
@@ -13,6 +13,19 @@ const { getModerationFlags, updateModerationFlag } = useAdmin()
|
||||
const page = ref(1)
|
||||
const perPage = ref(10)
|
||||
const statusFilter = ref('')
|
||||
const actionError = ref('')
|
||||
const resolveModal = reactive({
|
||||
open: false,
|
||||
flagId: null as number | null,
|
||||
rejectReport: false,
|
||||
note: '',
|
||||
pending: false,
|
||||
})
|
||||
const dismissModal = reactive({
|
||||
open: false,
|
||||
flagId: null as number | null,
|
||||
pending: false,
|
||||
})
|
||||
|
||||
const { data: flagsRes, pending, refresh } = useAsyncData(
|
||||
'admin-moderation-flags',
|
||||
@@ -20,36 +33,72 @@ const { data: flagsRes, pending, refresh } = useAsyncData(
|
||||
{ watch: [page, statusFilter] }
|
||||
)
|
||||
|
||||
const handleResolve = async (id: number, rejectReport: boolean) => {
|
||||
const note = prompt('Inserisci una nota di risoluzione (opzionale):')
|
||||
if (note === null) return // cancelled
|
||||
|
||||
const openResolveModal = (id: number, rejectReport: boolean) => {
|
||||
resolveModal.open = true
|
||||
resolveModal.flagId = id
|
||||
resolveModal.rejectReport = rejectReport
|
||||
resolveModal.note = ''
|
||||
}
|
||||
|
||||
const closeResolveModal = () => {
|
||||
if (resolveModal.pending) return
|
||||
resolveModal.open = false
|
||||
resolveModal.flagId = null
|
||||
resolveModal.note = ''
|
||||
}
|
||||
|
||||
const handleResolve = async () => {
|
||||
if (!resolveModal.flagId) return
|
||||
|
||||
resolveModal.pending = true
|
||||
actionError.value = ''
|
||||
|
||||
try {
|
||||
const res = await updateModerationFlag(id, {
|
||||
const res = await updateModerationFlag(resolveModal.flagId, {
|
||||
status: 'RESOLVED',
|
||||
reject_report: rejectReport,
|
||||
resolution_note: note
|
||||
reject_report: resolveModal.rejectReport,
|
||||
resolution_note: resolveModal.note || undefined
|
||||
})
|
||||
if (res.ok) {
|
||||
await refresh()
|
||||
closeResolveModal()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to resolve flag', err)
|
||||
alert('Errore durante la risoluzione della segnalazione.')
|
||||
actionError.value = 'Errore durante la risoluzione della segnalazione.'
|
||||
} finally {
|
||||
resolveModal.pending = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleDismiss = async (id: number) => {
|
||||
if (!confirm('Sei sicuro di voler ignorare (dismiss) questo flag?')) return
|
||||
|
||||
const openDismissModal = (id: number) => {
|
||||
dismissModal.open = true
|
||||
dismissModal.flagId = id
|
||||
}
|
||||
|
||||
const closeDismissModal = () => {
|
||||
if (dismissModal.pending) return
|
||||
dismissModal.open = false
|
||||
dismissModal.flagId = null
|
||||
}
|
||||
|
||||
const handleDismiss = async () => {
|
||||
if (!dismissModal.flagId) return
|
||||
|
||||
dismissModal.pending = true
|
||||
actionError.value = ''
|
||||
|
||||
try {
|
||||
const res = await updateModerationFlag(id, { status: 'DISMISSED' })
|
||||
const res = await updateModerationFlag(dismissModal.flagId, { status: 'DISMISSED' })
|
||||
if (res.ok) {
|
||||
await refresh()
|
||||
closeDismissModal()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to dismiss flag', err)
|
||||
alert('Errore durante l\'aggiornamento.')
|
||||
actionError.value = 'Errore durante l\'aggiornamento.'
|
||||
} finally {
|
||||
dismissModal.pending = false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -88,6 +137,10 @@ const formatDate = (dateStr: string) => {
|
||||
Nessun elemento da moderare al momento.
|
||||
</div>
|
||||
|
||||
<div v-if="actionError" class="alert alert-danger">
|
||||
{{ actionError }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="card mb-3 shadow-sm border-0" v-for="flag in flagsRes.flags" :key="flag.id">
|
||||
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
||||
@@ -134,13 +187,13 @@ const formatDate = (dateStr: string) => {
|
||||
|
||||
<div class="col-md-4 text-end" v-if="flag.status === 'OPEN'">
|
||||
<div class="d-flex flex-column gap-2 mt-3 mt-md-0">
|
||||
<button class="btn btn-outline-danger btn-sm" @click="handleResolve(flag.id, true)">
|
||||
<button class="btn btn-outline-danger btn-sm" @click="openResolveModal(flag.id, true)">
|
||||
<BIIcon name="it-ban" size="xs" /> Risolvi & Rigetta Segn.
|
||||
</button>
|
||||
<button class="btn btn-outline-warning btn-sm" @click="handleResolve(flag.id, false)">
|
||||
<button class="btn btn-outline-warning btn-sm" @click="openResolveModal(flag.id, false)">
|
||||
<BIIcon name="it-check" size="xs" /> Risolvi (Solo Avviso)
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary btn-sm" @click="handleDismiss(flag.id)">
|
||||
<button class="btn btn-outline-secondary btn-sm" @click="openDismissModal(flag.id)">
|
||||
<BIIcon name="it-close" size="xs" /> Ignora Flag
|
||||
</button>
|
||||
</div>
|
||||
@@ -157,5 +210,39 @@ const formatDate = (dateStr: string) => {
|
||||
@page-change="page = $event"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="resolveModal.open" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
|
||||
<div v-if="resolveModal.open" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ resolveModal.rejectReport ? 'Risolvi e rigetta segnalazione' : 'Risolvi flag' }}</h5>
|
||||
<button type="button" class="btn-close" :disabled="resolveModal.pending" @click="closeResolveModal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<label class="form-label">Nota di risoluzione</label>
|
||||
<textarea v-model="resolveModal.note" class="form-control" rows="4" placeholder="Nota opzionale"></textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" :disabled="resolveModal.pending" @click="closeResolveModal">Annulla</button>
|
||||
<button type="button" class="btn btn-primary" :disabled="resolveModal.pending" @click="handleResolve">
|
||||
<span v-if="resolveModal.pending" class="spinner-border spinner-border-sm me-2"></span>
|
||||
Conferma
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmModal
|
||||
:open="dismissModal.open"
|
||||
title="Ignora flag"
|
||||
message="Vuoi ignorare questo flag? Azione registrata in moderazione."
|
||||
confirm-label="Ignora flag"
|
||||
confirm-class="btn-outline-secondary"
|
||||
:pending="dismissModal.pending"
|
||||
@cancel="closeDismissModal"
|
||||
@confirm="handleDismiss"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -13,6 +13,10 @@ const { getUsers, updateUserBan, updateUserRoles } = useAdmin()
|
||||
const { data: usersRes, pending, refresh } = useAsyncData('admin-users', () => getUsers())
|
||||
|
||||
const search = ref('')
|
||||
const banError = ref('')
|
||||
const roleError = ref('')
|
||||
const pendingBanUser = ref<any | null>(null)
|
||||
const isUpdatingBan = ref(false)
|
||||
const parseRoles = (roles?: string) => roles ? roles.split(',').map((r) => r.trim()).filter(Boolean) : []
|
||||
|
||||
const filteredUsers = computed(() => {
|
||||
@@ -27,17 +31,33 @@ const filteredUsers = computed(() => {
|
||||
)
|
||||
})
|
||||
|
||||
const handleToggleBan = async (id: number, currentBanStatus: boolean) => {
|
||||
if (!confirm(`Sei sicuro di voler ${currentBanStatus ? 'sbloccare' : 'bannare'} questo utente?`)) return
|
||||
|
||||
const askToggleBan = (user: any) => {
|
||||
pendingBanUser.value = user
|
||||
}
|
||||
|
||||
const closeBanModal = () => {
|
||||
if (isUpdatingBan.value) return
|
||||
pendingBanUser.value = null
|
||||
}
|
||||
|
||||
const handleToggleBan = async () => {
|
||||
if (!pendingBanUser.value) return
|
||||
|
||||
const user = pendingBanUser.value
|
||||
isUpdatingBan.value = true
|
||||
banError.value = ''
|
||||
|
||||
try {
|
||||
const res = await updateUserBan(id, { banned: !currentBanStatus })
|
||||
const res = await updateUserBan(user.id, { banned: !user.banned })
|
||||
if (res.ok) {
|
||||
await refresh()
|
||||
pendingBanUser.value = null
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to update user ban status', err)
|
||||
alert('Errore durante l\'aggiornamento dello stato di ban.')
|
||||
banError.value = 'Errore durante l\'aggiornamento dello stato di ban.'
|
||||
} finally {
|
||||
isUpdatingBan.value = false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,7 +78,8 @@ const closeRoleModal = () => {
|
||||
|
||||
const saveRoles = async () => {
|
||||
if (!editingUserId.value) return
|
||||
|
||||
|
||||
roleError.value = ''
|
||||
try {
|
||||
const res = await updateUserRoles(editingUserId.value, { roles: selectedRoles.value })
|
||||
if (res.ok) {
|
||||
@@ -67,7 +88,7 @@ const saveRoles = async () => {
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to update roles', err)
|
||||
alert('Errore durante l\'aggiornamento dei ruoli.')
|
||||
roleError.value = 'Errore durante l\'aggiornamento dei ruoli.'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -95,6 +116,14 @@ const saveRoles = async () => {
|
||||
Nessun utente trovato.
|
||||
</div>
|
||||
|
||||
<div v-if="banError" class="alert alert-danger">
|
||||
{{ banError }}
|
||||
</div>
|
||||
|
||||
<div v-if="roleError" class="alert alert-danger">
|
||||
{{ roleError }}
|
||||
</div>
|
||||
|
||||
<div v-else class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead>
|
||||
@@ -138,7 +167,7 @@ const saveRoles = async () => {
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="user.banned ? 'btn-outline-success' : 'btn-outline-danger'"
|
||||
@click="handleToggleBan(user.id, !!user.banned)"
|
||||
@click="askToggleBan(user)"
|
||||
>
|
||||
{{ user.banned ? 'Sblocca' : 'Banna' }}
|
||||
</button>
|
||||
@@ -177,5 +206,16 @@ const saveRoles = async () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmModal
|
||||
:open="pendingBanUser !== null"
|
||||
title="Conferma stato utente"
|
||||
:message="pendingBanUser ? `Vuoi ${pendingBanUser.banned ? 'sbloccare' : 'bannare'} utente ${pendingBanUser.first_name} ${pendingBanUser.last_name}?` : ''"
|
||||
:confirm-label="pendingBanUser?.banned ? 'Sblocca utente' : 'Banna utente'"
|
||||
:confirm-class="pendingBanUser?.banned ? 'btn-success' : 'btn-danger'"
|
||||
:pending="isUpdatingBan"
|
||||
@cancel="closeBanModal"
|
||||
@confirm="handleToggleBan"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user