ui(extraction): mise en page responsive, boutons non superposés
This commit is contained in:
4NK IA
parent
a2b6e70e38
commit
99b799306b
@ -197,24 +197,25 @@ export default function ExtractionView() {
|
||||
</Typography>
|
||||
<List dense>
|
||||
{extraction.extraction.entities.persons.map((p: any, i: number) => (
|
||||
<ListItem key={`p-${i}`} secondaryAction={
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button size="small" variant="outlined" disabled={savingKey===`p-${i}`}
|
||||
onClick={async ()=>{
|
||||
try{
|
||||
setSavingKey(`p-${i}`)
|
||||
await updateEntity(currentFolderHash!, extraction.fileHash, 'person', { index: i, id: p.id, patch: { firstName: p.firstName, lastName: p.lastName } })
|
||||
} finally { setSavingKey(null) }
|
||||
}}>Enregistrer</Button>
|
||||
<Button size="small" color="error"
|
||||
onClick={async ()=>{
|
||||
await deleteEntity(currentFolderHash!, extraction.fileHash, 'person', { index: i, id: p.id })
|
||||
}}>Supprimer</Button>
|
||||
</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)} />
|
||||
<ListItem key={`p-${i}`} disableGutters sx={{ py: 0.5 }}>
|
||||
<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}`}
|
||||
onClick={async ()=>{
|
||||
try{
|
||||
setSavingKey(`p-${i}`)
|
||||
await updateEntity(currentFolderHash!, extraction.fileHash, 'person', { index: i, id: p.id, patch: { firstName: p.firstName, lastName: p.lastName } })
|
||||
} finally { setSavingKey(null) }
|
||||
}}>Enregistrer</Button>
|
||||
<Button size="small" color="error"
|
||||
onClick={async ()=>{
|
||||
await deleteEntity(currentFolderHash!, extraction.fileHash, 'person', { index: i, id: p.id })
|
||||
}}>Supprimer</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</ListItem>
|
||||
))}
|
||||
@ -233,26 +234,27 @@ export default function ExtractionView() {
|
||||
</Typography>
|
||||
<List dense>
|
||||
{extraction.extraction.entities.addresses.map((a: any, i: number) => (
|
||||
<ListItem key={`a-${i}`} secondaryAction={
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button size="small" variant="outlined" disabled={savingKey===`a-${i}`}
|
||||
onClick={async ()=>{
|
||||
try{
|
||||
setSavingKey(`a-${i}`)
|
||||
await updateEntity(currentFolderHash!, extraction.fileHash, 'address', { index: i, id: a.id, patch: { street: a.street, city: a.city, postalCode: a.postalCode, country: a.country } })
|
||||
} finally { setSavingKey(null) }
|
||||
}}>Enregistrer</Button>
|
||||
<Button size="small" color="error"
|
||||
onClick={async ()=>{
|
||||
await deleteEntity(currentFolderHash!, extraction.fileHash, 'address', { index: i, id: a.id })
|
||||
}}>Supprimer</Button>
|
||||
</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)} />
|
||||
<ListItem key={`a-${i}`} disableGutters sx={{ py: 0.5 }}>
|
||||
<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}`}
|
||||
onClick={async ()=>{
|
||||
try{
|
||||
setSavingKey(`a-${i}`)
|
||||
await updateEntity(currentFolderHash!, extraction.fileHash, 'address', { index: i, id: a.id, patch: { street: a.street, city: a.city, postalCode: a.postalCode, country: a.country } })
|
||||
} finally { setSavingKey(null) }
|
||||
}}>Enregistrer</Button>
|
||||
<Button size="small" color="error"
|
||||
onClick={async ()=>{
|
||||
await deleteEntity(currentFolderHash!, extraction.fileHash, 'address', { index: i, id: a.id })
|
||||
}}>Supprimer</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</ListItem>
|
||||
))}
|
||||
@ -271,23 +273,24 @@ export default function ExtractionView() {
|
||||
</Typography>
|
||||
<List dense>
|
||||
{extraction.extraction.entities.companies.map((c: any, i: number) => (
|
||||
<ListItem key={`c-${i}`} secondaryAction={
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button size="small" variant="outlined" disabled={savingKey===`c-${i}`}
|
||||
onClick={async ()=>{
|
||||
try{
|
||||
setSavingKey(`c-${i}`)
|
||||
await updateEntity(currentFolderHash!, extraction.fileHash, 'company', { index: i, id: c.id, patch: { name: c.name } })
|
||||
} finally { setSavingKey(null) }
|
||||
}}>Enregistrer</Button>
|
||||
<Button size="small" color="error"
|
||||
onClick={async ()=>{
|
||||
await deleteEntity(currentFolderHash!, extraction.fileHash, 'company', { index: i, id: c.id })
|
||||
}}>Supprimer</Button>
|
||||
</Box>
|
||||
}>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<input style={{ padding: 4, width: 260 }} defaultValue={c.name} onChange={(e)=> (c.name=e.target.value)} />
|
||||
<ListItem key={`c-${i}`} disableGutters sx={{ py: 0.5 }}>
|
||||
<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}`}
|
||||
onClick={async ()=>{
|
||||
try{
|
||||
setSavingKey(`c-${i}`)
|
||||
await updateEntity(currentFolderHash!, extraction.fileHash, 'company', { index: i, id: c.id, patch: { name: c.name } })
|
||||
} finally { setSavingKey(null) }
|
||||
}}>Enregistrer</Button>
|
||||
<Button size="small" color="error"
|
||||
onClick={async ()=>{
|
||||
await deleteEntity(currentFolderHash!, extraction.fileHash, 'company', { index: i, id: c.id })
|
||||
}}>Supprimer</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</ListItem>
|
||||
))}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user