@@ -327,7 +348,7 @@ EditPage.contextTypes = {
};
EditPage.defaultProps = {
- models: {},
+ schema: {},
};
EditPage.propTypes = {
@@ -339,10 +360,9 @@ EditPage.propTypes = {
initModelProps: PropTypes.func.isRequired,
location: PropTypes.object.isRequired,
match: PropTypes.object.isRequired,
- models: PropTypes.object,
onCancel: PropTypes.func.isRequired,
resetProps: PropTypes.func.isRequired,
- schema: PropTypes.object.isRequired,
+ schema: PropTypes.object,
setFileRelations: PropTypes.func.isRequired,
setFormErrors: PropTypes.func.isRequired,
submit: PropTypes.func.isRequired,
@@ -367,7 +387,6 @@ function mapDispatchToProps(dispatch) {
const mapStateToProps = createStructuredSelector({
editPage: makeSelectEditPage(),
- models: makeSelectModels(),
schema: makeSelectSchema(),
});
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js
index 07d392eb55..12cfe08b99 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js
@@ -9,11 +9,11 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators, compose } from 'redux';
import { createStructuredSelector } from 'reselect';
-import { capitalize, get, isUndefined, map, toInteger } from 'lodash';
+import { capitalize, get, isUndefined, toInteger } from 'lodash';
import cn from 'classnames';
// App selectors
-import { makeSelectModels, makeSelectSchema } from 'containers/App/selectors';
+import { makeSelectSchema } from 'containers/App/selectors';
// You can find these components in either
// ./node_modules/strapi-helper-plugin/lib/src
@@ -106,9 +106,21 @@ export class ListPage extends React.Component {
* Helper to retrieve the current model data
* @return {Object} the current model
*/
- getCurrentModel = () =>
- get(this.props.models, ['models', this.getCurrentModelName()]) ||
- get(this.props.models, ['plugins', this.getSource(), 'models', this.getCurrentModelName()]);
+ getCurrentModel = () => (
+ get(this.props.schema, ['models', this.getCurrentModelName()]) ||
+ get(this.props.schema, ['models', 'plugins', this.getSource(), this.getCurrentModelName()])
+ );
+
+ getCurrentModelDefaultLimit = () => (
+ get(this.getCurrentModel(), 'pageEntries', 10)
+ );
+
+ getCurrentModelDefaultSort = () => {
+ const sortAttr = get(this.getCurrentModel(), 'defaultSort', 'id');
+ const order = get(this.getCurrentModel(), 'sort', 'ASC');
+
+ return order === 'ASC' ? sortAttr : `-${sortAttr}`;
+ };
/**
* Helper to retrieve the current model name
@@ -122,7 +134,7 @@ export class ListPage extends React.Component {
*/
getData = (props, setUpdatingParams = false) => {
const source = getQueryParameters(props.location.search, 'source');
- const _limit = toInteger(getQueryParameters(props.location.search, '_limit')) || 10;
+ const _limit = toInteger(getQueryParameters(props.location.search, '_limit')) || this.getCurrentModelDefaultLimit();
const _page = toInteger(getQueryParameters(props.location.search, '_page')) || 1;
const _sort = this.findPageSort(props);
const _q = getQueryParameters(props.location.search, '_q') || '';
@@ -144,8 +156,8 @@ export class ListPage extends React.Component {
* @return {Object} Fields
*/
getCurrentSchema = () =>
- get(this.props.schema, [this.getCurrentModelName(), 'fields']) ||
- get(this.props.schema, ['plugins', this.getSource(), this.getCurrentModelName(), 'fields']);
+ get(this.props.schema, ['models', this.getCurrentModelName(), 'fields']) ||
+ get(this.props.schema, ['models', 'plugins', this.getSource(), this.getCurrentModelName(), 'fields']);
getPopUpDeleteAllMsg = () => (
this.props.listPage.entriesToDelete.length > 1 ?
@@ -153,6 +165,14 @@ export class ListPage extends React.Component {
: 'content-manager.popUpWarning.bodyMessage.contentType.delete'
);
+ getModelPrimaryKey = () => (
+ get(this.getCurrentModel(), ['primaryKey'], '_id')
+ );
+
+ getTableHeaders = () => (
+ get(this.getCurrentModel(), ['listDisplay'], [])
+ );
+
/**
* Generate the redirect URI when editing an entry
* @type {String}
@@ -169,29 +189,6 @@ export class ListPage extends React.Component {
return `?${generateSearchFromParams(params)}&source=${this.getSource()}${generateSearchFromFilters(filters)}`;
}
- /**
- * Function to generate the Table's headers
- * @return {Array}
- */
- generateTableHeaders = () => {
- const currentSchema =
- get(this.props.schema, [this.getCurrentModelName()]) ||
- get(this.props.schema, ['plugins', this.getSource(), this.getCurrentModelName()]);
- const tableHeaders = map(currentSchema.list, value => ({
- name: value,
- label: currentSchema.fields[value].label,
- type: currentSchema.fields[value].type,
- }));
-
- tableHeaders.splice(0, 0, {
- name: this.getCurrentModel().primaryKey || 'id',
- label: 'Id',
- type: 'string',
- });
-
- return tableHeaders;
- };
-
areAllEntriesSelected = () => {
const { listPage: { entriesToDelete, records } } = this.props;
@@ -204,26 +201,9 @@ export class ListPage extends React.Component {
* @return {String} the model's primaryKey
*/
findPageSort = props => {
- const {
- match: {
- params: { slug },
- },
- } = props;
- const source = this.getSource();
- const modelPrimaryKey = get(props.models, ['models', slug.toLowerCase(), 'primaryKey']);
- // Check if the model is in a plugin
- const pluginModelPrimaryKey = get(props.models.plugins, [
- source,
- 'models',
- slug.toLowerCase(),
- 'primaryKey',
- ]);
-
return (
getQueryParameters(props.location.search, '_sort') ||
- modelPrimaryKey ||
- pluginModelPrimaryKey ||
- 'id'
+ this.getCurrentModelDefaultSort()
);
};
@@ -311,6 +291,12 @@ export class ListPage extends React.Component {
return updatingParams || isLoading && get(records, this.getCurrentModelName()) === undefined;
}
+ showSearch = () => get(this.getCurrentModel(), ['search']);
+
+ showFilters = () => get(this.getCurrentModel(), ['filters']);
+
+ showBulkActions = () => get(this.getCurrentModel(), ['bulkActions']);
+
render() {
const {
addFilter,
@@ -337,6 +323,7 @@ export class ListPage extends React.Component {
removeAllFilters,
removeFilter,
} = this.props;
+
const pluginHeaderActions = [
{
label: 'content-manager.containers.List.addAnEntry',
@@ -355,12 +342,14 @@ export class ListPage extends React.Component {
return (
-
+ {this.showSearch() && (
+
+ )}
-
-
-
-
0}
- >
-
-
- {filters.map((filter, key) => (
-
- ))}
+ {this.showFilters() && (
+
+
+
+
+
0}
+ >
+
+
+ {filters.map((filter, key) => (
+
+ ))}
+
+
-
-
+
+
+ )}
this.getValue(`${this.getPath()}.defaultSort`, 'string');
+
+ getDropDownItems = () => {
+ const name = get(this.props.schema, `models.${this.getPath()}.primaryKey`, 'id' );
+ // The id attribute is not present on schema so we need to add it manually
+ const defaultAttr = { [name]: { name, label: 'Id', type: 'string', searchable: true, sortable: true } };
+ const attributes = Object.assign(get(this.props.schema, `models.${this.getPath()}.attributes`, {}), defaultAttr);
+
+ return Object.keys(attributes)
+ .filter(attr => {
+ return findIndex(this.getListDisplay(), ['name', attr]) === -1 && !attributes[attr].hasOwnProperty('collection') && !attributes[attr].hasOwnProperty('model');
+ })
+ .map(attr => {
+ const searchable = attributes[attr].type !== 'json' && attributes[attr].type !== 'array';
+ const obj = Object.assign(attributes[attr], { name: attr, label: upperFirst(attr), searchable, sortable: searchable });
+
+ return obj;
+ });
+ }
+
+ getListDisplay = () => (
+ get(this.props.schema, `models.${this.getPath()}.listDisplay`, [])
+ );
+
+ getModelName = () => {
+ const { match: { params: { slug, endPoint } } } = this.props;
+
+ return endPoint || slug;
+ }
+
+ getPath = () => {
+ const { match: { params: { slug, source, endPoint } } } = this.props;
+
+ return [slug, source, endPoint]
+ .filter(param => param !== undefined)
+ .join('.');
+ }
+
+ getSelectOptions = (input) => {
+ const selectOptions = this.getListDisplay().reduce((acc, curr) => {
+
+ if (curr.sortable === true) {
+ return acc.concat([curr.name]);
+ }
+
+ return acc;
+ }, []);
+
+ if (selectOptions.length === 0) {
+ selectOptions.push(this.getPrimaryKey());
+ }
+
+ return input.name === 'defaultSort' ? selectOptions : input.selectOptions;
+ }
+
+ getPluginHeaderActions = () => (
+ [
+ {
+ label: 'content-manager.popUpWarning.button.cancel',
+ kind: 'secondary',
+ onClick: this.handleReset,
+ type: 'button',
+ },
+ {
+ kind: 'primary',
+ label: 'content-manager.containers.Edit.submit',
+ onClick: this.handleSubmit,
+ type: 'submit',
+ },
+ ]
+ );
+
+ getPrimaryKey = () => get(this.props.schema, ['models', this.getModelName()].concat(['primaryKey']), 'id');
+
+ getValue = (keys, type) => {
+ const value = get(this.props.schema, ['models'].concat(keys.split('.')));
+
+ return type === 'toggle' ? value : value.toString();
+ }
+
+ handleChange = (e) => {
+ const defaultSort = this.getDefaultSort();
+ const name = e.target.name.split('.');
+ name.pop();
+ const attrName = get(this.props.schema.models, name.concat(['name']));
+ const isDisablingDefaultSort = attrName === defaultSort && e.target.value === false;
+
+ if (isDisablingDefaultSort) {
+ const enableAttrsSort = this.getSelectOptions({ name: 'defaultSort' }).filter(attr => attr !== attrName);
+
+ if (enableAttrsSort.length === 0) {
+ strapi.notification.info('content-manager.notification.info.SettingPage.disableSort');
+ } else {
+ const newDefaultSort = enableAttrsSort.length === 0 ? this.getPrimaryKey() : enableAttrsSort[0];
+ const target = { name: `${this.getPath()}.defaultSort`, value: newDefaultSort };
+ this.props.onChangeSettings({ target });
+ this.props.onChangeSettings(e);
+ }
+ } else {
+ this.props.onChangeSettings(e);
+ }
+ }
+
+ handleClickEditAttr = (index) => {
+ const attrToEdit = get(this.props.schema, ['models'].concat(this.getPath().split('.')).concat(['listDisplay', index]), {});
+ this.props.onClickEditListItem(attrToEdit);
+ }
+
+ handleRemove = (index, keys) => {
+ const attrToRemove = get(this.getListDisplay(), index, {});
+ const defaultSort = this.getDefaultSort();
+ const isRemovingDefaultSort = defaultSort === attrToRemove.name;
+
+ if (isRemovingDefaultSort) {
+ const enableAttrsSort = this.getSelectOptions({ name: 'defaultSort' }).filter(attr => attr !== attrToRemove.name);
+ const newDefaultSort = enableAttrsSort.length > 1 ? enableAttrsSort[0] : this.getPrimaryKey();
+ const target = { name: `${this.getPath()}.defaultSort`, value: newDefaultSort };
+ this.props.onChangeSettings({ target });
+ }
+
+ this.props.onRemove(index, keys);
+ }
+
+ handleReset = (e) => {
+ e.preventDefault();
+ this.setState({ showWarningCancel: true });
+ }
+
+ handleSubmit = (e) => {
+ e.preventDefault();
+ this.setState({ showWarning: true });
+ }
+
+ findIndexListItemToEdit = () => {
+ const index = findIndex(this.getListDisplay(), ['name', get(this.props.settingPage, ['listItemToEdit', 'name'])]);
+
+ return index === -1 ? 0 : index;
+ }
+
+ // We need to remove the Over state on the DraggableAttr component
+ updateSiblingHoverState = () => {
+ this.setState(prevState => ({ isDraggingSibling: !prevState.isDraggingSibling }));
+ };
+
+ toggle = () => this.setState(prevState => ({ showWarning: !prevState.showWarning }));
+
+ toggleWarningCancel = () => this.setState(prevState => ({ showWarningCancel: !prevState.showWarningCancel }));
+
+ toggleDropdown = () => {
+ if (this.getDropDownItems().length > 0) {
+ this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+ }
+ }
+
+ render() {
+ const { isDraggingSibling, isOpen, showWarning, showWarningCancel } = this.state;
+ const {
+ moveAttr,
+ onChangeSettings,
+ onClickAddAttr,
+ onReset,
+ onSubmit,
+ } = this.props;
+ const namePath = this.getPath();
+
+ return (
+
+ this.props.history.goBack()} />
+
+
+
{
+ onSubmit();
+ }}
+ />
+ {
+ onReset();
+ this.toggleWarningCancel();
+ }}
+ />
+
+
+
+
{
+ onSubmit();
+ }}
+ />
+ {
+ onReset();
+ this.toggleWarningCancel();
+ }}
+ />
+
+
+
+
+
+
+ {this.getModels().map(model => )}
+
+
+
