feat: Implement enhanced multi-image upload

This commit is contained in:
gpt-engineer-app[bot]
2025-10-01 18:51:48 +00:00
parent 69ce1a8132
commit 37b70111c6
7 changed files with 350 additions and 132 deletions

View File

@@ -12,7 +12,7 @@ import { Ruler, Save, X } from 'lucide-react';
import { Combobox } from '@/components/ui/combobox';
import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
import { useUserRole } from '@/hooks/useUserRole';
import { EntityImageUploader } from '@/components/upload/EntityImageUploader';
import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
const designerSchema = z.object({
name: z.string().min(1, 'Name is required'),
@@ -22,11 +22,15 @@ const designerSchema = z.object({
website_url: z.string().url().optional().or(z.literal('')),
founded_year: z.number().min(1800).max(new Date().getFullYear()).optional(),
headquarters_location: z.string().optional(),
logo_url: z.string().optional(),
banner_image_id: z.string().optional(),
banner_image_url: z.string().optional(),
card_image_id: z.string().optional(),
card_image_url: z.string().optional()
images: z.object({
uploaded: z.array(z.object({
url: z.string(),
cloudflare_id: z.string(),
caption: z.string().optional()
})),
banner_assignment: z.number().optional(),
card_assignment: z.number().optional()
}).optional()
});
type DesignerFormData = z.infer<typeof designerSchema>;
@@ -57,11 +61,7 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
website_url: initialData?.website_url || '',
founded_year: initialData?.founded_year || undefined,
headquarters_location: initialData?.headquarters_location || '',
logo_url: initialData?.logo_url || '',
banner_image_id: initialData?.banner_image_id || '',
banner_image_url: initialData?.banner_image_url || '',
card_image_id: initialData?.card_image_id || '',
card_image_url: initialData?.card_image_url || ''
images: initialData?.images || { uploaded: [] }
}
});
@@ -181,20 +181,10 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
</div>
{/* Images */}
<EntityImageUploader
images={{
logo: { url: watch('logo_url') },
banner: { url: watch('banner_image_url'), id: watch('banner_image_id') },
card: { url: watch('card_image_url'), id: watch('card_image_id') }
}}
onImagesChange={(images) => {
if (images.logo_url !== undefined) setValue('logo_url', images.logo_url);
if (images.banner_image_id !== undefined) setValue('banner_image_id', images.banner_image_id);
if (images.banner_image_url !== undefined) setValue('banner_image_url', images.banner_image_url);
if (images.card_image_id !== undefined) setValue('card_image_id', images.card_image_id);
if (images.card_image_url !== undefined) setValue('card_image_url', images.card_image_url);
}}
showLogo={true}
<EntityMultiImageUploader
mode={initialData ? 'edit' : 'create'}
value={watch('images') || { uploaded: [] }}
onChange={(images) => setValue('images', images)}
entityType="designer"
/>