delete pagesmenus and playlists UI

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

@@ -48,7 +48,7 @@ const SuccessProgressToast = () => (
 )
 
 
-const ElementCard = ({ selectedElement, onSubmitHandler }) => {
+const ElementCard = ({ selectedElement, onSubmitHandler, handelDelete }) => {
   const store = useSelector(state => state.projectsettings)
   const [PlatformName, setPlatformName] = useState('Web'),
   [projectPlaylists, setProjectPlaylists] = useState(null)
@@ -389,9 +389,11 @@ return (
         <Button.Ripple className='mb-1 mb-sm-0 mr-0 mr-sm-1' type='submit' color='primary'>
           Save Changes
         </Button.Ripple>
-        {/* <Button.Ripple color='secondary' outline  onClick={() => dispatch(getPlatform(selectedElement.id))} >
-          Reset
-        </Button.Ripple> */}
+        { !!handelDelete && 
+        <Button.Ripple style={{marginLeft: 'auto'}}  color='danger' outline  onClick={() => handelDelete()} >
+          Delete
+        </Button.Ripple>
+        }
       </Col>
     </Row>
   </Form>

src/views/menupages/mainpages/edit/main.js

@@ -2,7 +2,7 @@ import { useState, useEffect, Fragment } from 'react'
 import { useParams, Link } from 'react-router-dom'
  
 // ** Store & Actions
-import { getmenupages, updatemenupages } from '../../store/actions'
+import { getmenupages, updatemenupages, deletePage } from '../../store/actions'
 import { useSelector, useDispatch } from 'react-redux'
 
 
@@ -38,6 +38,12 @@ const ElementEdit = () => {
       
       }
 
+    const handelDelete = () => {
+      if (!confirm('Delete')) return
+      dispatch(
+        deletePage({ ...dataElement })
+        )
+    }  
     // ** Function to get user on mount
     useEffect(() => {
       dispatch(getmenupages(id))
@@ -56,6 +62,7 @@ const ElementEdit = () => {
     <ElementCard 
       selectedElement={store.selectedMenuPage} 
       onSubmitHandler={onSubmitHandler} 
+      handelDelete={handelDelete}
     /> 
   ) : (
     <Alert color='info'>

src/views/menupages/store/actions/pages.js

@@ -108,3 +108,25 @@ export const getData_menupages = params => {
       }
       return _getData_menupages(newparams)
   }  
+
+  export const deletePage = params => {
+    return (dispatch, getState) => {
+      axios
+        .delete(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}/${params.id}`, params)
+        .then(response => {
+          dispatch({
+            type: 'GET_MENUPAGE',
+            data: null
+          })
+        })
+        .then(() => {
+          dispatch(setSaveSatus(true))
+        })
+        .catch(err => { 
+          const errosMsg = !err.response ? 'error' : err.response.data.message
+          console.log(errosMsg)
+          dispatch(setErrorMsg(errosMsg))
+        })
+    }
+  }
+  
\ No newline at end of file

src/views/playlists/projectplaylists/card/index.js

@@ -51,7 +51,7 @@ const SuccessProgressToast = () => (
 )
 
 
-const ElementCard = ({ selectedElement, onSubmitHandler }) => {
+const ElementCard = ({ selectedElement, onSubmitHandler, handelDelete }) => {
   const store = useSelector(state => state.projectsettings)
   const [PlatformName, setPlatformName] = useState('Web')
 
@@ -311,9 +311,11 @@ return (
         <Button.Ripple className='mb-1 mb-sm-0 mr-0 mr-sm-1' type='submit' color='primary'>
           Save Changes
         </Button.Ripple>
-        {/* <Button.Ripple color='secondary' outline  onClick={() => dispatch(getPlatform(selectedElement.id))} >
-          Reset
-        </Button.Ripple> */}
+        { !!handelDelete && 
+        <Button.Ripple style={{marginLeft: 'auto'}}  color='danger' outline  onClick={() => handelDelete()} >
+          Delete
+        </Button.Ripple>
+        }
       </Col>
     </Row>
   </Form>

src/views/playlists/projectplaylists/edit/main.js

@@ -2,7 +2,7 @@ import { useState, useEffect, Fragment } from 'react'
 import { useParams, Link } from 'react-router-dom'
  
 // ** Store & Actions
-import { getplaylist, updateplaylist } from '../../store/actions'
+import { getplaylist, updateplaylist, deletePlaylist } from '../../store/actions'
 import { useSelector, useDispatch } from 'react-redux'
 
 
@@ -37,6 +37,12 @@ const ElementEdit = () => {
       
       }
 
+      const handelDelete = () => {
+        if (!confirm('Delete')) return
+        dispatch(
+          deletePlaylist({ ...dataElement })
+          )
+      }  
     // ** Function to get user on mount
     useEffect(() => {
       dispatch(getplaylist(id))
@@ -55,6 +61,7 @@ const ElementEdit = () => {
     <ElementCard 
       selectedElement={store.selectedPlaylist} 
       onSubmitHandler={onSubmitHandler} 
+      handelDelete={handelDelete}
     /> 
   ) : (
     <Alert color='info'>

src/views/playlists/store/actions/playlists.js

@@ -106,3 +106,25 @@ export const getData_playlists = params => {
         })
     }
   }
+
+  export const deletePlaylist = params => {
+    return (dispatch, getState) => {
+      axios
+        .delete(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}/${params.id}`, params)
+        .then(response => {
+          dispatch({
+            type: 'GET_PLAYLIST',
+            data: null
+          })
+        })
+        .then(() => {
+          dispatch(setSaveSatus(true))
+        })
+        .catch(err => { 
+          const errosMsg = !err.response ? 'error' : err.response.data.message
+          console.log(errosMsg)
+          dispatch(setErrorMsg(errosMsg))
+        })
+    }
+  }
+  
\ No newline at end of file