yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 16:29:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle edit attribute

Browse Source
This commit is contained in:
cyril lopez 2017-08-31 15:48:57 +02:00
parent 20beac0993
commit e30dcefe37
9 changed files with 116 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
)}

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

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

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

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

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

@ -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,

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

@ -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))

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

@ -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,

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

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

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

@ -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>
);

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

@ -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))