application [cat-admin-web] view page [pages/cat-management] development
This commit is contained in:
NVWA Code Agent
233
apps/cat-admin-web/src/pages/cat-management.tsx
Normal file
233
apps/cat-admin-web/src/pages/cat-management.tsx
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useSearchParams } from 'react-router-dom';
|
||||||
|
import { entities } from '@/lib/nvwa';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Switch } from '@/components/ui/switch';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
|
||||||
|
interface Cat {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
age: number;
|
||||||
|
gender: string;
|
||||||
|
grade: string;
|
||||||
|
type: string;
|
||||||
|
is_available: boolean;
|
||||||
|
description?: string;
|
||||||
|
image_ids: number[];
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CatManagement() {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const editId = searchParams.get('id');
|
||||||
|
const [cats, setCats] = useState<Cat[]>([]);
|
||||||
|
const [editingCat, setEditingCat] = useState<Cat | null>(null);
|
||||||
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchCats();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (editId && cats.length > 0) {
|
||||||
|
const cat = cats.find(c => c.id === parseInt(editId));
|
||||||
|
if (cat) {
|
||||||
|
setEditingCat(cat);
|
||||||
|
setIsDialogOpen(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [editId, cats]);
|
||||||
|
|
||||||
|
const fetchCats = async () => {
|
||||||
|
const { data, error } = await entities.from('cat').select('*');
|
||||||
|
if (error) {
|
||||||
|
console.error(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setCats(data || []);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleAvailability = async (cat: Cat) => {
|
||||||
|
const { error } = await entities.from('cat').update({ is_available: !cat.is_available }).eq('id', cat.id);
|
||||||
|
if (error) {
|
||||||
|
console.error(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setCats(cats.map(c => c.id === cat.id ? { ...c, is_available: !c.is_available } : c));
|
||||||
|
};
|
||||||
|
|
||||||
|
const openEditDialog = (cat: Cat) => {
|
||||||
|
setEditingCat(cat);
|
||||||
|
setIsDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = async () => {
|
||||||
|
if (!editingCat) return;
|
||||||
|
const { error } = await entities.from('cat').update({
|
||||||
|
name: editingCat.name,
|
||||||
|
age: editingCat.age,
|
||||||
|
gender: editingCat.gender,
|
||||||
|
grade: editingCat.grade,
|
||||||
|
type: editingCat.type,
|
||||||
|
description: editingCat.description,
|
||||||
|
image_ids: editingCat.image_ids,
|
||||||
|
}).eq('id', editingCat.id);
|
||||||
|
if (error) {
|
||||||
|
console.error(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setCats(cats.map(cat => cat.id === editingCat.id ? editingCat : cat));
|
||||||
|
setIsDialogOpen(false);
|
||||||
|
setEditingCat(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>猫咪管理</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>名称</TableHead>
|
||||||
|
<TableHead>年龄</TableHead>
|
||||||
|
<TableHead>性别</TableHead>
|
||||||
|
<TableHead>等级</TableHead>
|
||||||
|
<TableHead>类型</TableHead>
|
||||||
|
<TableHead>可售卖</TableHead>
|
||||||
|
<TableHead>操作</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{cats.map(cat => (
|
||||||
|
<TableRow key={cat.id}>
|
||||||
|
<TableCell>{cat.name}</TableCell>
|
||||||
|
<TableCell>{cat.age} 月</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant={cat.gender === 'male' ? 'default' : 'secondary'}>
|
||||||
|
{cat.gender === 'male' ? '雄' : '雌'}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline">{cat.grade}</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline">
|
||||||
|
{cat.type === 'breeding_male' ? '种公' : cat.type === 'breeding_female' ? '种母' : '幼猫'}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Switch
|
||||||
|
checked={cat.is_available}
|
||||||
|
onCheckedChange={() => toggleAvailability(cat)}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Button onClick={() => openEditDialog(cat)}>编辑</Button>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>编辑猫咪</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
{editingCat && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="name">名称</Label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
value={editingCat.name}
|
||||||
|
onChange={(e) => setEditingCat({ ...editingCat, name: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="age">年龄 (月)</Label>
|
||||||
|
<Input
|
||||||
|
id="age"
|
||||||
|
type="number"
|
||||||
|
value={editingCat.age}
|
||||||
|
onChange={(e) => setEditingCat({ ...editingCat, age: parseInt(e.target.value) })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>性别</Label>
|
||||||
|
<Select
|
||||||
|
value={editingCat.gender}
|
||||||
|
onValueChange={(value: string) => setEditingCat({ ...editingCat, gender: value })}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="male">雄</SelectItem>
|
||||||
|
<SelectItem value="female">雌</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>等级</Label>
|
||||||
|
<Select
|
||||||
|
value={editingCat.grade}
|
||||||
|
onValueChange={(value: string) => setEditingCat({ ...editingCat, grade: value })}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="A">A</SelectItem>
|
||||||
|
<SelectItem value="B">B</SelectItem>
|
||||||
|
<SelectItem value="C">C</SelectItem>
|
||||||
|
<SelectItem value="D">D</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>类型</Label>
|
||||||
|
<Select
|
||||||
|
value={editingCat.type}
|
||||||
|
onValueChange={(value: string) => setEditingCat({ ...editingCat, type: value })}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="breeding_male">种公</SelectItem>
|
||||||
|
<SelectItem value="breeding_female">种母</SelectItem>
|
||||||
|
<SelectItem value="kitten">幼猫</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="description">描述</Label>
|
||||||
|
<Textarea
|
||||||
|
id="description"
|
||||||
|
value={editingCat.description || ''}
|
||||||
|
onChange={(e) => setEditingCat({ ...editingCat, description: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button onClick={handleEdit}>保存</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user