feat: Standardize submission display

2025-12-22 09:31:12 -05:00 · 2025-10-03 15:32:23 +00:00
parent e15705e94d
commit fe33169ed7
5 changed files with 551 additions and 74 deletions
--- a/src/components/moderation/SubmissionChangesDisplay.tsx
+++ b/src/components/moderation/SubmissionChangesDisplay.tsx
@@ -0,0 +1,157 @@
+import { Badge } from '@/components/ui/badge';
+import { FieldDiff, ImageDiff, LocationDiff } from './FieldComparison';
+import { detectChanges } from '@/lib/submissionChangeDetection';
+import type { SubmissionItemData } from '@/types/submissions';
+import type { SubmissionItemWithDeps } from '@/lib/submissionItemsService';
+import { Building2, Train, MapPin, Building, User, ImageIcon, Trash2, Edit, Plus } from 'lucide-react';
+
+interface SubmissionChangesDisplayProps {
+  item: SubmissionItemData | SubmissionItemWithDeps;
+  view?: 'summary' | 'detailed';
+  showImages?: boolean;
+}
+
+export function SubmissionChangesDisplay({ 
+  item, 
+  view = 'summary',
+  showImages = true 
+}: SubmissionChangesDisplayProps) {
+  const changes = detectChanges(item);
+  
+  // Get appropriate icon for entity type
+  const getEntityIcon = () => {
+    const iconClass = "h-4 w-4";
+    switch (item.item_type) {
+      case 'park': return <Building2 className={iconClass} />;
+      case 'ride': return <Train className={iconClass} />;
+      case 'manufacturer':
+      case 'operator':
+      case 'property_owner':
+      case 'designer': return <Building className={iconClass} />;
+      case 'photo': return <ImageIcon className={iconClass} />;
+      default: return <MapPin className={iconClass} />;
+    }
+  };
+
+  // Get action badge
+  const getActionBadge = () => {
+    switch (changes.action) {
+      case 'create':
+        return <Badge className="bg-green-600"><Plus className="h-3 w-3 mr-1" />New</Badge>;
+      case 'edit':
+        return <Badge className="bg-amber-600"><Edit className="h-3 w-3 mr-1" />Edit</Badge>;
+      case 'delete':
+        return <Badge variant="destructive"><Trash2 className="h-3 w-3 mr-1" />Delete</Badge>;
+    }
+  };
+
+  if (view === 'summary') {
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          {getEntityIcon()}
+          <span className="font-medium">{changes.entityName}</span>
+          {getActionBadge()}
+        </div>
+        
+        {changes.action === 'edit' && changes.totalChanges > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {changes.fieldChanges.slice(0, 5).map((change, idx) => (
+              <FieldDiff key={idx} change={change} compact />
+            ))}
+            {changes.imageChanges.map((change, idx) => (
+              <ImageDiff key={`img-${idx}`} change={change} compact />
+            ))}
+            {changes.hasLocationChange && (
+              <Badge variant="outline" className="text-blue-600 dark:text-blue-400">
+                Location
+              </Badge>
+            )}
+            {changes.totalChanges > 5 && (
+              <Badge variant="outline">
+                +{changes.totalChanges - 5} more
+              </Badge>
+            )}
+          </div>
+        )}
+        
+        {changes.action === 'create' && (
+          <div className="text-sm text-muted-foreground">
+            New {item.item_type}
+          </div>
+        )}
+        
+        {changes.action === 'delete' && (
+          <div className="text-sm text-destructive">
+            Marked for deletion
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Detailed view
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        {getEntityIcon()}
+        <h3 className="text-lg font-semibold">{changes.entityName}</h3>
+        {getActionBadge()}
+      </div>
+
+      {changes.action === 'create' && (
+        <div className="text-sm text-muted-foreground">
+          Creating new {item.item_type}
+        </div>
+      )}
+
+      {changes.action === 'delete' && (
+        <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+          This {item.item_type} will be deleted
+        </div>
+      )}
+
+      {changes.action === 'edit' && changes.totalChanges > 0 && (
+        <>
+          {changes.fieldChanges.length > 0 && (
+            <div className="flex flex-col gap-2">
+              <h4 className="text-sm font-medium">Field Changes ({changes.fieldChanges.length})</h4>
+              <div className="grid gap-2">
+                {changes.fieldChanges.map((change, idx) => (
+                  <FieldDiff key={idx} change={change} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {showImages && changes.imageChanges.length > 0 && (
+            <div className="flex flex-col gap-2">
+              <h4 className="text-sm font-medium">Image Changes</h4>
+              <div className="grid gap-2">
+                {changes.imageChanges.map((change, idx) => (
+                  <ImageDiff key={idx} change={change} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {changes.hasLocationChange && (
+            <div className="flex flex-col gap-2">
+              <h4 className="text-sm font-medium">Location Change</h4>
+              <LocationDiff 
+                oldLocation={item.original_data?.location || item.original_data?.location_id}
+                newLocation={item.item_data?.location || item.item_data?.location_id}
+              />
+            </div>
+          )}
+        </>
+      )}
+
+      {changes.action === 'edit' && changes.totalChanges === 0 && (
+        <div className="text-sm text-muted-foreground">
+          No changes detected
+        </div>
+      )}
+    </div>
+  );
+}