Refactor: Remove item_edit_history_view

This commit is contained in:
gpt-engineer-app[bot]
2025-11-02 23:55:49 +00:00
parent 9c4b80e454
commit c59d8e40d5
8 changed files with 369 additions and 63 deletions

View File

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { toast } from '@/hooks/use-toast';
import { useIsMobile } from '@/hooks/use-mobile';
import { useUserRole } from '@/hooks/useUserRole';
@@ -21,22 +22,28 @@ import { RideModelForm } from '@/components/admin/RideModelForm';
import { Save, X, Edit } from 'lucide-react';
interface ItemEditDialogProps {
item: SubmissionItemWithDeps | null;
item?: SubmissionItemWithDeps | null;
items?: SubmissionItemWithDeps[];
open: boolean;
onOpenChange: (open: boolean) => void;
onComplete: () => void;
}
export function ItemEditDialog({ item, open, onOpenChange, onComplete }: ItemEditDialogProps) {
export function ItemEditDialog({ item, items, open, onOpenChange, onComplete }: ItemEditDialogProps) {
const [submitting, setSubmitting] = useState(false);
const [activeTab, setActiveTab] = useState<string>(items?.[0]?.id || '');
const isMobile = useIsMobile();
const { isModerator } = useUserRole();
const { user } = useAuth();
const Container = isMobile ? Sheet : Dialog;
// Phase 5: Bulk edit mode
const bulkEditMode = items && items.length > 1;
const currentItem = bulkEditMode ? items.find(i => i.id === activeTab) : item;
if (!item) return null;
if (!currentItem && !bulkEditMode) return null;
const handleSubmit = async (data: Record<string, unknown>) => {
const handleSubmit = async (data: Record<string, unknown>, itemId?: string) => {
if (!user?.id) {
toast({
title: 'Authentication Required',
@@ -45,10 +52,13 @@ export function ItemEditDialog({ item, open, onOpenChange, onComplete }: ItemEdi
});
return;
}
const targetItemId = itemId || currentItem?.id;
if (!targetItemId) return;
setSubmitting(true);
try {
await editSubmissionItem(item.id, data, user.id);
await editSubmissionItem(targetItemId, data, user.id);
toast({
title: isModerator() ? 'Item Updated' : 'Edit Submitted',
@@ -57,8 +67,19 @@ export function ItemEditDialog({ item, open, onOpenChange, onComplete }: ItemEdi
: 'Your edit has been submitted and will be reviewed by a moderator.',
});
onComplete();
onOpenChange(false);
if (bulkEditMode && items) {
// Move to next tab or complete
const currentIndex = items.findIndex(i => i.id === activeTab);
if (currentIndex < items.length - 1) {
setActiveTab(items[currentIndex + 1].id);
} else {
onComplete();
onOpenChange(false);
}
} else {
onComplete();
onOpenChange(false);
}
} catch (error: unknown) {
const errorMsg = getErrorMessage(error);
toast({
@@ -85,10 +106,10 @@ export function ItemEditDialog({ item, open, onOpenChange, onComplete }: ItemEdi
await handleSubmit(photoData);
};
const renderEditForm = () => {
const data = item.item_data;
const renderEditForm = (editItem: SubmissionItemWithDeps) => {
const data = editItem.item_data;
switch (item.item_type) {
switch (editItem.item_type) {
case 'park':
return (
<ParkForm
@@ -182,14 +203,31 @@ export function ItemEditDialog({ item, open, onOpenChange, onComplete }: ItemEdi
<SheetHeader>
<SheetTitle className="flex items-center gap-2">
<Edit className="w-5 h-5" />
Edit {item.item_type.replace('_', ' ')}
{bulkEditMode ? `Edit ${items.length} Items` : `Edit ${currentItem?.item_type.replace('_', ' ')}`}
</SheetTitle>
<SheetDescription>
Make changes to this submission item
{bulkEditMode ? 'Edit multiple submission items using tabs' : 'Make changes to this submission item'}
</SheetDescription>
</SheetHeader>
<div className="mt-6">
{renderEditForm()}
{bulkEditMode && items ? (
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList className="grid w-full" style={{ gridTemplateColumns: `repeat(${items.length}, 1fr)` }}>
{items.map((tabItem, index) => (
<TabsTrigger key={tabItem.id} value={tabItem.id}>
{index + 1}. {tabItem.item_type.replace('_', ' ')}
</TabsTrigger>
))}
</TabsList>
{items.map(tabItem => (
<TabsContent key={tabItem.id} value={tabItem.id} className="mt-4">
{renderEditForm(tabItem)}
</TabsContent>
))}
</Tabs>
) : currentItem ? (
renderEditForm(currentItem)
) : null}
</div>
</SheetContent>
) : (
@@ -197,14 +235,31 @@ export function ItemEditDialog({ item, open, onOpenChange, onComplete }: ItemEdi
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Edit className="w-5 h-5" />
Edit {item.item_type.replace('_', ' ')}
{bulkEditMode ? `Edit ${items.length} Items` : `Edit ${currentItem?.item_type.replace('_', ' ')}`}
</DialogTitle>
<DialogDescription>
Make changes to this submission item
{bulkEditMode ? 'Edit multiple submission items using tabs' : 'Make changes to this submission item'}
</DialogDescription>
</DialogHeader>
<div className="mt-4">
{renderEditForm()}
{bulkEditMode && items ? (
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList className="grid w-full" style={{ gridTemplateColumns: `repeat(${items.length}, 1fr)` }}>
{items.map((tabItem, index) => (
<TabsTrigger key={tabItem.id} value={tabItem.id}>
{index + 1}. {tabItem.item_type.replace('_', ' ')}
</TabsTrigger>
))}
</TabsList>
{items.map(tabItem => (
<TabsContent key={tabItem.id} value={tabItem.id} className="mt-4">
{renderEditForm(tabItem)}
</TabsContent>
))}
</Tabs>
) : currentItem ? (
renderEditForm(currentItem)
) : null}
</div>
</DialogContent>
)}