4nk/4NK_IA_front
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(extraction): mise en page responsive, boutons non superposés

Browse Source
This commit is contained in:
4NK IA 2025-09-18 14:17:10 +00:00
parent a2b6e70e38
commit 99b799306b
1 changed files with 58 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/views/ExtractionView.tsx
View File

@ -197,8 +197,13 @@ export default function ExtractionView() {
</Typography> </Typography>
<List dense> <List dense>
{extraction.extraction.entities.persons.map((p: any, i: number) => ( {extraction.extraction.entities.persons.map((p: any, i: number) => (
<ListItem key={`p-${i}`} secondaryAction={ <ListItem key={`p-${i}`} disableGutters sx={{ py: 0.5 }}>
<Box sx={{ display: 'flex', gap: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, width: '100%', flexWrap: 'wrap' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flex: '1 1 auto', minWidth: 0 }}>
<input style={{ padding: 4, width: 140 }} defaultValue={p.firstName} onChange={(e)=> (p.firstName=e.target.value)} />
<input style={{ padding: 4, width: 160 }} defaultValue={p.lastName} onChange={(e)=> (p.lastName=e.target.value)} />
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0, whiteSpace: 'nowrap' }}>
<Button size="small" variant="outlined" disabled={savingKey===`p-${i}`} <Button size="small" variant="outlined" disabled={savingKey===`p-${i}`}
onClick={async ()=>{ onClick={async ()=>{
try{ try{
@ -211,10 +216,6 @@ export default function ExtractionView() {
await deleteEntity(currentFolderHash!, extraction.fileHash, 'person', { index: i, id: p.id }) await deleteEntity(currentFolderHash!, extraction.fileHash, 'person', { index: i, id: p.id })
}}>Supprimer</Button> }}>Supprimer</Button>
</Box> </Box>
}>
<Box sx={{ display: 'flex', gap: 1 }}>
<input style={{ padding: 4, width: 120 }} defaultValue={p.firstName} onChange={(e)=> (p.firstName=e.target.value)} />
<input style={{ padding: 4, width: 140 }} defaultValue={p.lastName} onChange={(e)=> (p.lastName=e.target.value)} />
</Box> </Box>
</ListItem> </ListItem>
))} ))}
@ -233,8 +234,15 @@ export default function ExtractionView() {
</Typography> </Typography>
<List dense> <List dense>
{extraction.extraction.entities.addresses.map((a: any, i: number) => ( {extraction.extraction.entities.addresses.map((a: any, i: number) => (
<ListItem key={`a-${i}`} secondaryAction={ <ListItem key={`a-${i}`} disableGutters sx={{ py: 0.5 }}>
<Box sx={{ display: 'flex', gap: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, width: '100%', flexWrap: 'wrap' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flex: '1 1 auto', minWidth: 0, flexWrap: 'wrap' }}>
<input style={{ padding: 4, width: 240 }} defaultValue={a.street} onChange={(e)=> (a.street=e.target.value)} />
<input style={{ padding: 4, width: 100 }} defaultValue={a.postalCode} onChange={(e)=> (a.postalCode=e.target.value)} />
<input style={{ padding: 4, width: 180 }} defaultValue={a.city} onChange={(e)=> (a.city=e.target.value)} />
<input style={{ padding: 4, width: 140 }} defaultValue={a.country||''} onChange={(e)=> (a.country=e.target.value)} />
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0, whiteSpace: 'nowrap' }}>
<Button size="small" variant="outlined" disabled={savingKey===`a-${i}`} <Button size="small" variant="outlined" disabled={savingKey===`a-${i}`}
onClick={async ()=>{ onClick={async ()=>{
try{ try{
@ -247,12 +255,6 @@ export default function ExtractionView() {
await deleteEntity(currentFolderHash!, extraction.fileHash, 'address', { index: i, id: a.id }) await deleteEntity(currentFolderHash!, extraction.fileHash, 'address', { index: i, id: a.id })
}}>Supprimer</Button> }}>Supprimer</Button>
</Box> </Box>
}>
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
<input style={{ padding: 4, width: 220 }} defaultValue={a.street} onChange={(e)=> (a.street=e.target.value)} />
<input style={{ padding: 4, width: 100 }} defaultValue={a.postalCode} onChange={(e)=> (a.postalCode=e.target.value)} />
<input style={{ padding: 4, width: 160 }} defaultValue={a.city} onChange={(e)=> (a.city=e.target.value)} />
<input style={{ padding: 4, width: 120 }} defaultValue={a.country||''} onChange={(e)=> (a.country=e.target.value)} />
</Box> </Box>
</ListItem> </ListItem>
))} ))}
@ -271,8 +273,12 @@ export default function ExtractionView() {
</Typography> </Typography>
<List dense> <List dense>
{extraction.extraction.entities.companies.map((c: any, i: number) => ( {extraction.extraction.entities.companies.map((c: any, i: number) => (
<ListItem key={`c-${i}`} secondaryAction={ <ListItem key={`c-${i}`} disableGutters sx={{ py: 0.5 }}>
<Box sx={{ display: 'flex', gap: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, width: '100%', flexWrap: 'wrap' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flex: '1 1 auto', minWidth: 0 }}>
<input style={{ padding: 4, width: 300 }} defaultValue={c.name} onChange={(e)=> (c.name=e.target.value)} />
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0, whiteSpace: 'nowrap' }}>
<Button size="small" variant="outlined" disabled={savingKey===`c-${i}`} <Button size="small" variant="outlined" disabled={savingKey===`c-${i}`}
onClick={async ()=>{ onClick={async ()=>{
try{ try{
@ -285,9 +291,6 @@ export default function ExtractionView() {
await deleteEntity(currentFolderHash!, extraction.fileHash, 'company', { index: i, id: c.id }) await deleteEntity(currentFolderHash!, extraction.fileHash, 'company', { index: i, id: c.id })
}}>Supprimer</Button> }}>Supprimer</Button>
</Box> </Box>
}>
<Box sx={{ display: 'flex', gap: 1 }}>
<input style={{ padding: 4, width: 260 }} defaultValue={c.name} onChange={(e)=> (c.name=e.target.value)} />
</Box> </Box>
</ListItem> </ListItem>
))} ))}