286 lines
9.6 KiB
Vue
286 lines
9.6 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-background">
|
|
<NuxtLayout name="default">
|
|
<main class="container mx-auto px-4 py-8">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-3xl font-bold">Roles</h1>
|
|
<p class="text-muted-foreground">Manage roles and permissions</p>
|
|
</div>
|
|
<Button @click="showCreateDialog = true">
|
|
<Plus class="mr-2 h-4 w-4" />
|
|
New Role
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="border rounded-lg">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Description</TableHead>
|
|
<TableHead>Guard</TableHead>
|
|
<TableHead>Users</TableHead>
|
|
<TableHead>Created</TableHead>
|
|
<TableHead class="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow v-if="loading">
|
|
<TableCell :colspan="6" class="text-center py-8">
|
|
<div class="flex items-center justify-center">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow v-else-if="roles.length === 0">
|
|
<TableCell :colspan="6" class="text-center py-8 text-muted-foreground">
|
|
No roles found. Create your first role to get started.
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow v-else v-for="role in roles" :key="role.id" class="cursor-pointer hover:bg-muted/50" @click="navigateTo(`/setup/roles/${role.id}`)">
|
|
<TableCell class="font-medium">{{ role.name }}</TableCell>
|
|
<TableCell>{{ role.description || 'No description' }}</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline">{{ role.guardName || 'tenant' }}</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
{{ role.userCount || 0 }} users
|
|
</TableCell>
|
|
<TableCell>{{ formatDate(role.createdAt) }}</TableCell>
|
|
<TableCell class="text-right" @click.stop>
|
|
<div class="flex items-center justify-end gap-1">
|
|
<Button variant="ghost" size="icon" @click="navigateTo(`/setup/roles/${role.id}`)">
|
|
<Eye class="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" @click="openEditDialog(role)">
|
|
<Edit class="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" @click="openDeleteDialog(role)">
|
|
<Trash2 class="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
<!-- Create Role Dialog -->
|
|
<Dialog v-model:open="showCreateDialog">
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Create New Role</DialogTitle>
|
|
<DialogDescription>
|
|
Add a new role to the system
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div class="space-y-4">
|
|
<div class="space-y-2">
|
|
<Label for="name">Name</Label>
|
|
<Input id="name" v-model="newRole.name" placeholder="Sales Manager" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="description">Description (Optional)</Label>
|
|
<Input id="description" v-model="newRole.description" placeholder="Manages sales team and deals" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="guardName">Guard Name</Label>
|
|
<Select v-model="newRole.guardName" @update:model-value="(value) => newRole.guardName = value">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select guard" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="tenant">Tenant</SelectItem>
|
|
<SelectItem value="central">Central</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" @click="showCreateDialog = false">Cancel</Button>
|
|
<Button @click="createRole" :disabled="!newRole.name">
|
|
Create Role
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<!-- Edit Role Dialog -->
|
|
<Dialog v-model:open="showEditDialog">
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Edit Role</DialogTitle>
|
|
<DialogDescription>
|
|
Update role information
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div class="space-y-4">
|
|
<div class="space-y-2">
|
|
<Label for="edit-name">Name</Label>
|
|
<Input id="edit-name" v-model="editRole.name" placeholder="Role name" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="edit-description">Description</Label>
|
|
<Input id="edit-description" v-model="editRole.description" placeholder="Role description" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="edit-guardName">Guard Name</Label>
|
|
<Select v-model="editRole.guardName" @update:model-value="(value) => editRole.guardName = value">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select guard" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="tenant">Tenant</SelectItem>
|
|
<SelectItem value="central">Central</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" @click="showEditDialog = false">Cancel</Button>
|
|
<Button @click="updateRole" :disabled="!editRole.name">
|
|
Update Role
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<!-- Delete Confirmation Dialog -->
|
|
<Dialog v-model:open="showDeleteDialog">
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Delete Role</DialogTitle>
|
|
<DialogDescription>
|
|
Are you sure you want to delete this role? This action cannot be undone.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button variant="outline" @click="showDeleteDialog = false">Cancel</Button>
|
|
<Button variant="destructive" @click="deleteRole">
|
|
Delete Role
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</main>
|
|
</NuxtLayout>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { Button } from '~/components/ui/button';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/ui/table';
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '~/components/ui/dialog';
|
|
import { Input } from '~/components/ui/input';
|
|
import { Label } from '~/components/ui/label';
|
|
import { Badge } from '~/components/ui/badge';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select';
|
|
import { Plus, Eye, Edit, Trash2 } from 'lucide-vue-next';
|
|
|
|
definePageMeta({
|
|
layout: 'default',
|
|
});
|
|
|
|
const { api } = useApi();
|
|
const { toast } = useToast();
|
|
|
|
const loading = ref(true);
|
|
const roles = ref<any[]>([]);
|
|
const showCreateDialog = ref(false);
|
|
const showEditDialog = ref(false);
|
|
const showDeleteDialog = ref(false);
|
|
const newRole = ref({
|
|
name: '',
|
|
description: '',
|
|
guardName: 'tenant',
|
|
});
|
|
const editRole = ref({
|
|
id: '',
|
|
name: '',
|
|
description: '',
|
|
guardName: 'tenant',
|
|
});
|
|
const roleToDelete = ref<any>(null);
|
|
|
|
const loadRoles = async () => {
|
|
try {
|
|
loading.value = true;
|
|
const response = await api.get('/setup/roles');
|
|
roles.value = response || [];
|
|
} catch (error: any) {
|
|
console.error('Failed to load roles:', error);
|
|
toast.error('Failed to load roles');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const createRole = async () => {
|
|
try {
|
|
await api.post('/setup/roles', newRole.value);
|
|
toast.success('Role created successfully');
|
|
showCreateDialog.value = false;
|
|
newRole.value = { name: '', description: '', guardName: 'tenant' };
|
|
await loadRoles();
|
|
} catch (error: any) {
|
|
console.error('Failed to create role:', error);
|
|
toast.error(error.message || 'Failed to create role');
|
|
}
|
|
};
|
|
|
|
const openEditDialog = (role: any) => {
|
|
editRole.value = {
|
|
id: role.id,
|
|
name: role.name,
|
|
description: role.description || '',
|
|
guardName: role.guardName || 'tenant',
|
|
};
|
|
showEditDialog.value = true;
|
|
};
|
|
|
|
const updateRole = async () => {
|
|
try {
|
|
await api.patch(`/setup/roles/${editRole.value.id}`, {
|
|
name: editRole.value.name,
|
|
description: editRole.value.description,
|
|
guardName: editRole.value.guardName,
|
|
});
|
|
toast.success('Role updated successfully');
|
|
showEditDialog.value = false;
|
|
await loadRoles();
|
|
} catch (error: any) {
|
|
console.error('Failed to update role:', error);
|
|
toast.error(error.message || 'Failed to update role');
|
|
}
|
|
};
|
|
|
|
const openDeleteDialog = (role: any) => {
|
|
roleToDelete.value = role;
|
|
showDeleteDialog.value = true;
|
|
};
|
|
|
|
const deleteRole = async () => {
|
|
try {
|
|
await api.delete(`/setup/roles/${roleToDelete.value.id}`);
|
|
toast.success('Role deleted successfully');
|
|
showDeleteDialog.value = false;
|
|
roleToDelete.value = null;
|
|
await loadRoles();
|
|
} catch (error: any) {
|
|
console.error('Failed to delete role:', error);
|
|
toast.error(error.message || 'Failed to delete role');
|
|
}
|
|
};
|
|
|
|
const formatDate = (date: string) => {
|
|
if (!date) return 'N/A';
|
|
return new Date(date).toLocaleDateString();
|
|
};
|
|
|
|
onMounted(() => {
|
|
loadRoles();
|
|
});
|
|
</script>
|