playlist basic crud

src/navigation/global/playllists.js

+import { Package, Briefcase, HardDrive, Globe, Flag } from 'react-feather'
+
+export default [
+  {
+    id: 'Playlists',
+    title: 'Playlists',
+    icon: <Package />,
+    children: [
+      {
+        id: 'playlistsDash',
+        title: 'Project Playlists',
+        icon: <Briefcase />,
+        navLink: '/playlists/projectplaylists'
+      }
+    ]
+  }
+]
\ No newline at end of file

src/navigation/horizontal/index.js

@@ -10,11 +10,13 @@ import chartsAndMaps from './charts-maps'
 import settings from './settings'
 import screens from '../global/screens'
 import menupages from '../global/pages'
+import playlists from '../global/playllists'
 
 // ** Merge & Export
 export default [
     // ...dashboards,
     ...screens,
+    ...playlists,
     ...menupages,
     ...settings
     // ...apps,

src/navigation/vertical/index.js

@@ -11,12 +11,14 @@ import chartsAndMaps from './charts-maps'
 import settings from './settings'
 import screens  from '../global/screens'
 import pages  from '../global/pages'
+import playlists from '../global/playllists'
 
 
 // ** Merge & Export
 export default [
     // ...dashboards,
     ...screens,
+    ...playlists,
     ...pages,
     ...settings
     // ...apps,

src/router/routes/index.js

@@ -12,7 +12,7 @@ import PageLayoutsRoutes from './PageLayouts'
 import SettingsRoutes from './Settings'
 import ScreensRoutes from './screens'
 import MenuPagesRoutes from './menupages'
-
+import PlaylistsRoutes from './playlists'
 // ** Document title
 const TemplateTitle = '%s - Vuexy React Admin Template'
 
@@ -32,6 +32,7 @@ const Routes = [
   ...ChartMapsRoutes,
 
   ...ScreensRoutes,
+  ...PlaylistsRoutes,
   ...MenuPagesRoutes,
   ...SettingsRoutes
 ]

src/router/routes/playlists.js

+import { lazy } from 'react'
+import { Redirect } from 'react-router-dom'
+
+const PlaylistsRoutes = [
+  // settingss
+
+  {
+    path: '/playlists/projectplaylists/edit',
+    exact: true,
+    component: () => <Redirect to='/playlists/projectplaylists/edit/1' />
+  },
+  {
+    path: '/playlists/projectplaylists/edit/:id',
+    component: lazy(() => import('../../views/playlists/projectplaylists/edit')),
+    meta: {
+      navLink: '/playlists/projectplaylists/edit'
+    }
+  },
+  {
+    path: '/playlists/projectplaylists/add',
+    component: lazy(() => import('../../views/playlists/projectplaylists/add')),
+    meta: {
+      navLink: '/playlists/projectplaylists/add'
+    }
+  },
+  {
+    path: '/playlists/projectplaylists',
+    component: lazy(() => import('../../views/playlists/projectplaylists'))
+  }
+ 
+]
+
+export default PlaylistsRoutes

src/views/menupages/mainpages/index.js

@@ -17,7 +17,7 @@ import moduleSettings from './module'
 const Tables = () => {
   return (
     <Fragment>
-      <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
+      <Breadcrumbs breadCrumbTitle='Pages' breadCrumbParent='Pages' breadCrumbActive={moduleSettings.mainTitle} />
       <Row>
         <Col sm='12'>
           <DataTable />

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

@@ -36,7 +36,7 @@ export const getData_menupages = params => {
         .then(response => {
           dispatch({
             type: 'ADD_MENUPAGE',
-            params: newparams
+            params
           })
         })
         .then(() => {

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

@@ -3,7 +3,7 @@ import { Fragment } from 'react'
 import { Link } from 'react-router-dom'
 
 // ** Store & Actions
-import { addmenupages } from '../../store/actions'
+import { addplaylist } from '../../store/actions'
 import { useDispatch } from 'react-redux'
 
 // ** Custom Components
@@ -23,24 +23,21 @@ const Tables = () => {
     const dispatch = useDispatch()
     const onSubmitHandler = values => {
             dispatch(
-              addmenupages({ 
+              addplaylist({ 
                 idproject: values.idproject,
-                system_name: values.system_name,
-                last_seen: values.last_seen,
-                layout_page_id: values.layout_page_id,
-                type: values.type,
-                display: values.display,
-                pagetypeid: values.pagetypeid,
-                order: values.order,
-                menu_page_layouts: values.menu_page_layouts
-            })
+                title: values.title,
+                layout_id: values.layout_id,
+                dynamic: values.dynamic,
+                special: values.special,
+                special_id: values.special_id
+              }
+            )
           )
-          
         }
 
   return (
     <Fragment>
-       <Breadcrumbs breadCrumbTitle='Pages' breadCrumbParent='Pages' breadCrumbActive={moduleSettings.mainTitle} />
+       <Breadcrumbs breadCrumbTitle='Playlists' breadCrumbParent='Playlists' breadCrumbActive={moduleSettings.mainTitle} />
       <Row>
         <Col sm='12'>
           <Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitle}</Link>

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

-import { Fragment, useState, useEffect, useRef, memo } from 'react'
-import {Media, Button, Label, Form, FormGroup, Input, Table, CustomInput, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, UncontrolledButtonDropdown } from 'reactstrap'
-
-// ** Store & Actions
-import { useDispatch } from 'react-redux'
-// ** Store & Actions
-import { getData_platforms } from  '../../../settings/store/actions'
-
-import { Lock, Edit, Trash2 } from 'react-feather'
-import { useForm } from 'react-hook-form'
-import classnames from 'classnames'
-import { circle } from 'leaflet'
-
-import moduleSettings from '../module'
-
-const ElementPlatform = ({dataElement, setElement, store}) => {
-    const dispatch = useDispatch(),
-        { register, errors, handleSubmit } = useForm()
-    const [plataforms, setPlataforms] = useState(null),
-    [selectedOption, setSelectedOption] = useState(null),
-    platformsIDs = [0]
-    
-
-    // console.log(dataElement)
-    // console.log(store)
-
-    // ** Function to get user on mount
-    useEffect(() => {
-        if (!store.allDataPlatforms || store.allDataPlatforms.length < 1) {
-              dispatch(getData_platforms({
-                start: 1,
-                length: 1000,
-                q: null
-            }))
-            }
-        }, [dispatch])
-
-    useEffect(() => {
-        setPlataforms(store.allDataPlatforms)
-        
-    }, [store.allDataPlatforms])
-
-    const handleGridChange = (value, index, field) => {
-        // console.log([value, index, field])
-
-        const newData = dataElement.platforms.map((platform, i) => {
-
-            if (i === index) platform.pivot[field] = value
-            // if (i === index) {   
-            //     if (field === 'type') platform.pivot.type = value      
-            //      if (field === 'slug') platform.pivot.slug = value
-                
-            // }
-
-        })
-        setElement(
-            {
-              ...dataElement
-            })
-    }
-
-return !!dataElement ?  (
-    <div clssName='permissions border mt-1'>   
-        <h6 className='py-1 mx-1 mb-0 font-medium-2'>
-        <Lock size={18} className='mr-25' />
-        <span className='align-middle'>Platforms</span>
-        </h6>
-         
-        <Table borderless striped responsive>
-        <thead className='thead-light'>
-            <tr>
-                <th>plataform</th>
-                
-                {
-                    Object.keys(moduleSettings.newElement).map(name => {
-                        return (
-                            <th>{name.split('_').join(' ')}</th>
-                        )
-                    })
-                }
-            </tr>
-        </thead>
-
-        <tbody>
-                {
-                !!dataElement && !!dataElement.platforms && dataElement.platforms.map((platform, index) => {
-                     const plataformsOptions = platform.pivot,
-                     locked = plataformsOptions.locked
-                     platformsIDs.push(`${platform.id}`)
-                    return (
-                        <tr  key={platform.id}>
-                            <td>{platform.name}</td>
-                            {
-                    Object.keys(moduleSettings.newElement).map(name => {
-                        return (
-                                <td >
-                                    <Input 
-                                        type={moduleSettings.elementsOption[name] ? 'select' : 'text'} 
-                                        name={name} 
-                                        id={name}
-                                        innerRef={register({ required: true })} 
-                                        placeholder='0' 
-                                        defaultValue={plataformsOptions && plataformsOptions[name]} 
-                                        className={classnames({ 'is-invalid': errors[{name}] })}
-                                        onChange={(e) => handleGridChange(e.target.value, index, name)}
-                                        >
-                                            {moduleSettings.elementsOption[name] ? moduleSettings.elementsOption[name].map((name, key) => {
-                                                return (
-                                                    <option key={key} name={name}>{name}</option>
-                                                )
-                                            }) : <span></span> }
-                                    </Input>         
-                                </td>
-                                )
-                            })
-                        }
-                         
-                            
-                        </tr>  
-                    )
-                })   
-                }
-        </tbody>
-        </Table>
-        
-        <Col md='12' sm='12'>
-            <br />
-        </Col>
-        <Row>
-       
-        <Col md='4' sm='4'>
-        <FormGroup>
-          <Label for='addoption'>Add Platforms</Label>
-          <Input type='select'  name='addoption' id='addoption' onChange={(e) => setSelectedOption(e.target.value)}>>
-            <option></option>
-            {!!plataforms && plataforms.map(option => {
-               
-                return  <option key={option.id} value={`${option.id}.${option.name}`}>{option.name}</option>
-            })}
-          </Input>
-          </FormGroup>
-      </Col>
-      <Col md='3' sm='4'>
-        <FormGroup>
-         <Label for='addoptionbutton'>&nbsp;</Label>
-         <Button.Ripple color='secondary' name="addoptionbutton" outline asyncOptions={e => console.log(e.getOptions)
-         } onClick={() => {
-             if (!selectedOption) return
-             const plataform = selectedOption.split('.')
-             if (platformsIDs.indexOf(plataform[0]) > 0) return
-             const elementAdded =   dataElement.platforms.push({ 
-                name:plataform[1],
-                id: plataform[0],
-                key: plataform[0],
-                pivot: moduleSettings.newElement
-               })
-             setElement(
-                 {
-                    ...dataElement,
-                    elementAdded
-                 }
-       
-             )
-
-         }} >
-          add
-        </Button.Ripple>
-        </FormGroup>
-      </Col>
-      
-      </Row> 
-    </div>
-    ) : (
-        <Fragment>
-
-        </Fragment>
-    )
-}
-export default ElementPlatform

src/views/playlists/projectplaylists/data.js

@@ -217,8 +217,8 @@ export const serverSideColumns = [
     minWidth: '25px'
   },
   {
-    name: 'System name',
-    selector: 'system_name',
+    name: 'Title',
+    selector: 'title',
     sortable: true,
     minWidth: '225px',
     cell: row => (
@@ -230,7 +230,7 @@ export const serverSideColumns = [
             className='user-name text-truncate mb-0'
             // onClick={() => store.dispatch(cleanLayoutMenu(row.id))}
           >
-            <span className='font-weight-bold'>{row.system_name}</span>
+            <span className='font-weight-bold'>{row.title}</span>
           </Link>
           <small className='text-truncate text-muted mb-0'>edit</small>
         </div>
@@ -238,8 +238,8 @@ export const serverSideColumns = [
     )
   },
   {
-    name: 'Order',
-    selector: 'order',
+    name: 'Dynamic',
+    selector: 'dynamic',
     sortable: true,
     minWidth: '225px'
   }

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

@@ -18,7 +18,7 @@ import moduleSettings from '../module'
 const Tables = () => {
   return (
     <Fragment>
-      <Breadcrumbs breadCrumbTitle='Pages' breadCrumbParent='Pages' breadCrumbActive={moduleSettings.mainTitle} />
+      <Breadcrumbs breadCrumbTitle='Playlists' breadCrumbParent='Playlists' breadCrumbActive={moduleSettings.mainTitle} />
       <Row>
         <Col sm='12'>
           <Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitleSingle}</Link>

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 { getmenupages, updatemenupages } from '../../store/actions'
+import { getplaylist, updateplaylist } from '../../store/actions'
 import { useSelector, useDispatch } from 'react-redux'
 
 
@@ -15,7 +15,7 @@ import moduleSettings from '../module'
 
 const ElementEdit = () => {
     // ** States & Vars
-    const store = useSelector(state => state.menupages),
+    const store = useSelector(state => state.playlists),
       [dataElement, setElementData] = useState(null),
       dispatch = useDispatch(),
       { id } = useParams()
@@ -23,16 +23,14 @@ const ElementEdit = () => {
     const onSubmitHandler = values => {
       console.log(values)
       dispatch(
-          updatemenupages({
+          updateplaylist({
               ...dataElement,
               idproject: values.idproject,
-              system_name: values.system_name,
-              last_seen: values.last_seen,
-              layout_page_id: values.layout_page_id,
-              type: values.type,
-              display: values.display,
-              pagetypeid: values.pagetypeid,
-              order: values.order
+              title: values.title,
+              layout_id: values.layout_id,
+              dynamic: values.dynamic,
+              special: values.special,
+              special_id: values.special_id
           })
         )
       
@@ -40,21 +38,21 @@ const ElementEdit = () => {
 
     // ** Function to get user on mount
     useEffect(() => {
-      dispatch(getmenupages(id))
+      dispatch(getplaylist(id))
     }, [dispatch])
 
 
           // ** Update user image on mount or change
   useEffect(() => {
-    if (store.selectedMenuPage !== null || (store.selectedMenuPage !== null && dataElement !== null && store.selectedMenuPage.id !== dataElement.id)) {
-      return setElementData(store.selectedMenuPage) 
+    if (store.selectedPlaylist !== null || (store.selectedPlaylist !== null && dataElement !== null && store.selectedPlaylist.id !== dataElement.id)) {
+      return setElementData(store.selectedPlaylist) 
     }
-  }, [store.selectedMenuPage])
+  }, [store.selectedPlaylist])
 
    
-  return store.selectedMenuPage !== null && store.selectedMenuPage !== undefined  ? (
+  return store.selectedPlaylist !== null && store.selectedPlaylist !== undefined  ? (
     <ElementCard 
-      selectedElement={store.selectedMenuPage} 
+      selectedElement={store.selectedPlaylist} 
       onSubmitHandler={onSubmitHandler} 
     /> 
   ) : (

src/views/playlists/projectplaylists/index.js

@@ -17,7 +17,7 @@ import moduleSettings from './module'
 const Tables = () => {
   return (
     <Fragment>
-      <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
+      <Breadcrumbs breadCrumbTitle='Playlists' breadCrumbParent='Playlists' breadCrumbActive={moduleSettings.mainTitle} />
       <Row>
         <Col sm='12'>
           <DataTable />

src/views/playlists/projectplaylists/table.js

@@ -3,7 +3,7 @@ import { Fragment, useState, useEffect, memo } from 'react'
 // ** Table Columns
 import { serverSideColumns } from './data'
 // ** Store & Actions
-import { getData_menupages } from '../store/actions'
+import { getData_playlists } from '../store/actions'
 import { useSelector, useDispatch } from 'react-redux'
 
 import DataTableServerSide from '@components/datatable'
@@ -12,16 +12,16 @@ import moduleSettings from './module'
 const DataTable = () => {
     // ** Store Vars
     const dispatch = useDispatch()
-    const store = useSelector(state => state.menupages)
+    const store = useSelector(state => state.playlists)
 
     return (
         <DataTableServerSide 
             cardTitle={moduleSettings.mainTitle}
-            allData={store.allDataMenuPages}
-            getData={getData_menupages} 
+            allData={store.allDataPlaylists}
+            getData={getData_playlists} 
             serverSideColumns={serverSideColumns}
             linkAddButton={`${moduleSettings.baseURL}/add`} 
-            total={store.totalMenuPages}
+            total={store.totalPlaylists}
          />
 
     )

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

@@ -36,7 +36,7 @@ export const getData_playlists = params => {
         .then(response => {
           dispatch({
             type: 'ADD_PLAYLIST',
-            params: newparams
+            params
           })
         })
         .then(() => {

src/views/playlists/store/reducer/index.js

@@ -49,7 +49,7 @@ const playlists = (state = initialState, action) => {
             return { ...state,  
               selectedPlaylist : action.data
             }
-      case 'GET_MENUPLAYLIST':
+      case 'GET_PLAYLIST':
         return { ...state,  
           selectedPlaylist : action.data
         }