pesented manu layout playlist

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

@@ -8,6 +8,7 @@ import classnames from 'classnames'
 
 import { getData_menupagesplaylists, updatemenupages } from '../../store/actions'
 import DataTableServerSide from '@components/datatable'
+import { element } from 'prop-types'
 
 // ** Table Server Side Column
 const serverSideColumns = [
@@ -18,18 +19,20 @@ const serverSideColumns = [
       minWidth: '25px'
     },
     {
-      name: 'System name',
-      selector: 'system_name',
+      name: 'Title',
+      selector: 'title',
       sortable: true,
       minWidth: '225px'
     }
   ]
    
 
-const ManagePlaylist = (ElementID) => { 
+const ManagePlaylist = (dataElement) => { 
     const store = useSelector(state => state.menupages),
     [avaliablePlaylists, setavaliablePlaylists] = useState([]),
-    [selectedPlaylists, setSelectedPlaylists] = useState([])
+    [selectedPlaylists, setSelectedPlaylists] = useState([]),
+    dispatch = useDispatch()
+
 
     const handleAdd = (value) => {
         const newValue = selectedPlaylists.concat(value)
@@ -38,8 +41,19 @@ const ManagePlaylist = (ElementID) => {
     const handleRemove = (value) => {
         const newValue = selectedPlaylists.filter(element => element.id !== value.id)
         setSelectedPlaylists(newValue)
-        }  
-        const  serverSideColumnsLeft = [
+        } 
+    const getData_selectedPlaylists = (params) => {
+        return (dispatch) => {
+            if (params.q === '') {
+                setSelectedPlaylists(dataElement.dataElement) 
+                return
+            }
+            const newValue = dataElement.dataElement.filter(element => element.title.includes(params.q))
+            setSelectedPlaylists(newValue)
+        }
+    }    
+        
+    const  serverSideColumnsLeft = [
             ...serverSideColumns,
             {
             name: 'Action',
@@ -93,6 +107,12 @@ const ManagePlaylist = (ElementID) => {
         setavaliablePlaylists(filtered)
       }, [selectedPlaylists])
 
+      useEffect(() => {
+          if (dataElement !== null  && dataElement.dataElement !== null) {
+             setSelectedPlaylists(dataElement.dataElement)   
+          } 
+      }, [dataElement])
+
     return <div className="card">
         <div className="card-header">
             <h4 className="card-title">playlist</h4>
@@ -103,7 +123,7 @@ const ManagePlaylist = (ElementID) => {
                     <DataTableServerSide 
                         cardTitle='Content'
                         allData={selectedPlaylists}
-                        getData={getData_menupagesplaylists} 
+                        getData={getData_selectedPlaylists} 
                         serverSideColumns={serverSideColumnsLeft}
                         // linkAddButton={`/add`} 
                         total={selectedPlaylists.length}

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

@@ -112,7 +112,7 @@ const TabLayoutPlaylist = ({block, selectedDataElement, setElementData}) => {
                </div>
             </div>
 
-            <ManagePlaylist ElementID={dataElement && dataElement.layout_id}  />  
+            <ManagePlaylist dataElement={dataElement && dataElement.playlists}  />  
 
           </Col>