// ───────────────────────────────────────────── // DO_DetailView_Portal.jsx v5 // Requires: DO_Shared.jsx (IconBtn, Icon, getTheme) // ───────────────────────────────────────────── function PortalField({ obj, appId, table: parentTable, recordId, appData }) { const [rows, setRows] = React.useState([]); const [relFields, setRelFields] = React.useState([]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [addOpen, setAddOpen] = React.useState(false); const [addValues, setAddValues] = React.useState({}); const [saving, setSaving] = React.useState(false); const [delConfirm, setDelConfirm] = React.useState(null); const [deleting, setDeleting] = React.useState(null); const [edits, setEdits] = React.useState({}); const [focusCell, setFocusCell] = React.useState(null); const [cellSaving, setCellSaving] = React.useState(null); // ── Config ──────────────────────────────────── const relatedTable = obj.relatedTable; const displayAs = obj.displayAs || 'rows'; const allowAdd = obj.allowAdd === 'yes' || obj.allowAdd === true; const allowDelete = obj.allowDelete === 'yes' || obj.allowDelete === true; const rowLimit = parseInt(obj.portalRows) || 25; const maxHeight = parseInt(obj.portalHeight) || 0; const label = obj.label || 'Related Records'; const displayFields= Array.isArray(obj.displayFields) ? obj.displayFields : []; const sortField = obj.sortField || ''; const sortDir = obj.sortDir || 'desc'; // Theme label const th = getTheme(); const lblSize = th.label_size || '10px'; const lblColor= th.label_color || '#64748b'; const fldLbl = { fontSize:lblSize, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.07em', color:lblColor }; // ── FIX #5: reset add mode on record navigation ── React.useEffect(() => { setAddOpen(false); setAddValues({}); setEdits({}); }, [recordId]); // ── Load ────────────────────────────────────── function load() { if (!relatedTable || !recordId) { setLoading(false); return; } setLoading(true); setError(null); apiFetch(`${API_BASE}/v6/portal?app=${appId}&parentTable=${parentTable}&parentRecord=${recordId}&relatedTable=${relatedTable}&sortField=${sortField}&sortDir=${sortDir}&limit=${rowLimit}`) .then(r => r.json()) .then(d => { if (d.status !== 'ok') throw new Error(d.message); setRows(d.records || []); setRelFields(d.fields || []); }) .catch(e => setError(e.message)) .finally(() => setLoading(false)); } React.useEffect(() => { load(); }, [appId, parentTable, recordId, relatedTable]); // ── Fields ──────────────────────────────────── function vf() { if (displayFields.length === 0) return relFields; return relFields.filter(f => { const n = String(f.field).replace('f',''); return displayFields.includes(n) || displayFields.includes(f.field); }); } function fk(f) { return `f${String(f.field).replace('f','')}`; } // ── Cell editing ────────────────────────────── function cellVal(row, f) { const k = `${row.r_auto}:${fk(f)}`; return edits.hasOwnProperty(k) ? edits[k] : (row[fk(f)] || ''); } function onCC(row, f, val) { setEdits(p => ({...p,[`${row.r_auto}:${fk(f)}`]:val})); } async function onCB(row, f) { setFocusCell(null); const k = `${row.r_auto}:${fk(f)}`; const val = edits.hasOwnProperty(k) ? edits[k] : (row[fk(f)] || ''); if (String(val) === String(row[fk(f)] || '')) { setEdits(p => { const n={...p}; delete n[k]; return n; }); return; } setCellSaving(k); try { await apiFetch(`${API_BASE}/v6/record?app=${appId}&table=${relatedTable}&id=${row.r_auto}`, { method:'POST', body:JSON.stringify({[fk(f)]:val}) }); setRows(p => p.map(r => r.r_auto===row.r_auto ? {...r,[fk(f)]:val} : r)); } catch(e) { console.error('Portal save:', e.message); } setCellSaving(null); setEdits(p => { const n={...p}; delete n[k]; return n; }); } // ── Add / Delete ────────────────────────────── async function doAdd() { if (!Object.values(addValues).some(v => String(v||'').trim())) return; setSaving(true); try { const d = await apiFetch(`${API_BASE}/v6/portal/add`, { method:'POST', body:JSON.stringify({app:appId,parentTable,parentRecord:recordId,relatedTable,fields:addValues}), }).then(r => r.json()); if (d.status !== 'ok') throw new Error(d.message); setAddOpen(false); setAddValues({}); load(); } catch(e) { alert('Add failed: '+e.message); } setSaving(false); } function cancelAdd() { setAddOpen(false); setAddValues({}); } async function doDelete() { if (!delConfirm) return; const ra = delConfirm; setDeleting(ra); setDelConfirm(null); try { await apiFetch(`${API_BASE}/v6/portal/delete?app=${appId}&parentTable=${parentTable}&parentRecord=${recordId}&relatedTable=${relatedTable}&relatedRecord=${ra}`, {method:'DELETE'}); load(); } catch(e) { alert('Delete failed: '+e.message); } setDeleting(null); } const visFields = vf(); // ── Shared cell input (transparent, border on focus) ── function cellInp(k, val, onChange, onBlur, autoFocus, placeholder) { const focused = focusCell === k; const csaving = cellSaving === k; return ( onChange(e.target.value)} onFocus={() => setFocusCell(k)} onBlur={onBlur} onKeyDown={e => { if(e.key==='Enter') e.target.blur(); }} /> ); } // ── Add input (same as S.input) ── const addInpStyle = { width:'100%', boxSizing:'border-box', border:'1px solid #e2e8f0', borderRadius:5, padding:'6px 10px', fontSize:'1em', color:'#1e293b', background:'#fafbfc', outline:'none', fontFamily:'inherit', }; if (!relatedTable) { return (
Portal not configured — set Related Table in DEV
); } const hasRows = !loading && rows.length > 0; const showTable = hasRows || (addOpen && !loading); // Action column width — always present to align delete buttons const actW = 70; // px — holds save+cancel or delete button return (
{/* ── Label + + button — outside box ── */}
{allowAdd && !addOpen && ( setAddOpen(true)} title={`Add ${label}`} /> )}
{/* ── Box ── */}
0 ? maxHeight+'px' : undefined, overflowY: maxHeight > 0 ? 'auto' : undefined, }}> {error &&
{error}
} {loading &&
{[1,2].map(i=>
)}
} {/* ── Empty state ── */} {!loading && rows.length===0 && !addOpen && (
No {label.toLowerCase()} yet {allowAdd && — setAddOpen(true)}>click + to add}
)} {/* ════════════════════════════════════════ ROWS MODE — real FIX #3: add row is FIRST row inside table FIX #4: distinct from columns ════════════════════════════════════════ */} {showTable && displayAs === 'rows' && (
{visFields.map((f,i) => )} {visFields.map(f => ( ))} {/* ── FIX #3: Add row INSIDE table, no duplicate headers ── */} {addOpen && ( {visFields.map((f, i) => ( ))} )} {/* ── Data rows ── */} {rows.map(row => ( {visFields.map(f => { const k = `${row.r_auto}:${fk(f)}`; return ( ); })} ))}
{f.name}
setAddValues(p => ({...p,[fk(f)]:e.target.value}))} onFocus={e => { e.target.style.borderColor='#2563eb'; e.target.style.background='#fff'; }} onBlur={e => { e.target.style.borderColor='#e2e8f0'; e.target.style.background='#fafbfc'; }} onKeyDown={e => { if(e.key==='Enter') doAdd(); if(e.key==='Escape') cancelAdd(); }} />
{cellInp(k, cellVal(row,f), v=>onCC(row,f,v), ()=>onCB(row,f), false, '')} {allowDelete && ( setDelConfirm(row.r_auto)} disabled={deleting===row.r_auto} title="Delete" /> )}
)} {/* ════════════════════════════════════════ COLUMNS MODE — table with label | input per field FIX #4: completely different layout from rows ════════════════════════════════════════ */} {showTable && displayAs === 'columns' && ( {/* Add row in columns mode */} {addOpen && ( <> {visFields.map((f, fi) => ( {fi===0 ? : null } ))} {rows.length > 0 && ( )} )} {/* Existing records */} {rows.map((row, idx) => ( {visFields.map((f, fi) => { const k = `${row.r_auto}:${fk(f)}`; const focused = focusCell===k; const csaving = cellSaving===k; return ( {fi===0 ? : null } ); })} {/* ── div between columns f1f5f9 ── */} {idx < rows.length-1 && ( )} ))}
{f.name} setAddValues(p => ({...p,[fk(f)]:e.target.value}))} onFocus={e => { e.target.style.borderColor='#2563eb'; e.target.style.background='#fff'; }} onBlur={e => { e.target.style.borderColor='#e2e8f0'; e.target.style.background='#fafbfc'; }} onKeyDown={e => { if(e.key==='Enter') doAdd(); if(e.key==='Escape') cancelAdd(); }} />
{f.name} onCC(row,f,e.target.value)} onFocus={() => setFocusCell(k)} onBlur={() => onCB(row,f)} onKeyDown={e => { if(e.key==='Enter') e.target.blur(); }} /> {allowDelete && ( setDelConfirm(row.r_auto)} disabled={deleting===row.r_auto} title="Delete" /> )}
)}
{/* ── Delete confirm dialog ── */} {delConfirm && (
setDelConfirm(null)}>
e.stopPropagation()}>
Delete this record?
This will remove the related record. This cannot be undone.
setDelConfirm(null)} title="Cancel" />
)}
); } const SP = { box: { width:'100%', boxSizing:'border-box', background:'#fff', border:'1px solid #e2e8f0', borderRadius:6, overflow:'hidden' }, empty: { padding:'10px 12px', fontSize:13, color:'#94a3b8', fontStyle:'italic' }, };