Init edit fields

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

@@ -35,6 +35,7 @@ const NAVLINKS = [{ id: 'base' }, { id: 'advanced' }];
 
 const FormModal = () => {
   const initialStateData = {
+    attributeName: null,
     actionType: null,
     modalType: null,
     settingType: null,
@@ -62,11 +63,15 @@ const FormModal = () => {
   useEffect(() => {
     if (!isEmpty(search)) {
       // Return 'null' if there isn't any attributeType search params
+      //TODO need targetUID
+      // TODO change target by targetUID & add displayName instead of target
       const attributeType = query.get('attributeType');
       const modalType = query.get('modalType');
+      const actionType = query.get('actionType');
 
       setState({
-        actionType: query.get('actionType'),
+        attributeName: query.get('attributeName'),
+        actionType,
         modalType,
         settingType: query.get('settingType'),
         forTarget: query.get('forTarget'),
@@ -83,6 +88,7 @@ const FormModal = () => {
         dispatch({
           type: 'SET_ATTRIBUTE_DATA_SCHEMA',
           attributeType,
+          isEditing: actionType === 'edit',
         });
       }
     }
@@ -292,6 +298,7 @@ const FormModal = () => {
                     id: getTrad(`attribute.${state.attributeType}`),
                   })
                 ),
+                name: upperFirst(state.attributeName),
               }}
             >
               {msg => <span>{upperFirst(msg)}</span>}

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

@@ -8,6 +8,7 @@ import LeftMenu from '../LeftMenu';
 const ListPage = () => {
   const { pathname } = useLocation();
   const {
+    components,
     initialData,
     modifiedData,
     isInContentTypeView,
@@ -22,15 +23,45 @@ const ListPage = () => {
   }, [pathname]);
 
   const attributes = get(modifiedData, ['schema', 'attributes'], {});
+  const currentDataName = get(initialData, ['schema', 'name'], '');
 
   const handleClick = () => {
-    const currentDataName = get(initialData, ['schema', 'name'], '');
     const forTarget = isInContentTypeView ? 'contentType' : 'component';
-    const search = `modalType=chooseAttribute&forTarget=${forTarget}&targetr=${currentDataName}`;
+    const search = `modalType=chooseAttribute&forTarget=${forTarget}&target=${currentDataName}`;
     push({ search });
   };
+  // TODO just a util not sure it should be kept
+  const getType = attrName => {
+    return get(modifiedData, ['schema', 'attributes', attrName, 'type'], '');
+  };
+  const getComponentSchema = attrName => {
+    const componentToGet = get(
+      modifiedData,
+      ['schema', 'attributes', attrName, 'component'],
+      ''
+    );
+    const componentSchema = get(
+      components,
+      [componentToGet, 'schema', 'attributes'],
+      {}
+    );
 
-  console.log({ allSchema: modifiedData });
+    return componentSchema;
+  };
+  const handleClickEditField = (forTarget, target, attrName, type) => {
+    const attributeType = [
+      'integer',
+      'biginteger',
+      'decimal',
+      'float',
+    ].includes(type)
+      ? 'number'
+      : type;
+
+    push({
+      search: `modalType=attribute&actionType=edit&settingType=base&forTarget=${forTarget}&target=${target}&attributeName=${attrName}&attributeType=${attributeType}`,
+    });
+  };
 
   return (
     <ViewContainer>
@@ -41,10 +72,60 @@ const ListPage = () => {
             <button type="button" onClick={handleClick}>
               Add field
             </button>
+
+            {/* REALLY TEMPORARY SINCE IT DOESN T SUPPORT ANY NESTING COMPONENT*/}
             <ul>
-              {Object.keys(attributes).map(attr => (
-                <li key={attr}>{attr}</li>
-              ))}
+              {Object.keys(attributes).map(attr => {
+                const type = getType(attr);
+
+                if (type === 'component') {
+                  const componentSchema = getComponentSchema(attr);
+                  // TODO edit component field name & other stuff
+                  // TODO edit component's fields
+                  return (
+                    <li key={attr}>
+                      <span>{attr}</span>
+                      &nbsp:
+                      <span>component</span>
+                      <ul>
+                        {Object.keys(componentSchema).map(componentAttr => {
+                          const componentAttrType = get(
+                            componentSchema,
+                            [componentAttr, 'type'],
+                            ''
+                          );
+
+                          return (
+                            <li key={`${attr}.${componentAttr}`}>
+                              <span>{componentAttr}</span>
+                              &nbsp;
+                              <span>{componentAttrType}</span>
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    </li>
+                  );
+                }
+
+                return (
+                  <li
+                    key={attr}
+                    onClick={() =>
+                      handleClickEditField(
+                        'contentType',
+                        currentDataName,
+                        attr,
+                        type
+                      )
+                    }
+                  >
+                    <span>{attr}</span>
+                    &nbsp;
+                    <span>{type}</span>
+                  </li>
+                );
+              })}
             </ul>
           </div>
         </div>

packages/strapi-plugin-content-type-builder/admin/src/translations/en.json

@@ -241,5 +241,6 @@
   "modalForm.header-edit": "Edit {name}",
   "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": "Add new {type} field",
+  "modalForm.sub-header.attribute.edit": "Edit {name}"
 }