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 6cbf959ad4..6df3038d43 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
@@ -4,6 +4,7 @@
*
*/
+/* eslint-disable */
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
@@ -33,7 +34,13 @@ import moment from 'moment';
import { router } from 'app';
import { temporaryContentTypeFieldsUpdated, storeTemporaryMenu } from '../App/actions';
-import { addAttributeToContentType, addAttributeRelationToContentType, editContentTypeAttribute, editContentTypeAttributeRelation, updateContentType } from '../ModelPage/actions';
+import {
+ addAttributeToContentType,
+ addAttributeRelationToContentType,
+ editContentTypeAttribute,
+ editContentTypeAttributeRelation,
+ updateContentType,
+} from '../ModelPage/actions';
import AttributeCard from '../../components/AttributeCard';
import InputCheckboxWithNestedInputs from '../../components/InputCheckboxWithNestedInputs';
@@ -71,7 +78,8 @@ import forms from './forms.json';
/* eslint-disable consistent-return */
/* eslint-disable react/jsx-wrap-multilines */
-export class Form extends React.Component { // eslint-disable-line react/prefer-stateless-function
+export class Form extends React.Component {
+ // eslint-disable-line react/prefer-stateless-function
constructor(props) {
super(props);
this.state = {
@@ -114,7 +122,9 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
storeData.setMenu(newMenu);
}
// Close Modal
- const redirectToModelPage = includes(this.props.redirectRoute, 'models') ? `/${this.props.modifiedDataEdit.name}` : '';
+ const redirectToModelPage = includes(this.props.redirectRoute, 'models')
+ ? `/${this.props.modifiedDataEdit.name}`
+ : '';
router.push(`${this.props.redirectRoute}${redirectToModelPage}`);
// Reset props
this.props.resetIsFormSet();
@@ -137,7 +147,9 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
}
addAttributeToContentType = (redirectToChoose = false) => {
- const formErrors = this.checkAttributeValidations(checkFormValidity(this.props.modifiedDataAttribute, this.props.formValidations));
+ const formErrors = this.checkAttributeValidations(
+ checkFormValidity(this.props.modifiedDataAttribute, this.props.formValidations),
+ );
if (!isEmpty(formErrors)) {
return this.props.setFormErrors(formErrors);
@@ -145,7 +157,11 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
// Check if user is adding a relation with the same content type
- if (includes(this.props.hash, 'attributerelation') && this.props.modifiedDataAttribute.params.target === this.props.modelName && get(this.props.modifiedDataAttribute, ['params', 'nature'], '') !== 'oneWay') {
+ if (
+ includes(this.props.hash, 'attributerelation') &&
+ this.props.modifiedDataAttribute.params.target === this.props.modelName &&
+ get(this.props.modifiedDataAttribute, ['params', 'nature'], '') !== 'oneWay'
+ ) {
// Insert two attributes
this.props.addAttributeRelationToContentType(this.props.modifiedDataAttribute);
} else {
@@ -157,10 +173,12 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
// Empty errors
this.props.resetFormErrors();
this.redirectAfterSave(redirectToChoose);
- }
+ };
addAttributeToTempContentType = (redirectToChoose = false) => {
- const formErrors = this.checkAttributeValidations(checkFormValidity(this.props.modifiedDataAttribute, this.props.formValidations));
+ const formErrors = this.checkAttributeValidations(
+ checkFormValidity(this.props.modifiedDataAttribute, this.props.formValidations),
+ );
if (!isEmpty(formErrors)) {
return this.props.setFormErrors(formErrors);
@@ -170,7 +188,11 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
const contentType = this.props.modifiedDataEdit;
// Add the new attribute to the content type attribute list
const newAttribute = this.setTempAttribute();
- const parallelAttribute = this.props.modelName === get(newAttribute, ['params', 'target']) && get(newAttribute, ['params', 'nature'], '') === 'oneWay' ? null : this.setParallelAttribute(newAttribute);
+ const parallelAttribute =
+ this.props.modelName === get(newAttribute, ['params', 'target']) &&
+ get(newAttribute, ['params', 'nature'], '') === 'oneWay'
+ ? null
+ : this.setParallelAttribute(newAttribute);
contentType.attributes = compact(concat(contentType.attributes, newAttribute, parallelAttribute));
// Reset the store and update the parent container
this.props.contentTypeCreate(contentType);
@@ -184,16 +206,23 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
storeData.setModel(model);
this.props.resetFormErrors();
this.redirectAfterSave(redirectToChoose);
- }
+ };
- createContentType = (data) => {
+ createContentType = data => {
// Check form errors
const formErrors = checkFormValidity(data, this.props.formValidations);
// Check if content type name already exists
- const sameContentTypeNames = filter(this.props.menuData[0].items, (contentType) => contentType.name === data.name);
+ const sameContentTypeNames = filter(
+ this.props.menuData[0].items,
+ contentType => contentType.name === data.name,
+ );
- if (size(sameContentTypeNames) > 0 && (includes(this.props.hash, '#create') || data.name !== replace(split(this.props.hash, '::')[0], '#edit', ''))) {
- formErrors.push({ name: 'name', errors: [{ id: 'content-type-builder.error.contentTypeName.taken' }]});
+ if (
+ size(sameContentTypeNames) > 0 &&
+ (includes(this.props.hash, '#create') ||
+ data.name !== replace(split(this.props.hash, '::')[0], '#edit', ''))
+ ) {
+ formErrors.push({ name: 'name', errors: [{ id: 'content-type-builder.error.contentTypeName.taken' }] });
}
if (!isEmpty(formErrors)) {
@@ -201,10 +230,16 @@ 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', '')]);
+ 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 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;
const contentType = data;
@@ -224,28 +259,33 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
// Close modal
const modelPage = includes(this.props.redirectRoute, 'models') ? '' : '/models';
router.push(`${this.props.redirectRoute}${modelPage}/${data.name}`);
- }
+ };
- checkForNestedInput = (item) => {
+ checkForNestedInput = item => {
const hasNestedInput = item.items && item.type !== 'select';
return hasNestedInput;
- }
+ };
- checkInputContentType = (item) => {
+ checkInputContentType = item => {
const shouldOverrideHandleBlur = item.name === 'name' && includes(this.props.hash, 'contentType');
return shouldOverrideHandleBlur;
- }
+ };
// Function used when modified the name of the content type and not the attributes
// Fires Form sagas
contentTypeEdit = () => {
const formErrors = checkFormValidity(this.props.modifiedDataEdit, this.props.formValidations);
- const sameContentTypeNames = filter(this.props.menuData[0].items, (contentType) => contentType.name === this.props.modifiedDataEdit.name);
+ const sameContentTypeNames = filter(
+ this.props.menuData[0].items,
+ contentType => contentType.name === this.props.modifiedDataEdit.name,
+ );
-
- if (size(sameContentTypeNames) > 0 && this.props.modifiedDataEdit.name !== replace(split(this.props.hash, '::')[0], '#edit', '')) {
- // if (size(sameContentTypeNames) > 0 && this.props.modifiedDataEdit.name !== this.props.modelName) {
- formErrors.push({ name: 'name', errors: [{ id: 'content-type-builder.error.contentTypeName.taken' }]});
+ if (
+ size(sameContentTypeNames) > 0 &&
+ this.props.modifiedDataEdit.name !== replace(split(this.props.hash, '::')[0], '#edit', '')
+ ) {
+ // if (size(sameContentTypeNames) > 0 && this.props.modifiedDataEdit.name !== this.props.modelName) {
+ formErrors.push({ name: 'name', errors: [{ id: 'content-type-builder.error.contentTypeName.taken' }] });
}
if (!isEmpty(formErrors)) {
@@ -266,10 +306,12 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
this.setState({ showModal: false });
return this.props.contentTypeEdit(this.context);
- }
+ };
editContentTypeAttribute = (redirectTochoose = false) => {
- const formErrors = this.checkAttributeValidations(checkFormValidity(this.props.modifiedDataAttribute, this.props.formValidations));
+ const formErrors = this.checkAttributeValidations(
+ checkFormValidity(this.props.modifiedDataAttribute, this.props.formValidations),
+ );
const hashArray = split(this.props.hash, '::');
if (!isEmpty(formErrors)) {
@@ -278,19 +320,30 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
if (!isUndefined(hashArray[4])) {
// Update the parent container (ModelPage)
- this.props.editContentTypeAttributeRelation(this.props.modifiedDataAttribute, hashArray[3], hashArray[4], this.props.modifiedDataAttribute.params.target !== this.props.modelName);
+ this.props.editContentTypeAttributeRelation(
+ this.props.modifiedDataAttribute,
+ hashArray[3],
+ hashArray[4],
+ this.props.modifiedDataAttribute.params.target !== this.props.modelName,
+ );
} else {
- this.props.editContentTypeAttribute(this.props.modifiedDataAttribute, hashArray[3], this.props.modifiedDataAttribute.params.target === this.props.modelName);
+ this.props.editContentTypeAttribute(
+ this.props.modifiedDataAttribute,
+ hashArray[3],
+ this.props.modifiedDataAttribute.params.target === this.props.modelName,
+ );
}
// Empty the store
this.props.resetIsFormSet();
// Empty errors
this.props.resetFormErrors();
this.redirectAfterSave(redirectTochoose);
- }
+ };
editTempContentTypeAttribute = (redirectToChoose = false) => {
- const formErrors = this.checkAttributeValidations(checkFormValidity(this.props.modifiedDataAttribute, this.props.formValidations));
+ const formErrors = this.checkAttributeValidations(
+ checkFormValidity(this.props.modifiedDataAttribute, this.props.formValidations),
+ );
if (!isEmpty(formErrors)) {
return this.props.setFormErrors(formErrors);
@@ -303,10 +356,15 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
if (newAttribute.params.target === this.props.modelName) {
const parallelAttribute = this.setParallelAttribute(newAttribute);
- contentType.attributes[findIndex(contentType.attributes, ['name', oldAttribute.params.key])] = parallelAttribute;
+ contentType.attributes[
+ findIndex(contentType.attributes, ['name', oldAttribute.params.key])
+ ] = parallelAttribute;
}
- if (oldAttribute.params.target === this.props.modelName && newAttribute.params.target !== this.props.modelName) {
+ if (
+ oldAttribute.params.target === this.props.modelName &&
+ newAttribute.params.target !== this.props.modelName
+ ) {
contentType.attributes.splice(findIndex(contentType.attributes, ['name', oldAttribute.params.key]), 1);
}
@@ -316,19 +374,19 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
// Empty errors
this.props.resetFormErrors();
storeData.setContentType(newContentType);
- }
+ };
- fetchModel = (contentTypeName) => {
+ fetchModel = contentTypeName => {
this.testContentType(
contentTypeName,
this.props.contentTypeFetchSucceeded,
{ model: storeData.getContentType() },
this.props.contentTypeFetch,
- contentTypeName
+ contentTypeName,
);
- }
+ };
- generatePopUpTitle = (popUpFormType) => {
+ generatePopUpTitle = popUpFormType => {
let popUpTitle;
const type = split(this.props.hash, '::')[0];
@@ -352,7 +410,7 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
}
return popUpTitle;
- }
+ };
getValues = () => {
let values;
@@ -370,23 +428,29 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
}
return values;
- }
+ };
- goToAttributeTypeView = (attributeType) => {
+ goToAttributeTypeView = attributeType => {
this.context.emitEvent('didSelectContentTypeFieldType', { type: attributeType });
const settings = attributeType === 'relation' ? 'defineRelation' : 'baseSettings';
- router.push(`${this.props.routePath}#create${this.props.modelName}::attribute${attributeType}::${settings}`);
- }
+ router.push(
+ `${this.props.routePath}#create${this.props.modelName}::attribute${attributeType}::${settings}`,
+ );
+ };
handleBlur = ({ target }) => {
if (target.name === 'name') {
- this.props.changeInput(target.name, toLower(camelCase(target.value)), includes(this.props.hash, 'edit'));
+ this.props.changeInput(
+ target.name,
+ toLower(camelCase(target.value)),
+ includes(this.props.hash, 'edit'),
+ );
if (!isEmpty(target.value)) {
// The input name for content type doesn't have the default handleBlur validation so we need to manually remove the error
this.props.removeContentTypeRequiredError();
}
}
- }
+ };
handleChange = ({ target }) => {
let value = target.type === 'number' && target.value !== '' ? toNumber(target.value) : target.value;
@@ -410,18 +474,17 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
if (target.name === 'params.nature' && target.value === 'oneWay') {
this.props.changeInputAttribute('params.key', '-');
}
-
} else {
this.props.changeInput(target.name, value, includes(this.props.hash, 'edit'));
}
- }
+ };
- handleKeyBinding = (e) => {
+ handleKeyBinding = e => {
if (includes(this.props.hash, 'choose')) {
const { nodeToFocus } = this.state;
let toAdd = 0;
- switch(e.keyCode) {
+ switch (e.keyCode) {
case 37: // Left arrow
case 39: // Right arrow
toAdd = nodeToFocus % 2 === 0 ? 1 : -1;
@@ -434,7 +497,10 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
}
break;
case 40:
- if (nodeToFocus === forms.attributesDisplay.items.length - 1 || nodeToFocus === forms.attributesDisplay.items.length - 2) {
+ if (
+ nodeToFocus === forms.attributesDisplay.items.length - 1 ||
+ nodeToFocus === forms.attributesDisplay.items.length - 2
+ ) {
toAdd = -8;
} else {
toAdd = 2;
@@ -451,11 +517,11 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
this.setState(prevState => ({ nodeToFocus: prevState.nodeToFocus + toAdd }));
}
- }
+ };
handleSubmit = (e, redirectToChoose = true) => {
e.preventDefault();
- const hashArray = split(this.props.hash, ('::'));
+ const hashArray = split(this.props.hash, '::');
const valueToReplace = includes(this.props.hash, '#create') ? '#create' : '#edit';
const contentTypeName = replace(hashArray[0], valueToReplace, '');
let cbSuccess;
@@ -472,7 +538,9 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
case includes(hashArray[0], '#edit'): {
// Check if the user is editing the attribute
const isAttribute = includes(hashArray[1], 'attribute');
- cbSuccess = isAttribute ? () => this.editTempContentTypeAttribute(redirectToChoose) : this.createContentType;
+ cbSuccess = isAttribute
+ ? () => this.editTempContentTypeAttribute(redirectToChoose)
+ : this.createContentType;
dataSucces = isAttribute ? null : this.getModelWithCamelCaseName(this.props.modifiedDataEdit);
cbFail = isAttribute ? () => this.editContentTypeAttribute(redirectToChoose) : this.contentTypeEdit;
return this.testContentType(contentTypeName, cbSuccess, dataSucces, cbFail);
@@ -483,12 +551,10 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
return this.testContentType(contentTypeName, cbSuccess, dataSucces, cbFail);
}
default: {
- return this.createContentType(
- this.getModelWithCamelCaseName(this.props.modifiedData)
- );
+ return this.createContentType(this.getModelWithCamelCaseName(this.props.modifiedData));
}
}
- }
+ };
getModelWithCamelCaseName = (model = {}) => {
if (isEmpty(model) || isEmpty(model.name)) {
@@ -499,7 +565,7 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
...model,
name: toLower(camelCase(model.name)),
};
- }
+ };
initComponent = (props, condition) => {
if (!isEmpty(props.hash)) {
@@ -518,7 +584,9 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
if (isCreating) {
this.props.setAttributeForm(props.hash);
} else if (get(props.contentTypeData, 'name')) {
- this.setState({ popUpTitleEdit: get(props.contentTypeData, ['attributes', split(props.hash, '::')[3], 'name']) });
+ this.setState({
+ popUpTitleEdit: get(props.contentTypeData, ['attributes', split(props.hash, '::')[3], 'name']),
+ });
this.props.setAttributeFormEdit(props.hash, props.contentTypeData);
}
break;
@@ -531,35 +599,33 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
} else {
this.setState({ showModal: false });
}
- }
+ };
renderModalBodyChooseAttributes = () => {
const attributesDisplay = has(this.context.plugins.toJS(), 'upload')
? forms.attributesDisplay.items
: forms.attributesDisplay.items.filter(obj => obj.type !== 'media'); // Don't display the media field if the upload plugin isn't installed
- return (
- map(attributesDisplay, (attribute, key) => (
-
- ))
- );
- }
+ return map(attributesDisplay, (attribute, key) => (
+
+ ));
+ };
redirectAfterSave = (shouldOpenAttributesModal = false) => {
const { modelName, redirectRoute } = this.props;
const path = shouldOpenAttributesModal ? '#choose::attributes' : '';
router.push(`${redirectRoute}/${modelName}${path}`);
- }
+ };
resetNodeToFocus = () => this.setState({ nodeToFocus: 0 });
@@ -570,18 +636,18 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
} else {
cbFail(failData);
}
- }
+ };
toggle = () => {
this.props.toggle();
// Set the isFormSet props to false when the modal is closing so the store is emptied
this.props.resetIsFormSet();
this.props.resetFormErrors();
- }
+ };
overrideCustomBootstrapClass = () => {
return includes(this.props.hash, 'attributenumber');
- }
+ };
renderInput = (item, key) => (
- )
+ );
- renderCustomPopUpHeader = (startTitle) => {
- const italicText = !includes(this.props.hash, '#edit') ?
-