import { Form, Head, Link } from '@inertiajs/react'; import { useState } from 'react'; import HeadingSmall from '@/components/heading-small'; import { SortableHeader, useSort } from '@/components/sortable-header'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; import AppLayout from '@/layouts/app-layout'; type Supplier = { id: number; name: string; slug: string; }; type Mapping = { id: number; supplier_id: number; target_field: string; source_path: string; cast: string; options: Record | null; is_active: boolean; }; type Props = { suppliers: Supplier[]; activeSupplierId: number | null; mappings: Mapping[]; casts: string[]; productFields: string[]; }; export default function SupplierProductFieldMappings({ suppliers, activeSupplierId, mappings, casts, productFields, }: Props) { const baseUrl = '/admin/supplier-product-field-mappings'; const [createOpen, setCreateOpen] = useState(false); const [editingId, setEditingId] = useState(null); const { sorted, sortColumn, sortDirection, toggleSort } = useSort( mappings, 'target_field', ); const breadcrumbs = [ { title: 'Supplier field mappings', href: activeSupplierId === null ? baseUrl : `${baseUrl}?supplier_id=${activeSupplierId}`, }, ]; return (

Supplier field mappings

Tip: use dotted paths like Rate or{' '} PriceSheet.Rate. Use{' '} {'"static": "value"'} in options to set a fixed value for all products.
{activeSupplierId === null ? (
Pick a supplier to view and edit mappings.
) : (
Add mapping Create a new field mapping for this supplier.
setCreateOpen(false)} transform={(data) => ({ ...data, supplier_id: activeSupplierId, })} > {({ processing, errors }) => (
{errors.target_field && (
{ errors.target_field }
)}
{errors.source_path && (
{errors.source_path}
)}
{errors.cast && (
{errors.cast}
)}
Advanced options (JSON)