Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit e937fce

Browse files
justincliftjustinclift
committed
webui: Improve database view row buttons and honour user maxRows preference
This adds the database paging controls to the top of the data grid as well, as having them at both the top and bottom is much more convenient than just at the bottom when viewing large numbers of rows. Additionally, this commit replaces the dodgy existing unicode based control icons (that were bright orange in Chromium) with font awesome icons. They needed css borders added for visual separation, but the result seems ok. The row count numbers have been moved to the right of the arrows as well, to help make the button locations not jump around as much when trying to click through several pages. This bit still needs improvement, so the button locations don't move at all. The data grid also now honours the user's selected "maximum number of rows to display" setting, manually setting the grid to that size.
1 parent 7f23011 commit e937fce

File tree

2 files changed

+42
-17
lines changed

2 files changed

+42
-17
lines changed

‎cypress/e2e/1-webui/database.cy.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ describe('database page', () => {
224224
cy.get('.rdg-header-row').find('span').contains('Candidate_First_Pref_Votes').click()
225225

226226
// Click the button we're testing
227-
cy.get('[data-cy="pgdnbtn"]').click()
227+
cy.get('[data-cy="pgdnbtn"]').first().click()
228228
cy.get('.rdg-row').first().find('.rdg-cell').first().should('contain', '85')
229229
})
230230

@@ -234,7 +234,7 @@ describe('database page', () => {
234234
cy.get('.rdg-header-row').find('span').contains('Candidate_First_Pref_Votes').click()
235235

236236
// Click the button we're testing
237-
cy.get('[data-cy="lastpgbtn"]').click()
237+
cy.get('[data-cy="lastpgbtn"]').first().click()
238238
cy.get('.rdg-row').first().find('.rdg-cell').first().should('contain', '8881')
239239
})
240240

@@ -244,8 +244,8 @@ describe('database page', () => {
244244
cy.get('.rdg-header-row').find('span').contains('Candidate_First_Pref_Votes').click()
245245

246246
// Click the button we're testing
247-
cy.get('[data-cy="lastpgbtn"]').click()
248-
cy.get('[data-cy="pgupbtn"]').click()
247+
cy.get('[data-cy="lastpgbtn"]').first().click()
248+
cy.get('[data-cy="pgupbtn"]').first().click()
249249
cy.get('.rdg-row').first().find('.rdg-cell').first().should('contain', '7786')
250250
})
251251

@@ -255,8 +255,8 @@ describe('database page', () => {
255255
cy.get('.rdg-header-row').find('span').contains('Candidate_First_Pref_Votes').click()
256256

257257
// Click the button we're testing
258-
cy.get('[data-cy="lastpgbtn"]').click()
259-
cy.get('[data-cy="firstpgbtn"]').click()
258+
cy.get('[data-cy="lastpgbtn"]').first().click()
259+
cy.get('[data-cy="firstpgbtn"]').first().click()
260260
cy.get('.rdg-row').first().find('.rdg-cell').first().should('contain', '27')
261261
})
262262

‎webui/jsx/database-view.js‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export function DatabaseActions({table, numSelectedRows, allowInsert, setTable,
184184
</>);
185185
}
186186

