kopia lustrzana https://github.com/OpenDroneMap/WebODM
Started working on pagination
rodzic
df555ee070
commit
21abf414ea
|
@ -94,6 +94,40 @@ ul#side-menu.nav{
|
|||
z-index: 999999;
|
||||
}
|
||||
|
||||
.pagination{
|
||||
margin: 0;
|
||||
|
||||
li>a{
|
||||
color: black;
|
||||
border: 1px solid #ecf0f1;
|
||||
background-color: #fff;
|
||||
&:hover, &:focus{
|
||||
background-color: #798d8f;
|
||||
}
|
||||
}
|
||||
.disabled > a{
|
||||
background-color: #fff;
|
||||
border: 1px solid #f4f9f5;
|
||||
&:hover, &:focus{
|
||||
background-color: #fff;
|
||||
border: 1px solid #f4f9f5;
|
||||
}
|
||||
}
|
||||
.active > a{
|
||||
background-color: #798d8f;
|
||||
&:hover, &:focus{
|
||||
background-color: #798d8f;
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-sm{
|
||||
a{
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.table-first-col-bold{
|
||||
td:first-child{
|
||||
font-weight: bold;
|
||||
|
|
|
@ -42,12 +42,13 @@ class Dashboard extends React.Component {
|
|||
Add Project
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<EditProjectDialog
|
||||
saveAction={this.addNewProject}
|
||||
ref={(domNode) => { this.projectDialog = domNode; }}
|
||||
/>
|
||||
<ProjectList
|
||||
source="/api/projects/?ordering=-created_at"
|
||||
source="/api/projects/?ordering=-created_at&page=1"
|
||||
ref={(domNode) => { this.projectList = domNode; }} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -0,0 +1,33 @@
|
|||
import React from 'react';
|
||||
|
||||
/*abstract*/ class Paginated extends React.Component{
|
||||
constructor(){
|
||||
super();
|
||||
}
|
||||
|
||||
// Should be called after parent state is set
|
||||
setupPagination(itemsPerPage, totalItems){
|
||||
let currentPage = 1;
|
||||
if (this.state.pagination && this.state.pagination.currentPage !== undefined){
|
||||
currentPage = this.state.pagination.currentPage;
|
||||
}
|
||||
|
||||
this.setState({pagination: {
|
||||
itemsPerPage: itemsPerPage,
|
||||
totalItems: totalItems,
|
||||
currentPage: currentPage
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getPaginatedUrl(base, page){
|
||||
return base.replace(/#\{PAGE\}/g, page);
|
||||
}
|
||||
|
||||
render(){
|
||||
throw new Error("Override me");
|
||||
}
|
||||
}
|
||||
|
||||
export default Paginated;
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import React from 'react';
|
||||
import $ from 'jquery';
|
||||
|
||||
class Paginator extends React.Component {
|
||||
render() {
|
||||
const { itemsPerPage, totalItems, currentPage } = this.props;
|
||||
let paginator = null;
|
||||
|
||||
if (itemsPerPage && itemsPerPage && totalItems > itemsPerPage){
|
||||
const numPages = Math.ceil(totalItems / itemsPerPage),
|
||||
pages = [...Array(numPages).keys()]; // [0, 1, 2, ...numPages]
|
||||
|
||||
paginator = (
|
||||
<div className={this.props.className}>
|
||||
<ul className="pagination pagination-sm">
|
||||
<li className={currentPage === 1 ? "disabled" : ""}>
|
||||
<a href="#">
|
||||
<span>«</span>
|
||||
</a>
|
||||
</li>
|
||||
{pages.map(page => {
|
||||
return (<li
|
||||
key={page + 1}
|
||||
className={currentPage === (page + 1) ? "active" : ""}
|
||||
><a href="#">{page + 1}</a></li>);
|
||||
})}
|
||||
<li className={currentPage === numPages ? "disabled" : ""}>
|
||||
<a href="#">
|
||||
<span>»</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (<div>
|
||||
{paginator}
|
||||
{this.props.children}
|
||||
{paginator}
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
export default Paginator;
|
|
@ -2,8 +2,10 @@ import React from 'react';
|
|||
import $ from 'jquery';
|
||||
|
||||
import ProjectListItem from './ProjectListItem';
|
||||
import Paginated from './Paginated';
|
||||
import Paginator from './Paginator';
|
||||
|
||||
class ProjectList extends React.Component {
|
||||
class ProjectList extends Paginated {
|
||||
constructor(){
|
||||
super();
|
||||
|
||||
|
@ -29,6 +31,7 @@ class ProjectList extends React.Component {
|
|||
projects: json.results,
|
||||
loading: false
|
||||
});
|
||||
this.setupPagination(10, json.count);
|
||||
}else{
|
||||
this.setState({
|
||||
error: `Invalid JSON response: ${JSON.stringify(json)}`,
|
||||
|
@ -59,11 +62,14 @@ class ProjectList extends React.Component {
|
|||
return (<div>Loading projects... <i className="fa fa-refresh fa-spin fa-fw"></i></div>);
|
||||
}
|
||||
else if (this.state.projects){
|
||||
return (<ul className="list-group">
|
||||
return (
|
||||
<Paginator className="text-right" {...this.state.pagination}>
|
||||
<ul className="list-group">
|
||||
{this.state.projects.map(p => (
|
||||
<ProjectListItem key={p.id} data={p} onDelete={this.handleDelete} />
|
||||
))}
|
||||
</ul>);
|
||||
</ul>
|
||||
</Paginator>);
|
||||
}else if (this.state.error){
|
||||
return (<div>An error occurred: {this.state.error}</div>);
|
||||
}else{
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.add-button{
|
||||
.add-button, .list-group{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
Ładowanie…
Reference in New Issue