BFLOWS/bflows-bandi-fe
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(docs-picker): fix spacing, icona search, paginazione client-side

Browse Source 
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:
BFLOWS
2026-04-20 19:54:56 +02:00
parent cc829fe25e
commit de8a36b4ab
1 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/modules/rendicontazione/components/CompanyDocumentPicker.js
View File

@@ -195,19 +195,27 @@ const CompanyDocumentPicker = ({ visible, companyId, onHide, onSelect, currentSo
contentStyle={{ paddingTop: '1rem' }}>
{/* info banner */}
<Message severity="info" className="mb-3" style={{ width: '100%' }}
<Message severity="info" style={{ width: '100%', marginBottom: '1.5rem' }}
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>
} />
{/* FILTRI — search full width, poi 2 dropdown affiancati con CSS grid rigido */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0.75rem', marginBottom: '1rem' }}>
<span className="p-input-icon-left" style={{ display: 'block', width: '100%' }}>
<i className="pi pi-search" />
<div style={{ position: 'relative', width: '100%' }}>
<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')}
value={search} onChange={(e) => setSearch(e.target.value)}
style={{ width: '100%' }} />
</span>
style={{ width: '100%', paddingLeft: '2.75rem' }} />
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
<Dropdown value={categoryFilter} onChange={(e) => setCategoryFilter(e.value)}
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 corrisponde ai filtri', 'gepafin')}
</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"
selection={chosenDoc}
onSelectionChange={(e) => e.value && setSelectedId(e.value.id)}