Handling CRUD for members in frontend
This commit is contained in:
cdricms
@@ -12,93 +12,28 @@ import {
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { UpdateMemberDialog } from "./UpdateMemberDialog";
|
||||
import { AddMemberDialog } from "./AddMemberDialog";
|
||||
import MemberDialog, { Member } from "./member-dialog";
|
||||
import * as z from "zod";
|
||||
import { request, useApi } from "@/hooks/use-api";
|
||||
import {
|
||||
CircleX,
|
||||
Loader2,
|
||||
Trash2,
|
||||
UserRoundPen,
|
||||
UserRoundPlus,
|
||||
} from "lucide-react";
|
||||
|
||||
interface Member {
|
||||
user_id: string;
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
email: string;
|
||||
password: string;
|
||||
phone: string;
|
||||
role: string;
|
||||
}
|
||||
|
||||
const initialMembers: Member[] = [
|
||||
// Add some sample data here
|
||||
{
|
||||
user_id: "1",
|
||||
firstname: "John",
|
||||
lastname: "Doe",
|
||||
email: "john@example.com",
|
||||
password: "********",
|
||||
phone: "1234567890",
|
||||
role: "User",
|
||||
},
|
||||
{
|
||||
user_id: "1",
|
||||
firstname: "John",
|
||||
lastname: "Doe",
|
||||
email: "john@example.com",
|
||||
password: "********",
|
||||
phone: "1234567890",
|
||||
role: "User",
|
||||
},
|
||||
{
|
||||
user_id: "1",
|
||||
firstname: "John",
|
||||
lastname: "Doe",
|
||||
email: "john@example.com",
|
||||
password: "********",
|
||||
phone: "1234567890",
|
||||
role: "User",
|
||||
},
|
||||
{
|
||||
user_id: "1",
|
||||
firstname: "John",
|
||||
lastname: "Doe",
|
||||
email: "john@example.com",
|
||||
password: "********",
|
||||
phone: "1234567890",
|
||||
role: "User",
|
||||
},
|
||||
{
|
||||
user_id: "1",
|
||||
firstname: "John",
|
||||
lastname: "Doe",
|
||||
email: "john@example.com",
|
||||
password: "********",
|
||||
phone: "1234567890",
|
||||
role: "User",
|
||||
},
|
||||
{
|
||||
user_id: "1",
|
||||
firstname: "John",
|
||||
lastname: "Doe",
|
||||
email: "john@example.com",
|
||||
password: "********",
|
||||
phone: "1234567890",
|
||||
role: "User",
|
||||
},
|
||||
{
|
||||
user_id: "1",
|
||||
firstname: "John",
|
||||
lastname: "Doe",
|
||||
email: "john@example.com",
|
||||
password: "********",
|
||||
phone: "1234567890",
|
||||
role: "User",
|
||||
},
|
||||
// Add more sample members...
|
||||
];
|
||||
|
||||
export function MembersTable() {
|
||||
const [members, setMembers] = useState<Member[]>(initialMembers);
|
||||
export default function MembersTable() {
|
||||
const {
|
||||
data: members,
|
||||
error,
|
||||
mutate,
|
||||
success,
|
||||
isLoading,
|
||||
} = useApi<Member[]>("/users", undefined, true, false);
|
||||
const [selectMode, setSelectMode] = useState(false);
|
||||
const [selectedMembers, setSelectedMembers] = useState<string[]>([]);
|
||||
const [updateDialogOpen, setUpdateDialogOpen] = useState(false);
|
||||
const [addDialogOpen, setAddDialogOpen] = useState(false);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [currentMember, setCurrentMember] = useState<Member | null>(null);
|
||||
|
||||
const toggleSelectMode = () => {
|
||||
@@ -114,124 +49,134 @@ export function MembersTable() {
|
||||
);
|
||||
};
|
||||
|
||||
const handleUpdate = (member: Member) => {
|
||||
const handleOpenDialog = (member: Member | null) => {
|
||||
setCurrentMember(member);
|
||||
setUpdateDialogOpen(true);
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = (userId: string) => {
|
||||
setMembers((prev) =>
|
||||
prev.filter((member) => member.user_id !== userId),
|
||||
);
|
||||
const handleSaveMember = async (savedMember: Member) => {
|
||||
if (savedMember.userId) {
|
||||
const res = await request<unknown>(
|
||||
`/users/${savedMember.userId}/update`,
|
||||
{
|
||||
body: savedMember,
|
||||
requiresAuth: true,
|
||||
method: "PATCH",
|
||||
},
|
||||
);
|
||||
if (res.status === "Success") mutate();
|
||||
// Update existing member
|
||||
// setMembers((prev) =>
|
||||
// prev.map((m) =>
|
||||
// m.user_id === savedMember.user_id ? savedMember : m,
|
||||
// ),
|
||||
// );
|
||||
} else {
|
||||
const res = await request<unknown>("/users/new", {
|
||||
body: savedMember,
|
||||
method: "POST",
|
||||
requiresAuth: true,
|
||||
});
|
||||
if (res.status === "Success") mutate();
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = (newMember: Member) => {
|
||||
setMembers((prev) => [
|
||||
...prev,
|
||||
{ ...newMember, user_id: String(prev.length + 1) },
|
||||
]);
|
||||
const handleDelete = async (userId: string) => {
|
||||
const res = await request<unknown>(`/users/${userId}/delete`, {
|
||||
method: "DELETE",
|
||||
requiresAuth: true,
|
||||
});
|
||||
if (res.status === "Success") mutate();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between">
|
||||
<Button onClick={toggleSelectMode}>
|
||||
{selectMode ? "Cancel Selection" : "Select"}
|
||||
{selectMode ? <CircleX /> : "Selectionner"}
|
||||
</Button>
|
||||
<Button onClick={() => setAddDialogOpen(true)}>
|
||||
Add New Member
|
||||
<Button onClick={() => handleOpenDialog(null)}>
|
||||
<UserRoundPlus />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<ScrollArea className="h-[400px] rounded-md border">
|
||||
<ScrollArea className="h-full rounded-md border">
|
||||
<Table>
|
||||
<TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
|
||||
<TableRow>
|
||||
{selectMode && (
|
||||
<TableHead className="w-[50px]">
|
||||
Select
|
||||
Selectionner
|
||||
</TableHead>
|
||||
)}
|
||||
<TableHead>User ID</TableHead>
|
||||
<TableHead>First Name</TableHead>
|
||||
<TableHead>Last Name</TableHead>
|
||||
<TableHead>Prénom</TableHead>
|
||||
<TableHead>Nom</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Password</TableHead>
|
||||
<TableHead>Phone</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
<TableHead>Téléphone</TableHead>
|
||||
<TableHead>Rôle</TableHead>
|
||||
<TableHead className="text-right">
|
||||
Actions
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{members.map((member) => (
|
||||
<TableRow key={member.user_id}>
|
||||
{selectMode && (
|
||||
{isLoading && <Loader2 className="animate-spin" />}
|
||||
{members &&
|
||||
members.map((member) => (
|
||||
<TableRow key={member.userId}>
|
||||
{selectMode && (
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedMembers.includes(
|
||||
member.userId!,
|
||||
)}
|
||||
onCheckedChange={() =>
|
||||
toggleMemberSelection(
|
||||
member.userId!,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedMembers.includes(
|
||||
member.user_id,
|
||||
)}
|
||||
onCheckedChange={() =>
|
||||
toggleMemberSelection(
|
||||
member.user_id,
|
||||
)
|
||||
}
|
||||
/>
|
||||
{member.firstname}
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell>{member.user_id}</TableCell>
|
||||
<TableCell>{member.firstname}</TableCell>
|
||||
<TableCell>{member.lastname}</TableCell>
|
||||
<TableCell>{member.email}</TableCell>
|
||||
<TableCell>{member.password}</TableCell>
|
||||
<TableCell>{member.phone}</TableCell>
|
||||
<TableCell>{member.role}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mr-2"
|
||||
onClick={() => handleUpdate(member)}
|
||||
>
|
||||
Modify
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handleDelete(member.user_id)
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
<TableCell>{member.lastname}</TableCell>
|
||||
<TableCell>{member.email}</TableCell>
|
||||
<TableCell>{member.phone}</TableCell>
|
||||
<TableCell>{member.role}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mr-2"
|
||||
onClick={() =>
|
||||
handleOpenDialog(member)
|
||||
}
|
||||
>
|
||||
<UserRoundPen />
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handleDelete(member.userId!)
|
||||
}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
<UpdateMemberDialog
|
||||
isOpen={updateDialogOpen}
|
||||
onClose={() => setUpdateDialogOpen(false)}
|
||||
<MemberDialog
|
||||
isOpen={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)}
|
||||
member={currentMember}
|
||||
onUpdate={(updatedMember) => {
|
||||
setMembers((prev) =>
|
||||
prev.map((m) =>
|
||||
m.user_id === updatedMember.user_id
|
||||
? updatedMember
|
||||
: m,
|
||||
),
|
||||
);
|
||||
setUpdateDialogOpen(false);
|
||||
}}
|
||||
/>
|
||||
<AddMemberDialog
|
||||
isOpen={addDialogOpen}
|
||||
onClose={() => setAddDialogOpen(false)}
|
||||
onAdd={handleAdd}
|
||||
onSave={handleSaveMember}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user