mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-11-18 17:47:30 +01:00
feat(web): add submission details dialog component with review and approval functionality
This commit is contained in:
Thomas Camlong
403
web/src/components/submission-details.tsx
Normal file
403
web/src/components/submission-details.tsx
Normal file
@@ -0,0 +1,403 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Calendar, User as UserIcon, FileType, Tag, FolderOpen, Palette, ExternalLink, Download, Check, X } from "lucide-react"
|
||||
import { MagicCard } from "@/components/magicui/magic-card"
|
||||
import { IconCard } from "@/components/icon-card"
|
||||
import { formatIconName } from "@/lib/utils"
|
||||
import type { Icon } from "@/types/icons"
|
||||
import { pb, type Submission, type User } from "@/lib/pb"
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { UserDisplay } from "@/components/user-display"
|
||||
|
||||
// Utility function to get display name with priority: username > email > created_by field
|
||||
const getDisplayName = (submission: Submission, expandedData?: { created_by: User, approved_by: User }): string => {
|
||||
// Check if we have expanded user data
|
||||
if (expandedData && expandedData.created_by) {
|
||||
const user = expandedData.created_by
|
||||
|
||||
// Priority: username > email
|
||||
if (user.username) {
|
||||
return user.username
|
||||
}
|
||||
if (user.email) {
|
||||
return user.email
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback to created_by field (could be user ID or username)
|
||||
return submission.created_by
|
||||
}
|
||||
|
||||
interface SubmissionDetailsProps {
|
||||
submission: Submission
|
||||
isAdmin: boolean
|
||||
onUserClick?: (userId: string, displayName: string) => void
|
||||
onApprove?: () => void
|
||||
onReject?: () => void
|
||||
isApproving?: boolean
|
||||
isRejecting?: boolean
|
||||
}
|
||||
|
||||
export function SubmissionDetails({ submission, isAdmin, onUserClick, onApprove, onReject, isApproving, isRejecting }: SubmissionDetailsProps) {
|
||||
const expandedData = submission.expand
|
||||
const displayName = getDisplayName(submission, expandedData)
|
||||
|
||||
// Sanitize extras to ensure we have safe defaults
|
||||
const sanitizedExtras = {
|
||||
base: submission.extras?.base || "svg",
|
||||
aliases: submission.extras?.aliases || [],
|
||||
categories: submission.extras?.categories || [],
|
||||
colors: submission.extras?.colors || null,
|
||||
wordmark: submission.extras?.wordmark || null
|
||||
}
|
||||
|
||||
const formattedCreated = new Date(submission.created).toLocaleDateString("en-GB", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
|
||||
const formattedUpdated = new Date(submission.updated).toLocaleDateString("en-GB", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
|
||||
// Create a mock Icon object for the IconCard component
|
||||
const mockIconData: Icon = {
|
||||
base: sanitizedExtras.base,
|
||||
aliases: sanitizedExtras.aliases,
|
||||
categories: sanitizedExtras.categories,
|
||||
update: {
|
||||
timestamp: submission.updated,
|
||||
author: {
|
||||
id: 1,
|
||||
name: displayName
|
||||
}
|
||||
},
|
||||
colors: sanitizedExtras.colors ? {
|
||||
dark: sanitizedExtras.colors.dark,
|
||||
light: sanitizedExtras.colors.light
|
||||
} : undefined,
|
||||
wordmark: sanitizedExtras.wordmark ? {
|
||||
dark: sanitizedExtras.wordmark.dark,
|
||||
light: sanitizedExtras.wordmark.light
|
||||
} : undefined
|
||||
}
|
||||
|
||||
const handleDownload = async (url: string, filename: string) => {
|
||||
try {
|
||||
const response = await fetch(url)
|
||||
const blob = await response.blob()
|
||||
const blobUrl = URL.createObjectURL(blob)
|
||||
const link = document.createElement("a")
|
||||
link.href = blobUrl
|
||||
link.download = filename
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
setTimeout(() => URL.revokeObjectURL(blobUrl), 100)
|
||||
} catch (error) {
|
||||
console.error("Download error:", error)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Left Column - Assets Preview */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="h-full bg-background/50 border">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<FileType className="w-5 h-5" />
|
||||
Assets Preview
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<div className="space-y-4">
|
||||
{submission.assets.map((asset, index) => (
|
||||
<MagicCard key={index} className="p-0 rounded-md">
|
||||
<div className="relative">
|
||||
<div className="aspect-square rounded-lg border flex items-center justify-center p-8 bg-muted/30">
|
||||
<Image
|
||||
src={`${pb.baseUrl}/api/files/submissions/${submission.id}/${asset}` || "/placeholder.svg"}
|
||||
alt={`${submission.name} asset ${index + 1}`}
|
||||
width={200}
|
||||
height={200}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute top-2 right-2 flex gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
className="h-8 w-8 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
window.open(`${pb.baseUrl}/api/files/submissions/${submission.id}/${asset}`, '_blank')
|
||||
}}
|
||||
>
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
className="h-8 w-8 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDownload(`${pb.baseUrl}/api/files/submissions/${submission.id}/${asset}`, `${submission.name}-${index + 1}.${sanitizedExtras.base}`)
|
||||
}}
|
||||
>
|
||||
<Download className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</MagicCard>
|
||||
))}
|
||||
{submission.assets.length === 0 && (
|
||||
<div className="text-center py-8 text-muted-foreground text-sm">
|
||||
No assets available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Middle Column - Submission Details */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card className="h-full bg-background/50 border">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Tag className="w-5 h-5" />
|
||||
Submission Details
|
||||
</CardTitle>
|
||||
{(onApprove || onReject) && (
|
||||
<div className="flex gap-2">
|
||||
{onApprove && (
|
||||
<Button
|
||||
size="sm"
|
||||
color="green"
|
||||
variant="outline"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onApprove()
|
||||
}}
|
||||
disabled={isApproving || isRejecting}
|
||||
>
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
{isApproving ? "Approving..." : "Approve"}
|
||||
</Button>
|
||||
)}
|
||||
{onReject && (
|
||||
<Button
|
||||
size="sm"
|
||||
color="red"
|
||||
variant="destructive"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onReject()
|
||||
}}
|
||||
disabled={isApproving || isRejecting}
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
{isRejecting ? "Rejecting..." : "Reject"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||
<FileType className="w-4 h-4" />
|
||||
Icon Name
|
||||
</h3>
|
||||
<p className="text-lg font-medium capitalize">{formatIconName(submission.name)}</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">Filename: {submission.name}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||
<FileType className="w-4 h-4" />
|
||||
Base Format
|
||||
</h3>
|
||||
<Badge variant="outline" className="uppercase font-mono">
|
||||
{sanitizedExtras.base}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{sanitizedExtras.colors && (Object.keys(sanitizedExtras.colors).length > 0) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||
<Palette className="w-4 h-4" />
|
||||
Color Variants
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{sanitizedExtras.colors.dark && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground min-w-12">Dark:</span>
|
||||
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||
{sanitizedExtras.colors.dark}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
{sanitizedExtras.colors.light && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground min-w-12">Light:</span>
|
||||
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||
{sanitizedExtras.colors.light}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sanitizedExtras.wordmark && (Object.keys(sanitizedExtras.wordmark).length > 0) && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||
<FileType className="w-4 h-4" />
|
||||
Wordmark Variants
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{sanitizedExtras.wordmark.dark && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground min-w-12">Dark:</span>
|
||||
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||
{sanitizedExtras.wordmark.dark}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
{sanitizedExtras.wordmark.light && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground min-w-12">Light:</span>
|
||||
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||
{sanitizedExtras.wordmark.light}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||
<UserIcon className="w-4 h-4" />
|
||||
Submitted By
|
||||
</h3>
|
||||
<UserDisplay
|
||||
userId={submission.created_by}
|
||||
avatar={expandedData.created_by.avatar}
|
||||
displayName={displayName}
|
||||
onClick={onUserClick}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{submission.approved_by && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||
<UserIcon className="w-4 h-4" />
|
||||
{submission.status === 'approved' ? 'Approved By' : 'Reviewed By'}
|
||||
</h3>
|
||||
|
||||
<UserDisplay
|
||||
userId={expandedData.approved_by.id}
|
||||
displayName={expandedData.approved_by.username}
|
||||
avatar={expandedData.approved_by.avatar}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Created
|
||||
</h3>
|
||||
<p className="text-sm">{formattedCreated}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Last Updated
|
||||
</h3>
|
||||
<p className="text-sm">{formattedUpdated}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-3 flex items-center gap-2">
|
||||
<FolderOpen className="w-4 h-4" />
|
||||
Categories
|
||||
</h3>
|
||||
{sanitizedExtras.categories.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{sanitizedExtras.categories.map((category) => (
|
||||
<Badge key={category} variant="outline" className="border-primary/20 hover:border-primary">
|
||||
{category
|
||||
.split("-")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(" ")}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No categories assigned</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-3 flex items-center gap-2">
|
||||
<Tag className="w-4 h-4" />
|
||||
Aliases
|
||||
</h3>
|
||||
{sanitizedExtras.aliases.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{sanitizedExtras.aliases.map((alias) => (
|
||||
<Badge key={alias} variant="outline" className="text-xs font-mono">
|
||||
{alias}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No aliases assigned</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isAdmin && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Submission ID</h3>
|
||||
<code className="bg-muted px-2 py-1 rounded block break-all font-mono">
|
||||
{submission.id}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user