Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-05 14:00:09 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add full datagrid static loader spinner

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-03-26 12:07:08 -07:00
parent 83df98613d
commit 4b31acfca9
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/BookPage.js
View File

@ -62,15 +62,21 @@ export default class BookPage extends Component {
} }
getCurrencyCode(val){ getCurrencyCode(val){
if (val){
return this.state.currencies_dict[val.toString()] return this.state.currencies_dict[val.toString()]
} }
}
// pretty numbers // pretty numbers
pn(x) { pn(x) {
if(x == null){
return 'null'
}else{
var parts = x.toString().split("."); var parts = x.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join("."); return parts.join(".");
} }
}
// Colors for the status badges // Colors for the status badges
statusBadgeColor(status){ statusBadgeColor(status){
@ -109,7 +115,7 @@ export default class BookPage extends Component {
premium: order.premium, premium: order.premium,
}) })
)} )}
loading={this.state.loading}
columns={[ columns={[
// { field: 'id', headerName: 'ID', width: 40 }, // { field: 'id', headerName: 'ID', width: 40 },
{ field: 'robot', headerName: 'Robot', width: 240, { field: 'robot', headerName: 'Robot', width: 240,
@ -154,7 +160,7 @@ export default class BookPage extends Component {
)} }, )} },
]} ]}
pageSize={this.state.pageSize} pageSize={this.state.loading ? 0 : this.state.pageSize}
rowsPerPageOptions={[6,20,50]} rowsPerPageOptions={[6,20,50]}
onPageSizeChange={(newPageSize) => this.setState({pageSize:newPageSize})} onPageSizeChange={(newPageSize) => this.setState({pageSize:newPageSize})}
onRowClick={(params) => this.handleRowClick(params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places. onRowClick={(params) => this.handleRowClick(params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places.
@ -168,6 +174,7 @@ export default class BookPage extends Component {
return ( return (
<div style={{ height: 422, width: '100%' }}> <div style={{ height: 422, width: '100%' }}>
<DataGrid <DataGrid
loading={this.state.loading}
rows={ rows={
this.state.orders.map((order) => this.state.orders.map((order) =>
({id: order.id, ({id: order.id,
@ -231,7 +238,7 @@ export default class BookPage extends Component {
)} }, )} },
]} ]}
pageSize={this.state.pageSize} pageSize={this.state.loading ? 0 : this.state.pageSize}
rowsPerPageOptions={[6,20,50]} rowsPerPageOptions={[6,20,50]}
onPageSizeChange={(newPageSize) => this.setState({pageSize:newPageSize})} onPageSizeChange={(newPageSize) => this.setState({pageSize:newPageSize})}
onRowClick={(params) => this.handleRowClick(params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places. onRowClick={(params) => this.handleRowClick(params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places.
@ -296,11 +303,6 @@ export default class BookPage extends Component {
</Typography> </Typography>
</Grid> </Grid>
} }
{/* If loading, show circular progressbar */}
{this.state.loading ?
<Grid item xs={12} align="center">
<CircularProgress />
</Grid> : ""}
{ this.state.not_found ? { this.state.not_found ?
(<Grid item xs={12} align="center"> (<Grid item xs={12} align="center">
@ -324,14 +326,14 @@ export default class BookPage extends Component {
{/* Desktop Book */} {/* Desktop Book */}
<MediaQuery minWidth={930}> <MediaQuery minWidth={930}>
<Paper elevation={0} style={{width: 925, maxHeight: 500, overflow: 'auto'}}> <Paper elevation={0} style={{width: 925, maxHeight: 500, overflow: 'auto'}}>
{this.state.loading ? null : this.bookListTableDesktop()} <this.bookListTableDesktop/>
</Paper> </Paper>
</MediaQuery> </MediaQuery>
{/* Smartphone Book */} {/* Smartphone Book */}
<MediaQuery maxWidth={929}> <MediaQuery maxWidth={929}>
<Paper elevation={0} style={{width: 380, maxHeight: 450, overflow: 'auto'}}> <Paper elevation={0} style={{width: 380, maxHeight: 450, overflow: 'auto'}}>
{this.state.loading ? null : this.bookListTablePhone()} <this.bookListTablePhone/>
</Paper> </Paper>
</MediaQuery> </MediaQuery>
</Grid> </Grid>

2
frontend/static/frontend/main.js
View File

File diff suppressed because one or more lines are too long