Add record access strategy
This commit is contained in:
Francisco Gaona
348
frontend/components/RecordSharing.vue
Normal file
348
frontend/components/RecordSharing.vue
Normal file
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<div class="record-sharing space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">Sharing</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Grant access to specific users for this record
|
||||
</p>
|
||||
</div>
|
||||
<Button @click="showShareDialog = true" size="sm">
|
||||
<UserPlus class="h-4 w-4 mr-2" />
|
||||
Share
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<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>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="error" class="text-sm text-destructive">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Shares List -->
|
||||
<div v-else-if="shares.length > 0" class="border rounded-lg">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Access</TableHead>
|
||||
<TableHead>Shared</TableHead>
|
||||
<TableHead class="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow v-for="share in shares" :key="share.id">
|
||||
<TableCell class="font-medium">
|
||||
{{ getUserName(share.granteeUser) }}
|
||||
</TableCell>
|
||||
<TableCell>{{ share.granteeUser.email }}</TableCell>
|
||||
<TableCell>
|
||||
<div class="flex gap-1">
|
||||
<Badge v-if="share.accessLevel.canRead" variant="secondary">Read</Badge>
|
||||
<Badge v-if="share.accessLevel.canEdit" variant="secondary">Edit</Badge>
|
||||
<Badge v-if="share.accessLevel.canDelete" variant="secondary">Delete</Badge>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{{ formatDate(share.createdAt) }}</TableCell>
|
||||
<TableCell class="text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@click="removeShare(share.id)"
|
||||
:disabled="removing === share.id"
|
||||
>
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else class="text-center py-8 text-muted-foreground border rounded-lg">
|
||||
<Users class="h-12 w-12 mx-auto mb-2 opacity-50" />
|
||||
<p>This record is not shared with anyone</p>
|
||||
<p class="text-sm">Click "Share" to grant access to other users</p>
|
||||
</div>
|
||||
|
||||
<!-- Share Dialog -->
|
||||
<Dialog v-model:open="showShareDialog">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Share Record</DialogTitle>
|
||||
<DialogDescription>
|
||||
Grant access to this record to specific users
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="user">User</Label>
|
||||
<Select v-model="newShare.userId" @update:model-value="(value) => newShare.userId = value">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select user" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="user in availableUsers"
|
||||
:key="user.id"
|
||||
:value="user.id"
|
||||
>
|
||||
{{ getUserName(user) }} ({{ user.email }})
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<Label>Permissions</Label>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="canRead"
|
||||
v-model:checked="newShare.canRead"
|
||||
@update:checked="(value) => newShare.canRead = value"
|
||||
/>
|
||||
<label
|
||||
for="canRead"
|
||||
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Can Read
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="canEdit"
|
||||
v-model:checked="newShare.canEdit"
|
||||
@update:checked="(value) => newShare.canEdit = value"
|
||||
/>
|
||||
<label
|
||||
for="canEdit"
|
||||
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Can Edit
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="canDelete"
|
||||
v-model:checked="newShare.canDelete"
|
||||
@update:checked="(value) => newShare.canDelete = value"
|
||||
/>
|
||||
<label
|
||||
for="canDelete"
|
||||
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Can Delete
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="expiresAt">Expires At (Optional)</Label>
|
||||
<div class="flex gap-2">
|
||||
<DatePicker
|
||||
v-model="expiresDate"
|
||||
placeholder="Select date"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="showShareDialog = false">Cancel</Button>
|
||||
<Button
|
||||
@click="createShare"
|
||||
:disabled="!newShare.userId || (!newShare.canRead && !newShare.canEdit && !newShare.canDelete) || sharing"
|
||||
>
|
||||
{{ sharing ? 'Sharing...' : 'Share' }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select';
|
||||
import { Input } from '~/components/ui/input';
|
||||
import { Label } from '~/components/ui/label';
|
||||
import { Badge } from '~/components/ui/badge';
|
||||
import Checkbox from '~/components/ui/checkbox.vue';
|
||||
import DatePicker from '~/components/ui/date-picker/DatePicker.vue';
|
||||
import { UserPlus, Trash2, Users } from 'lucide-vue-next';
|
||||
|
||||
interface Props {
|
||||
objectApiName: string;
|
||||
recordId: string;
|
||||
ownerId?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const { api } = useApi();
|
||||
const { toast } = useToast();
|
||||
|
||||
const loading = ref(true);
|
||||
const sharing = ref(false);
|
||||
const removing = ref<string | null>(null);
|
||||
const error = ref<string | null>(null);
|
||||
const shares = ref<any[]>([]);
|
||||
const allUsers = ref<any[]>([]);
|
||||
const showShareDialog = ref(false);
|
||||
const newShare = ref({
|
||||
userId: '',
|
||||
canRead: true,
|
||||
canEdit: false,
|
||||
canDelete: false,
|
||||
expiresAt: '',
|
||||
});
|
||||
|
||||
const expiresDate = ref<Date | null>(null);
|
||||
const expiresTime = ref('');
|
||||
|
||||
// Computed property to combine date and time into ISO string
|
||||
const combinedExpiresAt = computed(() => {
|
||||
if (!expiresDate.value) return '';
|
||||
|
||||
const date = new Date(expiresDate.value);
|
||||
if (expiresTime.value) {
|
||||
const [hours, minutes] = expiresTime.value.split(':');
|
||||
date.setHours(parseInt(hours), parseInt(minutes), 0, 0);
|
||||
} else {
|
||||
date.setHours(23, 59, 59, 999); // Default to end of day
|
||||
}
|
||||
|
||||
return date.toISOString();
|
||||
});
|
||||
|
||||
// Filter out users who already have shares
|
||||
const availableUsers = computed(() => {
|
||||
const sharedUserIds = new Set(shares.value.map(s => s.granteeUserId));
|
||||
return allUsers.value.filter(u => !sharedUserIds.has(u.id));
|
||||
});
|
||||
|
||||
const loadShares = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
const response = await api.get(
|
||||
`/runtime/objects/${props.objectApiName}/records/${props.recordId}/shares`
|
||||
);
|
||||
shares.value = response || [];
|
||||
} catch (e: any) {
|
||||
console.error('Failed to load shares:', e);
|
||||
error.value = e.message || 'Failed to load shares';
|
||||
// If user is not owner, they can't see shares
|
||||
if (e.message?.includes('owner')) {
|
||||
error.value = 'Only the record owner can manage sharing';
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadUsers = async () => {
|
||||
try {
|
||||
const response = await api.get('/setup/users');
|
||||
allUsers.value = response || [];
|
||||
} catch (e: any) {
|
||||
console.error('Failed to load users:', e);
|
||||
}
|
||||
};
|
||||
|
||||
const createShare = async () => {
|
||||
try {
|
||||
sharing.value = true;
|
||||
|
||||
const expiresAtValue = combinedExpiresAt.value;
|
||||
console.log('Creating share, expiresAt value:', expiresAtValue);
|
||||
|
||||
const payload: any = {
|
||||
granteeUserId: newShare.value.userId,
|
||||
canRead: newShare.value.canRead,
|
||||
canEdit: newShare.value.canEdit,
|
||||
canDelete: newShare.value.canDelete,
|
||||
};
|
||||
|
||||
// Only include expiresAt if it has a value
|
||||
if (expiresAtValue) {
|
||||
payload.expiresAt = expiresAtValue;
|
||||
console.log('Including expiresAt in payload:', payload.expiresAt);
|
||||
} else {
|
||||
console.log('Skipping expiresAt - no date selected');
|
||||
}
|
||||
|
||||
console.log('Final payload:', payload);
|
||||
|
||||
await api.post(
|
||||
`/runtime/objects/${props.objectApiName}/records/${props.recordId}/shares`,
|
||||
payload
|
||||
);
|
||||
toast.success('Record shared successfully');
|
||||
showShareDialog.value = false;
|
||||
newShare.value = {
|
||||
userId: '',
|
||||
canRead: true,
|
||||
canEdit: false,
|
||||
canDelete: false,
|
||||
expiresAt: '',
|
||||
};
|
||||
expiresDate.value = null;
|
||||
expiresTime.value = '';
|
||||
await loadShares();
|
||||
} catch (e: any) {
|
||||
console.error('Failed to share record:', e);
|
||||
toast.error(e.message || 'Failed to share record');
|
||||
} finally {
|
||||
sharing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const removeShare = async (shareId: string) => {
|
||||
try {
|
||||
removing.value = shareId;
|
||||
await api.delete(
|
||||
`/runtime/objects/${props.objectApiName}/records/${props.recordId}/shares/${shareId}`
|
||||
);
|
||||
toast.success('Share removed successfully');
|
||||
await loadShares();
|
||||
} catch (e: any) {
|
||||
console.error('Failed to remove share:', e);
|
||||
toast.error(e.message || 'Failed to remove share');
|
||||
} finally {
|
||||
removing.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const getUserName = (user: any) => {
|
||||
if (!user) return 'Unknown';
|
||||
if (user.firstName || user.lastName) {
|
||||
return [user.firstName, user.lastName].filter(Boolean).join(' ');
|
||||
}
|
||||
return user.email;
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
if (!date) return 'N/A';
|
||||
return new Date(date).toLocaleDateString();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadShares(), loadUsers()]);
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user