Init AttributeForm

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

@@ -0,0 +1,141 @@
+/**
+ *
+ * AttributeForm
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { get } from 'lodash';
+// import { connect } from 'react-redux';
+// import { bindActionCreators, compose } from 'redux';
+
+import Input from 'components/InputsIndex';
+
+import pluginId from '../../pluginId';
+
+import BodyModal from '../../components/BodyModal';
+import ButtonModalPrimary from '../../components/ButtonModalPrimary';
+import ButtonModalSecondary from '../../components/ButtonModalSecondary';
+import FooterModal from '../../components/FooterModal';
+import HeaderModal from '../../components/HeaderModal';
+import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
+import HeaderNavLink from '../../components/HeaderNavLink';
+import WrapperModal from '../../components/WrapperModal';
+
+import supportedAttributes from './supportedAttributes.json';
+
+const NAVLINKS = [
+  { id: 'base' },
+  { id: 'advanced' },
+];
+
+class AttributeForm extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  handleCancel = () => {
+    const { push } = this.props;
+
+    push({ search: '' });
+   }
+
+  handleGoTo = to => {
+    const { attributeType, push } = this.props;
+
+    push({
+      search: `modalType=attributeForm&attributeType=${attributeType}&settingType=${to}&actionType=create`,
+    });
+  }
+
+  handleToggle = () => {
+    const { push } = this.props;
+
+    push({ search: '' });
+  }
+
+  renderInput = (input, index) => {
+    console.log(input);
+
+    return (
+      <Input
+        key={input.name}
+        {...input}
+        onChange={() => {}}
+      />
+    )
+  }
+
+  renderNavLink = (link, index) => {
+    const { activeTab } = this.props;
+
+    return (
+      <HeaderNavLink
+        isActive={activeTab === link.id}
+        key={link.id}
+        {...link}
+        onClick={this.handleGoTo}
+        nextTab={index === NAVLINKS.length - 1 ? 0 : index + 1}
+      />
+    );
+  }
+
+  render() {
+    const { activeTab, attributeType, isOpen, onSubmit } = this.props;
+    const currentForm = get(supportedAttributes, [attributeType, activeTab, 'items'], []);
+
+    return (
+      <WrapperModal isOpen={isOpen} onToggle={this.handleToggle}>
+        <HeaderModal>
+          <div style={{ fontSize: '1.8rem', fontWeight: 'bold' }}>
+            <FormattedMessage id={`${pluginId}.popUpForm.create`} />
+            &nbsp;
+            <span style={{ fontStyle: 'italic', textTransform: 'capitalize' }}>string</span>
+            &nbsp;
+            <FormattedMessage id={`${pluginId}.popUpForm.field`} />
+          </div>
+          <HeaderModalNavContainer>
+            {NAVLINKS.map(this.renderNavLink)}
+          </HeaderModalNavContainer>
+        </HeaderModal>
+        <form onSubmit={onSubmit}>
+          <BodyModal>
+            {currentForm.map(this.renderInput)}
+          </BodyModal>
+          <FooterModal>
+            <ButtonModalSecondary message={`${pluginId}.form.button.cancel`} onClick={this.handleCancel} />
+            <ButtonModalPrimary message={`${pluginId}.form.button.continue`} type="submit" add />
+            <ButtonModalPrimary message={`${pluginId}.form.button.save`} type="button" />
+          </FooterModal>
+        </form>
+      </WrapperModal>
+    );
+  }
+}
+
+AttributeForm.defaultProps = {
+  attributeType: 'string',
+  isOpen: false,
+  onSubmit: (e) => {
+    e.preventDefault();
+  },
+};
+
+AttributeForm.propTypes = {
+  attributeType: PropTypes.string,
+  isOpen: PropTypes.bool,
+  onSubmit: PropTypes.func,
+  push: PropTypes.func.isRequired,
+};
+
+export default AttributeForm;
+// function mapDispatchToProps(dispatch) {
+//   return bindActionCreators(
+//     {},
+//     dispatch,
+//   );
+// }
+
+// const withConnect = connect(null, mapDispatchToProps);
+
+// export default compose(
+//   withConnect,
+// )(AttributeForm);

packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/supportedAttributes.json

@@ -0,0 +1,22 @@
+{
+  "string": {
+    "base": {
+      "items": [
+        {
+          "label": {
+            "id": "content-type-builder.form.attribute.item.string.name"
+          },
+          "name": "name",
+          "type": "string",
+          "value": "",
+          "validations": {
+            "required": true
+          }
+        }
+      ]
+    },
+    "advanced": {
+      "items": []
+    }
+  }
+}

packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/tests/index.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import mountWithIntl from 'testUtils/mountWithIntl';
+import formatMessagesWithPluginId from 'testUtils/formatMessages';
+
+
+// This part is needed if you need to test the lifecycle of a container that contains FormattedMessages
+
+import pluginId from '../../../pluginId';
+import pluginTradsEn from '../../../translations/en.json';
+
+import AttributeForm from '../index';
+
+const messages = formatMessagesWithPluginId(pluginId, pluginTradsEn);
+const renderComponent = (props = {}) => mountWithIntl(<AttributeForm {...props} />, messages);
+
+describe('<AttributeForm />', () => {
+  it('Expect to have unit tests specified', () => {
+    // shallow(<AttributeForm />);
+
+    renderComponent({});
+  });
+});

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

@@ -65,6 +65,12 @@ class AttributesPickerModal extends React.Component { // eslint-disable-line rea
     document.removeEventListener('keydown', this.handleKeyDown);
   }
 
+  handleClick = (type) => {
+    const { push } = this.props;
+
+    push({ search: `modalType=attributeForm&attributeType=${type}&settingType=base` });
+  }
+
   /* istanbul ignore next */
   handleKeyDown = (e) => {
     /* istanbul ignore next */
@@ -120,6 +126,7 @@ class AttributesPickerModal extends React.Component { // eslint-disable-line rea
         tabIndex={index}
         isDisplayed={isDisplayed}
         nodeToFocus={nodeToFocus}
+        onClick={this.handleClick}
         {...attribute}
       />
     );

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

@@ -33,6 +33,7 @@ import LeftMenuLink from '../../components/LeftMenuLink';
 import ListTitle from '../../components/ListTitle';
 import Ul from '../../components/Ul';
 
+import AttributeForm from '../AttributeForm';
 import AttributesModalPicker from '../AttributesPickerModal';
 
 import CustomLink from './CustomLink';
@@ -103,6 +104,15 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
     push({ search: 'modalType=chooseAttributes' });
   }
 
+  isUpdatingTemporaryContentType = () => {
+    const { models } = this.props;
+    const currentModel = models.find(model => model.name === this.getModelName()) || { isTemporary: true };
+
+    const { isTemporary } = currentModel;
+
+    return isTemporary;
+  }
+
   shouldRedirect = () => {
     const { models } = this.props;
 
@@ -143,7 +153,7 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
       location: { search },
       models,
     } = this.props;
-
+    console.log(this.isUpdatingTemporaryContentType());
     if (this.shouldRedirect()) {
       return <Redirect to={`/plugins/${pluginId}/models/${models[0].name}`} />;
     }
@@ -228,6 +238,12 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
           isOpen={getQueryParameters(search, 'modalType') === 'chooseAttributes'}
           push={push}
         />
+        <AttributeForm
+          activeTab={getQueryParameters(search, 'settingType')}
+          attributeType={getQueryParameters(search, 'attributeType')}
+          isOpen={getQueryParameters(search, 'modalType') === 'attributeForm'}
+          push={push}
+        />
       </div>
     );
   }