|
@@ -1,5 +1,5 @@
|
|
|
import React from 'react';
|
|
import React from 'react';
|
|
|
-import UserPicture from '../User/UserPicture';
|
|
|
|
|
|
|
+import Page from '../PageList/Page';
|
|
|
|
|
|
|
|
import PropTypes from 'prop-types';
|
|
import PropTypes from 'prop-types';
|
|
|
import Pagination from 'react-bootstrap/lib/Pagination';
|
|
import Pagination from 'react-bootstrap/lib/Pagination';
|
|
@@ -11,8 +11,7 @@ export default class RecentCreated extends React.Component {
|
|
|
this.state = {
|
|
this.state = {
|
|
|
pages: [],
|
|
pages: [],
|
|
|
activePage: 1,
|
|
activePage: 1,
|
|
|
- PaginationNumbers: {},
|
|
|
|
|
-
|
|
|
|
|
|
|
+ paginationNumbers: {},
|
|
|
};
|
|
};
|
|
|
this.calculatePagination = this.calculatePagination.bind(this);
|
|
this.calculatePagination = this.calculatePagination.bind(this);
|
|
|
}
|
|
}
|
|
@@ -21,32 +20,33 @@ export default class RecentCreated extends React.Component {
|
|
|
componentWillMount() {
|
|
componentWillMount() {
|
|
|
this.getRecentCreatedList(1);
|
|
this.getRecentCreatedList(1);
|
|
|
}
|
|
}
|
|
|
- getRecentCreatedList(selectPageNumber) {
|
|
|
|
|
|
|
|
|
|
|
|
+ getRecentCreatedList(selectPageNumber) {
|
|
|
const pageId = this.props.pageId;
|
|
const pageId = this.props.pageId;
|
|
|
const userId = this.props.crowi.me;
|
|
const userId = this.props.crowi.me;
|
|
|
const limit = this.props.limit;
|
|
const limit = this.props.limit;
|
|
|
const offset = (selectPageNumber - 1) * limit;
|
|
const offset = (selectPageNumber - 1) * limit;
|
|
|
|
|
|
|
|
// pagesList get and pagination calculate
|
|
// pagesList get and pagination calculate
|
|
|
- this.props.crowi.apiGet('/pages.recentCreated', {page_id: pageId, user: userId, limit: limit, offset: offset, })
|
|
|
|
|
|
|
+ this.props.crowi.apiGet('/pages.recentCreated', { page_id: pageId, user: userId, limit, offset })
|
|
|
.then(res => {
|
|
.then(res => {
|
|
|
const totalCount = res.pages[0].totalCount;
|
|
const totalCount = res.pages[0].totalCount;
|
|
|
const activePage = selectPageNumber;
|
|
const activePage = selectPageNumber;
|
|
|
const pages = res.pages[1];
|
|
const pages = res.pages[1];
|
|
|
// pagiNation calculate function call
|
|
// pagiNation calculate function call
|
|
|
- const PaginationNumbers = this.calculatePagination(limit, totalCount, activePage);
|
|
|
|
|
|
|
+ const paginationNumbers = this.calculatePagination(limit, totalCount, activePage);
|
|
|
this.setState({
|
|
this.setState({
|
|
|
pages,
|
|
pages,
|
|
|
activePage,
|
|
activePage,
|
|
|
- PaginationNumbers,
|
|
|
|
|
|
|
+ paginationNumbers,
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
calculatePagination(limit, totalCount, activePage) {
|
|
calculatePagination(limit, totalCount, activePage) {
|
|
|
- let PaginationNumbers = {};
|
|
|
|
|
- // pagiNation totalPageNumber calculate
|
|
|
|
|
- let totalPage = Math.floor(totalCount / limit) + (totalCount % limit === 0 ? 0 : 1);
|
|
|
|
|
|
|
+ // calc totalPageNumber
|
|
|
|
|
+ const totalPage = Math.floor(totalCount / limit) + (totalCount % limit === 0 ? 0 : 1);
|
|
|
|
|
+
|
|
|
let paginationStart = activePage - 2;
|
|
let paginationStart = activePage - 2;
|
|
|
let maxViewPageNum = activePage + 2;
|
|
let maxViewPageNum = activePage + 2;
|
|
|
// pagiNation Number area size = 5 , pageNuber calculate in here
|
|
// pagiNation Number area size = 5 , pageNuber calculate in here
|
|
@@ -61,11 +61,12 @@ export default class RecentCreated extends React.Component {
|
|
|
maxViewPageNum -= diff;
|
|
maxViewPageNum -= diff;
|
|
|
paginationStart = Math.max(1, paginationStart - diff);
|
|
paginationStart = Math.max(1, paginationStart - diff);
|
|
|
}
|
|
}
|
|
|
- PaginationNumbers.totalPage = totalPage;
|
|
|
|
|
- PaginationNumbers.paginationStart = paginationStart;
|
|
|
|
|
- PaginationNumbers.maxViewPageNum = maxViewPageNum;
|
|
|
|
|
|
|
|
|
|
- return PaginationNumbers;
|
|
|
|
|
|
|
+ return {
|
|
|
|
|
+ totalPage,
|
|
|
|
|
+ paginationStart,
|
|
|
|
|
+ maxViewPageNum,
|
|
|
|
|
+ };
|
|
|
}
|
|
}
|
|
|
/**
|
|
/**
|
|
|
* generate Elements of Page
|
|
* generate Elements of Page
|
|
@@ -74,14 +75,8 @@ export default class RecentCreated extends React.Component {
|
|
|
*
|
|
*
|
|
|
*/
|
|
*/
|
|
|
generatePageList(pages) {
|
|
generatePageList(pages) {
|
|
|
- return pages.map((page, i) => {
|
|
|
|
|
- const pageuser = page.lastUpdateUser;
|
|
|
|
|
- return (
|
|
|
|
|
- <li key={i}>
|
|
|
|
|
- <UserPicture user={pageuser} />
|
|
|
|
|
- <a href={page.path} className="page-list-link" data-path={page.path} data-short-path={page.revision.body}>{decodeURI(page.path)}</a>
|
|
|
|
|
- </li>
|
|
|
|
|
- );
|
|
|
|
|
|
|
+ return pages.map(page => {
|
|
|
|
|
+ return <Page page={page} key={'recent-created:list-view:' + page._id} />;
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
}
|
|
}
|
|
@@ -160,25 +155,24 @@ export default class RecentCreated extends React.Component {
|
|
|
const pageList = this.generatePageList(this.state.pages);
|
|
const pageList = this.generatePageList(this.state.pages);
|
|
|
|
|
|
|
|
let paginationItems = [];
|
|
let paginationItems = [];
|
|
|
- let activePage = this.state.activePage;
|
|
|
|
|
- let totalPage = this.state.PaginationNumbers.totalPage;
|
|
|
|
|
- let paginationStart = this.state.PaginationNumbers.paginationStart;
|
|
|
|
|
- let maxViewPageNum = this.state.PaginationNumbers.maxViewPageNum;
|
|
|
|
|
- let firstPrevItems = this.generateFirstPrev(activePage);
|
|
|
|
|
|
|
+
|
|
|
|
|
+ const activePage = this.state.activePage;
|
|
|
|
|
+ const totalPage = this.state.paginationNumbers.totalPage;
|
|
|
|
|
+ const paginationStart = this.state.paginationNumbers.paginationStart;
|
|
|
|
|
+ const maxViewPageNum = this.state.paginationNumbers.maxViewPageNum;
|
|
|
|
|
+ const firstPrevItems = this.generateFirstPrev(activePage);
|
|
|
paginationItems.push(firstPrevItems);
|
|
paginationItems.push(firstPrevItems);
|
|
|
- let paginations = this.generatePaginations(activePage, paginationStart, maxViewPageNum);
|
|
|
|
|
|
|
+ const paginations = this.generatePaginations(activePage, paginationStart, maxViewPageNum);
|
|
|
paginationItems.push(paginations);
|
|
paginationItems.push(paginations);
|
|
|
- let nextLastItems = this.generateNextLast(activePage, totalPage);
|
|
|
|
|
|
|
+ const nextLastItems = this.generateNextLast(activePage, totalPage);
|
|
|
paginationItems.push(nextLastItems);
|
|
paginationItems.push(nextLastItems);
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
<div className="page-list-container-create">
|
|
<div className="page-list-container-create">
|
|
|
<ul className="page-list-ul page-list-ul-flat">
|
|
<ul className="page-list-ul page-list-ul-flat">
|
|
|
- {pageList}
|
|
|
|
|
|
|
+ {pageList}
|
|
|
</ul>
|
|
</ul>
|
|
|
- {
|
|
|
|
|
<Pagination bsSize="small">{paginationItems}</Pagination>
|
|
<Pagination bsSize="small">{paginationItems}</Pagination>
|
|
|
- }
|
|
|
|
|
</div>
|
|
</div>
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|