diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/actions.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/actions.js index 6759b18f7f..1e9798a255 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/actions.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/actions.js @@ -5,13 +5,47 @@ */ import { + CHANGE_DATA, + GET_DATA, + GET_DATA_SUCCEEDED, INIT_MODEL_PROPS, } from './constants'; -export function initModelProps(modelName, isCreating) { +export function changeData({ target }) { + return { + type: CHANGE_DATA, + keys: target.name.split('.'), + value: target.value, + }; +} + +export function getData(id, source, mainField) { + return { + type: GET_DATA, + id, + source, + mainField, + }; +} + +export function getDataSucceeded(id, data, pluginHeaderTitle) { + console.log('yuyy', pluginHeaderTitle); + return { + type: GET_DATA_SUCCEEDED, + id, + data, + pluginHeaderTitle, + }; +} + +export function initModelProps(modelName, isCreating, source, attributes) { + const form = Object.keys(attributes).map(attr => [attr, '']); + return { type: INIT_MODEL_PROPS, modelName, isCreating, + source, + form, }; } diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/constants.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/constants.js index f505d23e63..77e5e39ef1 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/constants.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/constants.js @@ -4,5 +4,7 @@ * */ -export const INIT_MODEL_PROPS = 'ContentManager/EditPage/INIT_MODEL_PROPS'; +export const CHANGE_DATA = 'ContentManager/EditPage/CHANGE_DATA'; export const GET_DATA = 'ContentManager/EditPage/GET_DATA'; +export const GET_DATA_SUCCEEDED = 'ContentManager/EditPage/GET_DATA_SUCCEEDED'; +export const INIT_MODEL_PROPS = 'ContentManager/EditPage/INIT_MODEL_PROPS'; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/index.js index 642966fb4b..2c8550c93d 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/index.js @@ -5,11 +5,12 @@ */ import React from 'react'; +import moment from 'moment'; import { connect } from 'react-redux'; import { bindActionCreators, compose } from 'redux'; import { createStructuredSelector } from 'reselect'; import PropTypes from 'prop-types'; -import { get } from 'lodash'; +import { get, toNumber, toString } from 'lodash'; import cn from 'classnames'; // You can find these components in either @@ -24,8 +25,15 @@ import { makeSelectModels, makeSelectSchema } from 'containers/App/selectors'; import injectReducer from 'utils/injectReducer'; import injectSaga from 'utils/injectSaga'; import getQueryParameters from 'utils/getQueryParameters'; +import { bindLayout } from 'utils/bindLayout'; + +// Layout +import layout from '../../../../config/layout'; + import { + changeData, + getData, initModelProps, } from './actions'; @@ -36,7 +44,16 @@ import styles from './styles.scss'; export class EditPage extends React.Component { componentDidMount() { - this.props.initModelProps(this.getModelName(), this.isEditing()); + this.props.initModelProps(this.getModelName(), this.isCreating(), this.getSource(), this.getModelAttributes()); + this.layout = bindLayout.call( + this, + get(this.context.plugins.toJS(), `${this.getSource()}.layout`, layout), + ); + + if (!this.isCreating()) { + const mainField = get(this.getModel(), 'info.mainField') || this.getModel().primaryKey; + this.props.getData(this.props.match.params.id, this.getSource(), mainField); + } } /** @@ -57,18 +74,47 @@ export class EditPage extends React.Component { */ getModelName = () => this.props.match.params.slug.toLowerCase(); + /** + * Retrieve model's schema + * @return {Object} + */ + getSchema = () => this.getSource() !== 'content-manager' ? + get(this.props.schema, ['plugins', this.getSource(), this.getModelName()]) + : get(this.props.schema, [this.getModelName()]); + + /** * Retrieve the model's source * @return {String} */ getSource = () => getQueryParameters(this.props.location.search, 'source'); + handleChange = (e) => { + let value = e.target.value; + + // Check if date + if (isObject(e.target.value) && e.target.value._isAMomentObject === true) { + value = moment(e.target.value, 'YYYY-MM-DD HH:mm:ss').format(); + } else if (['float', 'integer', 'biginteger', 'decimal'].indexOf(this.getSchema().fields[e.target.name].type) !== -1) { + value = toNumber(e.target.value); + } + + const target = { + name: e.target.name, + value, + }; + + this.props.changeData({ target }); + } + + layout = bindLayout.call(this, layout); + componentDidCatch(error, info) { console.log('err', error); console.log('info', info); } - isEditing = () => this.props.match.params.id === 'create'; + isCreating = () => this.props.match.params.id === 'create'; pluginHeaderActions = [ { @@ -79,7 +125,7 @@ export class EditPage extends React.Component { }, { kind: 'primary', - label: this.isEditing() ? 'content-manager.containers.Edit.editing' : 'content-manager.containers.Edit.submit', + label: !this.isCreating() ? 'content-manager.containers.Edit.editing' : 'content-manager.containers.Edit.submit', onClick: () => {}, type: 'submit', }, @@ -94,7 +140,7 @@ export class EditPage extends React.Component {
@@ -102,22 +148,31 @@ export class EditPage extends React.Component { } } +EditPage.contextTypes = { + plugins: PropTypes.object, +}; + EditPage.defaultProps = { models: {}, }; EditPage.propTypes = { + changeData: PropTypes.func.isRequired, editPage: PropTypes.object.isRequired, + getData: PropTypes.func.isRequired, history: PropTypes.object.isRequired, initModelProps: PropTypes.func.isRequired, location: PropTypes.object.isRequired, match: PropTypes.object.isRequired, models: PropTypes.object, + schema: PropTypes.object.isRequired, }; function mapDispatchToProps(dispatch) { return bindActionCreators( { + changeData, + getData, initModelProps, }, dispatch, diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/reducer.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/reducer.js index 2837f87661..04da20d6f7 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/reducer.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/reducer.js @@ -4,23 +4,38 @@ * */ -import { fromJS } from 'immutable'; +import { fromJS, Map } from 'immutable'; import { + CHANGE_DATA, + GET_DATA_SUCCEEDED, INIT_MODEL_PROPS, } from './constants'; const initialState = fromJS({ + form: Map({}), isCreating: false, + id: '', modelName: '', pluginHeaderTitle: 'New Entry', + record: Map({}), + source: 'content-manager', }); function editPageReducer(state = initialState, action) { switch (action.type) { + case CHANGE_DATA: + return state.updateIn(actions.keys, () => action.value); + case GET_DATA_SUCCEEDED: + return state + .update('id', () => action.id) + .update('pluginHeaderTitle', () => action.pluginHeaderTitle) + .update('record', () => Map(action.data)); case INIT_MODEL_PROPS: return state + .update('form', () => Map(action.form)) .update('isCreating', () => action.isCreating) - .update('modelName', () => action.modelName); + .update('modelName', () => action.modelName) + .update('source', () => action.source); default: return state; } diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/saga.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/saga.js index 5e7cb192d1..a993eb1b32 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/saga.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/saga.js @@ -1,20 +1,48 @@ -// import { LOCATION_CHANGE } from 'react-router-redux'; -// import { -// call, -// cancel, -// fork, -// put, -// select, -// take, -// takeLatest, -// } from 'redux-saga/effects'; -// -// // Utils. -// import request from 'utils/request'; -// +import { LOCATION_CHANGE } from 'react-router-redux'; +import { + call, + cancel, + fork, + put, + select, + take, + takeLatest, +} from 'redux-saga/effects'; + +// Utils. +import request from 'utils/request'; +import templateObject from 'utils/templateObject'; + +import { getDataSucceeded } from './actions'; +import { GET_DATA } from './constants'; +import { + makeSelectModelName, + // makeSelectSource, +} from './selectors'; + +function* dataGet(action) { + try { + const modelName = yield select(makeSelectModelName()); + const params = { source: action.source }; + const response = yield call( + request, + `/content-manager/explorer/${modelName}/${action.id}`, + { method: 'GET', params }, + ); + + const pluginHeaderTitle = yield call(templateObject, { mainField: action.mainField }, response); + yield put(getDataSucceeded(action.id, response, pluginHeaderTitle.mainField)); + } catch(err) { + strapi.notification.error('content-manager.error.record.fetch'); + } +} function* defaultSaga() { - + const loadDataWatcher = yield fork(takeLatest, GET_DATA, dataGet); + + yield take(LOCATION_CHANGE); + + yield cancel(loadDataWatcher); } export default defaultSaga; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/selectors.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/selectors.js index 8a73c85dc9..a7c7ddde12 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/selectors.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/selectors.js @@ -25,8 +25,19 @@ const makeSelectEditPage = () => createSelector( * * Other specific selectors */ +const makeSelectModelName = () => createSelector( + selectEditPageDomain(), + (substate) => substate.get('modelName'), +); + +const makeSelectSource = () => createSelector( + selectEditPageDomain(), + (substate) => substate.get('source'), +); export default makeSelectEditPage; export { selectEditPageDomain, + makeSelectModelName, + makeSelectSource, };