remove blovk ui

src/views/menupages/mainpages/card/index.js

@@ -112,7 +112,18 @@ const handleError = (text) => {
         setElementData(newData)
         setActiveTab(newData.menu_page_layouts.length - 1)
       //  console.log(newData)
-        } 
+        }, 
+      handleRMBlock = (value) => {
+        console.log(`Removing Block ${value}`)
+        const data = [...dataElement.menu_page_layouts]
+        const newData = data.filter((item, index) => index !== value)
+        setActiveTab(0)
+        setElementData({
+          ...dataElement,
+          menu_page_layouts : newData
+        })
+
+      }  
 
 
   useEffect(() => {
@@ -357,7 +368,7 @@ return (
               >
                 {!!dataElement && dataElement.menu_page_layouts.map((block, index) => {
                   return <TabPane tabId={index} key={index}>
-                        <TabLayoutPlaylist block={block} selectedDataElement={dataElement} setElementData={setElementData} />
+                        <TabLayoutPlaylist block={block} tabId={index} handleRMBlock={dataElement.menu_page_layouts.length > 1 ? handleRMBlock : null } selectedDataElement={dataElement} setElementData={setElementData} />
                       </TabPane>
                     }
                   )

src/views/menupages/mainpages/card/tablayoutplaylists.js

@@ -12,7 +12,7 @@ import { DivideCircle } from 'react-feather'
 // import { Button } from 'bootstrap'
 import ManagePlaylist from './manageplaylist'
 
-const TabLayoutPlaylist = ({block, selectedDataElement, setElementData}) => {
+const TabLayoutPlaylist = ({block, selectedDataElement, setElementData, tabId, handleRMBlock}) => {
     const [dataElement, setDataElement] = useState(null),
         [layoutPlaylists, setLayoutPlaylists] = useState(null),
         dispatch = useDispatch(),
@@ -68,8 +68,14 @@ const TabLayoutPlaylist = ({block, selectedDataElement, setElementData}) => {
            <div className="card">
              <div className="card-header">
                 {/* <h4 className="card-title">ElementCard {dataElement && dataElement.id} </h4> */}
+                { !!handleRMBlock && <div style={{marginLeft: 'auto', textDecoration: 'underline', cursor:'pointer'}}
+                    onClick={ () => confirm(`Remove block ${tabId + 1}`) && handleRMBlock(tabId)}
+                    >
+                       Remove block {tabId + 1}
+                       </div> }
             </div>
                <div className="card-body">
+               
                <Row>
                     <Col md='4' sm='12'>
                         <FormGroup>