Handle delete compo from dz

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentCard/index.js

@@ -12,8 +12,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import useDataManager from '../../hooks/useDataManager';
 import Wrapper from './Wrapper';
 
-function ComponentCard({ component, isActive, onClick }) {
-  const { modifiedData } = useDataManager();
+function ComponentCard({ component, dzName, index, isActive, onClick }) {
+  const { modifiedData, removeComponentFromDynamicZone } = useDataManager();
 
   const getComponentSchema = componentName => {
     return get(modifiedData, ['components', componentName], {
@@ -31,6 +31,14 @@ function ComponentCard({ component, isActive, onClick }) {
         <FontAwesomeIcon icon={icon} />
       </div>
       <p>{component}</p>
+      <p
+        onClick={e => {
+          e.stopPropagation();
+          removeComponentFromDynamicZone(dzName, index);
+        }}
+      >
+        X
+      </p>
     </Wrapper>
   );
 }
@@ -43,6 +51,8 @@ ComponentCard.defaultProps = {
 
 ComponentCard.propTypes = {
   component: PropTypes.string,
+  dzName: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
   isActive: PropTypes.bool,
   onClick: PropTypes.func,
 };

packages/strapi-plugin-content-type-builder/admin/src/components/DynamicZoneList/index.js

@@ -51,6 +51,8 @@ function DynamicZoneList({
                 return (
                   <li key={component}>
                     <ComponentCard
+                      dzName={name}
+                      index={index}
                       component={component}
                       isActive={activeTab === `${index}`}
                       onClick={() => {

packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/index.js

@@ -5,18 +5,17 @@ import { FormattedMessage } from 'react-intl';
 import { AttributeIcon } from '@buffetjs/core';
 
 import pluginId from '../../pluginId';
+import useDataManager from '../../hooks/useDataManager';
 
 import Wrapper from './Wrapper';
 // TODO fix merge conflict
-// import Component from '../../icons/Component';
+import Component from '../../icons/Component';
 
 function ListRow({
-  attributeName,
   configurable,
   name,
   nature,
   onClick,
-  onClickDelete,
   plugin,
   target,
   targetUid,
@@ -28,6 +27,7 @@ function ListRow({
   secondLoopComponentName,
   secondLoopComponentUid,
 }) {
+  const { removeAttribute } = useDataManager();
   const ico = ['integer', 'biginteger', 'float', 'decimal'].includes(type)
     ? 'number'
     : type;
@@ -81,7 +81,7 @@ function ListRow({
     >
       <td>
         <AttributeIcon key={src} type={src} />
-        {/* <Component fill="#f3f4f4" /> */}
+        <Component fill="#f3f4f4" />
       </td>
       <td styles={{ fontWeight: 600 }}>
         <p>{name}</p>
@@ -118,7 +118,11 @@ function ListRow({
               onClick={e => {
                 e.stopPropagation();
 
-                onClickDelete(attributeName);
+                removeAttribute(
+                  editTarget,
+                  name,
+                  secondLoopComponentUid || firstLoopComponentUid || ''
+                );
               }}
             >
               <i className="fas fa-trash-alt link-icon" />
@@ -148,7 +152,6 @@ ListRow.defaultProps = {
 };
 
 ListRow.propTypes = {
-  attributeName: PropTypes.string.isRequired,
   configurable: PropTypes.bool,
   editTarget: PropTypes.string.isRequired,
   firstLoopComponentName: PropTypes.string,
@@ -157,7 +160,6 @@ ListRow.propTypes = {
   name: PropTypes.string.isRequired,
   nature: PropTypes.string,
   onClick: PropTypes.func,
-  onClickDelete: PropTypes.func,
   plugin: PropTypes.string,
   secondLoopComponentName: PropTypes.string,
   secondLoopComponentUid: PropTypes.string,

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

@@ -427,6 +427,8 @@ const DataManagerProvider = ({ allIcons, children }) => {
     });
   };
 
+  console.log({ modifiedData });
+
   return (
     <DataManagerContext.Provider
       value={{

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

@@ -926,7 +926,6 @@ const FormModal = () => {
     ? { paddingTop: '0.5rem', paddingBottom: '3rem' }
     : {};
 
-  console.log({ modifiedData });
   return (
     <Modal
       isOpen={isOpen}

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

@@ -112,13 +112,6 @@ const ListPage = () => {
   ) => {
     let attributeType;
 
-    console.log({
-      headerDisplayName,
-      headerDisplayCategory,
-      headerDisplaySubCategory,
-      subTargetUid,
-    });
-
     switch (type) {
       case 'integer':
       case 'biginteger':
@@ -137,11 +130,6 @@ const ListPage = () => {
         attributeType = type;
     }
 
-    // const step = type === 'component' ? '&step=2' : '';
-    // const displayCategory = headerDisplayCategory
-    //   ? `&headerDisplayCategory=${headerDisplayCategory}`
-    //   : '';
-
     await wait();
 
     const search = {
@@ -162,24 +150,8 @@ const ListPage = () => {
     await wait();
 
     push({ search: makeSearch(search, true) });
-
-    // push({
-    //   search: `modalType=attribute&actionType=edit&settingType=base&forTarget=${forTarget}&targetUid=${targetUid}&attributeName=${attrName}&attributeType=${attributeType}&headerDisplayName=${headerDisplayName}${step}${displayCategory}`,
-    // });
   };
 
-  // const handleClickEditMain = () => {
-  //   push({
-  //     search: `modalType=${firstMainDataPath}&settingType=base&actionType=edit&forTarget=${forTarget}&targetUid=${targetUid}&headerDisplayName=${currentDataName}`,
-  //   });
-  //   emitEvent('willEditNameOfGroup');
-  // };
-
-  // const handleClickEditComponent = compoName => {
-  //   const search = `modalType=attribute&actionType=edit&settingType=base&forTarget=${forTarget}&targetUid=${targetUid}&attributeName=${attrName}&attributeType=${attributeType}&headerDisplayName=${headerDisplayName}`,
-  //   push({ search });
-  // }
-
   const getDescription = () => {
     const description = get(
       modifiedData,