Get Data dynamic and handleChange

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,
   };
 }

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';

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 {
         <div className={cn('container-fluid', styles.containerFluid)}>
           <PluginHeader
             actions={this.pluginHeaderActions}
-            title={{ id: editPage.pluginHeaderTitle }}
+            title={{ id: toString(editPage.pluginHeaderTitle) }}
           />
         </div>
       </div>
@@ -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,

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;
   }

packages/strapi-plugin-content-manager/admin/src/containers/EditPage/saga.js

@@ -1,20 +1,48 @@
-// import { LOCATION_CHANGE } from 'react-router-redux';
+import { LOCATION_CHANGE } from 'react-router-redux';
-// import {
+import {
-//   call,
+  call,
-//   cancel,
+  cancel,
-//   fork,
+  fork,
-//   put,
+  put,
-//   select,
+  select,
-//   take,
+  take,
-//   takeLatest,
+  takeLatest,
-// } from 'redux-saga/effects';
+} from 'redux-saga/effects';
-//
+
-// // Utils.
+// Utils.
-// import request from 'utils/request';
+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;

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,
 };