Handle edit attribute

packages/strapi-plugin-content-type-builder/admin/src/components/Input/index.js

@@ -71,7 +71,7 @@ class Input extends React.Component { // eslint-disable-line react/prefer-statel
           <FormattedMessage id={this.props.name}>
             {(message) => (
               <label className={`${styles.checkboxLabel} form-check-label`} htmlFor={this.props.name}>
-                <input className="form-check-input" type="checkbox" checked={this.props.value} onChange={this.handleChangeCheckbox} name={this.props.target} />
+                <input className="form-check-input" type="checkbox" defaultChecked={this.props.value} onChange={this.handleChangeCheckbox} name={this.props.target} />
                 {message}
               </label>
             )}

packages/strapi-plugin-content-type-builder/admin/src/containers/Form/actions.js

@@ -23,6 +23,7 @@ import {
   RESET_DID_FETCH_MODEL_PROP,
   RESET_IS_FORM_SET,
   SET_ATTRIBUTE_FORM,
+  SET_ATTRIBUTE_FORM_EDIT,
   SET_FORM,
 } from './constants';
 
@@ -120,6 +121,46 @@ export function resetIsFormSet() {
 }
 
 export function setAttributeForm(hash) {
+  // const hashArray = hash.split('::');
+  // const formType = replace(hashArray[1], 'attribute', '');
+  // const settingsType = hashArray[2];
+  // const form = forms.attribute[formType][settingsType];
+  //
+  // const attribute = Map({
+  //   name: '',
+  //   params: Map({
+  //     type: formType,
+  //     required: false,
+  //     maxLength: false,
+  //     minLength: false,
+  //   }),
+  // });
+  const data = setAttributeFormData(hash);
+
+  return {
+    type: SET_ATTRIBUTE_FORM,
+    form: data.form,
+    attribute: data.attribute,
+  }
+}
+
+export function setAttributeFormEdit(hash, contentType) {
+  const form = setAttributeFormData(hash).form;
+  const contentTypeAttribute = contentType.attributes[hash.split('::')[3]];
+  const attribute = Map({
+    name: contentTypeAttribute.name,
+    params: Map(contentTypeAttribute.params),
+  });
+
+  return {
+    type: SET_ATTRIBUTE_FORM_EDIT,
+    form,
+    attribute,
+  }
+}
+
+
+function setAttributeFormData(hash) {
   const hashArray = hash.split('::');
   const formType = replace(hashArray[1], 'attribute', '');
   const settingsType = hashArray[2];
@@ -136,7 +177,6 @@ export function setAttributeForm(hash) {
   });
 
   return {
-    type: SET_ATTRIBUTE_FORM,
     form,
     attribute,
   }

packages/strapi-plugin-content-type-builder/admin/src/containers/Form/constants.js

@@ -16,4 +16,5 @@ export const CONTENT_TYPE_FETCH_SUCCEEDED = 'ContentTypeBuilder/Form/CONTENT_TYP
 export const RESET_DID_FETCH_MODEL_PROP = 'ContentTypeBuilder/Form/RESET_DID_FETCH_MODEL_PROP';
 export const RESET_IS_FORM_SET = 'ContentTypeBuilder/Form/RESET_IS_FORM_SET';
 export const SET_ATTRIBUTE_FORM = 'ContentTypeBuilder/Form/SET_ATTRIBUTE_FORM';
+export const SET_ATTRIBUTE_FORM_EDIT = 'ContentTypeBuilder/Form/SET_ATTRIBUTE_FORM_EDIT';
 export const SET_FORM = 'ContentTypeBuilder/Form/SET_FORM';

packages/strapi-plugin-content-type-builder/admin/src/containers/Form/index.js

@@ -23,7 +23,7 @@ import {
 import { router, store } from 'app';
 
 import { temporaryContentTypeFieldsUpdated, storeTemporaryMenu } from 'containers/App/actions';
-import { addAttributeToContentType, updateContentType } from 'containers/ModelPage/actions';
+import { addAttributeToContentType, editContentTypeAttribute, updateContentType } from 'containers/ModelPage/actions';
 import AttributeCard from 'components/AttributeCard';
 import InputCheckboxWithNestedInputs from 'components/InputCheckboxWithNestedInputs';
 import PopUpForm from 'components/PopUpForm';
@@ -45,6 +45,7 @@ import {
   contentTypeFetchSucceeded,
   resetIsFormSet,
   setAttributeForm,
+  setAttributeFormEdit,
   setForm,
 } from './actions';
 
@@ -106,6 +107,13 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
     }
   }
 
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.modelLoading !== this.props.modelLoading && !isEmpty(this.props.hash)) {
+      this.initComponent(this.props, true);
+    }
+  }
+
   addAttributeToContentType = () => {
     // Update the parent container (ModelPage)
     this.props.addAttributeToContentType(this.props.modifiedDataAttribute);
@@ -115,6 +123,15 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
     router.push(`${this.props.redirectRoute}/${replace(this.props.hash.split('::')[0], '#create', '')}`);
   }
 