187-
function DatabasePageControls({offset, maxRows, rowCount, setOffset}) {
187+
function DatabasePageControls({position, offset, maxRows, rowCount, setOffset}) {
188188
// Returns a text string with row count information for the table
189189
function totalRowCountText(offset, maxRows, rowCount) {
190190
// Update the end value if it's pointing past the last row
@@ -202,31 +202,53 @@ function DatabasePageControls({offset, maxRows, rowCount, setOffset}) {
202202
return offset.toLocaleString() + "-" + end.toLocaleString() + " of " + rowCount.toLocaleString() + " total rows";
203203
}
204204

205+
// Adjust the style of the border for top vs bottom control placement
206+
let bRadius;
207+
if (position === "bottom") {
208+
bRadius = "0 0 7px 7px";
209+
} else {
210+
bRadius = "7px 7px 0 0";
211+
}
212+
205213
return (
206214
<div className="row">
207215
<div className="col-md-12">
208-
<div style={{maxWidth: "100%", overflow: "auto", border: "1px solid #DDD", borderRadius: "0 0 7px 7px"}}>
216+
<div style={{maxWidth: "100%", overflow: "auto", border: "1px solid #DDD", borderRadius: bRadius}}>
209217
<table className="table table-responsive" style={{margin: 0}}>
210218
<thead>
211219
<tr>
212-
<th style={{textAlign: "center", padding: 0}}>
220+
<th style={{textAlign: "center", padding: 0, borderBottom: "1px"}}>
213221
{offset > 0 ? (<>
214222
<span style={{fontSize: "x-large", verticalAlign: "middle", marginBottom: "10px"}}>
215-
<a href="#" style={{color: "black", textDecoration: "none"}} onClick={() => setOffset(0)} data-cy="firstpgbtn">⏮</a>
223+
<a href="#" style={{color: "black", textDecoration: "none"}} onClick={() => setOffset(0)} data-cy="firstpgbtn"><i className='fa fa-fast-backward' style={{border: "1px solid #aaa", borderRadius: "3px", marginTop: "4px", padding: "2px"}}></i> </a>
224+
</span>
225+
<span style={{fontSize: "x-large", verticalAlign: "middle", marginBottom: "10px"}}>
226+
<a href="#" style={{color: "black", textDecoration: "none"}} onClick={() => setOffset(offset - maxRows)} data-cy="pgupbtn"><i className='fa fa-backward' style={{border: "1px solid #aaa", borderRadius: "3px", marginTop: "4px", padding: "2px 2px 2px 0"}}></i> </a>
227+
</span>
228+
</>) : (<>
229+
<span style={{fontSize: "x-large", verticalAlign: "middle", marginBottom: "10px"}}>
230+
<i className='fa fa-fast-backward' style={{color: "white", background: "white", border: "1px solid white", borderRadius: "3px", marginTop: "4px", padding: "2px"}}></i>
216231
</span>
217232
<span style={{fontSize: "x-large", verticalAlign: "middle", marginBottom: "10px"}}>
218-
<a href="#" style={{color: "black", textDecoration: "none"}} onClick={() => setOffset(offset - maxRows)} data-cy="pgupbtn">⏴</a>
233+
<i className='fa fa-backward' style={{color: "white", background: "white", border: "1px solid white", borderRadius: "3px", marginTop: "4px", padding: "2px 2px 2px 0"}}></i>
219234
</span>
220-
</>) : null}
221-
<span style={{verticalAlign: "middle"}}>{totalRowCountText(offset, maxRows, rowCount)}</span>
235+
</>)}
222236
{offset + maxRows < rowCount ? (<>
223237
<span style={{fontSize: "x-large", verticalAlign: "middle", marginBottom: "10px"}}>
224-
<a href="#" style={{color: "black", textDecoration: "none"}} onClick={() => setOffset(offset + maxRows)} data-cy="pgdnbtn">⏵️</a>
238+
<a href="#" style={{color: "black", textDecoration: "none"}} onClick={() => setOffset(offset + maxRows)} data-cy="pgdnbtn"> <i className='fa fa-forward' style={{border: "1px solid #aaa", borderRadius: "3px", marginTop: "4px", padding: "2px 0 2px 2px"}}></i></a>
239+
</span>
240+
<span style={{fontSize: "x-large", verticalAlign: "middle", marginBottom: "10px"}}>
241+
<a href="#" style={{color: "black", textDecoration: "none"}} onClick={() => setOffset(rowCount - maxRows)} data-cy="lastpgbtn"> <i className="fa fa-fast-forward" style={{border: "1px solid #aaa", borderRadius: "3px", marginTop: "4px", padding: "2px"}}></i></a>
242+
</span>
243+
</>) : (<>
244+
<span style={{fontSize: "x-large", verticalAlign: "middle", marginBottom: "10px"}}>
245+
<i className='fa fa-forward' style={{color: "white", background: "white", border: "1px solid white", borderRadius: "3px", marginTop: "4px", padding: "2px 0 2px 2px"}}></i>
225246
</span>
226247
<span style={{fontSize: "x-large", verticalAlign: "middle", marginBottom: "10px"}}>
227-
<a href="#" style={{color: "black", textDecoration: "none"}} onClick={() => setOffset(rowCount - maxRows)} data-cy="lastpgbtn">⏭</a>
248+
<i className="fa fa-fast-forward" style={{color: "white", background: "white", border: "1px solid white", borderRadius: "3px", marginTop: "4px", padding: "2px"}}></i>
228249
</span>
229-
</>) : null}
250+
</>)}
251+
<span style={{verticalAlign: "middle"}}> &nbsp; {totalRowCountText(offset, maxRows, rowCount)}</span>
230252
</th>
231253
</tr>
232254
</thead>
@@ -483,7 +505,10 @@ export default function DatabaseView() {
483505
deleteSelectedRows={confirmDeleteSelectedRows}
484506
insertRow={insertRow}
485507
/>
508+
<DatabasePageControls position="top" offset={offset} maxRows={maxRows} rowCount={rowCount} setOffset={(newOffset) => changeView(table, newOffset, sortColumns.length ? sortColumns[0].columnKey : null, sortColumns.length ? sortColumns[0].direction : null)} />
486509
<DataGrid
510+
// The "+ 1" includes the header row. The 35 is the default row height size in pixels.
511+
style={{height: ((maxRows + 1) * 35) + "px", overflow: "hidden"}}
487512
className="rdg-light"
488513
renderers={{noRowsFallback: <DataGridNoRowsRender />}}
489514
columns={columns}
@@ -499,7 +524,7 @@ export default function DatabaseView() {
499524
resizable: true
500525
}}
501526
/>
502-
<DatabasePageControls offset={offset} maxRows={maxRows} rowCount={rowCount} setOffset={(newOffset) => changeView(table, newOffset, sortColumns.length ? sortColumns[0].columnKey : null, sortColumns.length ? sortColumns[0].direction : null)} />
527+
<DatabasePageControls position="bottom" offset={offset} maxRows={maxRows} rowCount={rowCount} setOffset={(newOffset) => changeView(table, newOffset, sortColumns.length ? sortColumns[0].columnKey : null, sortColumns.length ? sortColumns[0].direction : null)} />
503528
<div className="row" style={{border: "none"}}>&nbsp;</div>
504529
<DatabaseFullDescription description={meta.fullDescription} />
505530
<div className="row" style={{border: "none"}}>&nbsp;</div>

0 commit comments

Comments
 (0)