yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-30 19:56:05 +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 */
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();
@ -21,8 +21,8 @@ class GlobalPagination extends React.Component {
if (!this.isFirstPage()) {
const target = {
name: 'params.page',
value: this.props.params.page - 1,
name: 'params._page',
value: this.props.params._page - 1,
};
this.props.onChangeParams({ target });
}
@ -33,8 +33,8 @@ class GlobalPagination extends React.Component {
if (!this.isLastPage()) {
const target = {
name: 'params.page',
value: this.props.params.page + 1,
name: 'params._page',
value: this.props.params._page + 1,
};
this.props.onChangeParams({ target });
}
@ -43,7 +43,7 @@ class GlobalPagination extends React.Component {
handleFirstPageClick = (e) => {
e.preventDefault();
const target = {
name: 'params.page',
name: 'params._page',
value: 1,
};
this.props.onChangeParams({ target });
@ -52,19 +52,19 @@ class GlobalPagination extends React.Component {
handleLastPageClick = (e) => {
e.preventDefault();
const target = {
name: 'params.page',
name: 'params._page',
value: this.getLastPageNumber(),
};
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 = () => {
// Init variables
@ -72,7 +72,7 @@ class GlobalPagination extends React.Component {
// Add active page link
linksOptions.push({
value: this.props.params.page,
value: this.props.params._page,
isActive: true,
handleClick: e => e.preventDefault(),
});
@ -80,16 +80,16 @@ class GlobalPagination extends React.Component {
// Add previous page link
if (!this.isFirstPage()) {
linksOptions.unshift({
value: this.props.params.page - 1,
value: this.props.params._page - 1,
isActive: false,
handleClick: this.handlePreviousPageClick,
});
}
// 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({
value: this.props.params.page + 1,
value: this.props.params._page + 1,
isActive: false,
handleClick: this.handleNextPageClick,
});
@ -167,8 +167,8 @@ GlobalPagination.defaultProps = {
count: 0,
onChangeParams: () => {},
params: {
page: 1,
limit: 10,
_page: 1,
_limit: 10,
},
};
@ -179,11 +179,11 @@ GlobalPagination.propTypes = {
]),
onChangeParams: PropTypes.func,
params: PropTypes.shape({
page: PropTypes.oneOfType([
_page: PropTypes.oneOfType([
PropTypes.string,
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}>
<select
className={`form-control ${styles.select}`}
id="params.limit"
name="params.limit"
id="params._limit"
name="params._limit"
onChange={(e) => {
const target = {
name: 'params.limit',
name: 'params._limit',
value: parseInt(e.target.value, 10),
};
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>)}
</select>
</div>
<label className={styles.pageFooterLabel} htmlFor="params.limit">
<label className={styles.pageFooterLabel} htmlFor="params._limit">
<FormattedMessage id="components.PageFooter.select" />
</label>
</form>
@ -57,7 +57,7 @@ PageFooter.defaultProps = {
onChangeParams: () => {},
params: {
currentPage: 1,
limit: 10,
_limit: 10,
},
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 => {
const source = getQueryParameters(props.location.search, 'source');
const limit = toInteger(getQueryParameters(props.location.search, 'limit')) || 10;
const page = toInteger(getQueryParameters(props.location.search, 'page')) || 1;
const sort = this.findPageSort(props);
const params = { limit, page, sort };
const _limit = toInteger(getQueryParameters(props.location.search, '_limit')) || 10;
const _page = toInteger(getQueryParameters(props.location.search, '_page')) || 1;
const _sort = this.findPageSort(props);
const params = { _limit, _page, _sort };
this.props.setParams(params);
this.props.getData(props.match.params.slug, source);
@ -142,7 +142,7 @@ export class ListPage extends React.Component {
]);
return (
getQueryParameters(props.location.search, 'sort') ||
getQueryParameters(props.location.search, '_sort') ||
modelPrimaryKey ||
pluginModelPrimaryKey ||
'id'
@ -152,9 +152,9 @@ export class ListPage extends React.Component {
handleChangeParams = e => {
const { history, listPage: { params } } = this.props;
const search =
e.target.name === 'params.limit'
? `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()}`;
e.target.name === 'params._limit'
? `_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()}`;
this.props.history.push({
pathname: history.pathname,
search,
@ -165,7 +165,7 @@ export class ListPage extends React.Component {
handleChangeSort = sort => {
const target = {
name: 'params.sort',
name: 'params._sort',
value: sort,
};
@ -173,7 +173,7 @@ export class ListPage extends React.Component {
this.props.history.push({
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 });
};
@ -209,9 +209,9 @@ export class ListPage extends React.Component {
onClick: () =>
this.props.history.push({
pathname: `${this.props.location.pathname}/create`,
search: `?redirectUrl=/plugins/content-manager/${this.getCurrentModelName()}?page=${
params.page
}&limit=${params.limit}&sort=${params.sort}&source=${this.getSource()}`,
search: `?redirectUrl=/plugins/content-manager/${this.getCurrentModelName()}?_page=${
params._page
}&_limit=${params._limit}&_sort=${params._sort}&source=${this.getSource()}`,
}),
},
];
@ -250,13 +250,13 @@ export class ListPage extends React.Component {
routeParams={this.props.match.params}
headers={this.generateTableHeaders()}
onChangeSort={this.handleChangeSort}
sort={listPage.params.sort}
sort={params._sort}
history={this.props.history}
primaryKey={this.getCurrentModel().primaryKey || 'id'}
handleDelete={this.toggleModalWarning}
redirectUrl={`?redirectUrl=/plugins/content-manager/${this.getCurrentModelName().toLowerCase()}?page=${
params.page
}&limit=${params.limit}&sort=${params.sort}&source=${this.getSource()}`}
redirectUrl={`?redirectUrl=/plugins/content-manager/${this.getCurrentModelName().toLowerCase()}?_page=${
params._page
}&_limit=${params._limit}&_sort=${params._sort}&source=${this.getSource()}`}
/>
<PopUpWarning
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({
count: 0,
params: Map({
limit: 10,
page: 1,
sort: '',
_limit: 10,
_page: 1,
_sort: '',
}),
records: List([]),
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) {
try {
const { limit, page, sort } = yield select(makeSelectParams());
const { _limit, _page, _sort } = yield select(makeSelectParams());
const source = action.source;
const currentModel = action.currentModel;
const countURL = `/content-manager/explorer/${currentModel}/count`;
// Params to get the model's records
const recordsURL = `/content-manager/explorer/${currentModel}`;
const skip = (page - 1 ) * limit;
const _start = (_page - 1 ) * _limit;
const params = {
limit,
skip,
sort,
_limit,
_start,
_sort,
source,
};
@ -51,7 +50,6 @@ export function* dataGet(action) {
];
yield put(getDataSucceeded(response));
} catch(err) {
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 = {
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
return await strapi.query(params.model, source).find({
limit,
skip,
sort,
where: request,
limit: filters.limit,
skip: filters.start || 0,
sort: filters.sort,
where: filters.where,
// where: request,
queryAttribute,
}, populate);
},

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

@ -59,11 +59,11 @@ export class HomePage extends React.Component {
componentWillMount() {
if (!isEmpty(this.props.location.search)) {
const page = parseInt(this.getURLParams('page'), 10);
const limit = parseInt(this.getURLParams('limit'), 10);
const sort = this.getURLParams('sort');
const _page = parseInt(this.getURLParams('_page'), 10);
const _limit = parseInt(this.getURLParams('_limit'), 10);
const _sort = this.getURLParams('_sort');
this.props.setParams({ limit, page, sort });
this.props.setParams({ _limit, _page, _sort });
}
}
componentDidMount() {
@ -82,12 +82,12 @@ export class HomePage extends React.Component {
getURLParams = (type) => getQueryParameters(this.props.location.search, type);
changeSort = (name) => {
const { params: { limit, page } } = this.props;
const { params: { _limit, _page } } = this.props;
const target = {
name: 'params.sort',
name: 'params._sort',
value: name,
};
const search = `page=${page}&limit=${limit}&sort=${name}`;
const search = `_page=${_page}&_limit=${_limit}&_sort=${name}`;
this.props.changeParams({ target });
this.props.history.push({
@ -98,9 +98,9 @@ export class HomePage extends React.Component {
handleChangeParams = (e) => {
const { history, params } = this.props;
const search = e.target.name === 'params.limit' ?
`page=${params.page}&limit=${e.target.value}&sort=${params.sort}`
: `page=${e.target.value}&limit=${params.limit}&sort=${params.sort}`;
const search = e.target.name === 'params._limit' ?
`_page=${params._page}&_limit=${e.target.value}&_sort=${params._sort}`
: `_page=${e.target.value}&_limit=${params._limit}&_sort=${params._sort}`;
this.props.history.push({
pathname: history.pathname,
search,
@ -142,12 +142,12 @@ export class HomePage extends React.Component {
<div className={styles.entriesWrapper}>
<div>
{/* NOTE: Prepare for bulk actions}
<InputSelect
<InputSelect
name="bulkAction"
onChange={() => console.log('change')}
selectOptions={[{ value: 'select all'}]}
style={{ minWidth: '200px', height: '32px', marginTop: '-8px' }}
/>
/>
*/}
</div>
<EntriesNumber number={this.props.entriesNumber} />
@ -155,7 +155,7 @@ export class HomePage extends React.Component {
<List
data={this.props.uploadedFiles}
changeSort={this.changeSort}
sort={this.props.params.sort}
sort={this.props.params._sort}
/>
<div className="col-md-12">
<PageFooter
@ -179,9 +179,9 @@ HomePage.contextTypes = {
HomePage.defaultProps = {
params: {
limit: 10,
page: 1,
sort: 'updatedAt',
_limit: 10,
_page: 1,
_sort: 'updatedAt',
},
uploadedFiles: [],
};

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

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

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

@ -38,10 +38,10 @@ function* dataDelete(action) {
function* dataGet() {
try {
const pageParams = yield select(makeSelectParams());
const _start = ( pageParams.page - 1) * pageParams.limit;
const _start = ( pageParams._page - 1) * pageParams._limit;
const params = {
_limit: pageParams.limit,
_sort: pageParams.sort,
_limit: pageParams._limit,
_sort: pageParams._sort,
_start,
};
const data = yield [
@ -83,11 +83,11 @@ function* search() {
try {
const search = yield select(makeSelectSearch());
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 params = isEmpty(search) ? {
_limit: pageParams.limit,
_sort: pageParams.sort,
_limit: pageParams._limit,
_sort: pageParams._sort,
_start,
} : {};
const response = yield call(request, requestURL, { method: 'GET', params });