mirror of
https://github.com/soconnor0919/hristudio.git
synced 2025-12-12 07:04:44 -05:00
fix: update user fields to match schema
- Replace firstName/lastName with name field in users API route - Update user formatting in UsersTab component - Add email fallback when name is not available
This commit is contained in:
111
src/app/dashboard/studies/[id]/participants/new/page.tsx
Normal file
111
src/app/dashboard/studies/[id]/participants/new/page.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { useToast } from "~/hooks/use-toast";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useActiveStudy } from "~/context/active-study";
|
||||
import { hasPermission } from "~/lib/permissions-client";
|
||||
import { PERMISSIONS } from "~/lib/permissions";
|
||||
|
||||
export default function NewParticipant() {
|
||||
const [name, setName] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const { id } = useParams();
|
||||
const router = useRouter();
|
||||
const { toast } = useToast();
|
||||
const { activeStudy } = useActiveStudy();
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeStudy || !hasPermission(activeStudy.permissions, PERMISSIONS.CREATE_PARTICIPANT)) {
|
||||
router.push(`/dashboard/studies/${id}`);
|
||||
}
|
||||
}, [activeStudy, id, router]);
|
||||
|
||||
if (!activeStudy || !hasPermission(activeStudy.permissions, PERMISSIONS.CREATE_PARTICIPANT)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/studies/${id}/participants`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to create participant");
|
||||
}
|
||||
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Participant created successfully",
|
||||
});
|
||||
|
||||
router.push(`/dashboard/studies/${id}/participants`);
|
||||
} catch (error) {
|
||||
console.error("Error creating participant:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to create participant",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="gap-2"
|
||||
asChild
|
||||
>
|
||||
<Link href={`/dashboard/studies/${id}/participants`}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Participants
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Add New Participant</CardTitle>
|
||||
<CardDescription>
|
||||
Create a new participant for {activeStudy?.title}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Participant Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Enter participant name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Creating..." : "Create Participant"}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
215
src/app/dashboard/studies/[id]/participants/page.tsx
Normal file
215
src/app/dashboard/studies/[id]/participants/page.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { useToast } from "~/hooks/use-toast";
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useActiveStudy } from "~/context/active-study";
|
||||
import { hasPermission } from "~/lib/permissions-client";
|
||||
import { PERMISSIONS } from "~/lib/permissions";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "~/components/ui/alert-dialog";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "~/components/ui/table";
|
||||
|
||||
interface Participant {
|
||||
id: number;
|
||||
name: string;
|
||||
studyId: number;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export default function ParticipantsList() {
|
||||
const [participants, setParticipants] = useState<Participant[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const { id } = useParams();
|
||||
const { toast } = useToast();
|
||||
const { activeStudy } = useActiveStudy();
|
||||
|
||||
const canCreateParticipant = activeStudy && hasPermission(activeStudy.permissions, PERMISSIONS.CREATE_PARTICIPANT);
|
||||
const canDeleteParticipant = activeStudy && hasPermission(activeStudy.permissions, PERMISSIONS.DELETE_PARTICIPANT);
|
||||
const canViewNames = activeStudy && hasPermission(activeStudy.permissions, PERMISSIONS.VIEW_PARTICIPANT_NAMES);
|
||||
|
||||
useEffect(() => {
|
||||
fetchParticipants();
|
||||
}, [id]);
|
||||
|
||||
const fetchParticipants = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/studies/${id}/participants`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Failed to fetch participants");
|
||||
const data = await response.json();
|
||||
setParticipants(data.data || []);
|
||||
} catch (error) {
|
||||
console.error("Error fetching participants:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to load participants",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (participantId: number) => {
|
||||
try {
|
||||
const response = await fetch(`/api/studies/${id}/participants`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ participantId }),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Failed to delete participant");
|
||||
|
||||
setParticipants(participants.filter(p => p.id !== participantId));
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Participant deleted successfully",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error deleting participant:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to delete participant",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8">
|
||||
<p className="text-center text-muted-foreground">Loading participants...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Participants</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Manage study participants and their data
|
||||
</p>
|
||||
</div>
|
||||
{canCreateParticipant && (
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/studies/${id}/participants/new`}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Participant
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Study Participants</CardTitle>
|
||||
<CardDescription>
|
||||
All participants enrolled in {activeStudy?.title}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{participants.length > 0 ? (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Added</TableHead>
|
||||
{canDeleteParticipant && <TableHead className="w-[100px]">Actions</TableHead>}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{participants.map((participant) => (
|
||||
<TableRow key={participant.id}>
|
||||
<TableCell>{participant.id}</TableCell>
|
||||
<TableCell>
|
||||
{canViewNames ? participant.name : `Participant ${participant.id}`}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{new Date(participant.createdAt).toLocaleDateString()}
|
||||
</TableCell>
|
||||
{canDeleteParticipant && (
|
||||
<TableCell>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete Participant</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to delete this participant? This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => handleDelete(participant.id)}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
) : (
|
||||
<div className="py-8 text-center text-muted-foreground">
|
||||
No participants added yet
|
||||
{canCreateParticipant && (
|
||||
<>
|
||||
.{" "}
|
||||
<Link
|
||||
href={`/dashboard/studies/${id}/participants/new`}
|
||||
className="font-medium text-primary hover:underline"
|
||||
>
|
||||
Add your first participant
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user