rmancinas/jorgecuadros-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(catalogos): render child editor in-place of edited row

Browse Source 
The add/edit form was appended after the whole table, so on long lists
(e.g. /catalogos aseguradoras, 16+ rows) clicking Editar on a top row
opened the form far below the fold — appearing to do nothing. Render the
edit form in place of its row, and the add form as the first table row.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rmancinas
2026-07-23 17:42:41 -07:00
co-authored by Claude Opus 4.8
parent 7d9f59e51b
commit 0260b8110d
1 changed files with 44 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/ChildCollection.tsx
+44 -29
View File
@@ -118,6 +118,16 @@ export function ChildCollection({
} }
} }
const colCount = config.fields.length + (canEdit ? 1 : 0);
function editorRow() {
return (
<tr>
<td colSpan={colCount}>{editor()}</td>
</tr>
);
}
function editor() { function editor() {
return ( return (
<div className="child-editor"> <div className="child-editor">
@@ -196,39 +206,44 @@ export function ChildCollection({
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{rows.map((row) => ( {adding && editorRow()}
<tr key={String(row.id)}> {rows.map((row) =>
{config.fields.map((f) => ( editingId === String(row.id) ? (
<td key={f.key}>{cellText(f, row[f.key])}</td> <tr key={String(row.id)}>
))} <td colSpan={colCount}>{editor()}</td>
{canEdit && ( </tr>
<td> ) : (
<div className="row-actions"> <tr key={String(row.id)}>
<button {config.fields.map((f) => (
type="button" <td key={f.key}>{cellText(f, row[f.key])}</td>
className="btn btn-ghost" ))}
onClick={() => startEdit(row)} {canEdit && (
> <td>
Editar <div className="row-actions">
</button> <button
<button type="button"
type="button" className="btn btn-ghost"
className="btn btn-ghost" onClick={() => startEdit(row)}
onClick={() => remove(String(row.id))} >
> Editar
Eliminar </button>
</button> <button
</div> type="button"
</td> className="btn btn-ghost"
)} onClick={() => remove(String(row.id))}
</tr> >
))} Eliminar
</button>
</div>
</td>
)}
</tr>
),
)}
</tbody> </tbody>
</table> </table>
</div> </div>
)} )}
{(adding || editingId !== null) && editor()}
</div> </div>
); );
} }