feat(plan5): composants PendingRowsTable + MetafieldResolver + CreationProgress

2026-06-09 10:14:12 +02:00
parent 40d537efb6
commit 1ed8c055d7
3 changed files with 224 additions and 0 deletions
@@ -0,0 +1,117 @@
+'use client'
+import { useState, useEffect } from 'react'
+import type { MetafieldDefinition, MetafieldResolution } from '@/types/creation'
+import { normalizeMetafieldKey } from '@/lib/shopifyMetafields'
+
+interface Props {
+  specificColumns: string[]
+  onResolved: (resolutions: MetafieldResolution[]) => void
+}
+
+export function MetafieldResolver({ specificColumns, onResolved }: Props) {
+  const [definitions, setDefinitions] = useState<MetafieldDefinition[]>([])
+  const [matched, setMatched] = useState<Record<string, MetafieldResolution>>({})
+  const [unmatched, setUnmatched] = useState<string[]>([])
+  const [resolutions, setResolutions] = useState<Record<string, MetafieldResolution>>({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (specificColumns.length === 0) { setLoading(false); onResolved([]); return }
+    const params = specificColumns.map(c => encodeURIComponent(c)).join(',')
+    fetch(`/api/creation/metafields?columns=${params}`)
+      .then(r => r.json())
+      .then(data => {
+        if (data.error) throw new Error(data.error)
+        setDefinitions(data.definitions)
+        setMatched(data.matched)
+        setUnmatched(data.unmatched)
+        const init: Record<string, MetafieldResolution> = { ...data.matched }
+        data.unmatched.forEach((col: string) => {
+          init[col] = { columnHeader: col, action: 'create', namespace: 'custom', key: normalizeMetafieldKey(col) }
+        })
+        setResolutions(init)
+      })
+      .catch(e => setError(e.message))
+      .finally(() => setLoading(false))
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [specificColumns.join(',')])
+
+  useEffect(() => {
+    if (!loading) onResolved(Object.values(resolutions))
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resolutions, loading])
+
+  const updateResolution = (col: string, partial: Partial<MetafieldResolution>) => {
+    setResolutions(prev => ({ ...prev, [col]: { ...prev[col], ...partial } }))
+  }
+
+  if (loading) return <p className="text-gray-400 text-sm">Analyse des métachamps Shopify…</p>
+  if (error) return <p className="text-red-400 text-sm">{error}</p>
+  if (specificColumns.length === 0) return <p className="text-gray-400 text-sm">Aucune colonne spécifique détectée.</p>
+
+  return (
+    <div className="space-y-4">
+      {Object.entries(matched).length > 0 && (
+        <div>
+          <h3 className="text-sm font-medium text-green-400 mb-2">
+            ✓ {Object.entries(matched).length} colonne{Object.entries(matched).length > 1 ? 's' : ''} avec correspondance automatique
+          </h3>
+          <div className="space-y-1">
+            {Object.entries(matched).map(([col, res]) => (
+              <div key={col} className="flex items-center gap-3 px-3 py-2 bg-slate-700/50 rounded text-sm">
+                <span className="text-gray-300 flex-1">{col}</span>
+                <span className="text-green-400 text-xs">→ {res.namespace}.{res.key}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {unmatched.length > 0 && (
+        <div>
+          <h3 className="text-sm font-medium text-yellow-400 mb-2">
+            ⚠ {unmatched.length} colonne{unmatched.length > 1 ? 's' : ''} sans correspondance — action requise
+          </h3>
+          <div className="space-y-2">
+            {unmatched.map(col => {
+              const res = resolutions[col]
+              if (!res) return null
+              return (
+                <div key={col} className="p-3 bg-slate-700 rounded-lg space-y-2">
+                  <p className="text-sm text-white font-medium">{col}</p>
+                  <div className="flex gap-2">
+                    {(['create', 'map', 'skip'] as const).map(action => (
+                      <button
+                        key={action}
+                        onClick={() => updateResolution(col, { action })}
+                        className={`px-3 py-1 rounded text-xs font-medium transition-colors ${res.action === action ? 'bg-indigo-600 text-white' : 'bg-slate-600 text-gray-300 hover:bg-slate-500'}`}
+                      >
+                        {action === 'create' ? 'Créer nouveau' : action === 'map' ? 'Associer existant' : 'Ignorer'}
+                      </button>
+                    ))}
+                  </div>
+                  {res.action === 'create' && (
+                    <div className="flex gap-2">
+                      <input value={res.key} onChange={e => updateResolution(col, { key: e.target.value })} placeholder="clé (ex: puissance)"
+                        className="flex-1 bg-slate-600 border border-slate-500 rounded px-2 py-1 text-xs text-white" />
+                      <input value={res.namespace} onChange={e => updateResolution(col, { namespace: e.target.value })} placeholder="namespace"
+                        className="w-24 bg-slate-600 border border-slate-500 rounded px-2 py-1 text-xs text-white" />
+                    </div>
+                  )}
+                  {res.action === 'map' && (
+                    <select value={res.existingDefinitionId ?? ''}
+                      onChange={e => { const def = definitions.find(d => d.id === e.target.value); if (def) updateResolution(col, { existingDefinitionId: def.id, key: def.key, namespace: def.namespace }) }}
+                      className="w-full bg-slate-600 border border-slate-500 rounded px-2 py-1 text-xs text-white">
+                      <option value="">-- Choisir un métachamp existant --</option>
+                      {definitions.map(d => <option key={d.id} value={d.id}>{d.name} ({d.namespace}.{d.key})</option>)}
+                    </select>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}