diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/Input/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/Input/index.js index eb7d8fc258..375b1ad799 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/Input/index.js +++ b/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 {(message) => ( )} diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/actions.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/actions.js index cc099d2599..b5665ebbba 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/actions.js +++ b/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, } diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/constants.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/constants.js index 4f524fa5af..87c38b29cd 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/constants.js +++ b/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'; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/index.js index 96b4cf932b..9a51736fad 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/index.js +++ b/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, diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/reducer.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/reducer.js index 942160d9ef..81fe358eb1 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/Form/reducer.js +++ b/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)) diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/actions.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/actions.js index 6739f0a648..1252426198 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/actions.js +++ b/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, diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/constants.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/constants.js index b6de6279d1..c936d650a1 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/constants.js +++ b/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'; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js index 23a81002fd..251c4b7e10 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js +++ b/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} /> ); diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js index 6e423f091a..362a039dfd 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js +++ b/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) @@ -50,13 +56,14 @@ function modelPageReducer(state = initialState, action) { if (get(storeData.getContentType(), 'name') === state.getIn(['initialModel', 'name'])) { showButtons = size(get(storeData.getContentType(), 'attributes')) > 0; } - + return state .set('showButtons', showButtons) .updateIn(['model', 'attributes'], (list) => list.splice(action.position, 1)); } 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))