feat: made catalog button better looking
This commit is contained in:
@@ -71,7 +71,7 @@ export const useAuth = () => {
|
||||
const handleLoginSuccess = async (jwtToken: string) => {
|
||||
token.value = jwtToken
|
||||
tokenState.value = jwtToken
|
||||
await syncUser({ redirectOnSuccess: true })
|
||||
await syncUser()
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
|
||||
+126
-103
@@ -12,7 +12,10 @@ const { createCategory, updateCategory, deleteCategory, createTeam, updateTeam,
|
||||
const { getCategories } = useReports()
|
||||
const { getTeams } = useOperator()
|
||||
|
||||
const { data: categoriesRes, refresh: refreshCategories } = await useAsyncData('report-categories-admin-view', () => getCategories())
|
||||
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())
|
||||
|
||||
@@ -45,10 +48,10 @@ const categories = computed(() => categoriesRes.value?.categories || [])
|
||||
const teams = computed(() => teamsRes.value?.teams || [])
|
||||
const areas = computed(() => areasRes.value?.areas || [])
|
||||
const categoryDeleteMessage = computed(() =>
|
||||
categoryPendingDelete.value ? `Vuoi eliminare categoria "${categoryPendingDelete.value.name}"? Operazione irreversibile.` : ''
|
||||
categoryPendingDelete.value ? `Vuoi eliminare categoria "${categoryPendingDelete.value.name}"? Operazione irreversibile.` : ''
|
||||
)
|
||||
const teamDeleteMessage = computed(() =>
|
||||
teamPendingDelete.value ? `Vuoi eliminare team "${teamPendingDelete.value.name}"? Operazione irreversibile.` : ''
|
||||
teamPendingDelete.value ? `Vuoi eliminare team "${teamPendingDelete.value.name}"? Operazione irreversibile.` : ''
|
||||
)
|
||||
|
||||
const resetCategoryForm = () => {
|
||||
@@ -236,7 +239,7 @@ const handleDeleteTeam = async () => {
|
||||
<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 />
|
||||
<input v-model="categoryForm.name" class="form-control" required type="text"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Descrizione</label>
|
||||
@@ -247,61 +250,65 @@ const handleDeleteTeam = async () => {
|
||||
{{ editingCategoryId ? 'Salva categoria' : 'Crea categoria' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="editingCategoryId"
|
||||
type="button"
|
||||
class="btn btn-outline-secondary ms-2"
|
||||
@click="resetCategoryForm"
|
||||
v-if="editingCategoryId"
|
||||
class="btn btn-outline-secondary ms-2"
|
||||
type="button"
|
||||
@click="resetCategoryForm"
|
||||
>
|
||||
Annulla
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="table-responsive report-table-wrapper">
|
||||
<table class="table table-hover report-table mb-0">
|
||||
<table class="table table-hover report-table mb-0 align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Nome</th>
|
||||
<th>Stato</th>
|
||||
<th class="text-end">Azioni</th>
|
||||
</tr>
|
||||
<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>
|
||||
<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
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<button class="btn btn-outline-primary btn-icon" title="Modifica" @click="editCategory(category)">
|
||||
<Icon name="lucide:pencil" size="16"/>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="category.active === false ? 'btn-outline-success' : 'btn-outline-secondary'"
|
||||
@click="toggleCategoryActive(category)"
|
||||
:class="category.active === false ? 'btn-outline-success' : 'btn-outline-secondary'"
|
||||
:title="category.active === false ? 'Attiva' : 'Disattiva'"
|
||||
class="btn btn-icon"
|
||||
@click="toggleCategoryActive(category)"
|
||||
>
|
||||
{{ category.active === false ? 'Attiva' : 'Disattiva' }}
|
||||
<Icon :name="category.active === false ? 'lucide:check-circle' : 'lucide:ban'" size="16"/>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-outline-danger ms-2"
|
||||
:disabled="deletingCategoryId === category.id"
|
||||
@click="askDeleteCategory(category)"
|
||||
:disabled="deletingCategoryId === category.id"
|
||||
class="btn btn-outline-danger btn-icon"
|
||||
title="Elimina"
|
||||
@click="askDeleteCategory(category)"
|
||||
>
|
||||
<span v-if="deletingCategoryId === category.id" class="spinner-border spinner-border-sm me-1"></span>
|
||||
Elimina
|
||||
<span v-if="deletingCategoryId === category.id" class="spinner-border spinner-icon"></span>
|
||||
<Icon v-else name="lucide:trash-2" size="16"/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="categories.length === 0">
|
||||
<td colspan="4" class="text-muted">Nessuna categoria configurata.</td>
|
||||
</tr>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="categories.length === 0">
|
||||
<td class="text-muted text-center py-4" colspan="4">Nessuna categoria configurata.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -324,7 +331,7 @@ const handleDeleteTeam = async () => {
|
||||
<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 />
|
||||
<input v-model="teamForm.name" class="form-control" required type="text"/>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<label class="form-label">Categoria coperta</label>
|
||||
@@ -346,18 +353,19 @@ const handleDeleteTeam = async () => {
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<label class="form-label">Descrizione</label>
|
||||
<input v-model="teamForm.description" type="text" class="form-control" />
|
||||
<input v-model="teamForm.description" class="form-control" type="text"/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-primary" :disabled="isSavingTeam || !teamForm.name.trim() || !teamForm.team_category_id">
|
||||
<button :disabled="isSavingTeam || !teamForm.name.trim() || !teamForm.team_category_id" class="btn btn-primary"
|
||||
type="submit">
|
||||
<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"
|
||||
v-if="editingTeamId"
|
||||
class="btn btn-outline-secondary ms-2"
|
||||
type="button"
|
||||
@click="resetTeamForm"
|
||||
>
|
||||
Annulla
|
||||
</button>
|
||||
@@ -365,55 +373,59 @@ const handleDeleteTeam = async () => {
|
||||
</form>
|
||||
|
||||
<div class="table-responsive report-table-wrapper">
|
||||
<table class="table table-hover report-table mb-0">
|
||||
<table class="table table-hover report-table mb-0 align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Team</th>
|
||||
<th>Categoria</th>
|
||||
<th>Area</th>
|
||||
<th>Stato</th>
|
||||
<th class="text-end">Azioni</th>
|
||||
</tr>
|
||||
<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>
|
||||
<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
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<button class="btn btn-outline-primary btn-icon" title="Modifica" @click="editTeam(team)">
|
||||
<Icon name="lucide:pencil" size="16"/>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="team.active === false ? 'btn-outline-success' : 'btn-outline-secondary'"
|
||||
@click="toggleTeamActive(team)"
|
||||
:class="team.active === false ? 'btn-outline-success' : 'btn-outline-secondary'"
|
||||
:title="team.active === false ? 'Attiva' : 'Disattiva'"
|
||||
class="btn btn-icon"
|
||||
@click="toggleTeamActive(team)"
|
||||
>
|
||||
{{ team.active === false ? 'Attiva' : 'Disattiva' }}
|
||||
<Icon :name="team.active === false ? 'lucide:check-circle' : 'lucide:ban'" size="16"/>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-outline-danger ms-2"
|
||||
:disabled="deletingTeamId === team.id"
|
||||
@click="askDeleteTeam(team)"
|
||||
:disabled="deletingTeamId === team.id"
|
||||
class="btn btn-outline-danger btn-icon"
|
||||
title="Elimina"
|
||||
@click="askDeleteTeam(team)"
|
||||
>
|
||||
<span v-if="deletingTeamId === team.id" class="spinner-border spinner-border-sm me-1"></span>
|
||||
Elimina
|
||||
<span v-if="deletingTeamId === team.id" class="spinner-border spinner-icon"></span>
|
||||
<Icon v-else name="lucide:trash-2" size="16"/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="teams.length === 0">
|
||||
<td colspan="6" class="text-muted">Nessun team configurato.</td>
|
||||
</tr>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="teams.length === 0">
|
||||
<td class="text-muted text-center py-4" colspan="6">Nessun team configurato.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -423,32 +435,43 @@ const handleDeleteTeam = async () => {
|
||||
</div>
|
||||
|
||||
<ConfirmModal
|
||||
:open="categoryPendingDelete !== null"
|
||||
title="Elimina categoria"
|
||||
:message="categoryDeleteMessage"
|
||||
confirm-label="Elimina categoria"
|
||||
confirm-class="btn-danger"
|
||||
:pending="deletingCategoryId !== null"
|
||||
@cancel="closeDeleteCategoryModal"
|
||||
@confirm="handleDeleteCategory"
|
||||
:message="categoryDeleteMessage"
|
||||
:open="categoryPendingDelete !== null"
|
||||
:pending="deletingCategoryId !== null"
|
||||
confirm-class="btn-danger"
|
||||
confirm-label="Elimina categoria"
|
||||
title="Elimina categoria"
|
||||
@cancel="closeDeleteCategoryModal"
|
||||
@confirm="handleDeleteCategory"
|
||||
/>
|
||||
|
||||
<ConfirmModal
|
||||
:open="teamPendingDelete !== null"
|
||||
title="Elimina team"
|
||||
:message="teamDeleteMessage"
|
||||
confirm-label="Elimina team"
|
||||
confirm-class="btn-danger"
|
||||
:pending="deletingTeamId !== null"
|
||||
@cancel="closeDeleteTeamModal"
|
||||
@confirm="handleDeleteTeam"
|
||||
:message="teamDeleteMessage"
|
||||
:open="teamPendingDelete !== null"
|
||||
:pending="deletingTeamId !== null"
|
||||
confirm-class="btn-danger"
|
||||
confirm-label="Elimina team"
|
||||
title="Elimina team"
|
||||
@cancel="closeDeleteTeamModal"
|
||||
@confirm="handleDeleteTeam"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.text-end .btn {
|
||||
margin: 0 !important;
|
||||
width: 120px;
|
||||
<style scoped>
|
||||
.btn-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.spinner-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-width: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user