style(docs-picker): fix spacing, icona search, paginazione client-side
Tre fix UX raggruppati sul CompanyDocumentPicker dopo feedback browser di Carlo: 1. Spacing banner informativo → filtri: aumentato a 1.5rem (era classe mb-3 PrimeReact che non applicava abbastanza spazio) 2. Icona lente ricerca non allineata col placeholder: p-input-icon-left in PrimeReact 10 non aggiunge piu padding-left automatico. Sostituito lo span wrapper con div position:relative + icona absolute left 1rem pointer-events none zIndex 1, InputText paddingLeft 2.75rem. Portable tra versioni PrimeReact, funziona indipendentemente da eventuali CSS override. 3. Paginazione client-side sulla DataTable: paginator con default 10 righe, rowsPerPageOptions [10, 25, 50], template full con navigation + counter '1-10 di N'. Rimosso scrollable/scrollHeight 400px (la paginazione sostituisce lo scroll infinito, UX piu prevedibile per liste grandi). Sufficiente client-side per company con fino a qualche centinaio di doc (PMI tipicamente 20-50). Se in futuro servira server-side paginated dal BE Spring, e un evoluzione incrementale non bloccante.
This commit is contained in:
@@ -195,19 +195,27 @@ const CompanyDocumentPicker = ({ visible, companyId, onHide, onSelect, currentSo
|
|||||||
contentStyle={{ paddingTop: '1rem' }}>
|
contentStyle={{ paddingTop: '1rem' }}>
|
||||||
|
|
||||||
{/* info banner */}
|
{/* info banner */}
|
||||||
<Message severity="info" className="mb-3" style={{ width: '100%' }}
|
<Message severity="info" style={{ width: '100%', marginBottom: '1.5rem' }}
|
||||||
content={
|
content={
|
||||||
<small>{__('Seleziona un documento già caricato in fase di domanda. La scadenza viene controllata automaticamente — i documenti scaduti vengono esclusi dal repository.', 'gepafin')}</small>
|
<small>{__('Seleziona un documento già caricato in fase di domanda. La scadenza viene controllata automaticamente — i documenti scaduti vengono esclusi dal repository.', 'gepafin')}</small>
|
||||||
} />
|
} />
|
||||||
|
|
||||||
{/* FILTRI — search full width, poi 2 dropdown affiancati con CSS grid rigido */}
|
{/* FILTRI — search full width, poi 2 dropdown affiancati con CSS grid rigido */}
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0.75rem', marginBottom: '1rem' }}>
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0.75rem', marginBottom: '1rem' }}>
|
||||||
<span className="p-input-icon-left" style={{ display: 'block', width: '100%' }}>
|
<div style={{ position: 'relative', width: '100%' }}>
|
||||||
<i className="pi pi-search" />
|
<i className="pi pi-search" style={{
|
||||||
|
position: 'absolute',
|
||||||
|
left: '1rem',
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
color: 'var(--text-color-secondary)',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
zIndex: 1
|
||||||
|
}} />
|
||||||
<InputText placeholder={__('Cerca per nome o categoria...', 'gepafin')}
|
<InputText placeholder={__('Cerca per nome o categoria...', 'gepafin')}
|
||||||
value={search} onChange={(e) => setSearch(e.target.value)}
|
value={search} onChange={(e) => setSearch(e.target.value)}
|
||||||
style={{ width: '100%' }} />
|
style={{ width: '100%', paddingLeft: '2.75rem' }} />
|
||||||
</span>
|
</div>
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
|
||||||
<Dropdown value={categoryFilter} onChange={(e) => setCategoryFilter(e.value)}
|
<Dropdown value={categoryFilter} onChange={(e) => setCategoryFilter(e.value)}
|
||||||
options={categoryOptions} placeholder={__('Categoria', 'gepafin')}
|
options={categoryOptions} placeholder={__('Categoria', 'gepafin')}
|
||||||
@@ -235,7 +243,10 @@ const CompanyDocumentPicker = ({ visible, companyId, onHide, onSelect, currentSo
|
|||||||
? __('Nessun documento nel repository della tua azienda', 'gepafin')
|
? __('Nessun documento nel repository della tua azienda', 'gepafin')
|
||||||
: __('Nessun documento corrisponde ai filtri', 'gepafin')}
|
: __('Nessun documento corrisponde ai filtri', 'gepafin')}
|
||||||
</div>}
|
</div>}
|
||||||
scrollable scrollHeight="400px" size="small" stripedRows
|
size="small" stripedRows
|
||||||
|
paginator rows={10} rowsPerPageOptions={[10, 25, 50]}
|
||||||
|
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||||
|
currentPageReportTemplate="{first}-{last} di {totalRecords}"
|
||||||
selectionMode="single"
|
selectionMode="single"
|
||||||
selection={chosenDoc}
|
selection={chosenDoc}
|
||||||
onSelectionChange={(e) => e.value && setSelectedId(e.value.id)}
|
onSelectionChange={(e) => e.value && setSelectedId(e.value.id)}
|
||||||
|
|||||||
Reference in New Issue
Block a user