WIP - field level permission
This commit is contained in:
Francisco Gaona
219
frontend/components/FieldLevelSecurity.vue
Normal file
219
frontend/components/FieldLevelSecurity.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Field-Level Security</CardTitle>
|
||||
<CardDescription>
|
||||
Control which fields each role can read and edit
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div v-if="loading" class="flex items-center justify-center py-8">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="roles.length === 0" class="text-sm text-muted-foreground py-4">
|
||||
No roles available. Create roles first to manage field-level permissions.
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-4">
|
||||
<div class="rounded-md border">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b bg-muted/50">
|
||||
<th class="p-3 text-left font-medium">Field</th>
|
||||
<th
|
||||
v-for="role in roles"
|
||||
:key="role.id"
|
||||
class="p-3 text-center font-medium border-l"
|
||||
:colspan="2"
|
||||
>
|
||||
{{ role.name }}
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="border-b bg-muted/30">
|
||||
<th class="p-2 text-left text-xs font-medium text-muted-foreground"></th>
|
||||
<template v-for="role in roles" :key="`${role.id}-headers`">
|
||||
<th class="p-2 text-center text-xs font-medium text-muted-foreground border-l">Read</th>
|
||||
<th class="p-2 text-center text-xs font-medium text-muted-foreground">Edit</th>
|
||||
</template>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="field in fields"
|
||||
:key="field.id"
|
||||
class="border-b hover:bg-muted/30"
|
||||
>
|
||||
<td class="p-3">
|
||||
<div>
|
||||
<div class="font-medium">{{ field.label }}</div>
|
||||
<div class="text-xs text-muted-foreground">{{ field.apiName }}</div>
|
||||
</div>
|
||||
</td>
|
||||
<template v-for="role in roles" :key="`${field.id}-${role.id}`">
|
||||
<td class="p-3 text-center border-l">
|
||||
<Checkbox
|
||||
:model-value="hasPermission(field.id, role.id, 'read')"
|
||||
@update:model-value="(checked: boolean) => updatePermission(field.id, role.id, 'read', checked)"
|
||||
:disabled="field.isSystem"
|
||||
/>
|
||||
</td>
|
||||
<td class="p-3 text-center">
|
||||
<Checkbox
|
||||
:model-value="hasPermission(field.id, role.id, 'edit')"
|
||||
@update:model-value="(checked: boolean) => updatePermission(field.id, role.id, 'edit', checked)"
|
||||
:disabled="field.isSystem || !hasPermission(field.id, role.id, 'read')"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Info class="h-4 w-4" />
|
||||
<span>System fields are always readable. Edit permissions require read permission first. Changes save automatically.</span>
|
||||
</div>
|
||||
|
||||
<div v-if="saving" class="flex items-center gap-2 text-sm text-primary">
|
||||
<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
|
||||
<span>Saving...</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card';
|
||||
import { Checkbox } from '~/components/ui/checkbox';
|
||||
import { Info } from 'lucide-vue-next';
|
||||
|
||||
const props = defineProps<{
|
||||
objectId: string;
|
||||
fields: any[];
|
||||
}>();
|
||||
|
||||
const { api } = useApi();
|
||||
const { toast } = useToast();
|
||||
|
||||
const loading = ref(true);
|
||||
const saving = ref(false);
|
||||
const roles = ref<any[]>([]);
|
||||
const permissions = ref<Map<string, Map<string, { canRead: boolean; canEdit: boolean }>>>(new Map());
|
||||
|
||||
// Load roles and permissions
|
||||
onMounted(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
|
||||
// Load roles
|
||||
const rolesResponse = await api.get('/setup/roles');
|
||||
roles.value = rolesResponse || [];
|
||||
|
||||
// Load existing permissions for this object
|
||||
const permsResponse = await api.get(`/setup/objects/${props.objectId}/field-permissions`);
|
||||
|
||||
// Build permissions map: fieldId -> roleId -> {canRead, canEdit}
|
||||
const permsMap = new Map();
|
||||
if (permsResponse && Array.isArray(permsResponse)) {
|
||||
for (const perm of permsResponse) {
|
||||
if (!permsMap.has(perm.fieldDefinitionId)) {
|
||||
permsMap.set(perm.fieldDefinitionId, new Map());
|
||||
}
|
||||
permsMap.get(perm.fieldDefinitionId).set(perm.roleId, {
|
||||
canRead: Boolean(perm.canRead),
|
||||
canEdit: Boolean(perm.canEdit),
|
||||
});
|
||||
}
|
||||
}
|
||||
permissions.value = permsMap;
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('Failed to load field permissions:', error);
|
||||
toast.error('Failed to load field permissions');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const hasPermission = (fieldId: string, roleId: string, type: 'read' | 'edit'): boolean => {
|
||||
const fieldPerms = permissions.value.get(fieldId);
|
||||
if (!fieldPerms) return true; // Default to true if no permissions set
|
||||
const rolePerm = fieldPerms.get(roleId);
|
||||
if (!rolePerm) return true; // Default to true if no permissions set
|
||||
const value = type === 'read' ? rolePerm.canRead : rolePerm.canEdit;
|
||||
return Boolean(value); // Convert 1/0 to true/false
|
||||
};
|
||||
|
||||
const updatePermission = async (fieldId: string, roleId: string, type: 'read' | 'edit', checked: boolean) => {
|
||||
console.log('updatePermission called:', { fieldId, roleId, type, checked });
|
||||
|
||||
try {
|
||||
saving.value = true;
|
||||
|
||||
// Get current permissions
|
||||
if (!permissions.value.has(fieldId)) {
|
||||
permissions.value.set(fieldId, new Map());
|
||||
}
|
||||
const fieldPerms = permissions.value.get(fieldId)!;
|
||||
|
||||
if (!fieldPerms.has(roleId)) {
|
||||
fieldPerms.set(roleId, { canRead: true, canEdit: true });
|
||||
}
|
||||
const perm = fieldPerms.get(roleId)!;
|
||||
|
||||
// Update permission
|
||||
if (type === 'read') {
|
||||
perm.canRead = checked;
|
||||
// If disabling read, also disable edit
|
||||
if (!checked) {
|
||||
perm.canEdit = false;
|
||||
}
|
||||
} else {
|
||||
perm.canEdit = checked;
|
||||
// If enabling edit, also enable read
|
||||
if (checked) {
|
||||
perm.canRead = true;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Saving permission:', {
|
||||
roleId,
|
||||
fieldDefinitionId: fieldId,
|
||||
canRead: perm.canRead,
|
||||
canEdit: perm.canEdit,
|
||||
});
|
||||
|
||||
// Save to backend
|
||||
const result = await api.put(`/setup/objects/${props.objectId}/field-permissions`, {
|
||||
roleId,
|
||||
fieldDefinitionId: fieldId,
|
||||
canRead: perm.canRead,
|
||||
canEdit: perm.canEdit,
|
||||
});
|
||||
|
||||
console.log('Save result:', result);
|
||||
toast.success('Permission updated');
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('Failed to update field permission:', error);
|
||||
toast.error(error.message || 'Failed to update permission');
|
||||
|
||||
// Revert change
|
||||
if (!permissions.value.has(fieldId)) return;
|
||||
const fieldPerms = permissions.value.get(fieldId)!;
|
||||
if (!fieldPerms.has(roleId)) return;
|
||||
const perm = fieldPerms.get(roleId)!;
|
||||
if (type === 'read') {
|
||||
perm.canRead = !checked;
|
||||
} else {
|
||||
perm.canEdit = !checked;
|
||||
}
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user