yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-12 18:53:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Code refacto and add custom popupheader

Browse Source
This commit is contained in:
cyril lopez 2017-08-31 19:21:00 +02:00
parent ba62b77361
commit b0c799ac6b
4 changed files with 77 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,7 +124,7 @@ export function resetIsFormSet() {
export function setAttributeForm(hash) {
const data = setAttributeFormData(hash);
return {
type: SET_ATTRIBUTE_FORM,
form: data.form,

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

@ -19,7 +19,7 @@ import {
toNumber,
replace,
} from 'lodash';
import { FormattedMessage } from 'react-intl';
import { router, store } from 'app';
import { temporaryContentTypeFieldsUpdated, storeTemporaryMenu } from 'containers/App/actions';
@ -123,15 +123,6 @@ 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;
@ -155,24 +146,37 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
const oldMenu = !isEmpty(this.props.menuData) ? this.props.menuData[0].items : [];
// Check if link already exist in the menu to remove it
const index = findIndex(oldMenu, [ 'name', replace(split(this.props.hash, '::')[0], '#edit', '')]);
// Insert at a specific position or before the add button the not saved contentType
const position = index !== -1 ? index : size(oldMenu) - 1;
oldMenu.splice(position, index !== -1 ? 1 : 0, { icon: 'fa-cube', fields: 0, description: data.description, name: data.name, isTemporary: true });
const newMenu = oldMenu;
// Store the temporary contentType in the localStorage
this.props.contentTypeCreate(data);
// Store new menu in localStorage and update App leftMenu
this.props.storeTemporaryMenu(newMenu, position, index !== -1 ? 1 : 0);
this.props.resetIsFormSet();
// Close modal
const modelPage = includes(this.props.redirectRoute, 'models') ? '' : '/models';
router.push(`${this.props.redirectRoute}${modelPage}/${data.name}`);
}
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', '')}`);
}
editTempContentTypeAttribute = () => {
this.editContentTypeAttribute();
const contentType = storeData.getContentType();
contentType.attributes[this.props.hash.split('::')[3]] = this.props.modifiedDataAttribute;
const newContentType = contentType;
storeData.setContentType(newContentType);
}
fetchModel = (contentTypeName) => {
this.testContentType(
contentTypeName,
@ -196,8 +200,11 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
case includes(type, 'edit') && popUpFormType === 'contentType':
popUpTitle = `popUpForm.edit.${popUpFormType}.header.title`;
break;
case includes(type, 'create'):
popUpTitle = 'popUpForm.create';
break;
default:
popUpTitle = 'popUpForm.doing';
popUpTitle = 'popUpForm.edit';
}
return popUpTitle;
@ -208,7 +215,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') && !includes(this.props.hash, 'attributes'):
case includes(this.props.hash, 'edit') && !includes(this.props.hash, 'attribute'):
values = this.props.modifiedDataEdit;
break;
case includes(this.props.hash.split('::')[1], 'attribute'):
@ -242,30 +249,30 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
}
handleSubmit = () => {
if (includes(this.props.hash, 'edit') && !includes(this.props.hash, 'attribute')) {
this.testContentType(
replace(split(this.props.hash, '::')[0], '#edit', ''),
this.createContentType,
this.props.modifiedDataEdit,
this.props.contentTypeEdit,
);
} 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);
const hashArray = split(this.props.hash, ('::'));
const valueToReplace = includes(this.props.hash, '#create') ? '#create' : '#edit';
const contentTypeName = replace(hashArray[0], valueToReplace, '');
let cbSuccess;
let dataSucces = null;
let cbFail;
switch (true) {
case includes(hashArray[0], '#edit'): {
// Check if the user is editing the attribute
const isAttribute = includes(hashArray[1], 'attribute');
cbSuccess = isAttribute ? this.editTempContentTypeAttribute : this.createContentType;
dataSucces = isAttribute ? null : this.props.modifiedDataEdit;
cbFail = isAttribute ? this.editContentTypeAttribute : this.props.contentTypeEdit;
return this.testContentType(contentTypeName, cbSuccess, dataSucces, cbFail);
}
case includes(hashArray[0], 'create') && includes(this.props.hash.split('::')[1], 'attribute'): {
cbSuccess = this.addAttributeToTempContentType;
cbFail = this.addAttributeToContentType;
return this.testContentType(contentTypeName, cbSuccess, dataSucces, cbFail);
}
default:
return this.createContentType(this.props.modifiedData);
}
}
@ -280,6 +287,7 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
this.fetchModel(contentTypeName);
}
// TODO refacto
if (includes(props.hash, 'contentType')) {
this.props.setForm(props.hash);
}
@ -339,20 +347,27 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
/>
)
renderCustomPopUpHeader = (startTitle) => (
<div>
<FormattedMessage id={startTitle} />&nbsp;<FormattedMessage id={replace(split(this.props.hash, ('::'))[1], 'attribute', '')}>
{(message) => <span style={{ fontStyle: 'italic', textTransform: 'capitalize' }}>{message}</span>}
</FormattedMessage>&nbsp;coo
</div>
)
render() {
// Ensure typeof(popUpFormType) is String
const popUpFormType = split(this.props.hash, '::')[1] || '';
const popUpTitle = this.generatePopUpTitle(popUpFormType);
// const values = includes(this.props.hash, 'edit') ? this.props.modifiedDataEdit : this.props.modifiedData;
const values = this.getValues();
const noNav = includes(this.props.hash, 'choose');
// Override the default rendering
const renderModalBody = includes(this.props.hash, '#choose') ? this.renderModalBodyChooseAttributes : false;
// Hide the button in the modal
const noButtons = includes(this.props.hash, '#choose');
const buttonSubmitMessage = includes(this.props.hash.split('::')[1], 'contentType') ? 'form.button.save' : 'form.button.continue';
const renderCustomPopUpHeader = !includes(this.props.hash, '#choose') && includes(this.props.hash, '::attribute') ? this.renderCustomPopUpHeader(popUpTitle) : false;
return (
<div className={styles.form}>
<PopUpForm
@ -376,6 +391,7 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
overrideRenderInput={this.renderInput}
buttonSubmitMessage={buttonSubmitMessage}
showLoader={this.props.showButtonLoading}
renderCustomPopUpHeader={renderCustomPopUpHeader}
/>
</div>
);

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

@ -194,6 +194,7 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
const redirectRoute = replace(this.props.route.path, '/:modelName', '');
// const addButtons = this.props.modelPage.showButtons;
const addButtons = get(storeData.getContentType(), 'name') === this.props.params.modelName && size(get(storeData.getContentType(), 'attributes')) > 0 || this.props.modelPage.showButtons;
const content = size(this.props.modelPage.model.attributes) === 0 ?
<EmptyAttributesView handleClick={this.handleClickAddAttribute} /> :
<List

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

@ -10,7 +10,7 @@ import { temporaryContentTypePosted } from 'containers/App/actions';
import { storeData } from '../../utils/storeData';
import { MODEL_FETCH, SUBMIT } from './constants';
import { modelFetchSucceeded, postContentTypeSucceeded } from './actions';
import { modelFetchSucceeded, postContentTypeSucceeded, resetShowButtonsProps } from './actions';
import { makeSelectModel } from './selectors';
export function* fetchModel(action) {
@ -32,8 +32,14 @@ export function* submitChanges() {
const body = yield select(makeSelectModel());
map(body.attributes, (attribute, index) => {
// Remove the connection key from attributes
if (attribute.connection) {
unset(body.attributes[index], 'connection');
}
forEach(attribute.params, (value, key) => {
if (includes(key, 'Value')) {
// Remove and set needed keys for params
set(body.attributes[index].params, replace(key, 'Value', ''), value);
unset(body.attributes[index].params, key);
}
@ -57,6 +63,14 @@ export function* submitChanges() {
yield put(postContentTypeSucceeded());
}
yield new Promise(resolve => {
setTimeout(() => {
resolve();
}, 5000);
});
yield put(resetShowButtonsProps());
} catch(error) {
console.log(error);
}