yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-01 21:03:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Harmonize content manager filters options to match the generated APIs

Browse Source 
Change the GlobalPagination & PageFooter params type
Apply these modifications into the plugins that were using those compos
This commit is contained in:
soupette 2018-05-16 17:10:43 +02:00
parent 97d8200c6c
commit 220e6baaef
9 changed files with 85 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/strapi-helper-plugin/lib/src/components/GlobalPagination/index.js
View File

@ -12,7 +12,7 @@ import styles from './styles.scss';
/* eslint-disable jsx-a11y/anchor-is-valid */ /* eslint-disable jsx-a11y/anchor-is-valid */
class GlobalPagination extends React.Component { class GlobalPagination extends React.Component {
getLastPageNumber = () => Math.ceil(this.props.count / this.props.params.limit); getLastPageNumber = () => Math.ceil(this.props.count / this.props.params._limit);
handleDotsClick = (e) => e.preventDefault(); handleDotsClick = (e) => e.preventDefault();
@ -21,8 +21,8 @@ class GlobalPagination extends React.Component {
if (!this.isFirstPage()) { if (!this.isFirstPage()) {
const target = { const target = {
name: 'params.page', name: 'params._page',
value: this.props.params.page - 1, value: this.props.params._page - 1,
}; };
this.props.onChangeParams({ target }); this.props.onChangeParams({ target });
} }
@ -33,8 +33,8 @@ class GlobalPagination extends React.Component {
if (!this.isLastPage()) { if (!this.isLastPage()) {
const target = { const target = {
name: 'params.page', name: 'params._page',
value: this.props.params.page + 1, value: this.props.params._page + 1,
}; };
this.props.onChangeParams({ target }); this.props.onChangeParams({ target });
} }
@ -43,7 +43,7 @@ class GlobalPagination extends React.Component {
handleFirstPageClick = (e) => { handleFirstPageClick = (e) => {
e.preventDefault(); e.preventDefault();
const target = { const target = {
name: 'params.page', name: 'params._page',
value: 1, value: 1,
}; };
this.props.onChangeParams({ target }); this.props.onChangeParams({ target });
@ -52,19 +52,19 @@ class GlobalPagination extends React.Component {
handleLastPageClick = (e) => { handleLastPageClick = (e) => {
e.preventDefault(); e.preventDefault();
const target = { const target = {
name: 'params.page', name: 'params._page',
value: this.getLastPageNumber(), value: this.getLastPageNumber(),
}; };
this.props.onChangeParams({ target }); this.props.onChangeParams({ target });
} }
isFirstPage = () => this.props.params.page === 1; isFirstPage = () => this.props.params._page === 1;
isLastPage = () => this.props.params.page === this.getLastPageNumber(); isLastPage = () => this.props.params._page === this.getLastPageNumber();
needAfterLinksDots = () => this.props.params.page < this.getLastPageNumber() - 1; needAfterLinksDots = () => this.props.params._page < this.getLastPageNumber() - 1;
needPreviousLinksDots = () => this.props.params.page > 3; needPreviousLinksDots = () => this.props.params._page > 3;
renderLinks = () => { renderLinks = () => {
// Init variables // Init variables
@ -72,7 +72,7 @@ class GlobalPagination extends React.Component {
// Add active page link // Add active page link
linksOptions.push({ linksOptions.push({
value: this.props.params.page, value: this.props.params._page,
isActive: true, isActive: true,
handleClick: e => e.preventDefault(), handleClick: e => e.preventDefault(),
}); });
@ -80,16 +80,16 @@ class GlobalPagination extends React.Component {
// Add previous page link // Add previous page link
if (!this.isFirstPage()) { if (!this.isFirstPage()) {
linksOptions.unshift({ linksOptions.unshift({
value: this.props.params.page - 1, value: this.props.params._page - 1,
isActive: false, isActive: false,
handleClick: this.handlePreviousPageClick, handleClick: this.handlePreviousPageClick,
}); });
} }
// Add next page link // Add next page link
if (!this.isLastPage() && this.props.count > this.props.params.limit) { if (!this.isLastPage() && this.props.count > this.props.params._limit) {
linksOptions.push({ linksOptions.push({
value: this.props.params.page + 1, value: this.props.params._page + 1,
isActive: false, isActive: false,
handleClick: this.handleNextPageClick, handleClick: this.handleNextPageClick,
}); });
@ -167,8 +167,8 @@ GlobalPagination.defaultProps = {
count: 0, count: 0,
onChangeParams: () => {}, onChangeParams: () => {},
params: { params: {
page: 1, _page: 1,
limit: 10, _limit: 10,
}, },
}; };
@ -179,11 +179,11 @@ GlobalPagination.propTypes = {
]), ]),
onChangeParams: PropTypes.func, onChangeParams: PropTypes.func,
params: PropTypes.shape({ params: PropTypes.shape({
page: PropTypes.oneOfType([ _page: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
PropTypes.number, PropTypes.number,
]), ]),
limit: PropTypes.number, _limit: PropTypes.number,
}), }),
}; };

12
packages/strapi-helper-plugin/lib/src/components/PageFooter/index.js
View File

@ -22,21 +22,21 @@ function PageFooter(props) {
<div className={styles.pageFooterSelectWrapper}> <div className={styles.pageFooterSelectWrapper}>
<select <select
className={`form-control ${styles.select}`} className={`form-control ${styles.select}`}
id="params.limit" id="params._limit"
name="params.limit" name="params._limit"
onChange={(e) => { onChange={(e) => {
const target = { const target = {
name: 'params.limit', name: 'params._limit',
value: parseInt(e.target.value, 10), value: parseInt(e.target.value, 10),
}; };
props.onChangeParams({ target }); props.onChangeParams({ target });
}} }}
value={get(props, ['params', 'limit'], 10)} value={get(props, ['params', '_limit'], 10)}
> >
{[10, 20, 50, 100].map((value) => <option value={value} key={value}>{value}</option>)} {[10, 20, 50, 100].map((value) => <option value={value} key={value}>{value}</option>)}
</select> </select>
</div> </div>
<label className={styles.pageFooterLabel} htmlFor="params.limit"> <label className={styles.pageFooterLabel} htmlFor="params._limit">
<FormattedMessage id="components.PageFooter.select" /> <FormattedMessage id="components.PageFooter.select" />
</label> </label>
</form> </form>
@ -57,7 +57,7 @@ PageFooter.defaultProps = {
onChangeParams: () => {}, onChangeParams: () => {},
params: { params: {
currentPage: 1, currentPage: 1,
limit: 10, _limit: 10,
}, },
style: {}, style: {},
}; };

34
packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js
View File

@ -86,10 +86,10 @@ export class ListPage extends React.Component {
*/ */
getData = props => { getData = props => {
const source = getQueryParameters(props.location.search, 'source'); const source = getQueryParameters(props.location.search, 'source');
const limit = toInteger(getQueryParameters(props.location.search, 'limit')) || 10; const _limit = toInteger(getQueryParameters(props.location.search, '_limit')) || 10;
const page = toInteger(getQueryParameters(props.location.search, 'page')) || 1; const _page = toInteger(getQueryParameters(props.location.search, '_page')) || 1;
const sort = this.findPageSort(props); const _sort = this.findPageSort(props);
const params = { limit, page, sort }; const params = { _limit, _page, _sort };
this.props.setParams(params); this.props.setParams(params);
this.props.getData(props.match.params.slug, source); this.props.getData(props.match.params.slug, source);
@ -142,7 +142,7 @@ export class ListPage extends React.Component {
]); ]);
return ( return (
getQueryParameters(props.location.search, 'sort') || getQueryParameters(props.location.search, '_sort') ||
modelPrimaryKey || modelPrimaryKey ||
pluginModelPrimaryKey || pluginModelPrimaryKey ||
'id' 'id'
@ -152,9 +152,9 @@ export class ListPage extends React.Component {
handleChangeParams = e => { handleChangeParams = e => {
const { history, listPage: { params } } = this.props; const { history, listPage: { params } } = this.props;
const search = const search =
e.target.name === 'params.limit' e.target.name === 'params._limit'
? `page=${params.page}&limit=${e.target.value}&sort=${params.sort}&source=${this.getSource()}` ? `_page=${params._page}&_limit=${e.target.value}&_sort=${params._sort}&source=${this.getSource()}`
: `page=${e.target.value}&limit=${params.limit}&sort=${params.sort}&source=${this.getSource()}`; : `_page=${e.target.value}&_limit=${params._limit}&_sort=${params._sort}&source=${this.getSource()}`;
this.props.history.push({ this.props.history.push({
pathname: history.pathname, pathname: history.pathname,
search, search,
@ -165,7 +165,7 @@ export class ListPage extends React.Component {
handleChangeSort = sort => { handleChangeSort = sort => {
const target = { const target = {
name: 'params.sort', name: 'params._sort',
value: sort, value: sort,
}; };
@ -173,7 +173,7 @@ export class ListPage extends React.Component {
this.props.history.push({ this.props.history.push({
pathname: this.props.location.pathname, pathname: this.props.location.pathname,
search: `?page=${params.page}&limit=${params.limit}&sort=${sort}&source=${this.getSource()}`, search: `?_page=${params._page}&_limit=${params._limit}&_sort=${sort}&source=${this.getSource()}`,
}); });
this.props.changeParams({ target }); this.props.changeParams({ target });
}; };
@ -209,9 +209,9 @@ export class ListPage extends React.Component {
onClick: () => onClick: () =>
this.props.history.push({ this.props.history.push({
pathname: `${this.props.location.pathname}/create`, pathname: `${this.props.location.pathname}/create`,
search: `?redirectUrl=/plugins/content-manager/${this.getCurrentModelName()}?page=${ search: `?redirectUrl=/plugins/content-manager/${this.getCurrentModelName()}?_page=${
params.page params._page
}&limit=${params.limit}&sort=${params.sort}&source=${this.getSource()}`, }&_limit=${params._limit}&_sort=${params._sort}&source=${this.getSource()}`,
}), }),
}, },
]; ];
@ -250,13 +250,13 @@ export class ListPage extends React.Component {
routeParams={this.props.match.params} routeParams={this.props.match.params}
headers={this.generateTableHeaders()} headers={this.generateTableHeaders()}
onChangeSort={this.handleChangeSort} onChangeSort={this.handleChangeSort}
sort={listPage.params.sort} sort={params._sort}
history={this.props.history} history={this.props.history}
primaryKey={this.getCurrentModel().primaryKey || 'id'} primaryKey={this.getCurrentModel().primaryKey || 'id'}
handleDelete={this.toggleModalWarning} handleDelete={this.toggleModalWarning}
redirectUrl={`?redirectUrl=/plugins/content-manager/${this.getCurrentModelName().toLowerCase()}?page=${ redirectUrl={`?redirectUrl=/plugins/content-manager/${this.getCurrentModelName().toLowerCase()}?_page=${
params.page params._page
}&limit=${params.limit}&sort=${params.sort}&source=${this.getSource()}`} }&_limit=${params._limit}&_sort=${params._sort}&source=${this.getSource()}`}
/> />
<PopUpWarning <PopUpWarning
isOpen={this.state.showWarning} isOpen={this.state.showWarning}

6
packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js
View File

@ -18,9 +18,9 @@ import {
const initialState = fromJS({ const initialState = fromJS({
count: 0, count: 0,
params: Map({ params: Map({
limit: 10, _limit: 10,
page: 1, _page: 1,
sort: '', _sort: '',
}), }),
records: List([]), records: List([]),
showFilter: false, showFilter: false,

12
packages/strapi-plugin-content-manager/admin/src/containers/ListPage/saga.js
View File

@ -30,18 +30,17 @@ import {
export function* dataGet(action) { export function* dataGet(action) {
try { try {
const { limit, page, sort } = yield select(makeSelectParams()); const { _limit, _page, _sort } = yield select(makeSelectParams());
const source = action.source; const source = action.source;
const currentModel = action.currentModel; const currentModel = action.currentModel;
const countURL = `/content-manager/explorer/${currentModel}/count`; const countURL = `/content-manager/explorer/${currentModel}/count`;
// Params to get the model's records // Params to get the model's records
const recordsURL = `/content-manager/explorer/${currentModel}`; const recordsURL = `/content-manager/explorer/${currentModel}`;
const skip = (page - 1 ) * limit; const _start = (_page - 1 ) * _limit;
const params = { const params = {
limit, _limit,
skip, _start,
sort, _sort,
source, source,
}; };
@ -51,7 +50,6 @@ export function* dataGet(action) {
]; ];
yield put(getDataSucceeded(response)); yield put(getDataSucceeded(response));
} catch(err) { } catch(err) {
strapi.notification.error('notification.error'); strapi.notification.error('notification.error');
} }

15
packages/strapi-plugin-content-manager/services/ContentManager.js
View File

@ -8,14 +8,19 @@ const _ = require('lodash');
module.exports = { module.exports = {
fetchAll: async (params, query) => { fetchAll: async (params, query) => {
const { limit, skip = 0, sort, query : request, queryAttribute, source, page, populate = [] } = query; // eslint-disable-line no-unused-vars const { query : request, queryAttribute, source, page, populate = [] } = query; // eslint-disable-line no-unused-vars
// Remove the source key since it is not a filter
delete query.source;
const filters = strapi.utils.models.convertParams(params.model, query);
// Find entries using `queries` system // Find entries using `queries` system
return await strapi.query(params.model, source).find({ return await strapi.query(params.model, source).find({
limit, limit: filters.limit,
skip, skip: filters.start || 0,
sort, sort: filters.sort,
where: request, where: filters.where,
// where: request,
queryAttribute, queryAttribute,
}, populate); }, populate);
}, },

28
packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js
View File

@ -59,11 +59,11 @@ export class HomePage extends React.Component {
componentWillMount() { componentWillMount() {
if (!isEmpty(this.props.location.search)) { if (!isEmpty(this.props.location.search)) {
const page = parseInt(this.getURLParams('page'), 10); const _page = parseInt(this.getURLParams('_page'), 10);
const limit = parseInt(this.getURLParams('limit'), 10); const _limit = parseInt(this.getURLParams('_limit'), 10);
const sort = this.getURLParams('sort'); const _sort = this.getURLParams('_sort');
this.props.setParams({ limit, page, sort }); this.props.setParams({ _limit, _page, _sort });
} }
} }
componentDidMount() { componentDidMount() {
@ -82,12 +82,12 @@ export class HomePage extends React.Component {
getURLParams = (type) => getQueryParameters(this.props.location.search, type); getURLParams = (type) => getQueryParameters(this.props.location.search, type);
changeSort = (name) => { changeSort = (name) => {
const { params: { limit, page } } = this.props; const { params: { _limit, _page } } = this.props;
const target = { const target = {
name: 'params.sort', name: 'params._sort',
value: name, value: name,
}; };
const search = `page=${page}&limit=${limit}&sort=${name}`; const search = `_page=${_page}&_limit=${_limit}&_sort=${name}`;
this.props.changeParams({ target }); this.props.changeParams({ target });
this.props.history.push({ this.props.history.push({
@ -98,9 +98,9 @@ export class HomePage extends React.Component {
handleChangeParams = (e) => { handleChangeParams = (e) => {
const { history, params } = this.props; const { history, params } = this.props;
const search = e.target.name === 'params.limit' ? const search = e.target.name === 'params._limit' ?
`page=${params.page}&limit=${e.target.value}&sort=${params.sort}` `_page=${params._page}&_limit=${e.target.value}&_sort=${params._sort}`
: `page=${e.target.value}&limit=${params.limit}&sort=${params.sort}`; : `_page=${e.target.value}&_limit=${params._limit}&_sort=${params._sort}`;
this.props.history.push({ this.props.history.push({
pathname: history.pathname, pathname: history.pathname,
search, search,
@ -155,7 +155,7 @@ export class HomePage extends React.Component {
<List <List
data={this.props.uploadedFiles} data={this.props.uploadedFiles}
changeSort={this.changeSort} changeSort={this.changeSort}
sort={this.props.params.sort} sort={this.props.params._sort}
/> />
<div className="col-md-12"> <div className="col-md-12">
<PageFooter <PageFooter
@ -179,9 +179,9 @@ HomePage.contextTypes = {
HomePage.defaultProps = { HomePage.defaultProps = {
params: { params: {
limit: 10, _limit: 10,
page: 1, _page: 1,
sort: 'updatedAt', _sort: 'updatedAt',
}, },
uploadedFiles: [], uploadedFiles: [],
}; };

6
packages/strapi-plugin-upload/admin/src/containers/HomePage/reducer.js
View File

@ -26,9 +26,9 @@ const initialState = fromJS({
search: '', search: '',
uploadedFiles: List([]), uploadedFiles: List([]),
params: Map({ params: Map({
sort: 'hash', _sort: 'hash',
limit: 10, _limit: 10,
page: 1, _page: 1,
}), }),
}); });

12
packages/strapi-plugin-upload/admin/src/containers/HomePage/saga.js
View File

@ -38,10 +38,10 @@ function* dataDelete(action) {
function* dataGet() { function* dataGet() {
try { try {
const pageParams = yield select(makeSelectParams()); const pageParams = yield select(makeSelectParams());
const _start = ( pageParams.page - 1) * pageParams.limit; const _start = ( pageParams._page - 1) * pageParams._limit;
const params = { const params = {
_limit: pageParams.limit, _limit: pageParams._limit,
_sort: pageParams.sort, _sort: pageParams._sort,
_start, _start,
}; };
const data = yield [ const data = yield [
@ -83,11 +83,11 @@ function* search() {
try { try {
const search = yield select(makeSelectSearch()); const search = yield select(makeSelectSearch());
const pageParams = yield select(makeSelectParams()); const pageParams = yield select(makeSelectParams());
const _start = ( pageParams.page - 1) * pageParams.limit; const _start = ( pageParams._page - 1) * pageParams._limit;
const requestURL = !isEmpty(search) ? `/upload/search/${search}` : '/upload/files'; const requestURL = !isEmpty(search) ? `/upload/search/${search}` : '/upload/files';
const params = isEmpty(search) ? { const params = isEmpty(search) ? {
_limit: pageParams.limit, _limit: pageParams._limit,
_sort: pageParams.sort, _sort: pageParams._sort,
_start, _start,
} : {}; } : {};
const response = yield call(request, requestURL, { method: 'GET', params }); const response = yield call(request, requestURL, { method: 'GET', params });