Simplify code by creating a staticFields file that references the modal form fields

2025-12-27 23:24:03 +00:00 · 2019-11-27 09:51:39 +01:00 · 2019-11-27 09:51:39 +01:00 · eeb7685c13
commit eeb7685c13
parent 2e55f77be0
6 changed files with 104 additions and 135 deletions
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
@ -427,6 +427,7 @@ const FormModal = () => {
                  })
                ),
                name: upperFirst(state.attributeName),
+                step: state.step,
              }}
            >
              {msg => <span>{upperFirst(msg)}</span>}
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/reducer.js
@ -7,6 +7,7 @@ const initialState = fromJS({
  modifiedData: {},
  initialData: {},
  componentToCreate: {},
+  isCreatingComponentWhileAddingAField: false,
 });

 export const shouldPluralizeTargetAttribute = nature =>
@ -100,7 +101,10 @@ const reducer = (state, action) => {

      return initialState
        .update('componentToCreate', () => componentToCreate)
-        .update('modifiedData', () => modifiedData);
+        .update('modifiedData', () => modifiedData)
+        .update('isCreatingComponentWhileAddingAField', () =>
+          state.getIn(['modifiedData', 'createComponent'])
+        );
    }
    case 'SET_ATTRIBUTE_DATA_SCHEMA': {
      const {
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/forms.js
@ -7,6 +7,7 @@ import pluginId from '../../../pluginId';
 import getTrad from '../../../utils/getTrad';
 import { createComponentUid, createUid, nameToSlug } from './createUid';
 import componentForm from './componentForm';
+import fields from './staticFields';

 yup.addMethod(yup.mixed, 'defined', function() {
  return this.test(
@ -211,25 +212,8 @@ const forms = {
        const targetAttributeValue = get(data, 'targetAttribute', null);
        const nameValue = get(data, 'name', null);
        const relationItems = [
-          [
-            {
-              type: 'divider',
-            },
-          ],
-          [
-            {
-              autoFocus: false,
-              name: 'unique',
-              type: 'checkbox',
-              label: {
-                id: getTrad('form.attribute.item.uniqueField'),
-              },
-              description: {
-                id: getTrad('form.attribute.item.uniqueField.description'),
-              },
-              validations: {},
-            },
-          ],
+          [fields.divider],
+          [fields.unique],
          [
            {
              autoFocus: false,
@ -260,73 +244,15 @@ const forms = {
        const defaultItems = [
          [
            {
-              autoFocus: true,
-              name: 'default',
+              ...fields.default,
              type: type === 'email' ? 'email' : 'text',
-              label: {
-                id: getTrad('form.attribute.settings.default'),
-              },
-              validations: {},
-            },
-          ],
-          [
-            {
-              type: 'divider',
-            },
-          ],
-          [
-            {
-              autoFocus: false,
-              name: 'required',
-              type: 'checkbox',
-              label: {
-                id: getTrad('form.attribute.item.requiredField'),
-              },
-              description: {
-                id: getTrad('form.attribute.item.requiredField.description'),
-              },
-              validations: {},
-            },
-          ],
-          [
-            {
-              autoFocus: false,
-              name: 'unique',
-              type: 'checkbox',
-              label: {
-                id: getTrad('form.attribute.item.uniqueField'),
-              },
-              description: {
-                id: getTrad('form.attribute.item.uniqueField.description'),
-              },
-              validations: {},
-            },
-          ],
-        ];
-        const dynamiczoneItems = [
-          [
-            {
-              autoFocus: false,
-              name: 'max',
-              type: 'customCheckboxWithChildren',
-              label: {
-                id: getTrad(`form.attribute.item.maximum`),
-              },
-              validations: {},
-            },
-          ],
-          [
-            {
-              autoFocus: false,
-              name: 'min',
-              type: 'customCheckboxWithChildren',
-              label: {
-                id: getTrad(`form.attribute.item.minimum`),
-              },
-              validations: {},
            },
          ],
+          [fields.divider],
+          [fields.required],
+          [fields.unique],
        ];
+        const dynamiczoneItems = [[fields.max], [fields.min]];

        if (type === 'component') {
          if (step === '1') {
@ -334,24 +260,7 @@ const forms = {
              items: componentForm.advanced('componentToCreate.'),
            };
          } else {
-            const requiredItem = [
-              [
-                {
-                  autoFocus: false,
-                  name: 'required',
-                  type: 'checkbox',
-                  label: {
-                    id: getTrad('form.attribute.item.requiredField'),
-                  },
-                  description: {
-                    id: getTrad(
-                      'form.attribute.item.requiredField.description'
-                    ),
-                  },
-                  validations: {},
-                },
-              ],
-            ];
+            const requiredItem = [[fields.required]];

            return {
              items: data.repeatable
@ -368,12 +277,8 @@ const forms = {
        } else if (type === 'boolean') {
          items.splice(0, 1, [
            {
-              autoFocus: false,
-              name: 'default',
+              ...fields.default,
              type: 'enum',
-              label: {
-                id: getTrad('form.attribute.settings.default'),
-              },
              options: [
                { value: 'true', label: 'TRUE' },
                { value: '', label: 'NULL' },
@ -415,7 +320,7 @@ const forms = {
              ),
            },
          ]);
-          items.splice(1, 1, [
+          items.splice(1, 0, [
            {
              label: {
                id: getTrad('form.attribute.item.enumeration.graphql'),
@ -433,13 +338,8 @@ const forms = {
        } else if (type === 'date') {
          items.splice(0, 1, [
            {
-              autoFocus: false,
-              name: 'default',
+              ...fields.default,
              type: 'date',
-              label: {
-                id: getTrad('form.attribute.settings.default'),
-              },
-              validations: {},
              value: null,
              withDefaultValue: false,
              disabled: data.type !== 'date',
@ -512,24 +412,7 @@ const forms = {
          };
        }

-        const items = [
-          [
-            {
-              autoFocus: true,
-              name: 'name',
-              type: 'text',
-              label: {
-                id: getTrad('modalForm.attribute.form.base.name'),
-              },
-              description: {
-                id: getTrad('modalForm.attribute.form.base.name.description'),
-              },
-              validations: {
-                required: true,
-              },
-            },
-          ],
-        ];
+        const items = [[fields.name]];

        if (type === 'component' && step === '1') {
          const itemsToConcat =
@ -578,8 +461,6 @@ const forms = {
        }

        if (type === 'component' && step === '2') {
-          // items[0]
-
          items.push([
            {
              label: {
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/getModalTitleSubHeader.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/getModalTitleSubHeader.js
@ -8,8 +8,16 @@ const getModalTitleSubHeader = state => {
          state.forTarget === 'contentType' ? 'contentType' : 'component'
        }`
      );
-    case 'attribute':
-      return getTrad(`modalForm.sub-header.attribute.${state.actionType}`);
+    case 'attribute': {
+      // if (state.step) {
+      //   return getTrad(`modalForm.sub-header.attribute.${state.actionType}`);
+      // }
+      return getTrad(
+        `modalForm.sub-header.attribute.${state.actionType}${
+          state.step !== 'null' ? '.step' : ''
+        }`
+      );
+    }
    default:
      return getTrad('configurations');
  }
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/staticFields.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/utils/staticFields.js
@ -0,0 +1,74 @@
+import getTrad from '../../../utils/getTrad';
+
+const fields = {
+  default: {
+    autoFocus: true,
+    name: 'default',
+    type: 'text',
+    label: {
+      id: getTrad('form.attribute.settings.default'),
+    },
+    validations: {},
+  },
+  divider: {
+    type: 'divider',
+  },
+  max: {
+    autoFocus: false,
+    name: 'max',
+    type: 'customCheckboxWithChildren',
+    label: {
+      id: getTrad(`form.attribute.item.maximum`),
+    },
+    validations: {},
+  },
+  min: {
+    autoFocus: false,
+    name: 'min',
+    type: 'customCheckboxWithChildren',
+    label: {
+      id: getTrad(`form.attribute.item.minimum`),
+    },
+    validations: {},
+  },
+  name: {
+    autoFocus: true,
+    name: 'name',
+    type: 'text',
+    label: {
+      id: getTrad('modalForm.attribute.form.base.name'),
+    },
+    description: {
+      id: getTrad('modalForm.attribute.form.base.name.description'),
+    },
+    validations: {
+      required: true,
+    },
+  },
+  required: {
+    autoFocus: false,
+    name: 'required',
+    type: 'checkbox',
+    label: {
+      id: getTrad('form.attribute.item.requiredField'),
+    },
+    description: {
+      id: getTrad('form.attribute.item.requiredField.description'),
+    },
+    validations: {},
+  },
+  unique: {
+    autoFocus: false,
+    name: 'unique',
+    type: 'checkbox',
+    label: {
+      id: getTrad('form.attribute.item.uniqueField'),
+    },
+    description: {
+      id: getTrad('form.attribute.item.uniqueField.description'),
+    },
+    validations: {},
+  },
+};
+
+export default fields;
--- a/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json
+++ b/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json
@ -249,6 +249,7 @@
  "modalForm.sub-header.chooseAttribute.component": "Select a field for your component",
  "modalForm.sub-header.chooseAttribute.contentType": "Select a field for your content type",
  "modalForm.sub-header.attribute.create": "Add new {type} field",
+  "modalForm.sub-header.attribute.create.step": "Add new component ({step})/2)",
  "modalForm.sub-header.attribute.edit": "Edit {name}",
  "modalForm.components.create-component.category.label": "Select a category or enter a name to create a new one",
  "modalForm.components.icon.label": "Icon"