+  editContentTypeAttribute = () => {
+    // Update the parent container (ModelPage)
+    this.props.editContentTypeAttribute(this.props.modifiedDataAttribute, this.props.hash.split('::')[3]);
+    // Empty the store
+    this.props.resetIsFormSet();
+    // Close modal
+    router.push(`${this.props.redirectRoute}/${replace(this.props.hash.split('::')[0], '#edit', '')}`);
+  }
+
   addAttributeToTempContentType = () => {
     // Get the entire content type from the reducer
     const contentType = this.props.modifiedDataEdit;
@@ -191,7 +208,7 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
     // Three kinds of values are available modifiedData and modifiedDataEdit
     // Allows the user to start creating a contentType and modifying an existing one at the same time
     switch (true) {
-      case includes(this.props.hash, 'edit'):
+      case includes(this.props.hash, 'edit') && !includes(this.props.hash, 'attributes'):
         values = this.props.modifiedDataEdit;
         break;
       case includes(this.props.hash.split('::')[1], 'attribute'):
@@ -225,7 +242,7 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
   }
 
   handleSubmit = () => {
-    if (includes(this.props.hash, 'edit')) {
+    if (includes(this.props.hash, 'edit') && !includes(this.props.hash, 'attribute')) {
       this.testContentType(
         replace(split(this.props.hash, '::')[0], '#edit', ''),
         this.createContentType,
@@ -233,13 +250,21 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
         // this.props.contentTypeEdit,
         this.props.contentTypeEdit,
       );
-    } else if (includes(this.props.hash.split('::')[1], 'attribute')) {
+    } else if (includes(this.props.hash.split('::')[1], 'attribute') && includes(this.props.hash, '#create')) {
       this.testContentType(
         replace(split(this.props.hash, '::')[0], '#create', ''),
         this.addAttributeToTempContentType,
         null,
         this.addAttributeToContentType,
       );
+    } else if (includes(this.props.hash.split('::')[1], 'attribute') && includes(this.props.hash, '#edit')) {
+      this.testContentType(
+        replace(split(this.props.hash, '::')[0], '#create', ''),
+        // TODO check
+        this.addAttributeToTempContentType,
+        null,
+        this.editContentTypeAttribute,
+      )
     } else {
       this.createContentType(this.props.modifiedData);
     }
@@ -263,6 +288,10 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
       if (includes(props.hash, '#create') && includes(props.hash, 'attribute')) {
         this.props.setAttributeForm(props.hash);
       }
+
+      if (get(props.contentTypeData, 'name') && includes(props.hash, '#edit') && includes(props.hash, 'attribute')) {
+        this.props.setAttributeFormEdit(props.hash, props.contentTypeData);
+      }
     } else {
       this.setState({ showModal: false });
     }
@@ -359,6 +388,7 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(
     {
       addAttributeToContentType,
+      editContentTypeAttribute,
       changeInput,
       changeInputAttribute,
       connectionsFetch,
@@ -368,6 +398,7 @@ function mapDispatchToProps(dispatch) {
       contentTypeFetchSucceeded,
       resetIsFormSet,
       setAttributeForm,
+      setAttributeFormEdit,
       setForm,
       storeTemporaryMenu,
       temporaryContentTypeFieldsUpdated,
@@ -386,6 +417,7 @@ Form.propTypes = {
   contentTypeEdit: React.PropTypes.func,
   contentTypeFetch: React.PropTypes.func,
   contentTypeFetchSucceeded: React.PropTypes.func,
+  editContentTypeAttribute: React.PropTypes.func,
   form: React.PropTypes.oneOfType([
     React.PropTypes.array.isRequired,
     React.PropTypes.object.isRequired,
@@ -393,6 +425,7 @@ Form.propTypes = {
   hash: React.PropTypes.string.isRequired,
   isModelPage: React.PropTypes.bool,
   menuData: React.PropTypes.array.isRequired,
+  modelLoading: React.PropTypes.bool,
   modelName: React.PropTypes.string,
   modifiedData: React.PropTypes.object,
   modifiedDataAttribute: React.PropTypes.object,
@@ -405,6 +438,7 @@ Form.propTypes = {
   selectOptions: React.PropTypes.array,
   selectOptionsFetchSucceeded: React.PropTypes.bool,
   setAttributeForm: React.PropTypes.func,
+  setAttributeFormEdit: React.PropTypes.func,
   setForm: React.PropTypes.func.isRequired,
   shouldRefetchContentType: React.PropTypes.bool,
   storeTemporaryMenu: React.PropTypes.func,

packages/strapi-plugin-content-type-builder/admin/src/containers/Form/reducer.js

@@ -14,6 +14,7 @@ import {
   CONTENT_TYPE_FETCH_SUCCEEDED,
   RESET_IS_FORM_SET,
   SET_ATTRIBUTE_FORM,
+  SET_ATTRIBUTE_FORM_EDIT,
   SET_FORM,
 } from './constants';
 
@@ -29,7 +30,6 @@ const initialState = fromJS({
   modifiedData: Map(),
   modifiedDataEdit: Map(),
   isFormSet: false,
-  // didFetchModel: true,
   shouldRefetchContentType: false,
   updatedContentType: false,
 });
@@ -59,11 +59,9 @@ function formReducer(state = initialState, action) {
     case CONTENT_TYPE_CREATE:
       return state
         .set('isFormSet', false)
-        // .set('didFetchModel', true)
         .set('updatedContentType', !state.get('updatedContentType'));
     case CONTENT_TYPE_FETCH_SUCCEEDED:
       return state
-        // .set('didFetchModel', false)
         .set('initialDataEdit', action.data)
         .set('modifiedDataEdit', action.data);
     case RESET_IS_FORM_SET:
@@ -78,10 +76,21 @@ function formReducer(state = initialState, action) {
         .set('form', Map(action.form))
         .set('modifiedDataAttribute', action.attribute);
     }
+    case SET_ATTRIBUTE_FORM_EDIT: {
+      if (state.get('isFormSet')) {
+        return state.set('form', Map(action.form));
+      }
+
+      return state
+        .set('isFormSet', true)
+        .set('form', Map(action.form))
+        .set('modifiedDataAttribute', action.attribute);
+    }
     case SET_FORM: {
       if (state.get('isFormSet')) {
         return state.set('form', Map(action.form));
       }
+
       return state
         .set('isFormSet', true)
         .set('form', Map(action.form))

packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/actions.js

@@ -8,6 +8,7 @@ import { storeData } from '../../utils/storeData';
 
 import {
   ADD_ATTRIBUTE_TO_CONTENT_TYPE,
+  EDIT_CONTENT_TYPE_ATTRIBUTE,
   CANCEL_CHANGES,
   DEFAULT_ACTION,
   DELETE_ATTRIBUTE,
@@ -26,6 +27,14 @@ export function addAttributeToContentType(newAttribute) {
   };
 }
 
+export function editContentTypeAttribute(modifiedAttribute, attributePosition) {
+  return {
+    type: EDIT_CONTENT_TYPE_ATTRIBUTE,
+    modifiedAttribute,
+    attributePosition,
+  };
+}
+
 export function cancelChanges() {
   return {
     type: CANCEL_CHANGES,

packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/constants.js

@@ -5,6 +5,7 @@
  */
 
 export const ADD_ATTRIBUTE_TO_CONTENT_TYPE = 'ContentTypeBuilder/ModelPage/ADD_ATTRIBUTE_TO_CONTENT_TYPE';
+export const EDIT_CONTENT_TYPE_ATTRIBUTE = 'ContentTypeBuilder/ModelPage/EDIT_CONTENT_TYPE_ATTRIBUTE';
 export const CANCEL_CHANGES = 'ContentTypeBuilder/ModelPage/CANCEL_CHANGES';
 export const DEFAULT_ACTION = 'ContentTypeBuilder/ModelPage/DEFAULT_ACTION';
 export const DELETE_ATTRIBUTE = 'ContentTypeBuilder/ModelPage/DELETE_ATTRIBUTE';

packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js

@@ -119,7 +119,9 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
 
   handleEditAttribute = (attributeName) => {
     const index = findIndex(this.props.modelPage.model.attributes, ['name', attributeName]);
-    console.log(index);
+    const attribute = this.props.modelPage.model.attributes[index];
+    router.push(`plugins/content-type-builder/models/${this.props.params.modelName}#edit${this.props.params.modelName}::attribute${attribute.params.type}::baseSettings::${index}`);
+
   }
 
 
@@ -235,7 +237,9 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
           menuData={this.props.menu}
           redirectRoute={redirectRoute}
           modelName={this.props.params.modelName}
+          contentTypeData={this.props.modelPage.model}
           isModelPage
+          modelLoading={this.props.modelPage.modelLoading}
         />
       </div>
     );

packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js

@@ -10,6 +10,7 @@ import { storeData } from '../../utils/storeData';
 /* eslint-disable new-cap */
 import {
   ADD_ATTRIBUTE_TO_CONTENT_TYPE,
+  EDIT_CONTENT_TYPE_ATTRIBUTE,
   CANCEL_CHANGES,
   DELETE_ATTRIBUTE,
   MODEL_FETCH_SUCCEEDED,
@@ -27,6 +28,7 @@ const initialState = fromJS({
   }),
   postContentTypeSuccess: false,
   showButtons: false,
+  modelLoading: true,
 });
 
 function modelPageReducer(state = initialState, action) {
@@ -35,6 +37,10 @@ function modelPageReducer(state = initialState, action) {
       return state
         .updateIn(['model', 'attributes'], (list) => list.push(action.newAttribute))
         .set('showButtons', true);
+    case EDIT_CONTENT_TYPE_ATTRIBUTE:
+      return state
+        .set('showButtons', true)
+        .updateIn(['model', 'attributes', action.attributePosition], () => action.modifiedAttribute);
     case CANCEL_CHANGES:
       return state
         .set('showButtons', false)
@@ -57,6 +63,7 @@ function modelPageReducer(state = initialState, action) {
     }
     case MODEL_FETCH_SUCCEEDED:
       return state
+        .set('modelLoading', false)
         .set('model', Map(action.model.model))
         .set('initialModel', Map(action.model.model))
         .setIn(['model', 'attributes'], List(action.model.model.attributes))