Commit 267ca079 authored by PDuarte's avatar PDuarte

playlist basic crud

parent 9797b0aa
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
...@@ -10,11 +10,13 @@ import chartsAndMaps from './charts-maps' ...@@ -10,11 +10,13 @@ import chartsAndMaps from './charts-maps'
import settings from './settings' import settings from './settings'
import screens from '../global/screens' import screens from '../global/screens'
import menupages from '../global/pages' import menupages from '../global/pages'
import playlists from '../global/playllists'
// ** Merge & Export // ** Merge & Export
export default [ export default [
// ...dashboards, // ...dashboards,
...screens, ...screens,
...playlists,
...menupages, ...menupages,
...settings ...settings
// ...apps, // ...apps,
......
...@@ -11,12 +11,14 @@ import chartsAndMaps from './charts-maps' ...@@ -11,12 +11,14 @@ import chartsAndMaps from './charts-maps'
import settings from './settings' import settings from './settings'
import screens from '../global/screens' import screens from '../global/screens'
import pages from '../global/pages' import pages from '../global/pages'
import playlists from '../global/playllists'
// ** Merge & Export // ** Merge & Export
export default [ export default [
// ...dashboards, // ...dashboards,
...screens, ...screens,
...playlists,
...pages, ...pages,
...settings ...settings
// ...apps, // ...apps,
......
...@@ -12,7 +12,7 @@ import PageLayoutsRoutes from './PageLayouts' ...@@ -12,7 +12,7 @@ import PageLayoutsRoutes from './PageLayouts'
import SettingsRoutes from './Settings' import SettingsRoutes from './Settings'
import ScreensRoutes from './screens' import ScreensRoutes from './screens'
import MenuPagesRoutes from './menupages' import MenuPagesRoutes from './menupages'
import PlaylistsRoutes from './playlists'
// ** Document title // ** Document title
const TemplateTitle = '%s - Vuexy React Admin Template' const TemplateTitle = '%s - Vuexy React Admin Template'
...@@ -32,6 +32,7 @@ const Routes = [ ...@@ -32,6 +32,7 @@ const Routes = [
...ChartMapsRoutes, ...ChartMapsRoutes,
...ScreensRoutes, ...ScreensRoutes,
...PlaylistsRoutes,
...MenuPagesRoutes, ...MenuPagesRoutes,
...SettingsRoutes ...SettingsRoutes
] ]
......
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
...@@ -17,7 +17,7 @@ import moduleSettings from './module' ...@@ -17,7 +17,7 @@ import moduleSettings from './module'
const Tables = () => { const Tables = () => {
return ( return (
<Fragment> <Fragment>
<Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} /> <Breadcrumbs breadCrumbTitle='Pages' breadCrumbParent='Pages' breadCrumbActive={moduleSettings.mainTitle} />
<Row> <Row>
<Col sm='12'> <Col sm='12'>
<DataTable /> <DataTable />
......
...@@ -36,7 +36,7 @@ export const getData_menupages = params => { ...@@ -36,7 +36,7 @@ export const getData_menupages = params => {
.then(response => { .then(response => {
dispatch({ dispatch({
type: 'ADD_MENUPAGE', type: 'ADD_MENUPAGE',
params: newparams params
}) })
}) })
.then(() => { .then(() => {
......
...@@ -3,7 +3,7 @@ import { Fragment } from 'react' ...@@ -3,7 +3,7 @@ import { Fragment } from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
// ** Store & Actions // ** Store & Actions
import { addmenupages } from '../../store/actions' import { addplaylist } from '../../store/actions'
import { useDispatch } from 'react-redux' import { useDispatch } from 'react-redux'
// ** Custom Components // ** Custom Components
...@@ -23,24 +23,21 @@ const Tables = () => { ...@@ -23,24 +23,21 @@ const Tables = () => {
const dispatch = useDispatch() const dispatch = useDispatch()
const onSubmitHandler = values => { const onSubmitHandler = values => {
dispatch( dispatch(
addmenupages({ addplaylist({
idproject: values.idproject, idproject: values.idproject,
system_name: values.system_name, title: values.title,
last_seen: values.last_seen, layout_id: values.layout_id,
layout_page_id: values.layout_page_id, dynamic: values.dynamic,
type: values.type, special: values.special,
display: values.display, special_id: values.special_id
pagetypeid: values.pagetypeid, }
order: values.order,
menu_page_layouts: values.menu_page_layouts
})
) )
)
} }
return ( return (
<Fragment> <Fragment>
<Breadcrumbs breadCrumbTitle='Pages' breadCrumbParent='Pages' breadCrumbActive={moduleSettings.mainTitle} /> <Breadcrumbs breadCrumbTitle='Playlists' breadCrumbParent='Playlists' breadCrumbActive={moduleSettings.mainTitle} />
<Row> <Row>
<Col sm='12'> <Col sm='12'>
<Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitle}</Link> <Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitle}</Link>
......
...@@ -11,13 +11,13 @@ import { isObjEmpty } from '@utils' ...@@ -11,13 +11,13 @@ import { isObjEmpty } from '@utils'
import { Bell, Check, X, AlertTriangle, Info } from 'react-feather' import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
import TabLayoutPlaylist from './tablayoutplaylists' // import TabLayoutPlaylist from './tablayoutplaylists'
// ** Store & Actions // ** Store & Actions
import {resetResults} from '../../store/actions' import {resetResults} from '../../store/actions'
import { getData_pagetypes } from '../../../settings/store/actions' import { getData_pagetypes } from '../../../settings/store/actions'
import { getData_layoutmenus } from '../../../screens/store/actions' import { getData_layoutPlaylists } from '../../../screens/store/actions'
import { useForm } from 'react-hook-form' import { useForm } from 'react-hook-form'
...@@ -71,7 +71,7 @@ const handleError = (text) => { ...@@ -71,7 +71,7 @@ const handleError = (text) => {
settingStore = useSelector(state => state.projectsettings), settingStore = useSelector(state => state.projectsettings),
screensStore = useSelector(state => state.screens), screensStore = useSelector(state => state.screens),
[pagetypes, setPagetypes] = useState(null), [pagetypes, setPagetypes] = useState(null),
[layoumenu, setLayoumenu] = useState(null), [layoutplaylists, setLayoutplaylists] = useState(null),
[activeTab, setActiveTab] = useState(0), [activeTab, setActiveTab] = useState(0),
// //
toggle = tab => setActiveTab(tab), toggle = tab => setActiveTab(tab),
...@@ -82,13 +82,11 @@ const handleError = (text) => { ...@@ -82,13 +82,11 @@ const handleError = (text) => {
const submitElement = { const submitElement = {
...dataElement, ...dataElement,
idproject: values.idproject, idproject: values.idproject,
system_name: values.system_name, title: values.title,
last_seen: values.last_seen, layout_id: values.layout_id,
layout_page_id: values.layout_page_id, dynamic: values.dynamic,
type: values.type, special: values.special,
display: values.display, special_id: values.special_id
pagetypeid: values.pagetypeid,
order: values.order
} }
onSubmitHandler(submitElement) onSubmitHandler(submitElement)
...@@ -146,8 +144,8 @@ const handleError = (text) => { ...@@ -146,8 +144,8 @@ const handleError = (text) => {
// populate layout menus // populate layout menus
useEffect(() => { useEffect(() => {
if (!screensStore.allDataLayoutMenus || screensStore.allDataLayoutMenus.length < 1) { if (!screensStore.allDataLayoutPlaylists || screensStore.allDataLayoutPlaylists.length < 1) {
dispatch(getData_layoutmenus({ dispatch(getData_layoutPlaylists({
start: 1, start: 1,
length: 1000, length: 1000,
q: null q: null
...@@ -155,8 +153,8 @@ const handleError = (text) => { ...@@ -155,8 +153,8 @@ const handleError = (text) => {
} }
}, [dispatch]) }, [dispatch])
useEffect(() => { useEffect(() => {
setLayoumenu(screensStore.allDataLayoutMenus) setLayoutplaylists(screensStore.allDataLayoutPlaylists)
}, [screensStore.allDataLayoutMenus]) }, [screensStore.allDataLayoutPlaylists])
return ( return (
...@@ -195,33 +193,33 @@ return ( ...@@ -195,33 +193,33 @@ return (
</Col> </Col>
<Col md='4' sm='12'> <Col md='4' sm='12'>
<FormGroup> <FormGroup>
<Label for='system_name'>System name</Label> <Label for='title'>Title</Label>
<Input <Input
type='text' type='text'
name='system_name' name='title'
id='system_name' id='title'
innerRef={register({ required: true })} innerRef={register({ required: true })}
placeholder='system_name' placeholder='title'
defaultValue={dataElement && dataElement.system_name} defaultValue={dataElement && dataElement.title}
className={classnames({ 'is-invalid': errors['system_name'] })} className={classnames({ 'is-invalid': errors['title'] })}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
<Col md='4' sm='12'> <Col md='4' sm='12'>
<FormGroup> <FormGroup>
<Label for='layout_page_id'>Layout page</Label> <Label for='layout_id'>Layout Playlist</Label>
<Input <Input
type='select' type='select'
name='layout_page_id' name='layout_id'
id='layout_page_id' id='layout_id'
innerRef={register({ required: true })} innerRef={register({ required: true })}
placeholder='layout_page_id' placeholder='layout_id'
defaultValue={dataElement && dataElement.layout_page_id} defaultValue={dataElement && dataElement.layout_id}
className={classnames({ 'is-invalid': errors['layout_page_id'] })} className={classnames({ 'is-invalid': errors['layout_id'] })}
> >
{!!layoumenu ? layoumenu.map(option => { {!!layoutplaylists ? layoutplaylists.map(option => {
return <option key={option.id} return <option key={option.id}
selected={option.id === dataElement.layout_page_id ? option.id : ''} selected={option.id === dataElement.layout_id ? option.id : ''}
value={option.id}>{option.name}</option> value={option.id}>{option.name}</option>
}) : <option>Loading</option> } }) : <option>Loading</option> }
</Input> </Input>
...@@ -229,86 +227,49 @@ return ( ...@@ -229,86 +227,49 @@ return (
</Col> </Col>
<Col md='4' sm='12'> <Col md='4' sm='12'>
<FormGroup> <FormGroup>
<Label for='type'>type</Label> <Label for='dynamic'>dynamic</Label>
<Input <Input
type='select' type='select'
name='type' name='dynamic'
id='type' id='dynamic'
innerRef={register({ required: true })} innerRef={register({ required: true })}
placeholder='type' placeholder='dynamic'
defaultValue={dataElement && dataElement.type} defaultValue={dataElement && dataElement.dynamic}
className={classnames({ 'is-invalid': errors['type'] })} className={classnames({ 'is-invalid': errors['dynamic'] })}
> >
<option value='master'>Master</option> <option value='0'>No</option>
<option value='child'>Child</option> <option value='1'>Yes</option>
</Input> </Input>
</FormGroup> </FormGroup>
</Col> </Col>
<Col md='4' sm='12'> <Col md='4' sm='12'>
<FormGroup> <FormGroup>
<Label for='display'>display</Label> <Label for='special'>special</Label>
<Input <Input
type='select' type='select'
name='display' name='special'
id='display' id='special'
innerRef={register({ required: true })} innerRef={register({ required: true })}
placeholder='display' placeholder='special'
defaultValue={dataElement && dataElement.display} defaultValue={dataElement && dataElement.special}
className={classnames({ 'is-invalid': errors['display'] })} className={classnames({ 'is-invalid': errors['special'] })}
> >
<option value='icon_text'>Icon Text</option> <option value='0'>No</option>
<option value='icon'>Icon</option> <option value='1'>Yes</option>
<option value='text'>Text</option>
</Input> </Input>
</FormGroup> </FormGroup>
</Col> </Col>
<Col md='4' sm='12'> <Col md='4' sm='12'>
<FormGroup> <FormGroup>
<Label for='pagetypeid'>Page Type</Label> <Label for='special_id'>special_id</Label>
<Input <Input
type='select'
name='pagetypeid'
id='pagetypeid'
innerRef={register({ required: true })}
placeholder='pagetypeid'
defaultValue={dataElement && dataElement.pagetypeid}
className={classnames({ 'is-invalid': errors['pagetypeid'] })}
>
{!!pagetypes ? pagetypes.map(option => {
return <option key={option.id}
selected={option.id === dataElement.pagetypeid}
value={option.id}>{option.type}</option>
}) : <option>Loading</option> }
</Input>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='order'>order</Label>
<Input
type='text'
name='order'
id='order'
innerRef={register({ required: true })}
placeholder='order'
defaultValue={dataElement && dataElement.order}
className={classnames({ 'is-invalid': errors['order'] })}
/>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='last_seen'>last_seen</Label>
<Input
readOnly={true}
type='text' type='text'
name='last_seen' name='special_id'
id='last_seen' id='special_id'
innerRef={register({ required: false })} innerRef={register({ required: false })}
placeholder='last_seen' placeholder='special_id'
defaultValue={dataElement && dataElement.last_seen} defaultValue={dataElement && dataElement.special_id}
className={classnames({ 'is-invalid': errors['last_seen'] })} className={classnames({ 'is-invalid': errors['special_id'] })}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
...@@ -319,46 +280,8 @@ return ( ...@@ -319,46 +280,8 @@ return (
<Card> <Card>
<CardBody className='pt-2'> <CardBody className='pt-2'>
<h4 className="card-title">Blocks</h4> <h4 className="card-title">Assets</h4>
<Nav pills>
{dataElement && dataElement.menu_page_layouts.map((block, index) => {
return <NavItem>
<NavLink key={index}
active={activeTab === index}
onClick={() => toggle(index)}
>
<span className='align-middle d-none d-sm-block'>Blocks {index + 1}</span>
</NavLink>
</NavItem>
})}
<NavItem>
<NavLink
className='btn-primary'
onClick={() => handleAddBlock()}
>
<span className='align-middle d-none d-sm-block'>+ add New </span>
</NavLink>
</NavItem>
</Nav>
<TabContent
activeTab={activeTab}
>
{!!dataElement && dataElement.menu_page_layouts.map((block, index) => {
return <TabPane tabId={index}>
<TabLayoutPlaylist block={block} selectedDataElement={dataElement} setElementData={setElementData} />
</TabPane>
}
)
}
<TabPane tabId={dataElement ? dataElement.menu_page_layouts.length : 0}>
<div
// selectedUser={store.selectedUser}
>
</div>
</TabPane>
</TabContent>
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
......
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
...@@ -217,8 +217,8 @@ export const serverSideColumns = [ ...@@ -217,8 +217,8 @@ export const serverSideColumns = [
minWidth: '25px' minWidth: '25px'
}, },
{ {
name: 'System name', name: 'Title',
selector: 'system_name', selector: 'title',
sortable: true, sortable: true,
minWidth: '225px', minWidth: '225px',
cell: row => ( cell: row => (
...@@ -230,7 +230,7 @@ export const serverSideColumns = [ ...@@ -230,7 +230,7 @@ export const serverSideColumns = [
className='user-name text-truncate mb-0' className='user-name text-truncate mb-0'
// onClick={() => store.dispatch(cleanLayoutMenu(row.id))} // onClick={() => store.dispatch(cleanLayoutMenu(row.id))}
> >
<span className='font-weight-bold'>{row.system_name}</span> <span className='font-weight-bold'>{row.title}</span>
</Link> </Link>
<small className='text-truncate text-muted mb-0'>edit</small> <small className='text-truncate text-muted mb-0'>edit</small>
</div> </div>
...@@ -238,8 +238,8 @@ export const serverSideColumns = [ ...@@ -238,8 +238,8 @@ export const serverSideColumns = [
) )
}, },
{ {
name: 'Order', name: 'Dynamic',
selector: 'order', selector: 'dynamic',
sortable: true, sortable: true,
minWidth: '225px' minWidth: '225px'
} }
......
...@@ -18,7 +18,7 @@ import moduleSettings from '../module' ...@@ -18,7 +18,7 @@ import moduleSettings from '../module'
const Tables = () => { const Tables = () => {
return ( return (
<Fragment> <Fragment>
<Breadcrumbs breadCrumbTitle='Pages' breadCrumbParent='Pages' breadCrumbActive={moduleSettings.mainTitle} /> <Breadcrumbs breadCrumbTitle='Playlists' breadCrumbParent='Playlists' breadCrumbActive={moduleSettings.mainTitle} />
<Row> <Row>
<Col sm='12'> <Col sm='12'>
<Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitleSingle}</Link> <Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitleSingle}</Link>
......
...@@ -2,7 +2,7 @@ import { useState, useEffect, Fragment } from 'react' ...@@ -2,7 +2,7 @@ import { useState, useEffect, Fragment } from 'react'
import { useParams, Link } from 'react-router-dom' import { useParams, Link } from 'react-router-dom'
// ** Store & Actions // ** Store & Actions
import { getmenupages, updatemenupages } from '../../store/actions' import { getplaylist, updateplaylist } from '../../store/actions'
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
...@@ -15,7 +15,7 @@ import moduleSettings from '../module' ...@@ -15,7 +15,7 @@ import moduleSettings from '../module'
const ElementEdit = () => { const ElementEdit = () => {
// ** States & Vars // ** States & Vars
const store = useSelector(state => state.menupages), const store = useSelector(state => state.playlists),
[dataElement, setElementData] = useState(null), [dataElement, setElementData] = useState(null),
dispatch = useDispatch(), dispatch = useDispatch(),
{ id } = useParams() { id } = useParams()
...@@ -23,16 +23,14 @@ const ElementEdit = () => { ...@@ -23,16 +23,14 @@ const ElementEdit = () => {
const onSubmitHandler = values => { const onSubmitHandler = values => {
console.log(values) console.log(values)
dispatch( dispatch(
updatemenupages({ updateplaylist({
...dataElement, ...dataElement,
idproject: values.idproject, idproject: values.idproject,
system_name: values.system_name, title: values.title,
last_seen: values.last_seen, layout_id: values.layout_id,
layout_page_id: values.layout_page_id, dynamic: values.dynamic,
type: values.type, special: values.special,
display: values.display, special_id: values.special_id
pagetypeid: values.pagetypeid,
order: values.order
}) })
) )
...@@ -40,21 +38,21 @@ const ElementEdit = () => { ...@@ -40,21 +38,21 @@ const ElementEdit = () => {
// ** Function to get user on mount // ** Function to get user on mount
useEffect(() => { useEffect(() => {
dispatch(getmenupages(id)) dispatch(getplaylist(id))
}, [dispatch]) }, [dispatch])
// ** Update user image on mount or change // ** Update user image on mount or change
useEffect(() => { useEffect(() => {
if (store.selectedMenuPage !== null || (store.selectedMenuPage !== null && dataElement !== null && store.selectedMenuPage.id !== dataElement.id)) { if (store.selectedPlaylist !== null || (store.selectedPlaylist !== null && dataElement !== null && store.selectedPlaylist.id !== dataElement.id)) {
return setElementData(store.selectedMenuPage) return setElementData(store.selectedPlaylist)
} }
}, [store.selectedMenuPage]) }, [store.selectedPlaylist])
return store.selectedMenuPage !== null && store.selectedMenuPage !== undefined ? ( return store.selectedPlaylist !== null && store.selectedPlaylist !== undefined ? (
<ElementCard <ElementCard
selectedElement={store.selectedMenuPage} selectedElement={store.selectedPlaylist}
onSubmitHandler={onSubmitHandler} onSubmitHandler={onSubmitHandler}
/> />
) : ( ) : (
......
...@@ -17,7 +17,7 @@ import moduleSettings from './module' ...@@ -17,7 +17,7 @@ import moduleSettings from './module'
const Tables = () => { const Tables = () => {
return ( return (
<Fragment> <Fragment>
<Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} /> <Breadcrumbs breadCrumbTitle='Playlists' breadCrumbParent='Playlists' breadCrumbActive={moduleSettings.mainTitle} />
<Row> <Row>
<Col sm='12'> <Col sm='12'>
<DataTable /> <DataTable />
......
...@@ -3,7 +3,7 @@ import { Fragment, useState, useEffect, memo } from 'react' ...@@ -3,7 +3,7 @@ import { Fragment, useState, useEffect, memo } from 'react'
// ** Table Columns // ** Table Columns
import { serverSideColumns } from './data' import { serverSideColumns } from './data'
// ** Store & Actions // ** Store & Actions
import { getData_menupages } from '../store/actions' import { getData_playlists } from '../store/actions'
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
import DataTableServerSide from '@components/datatable' import DataTableServerSide from '@components/datatable'
...@@ -12,16 +12,16 @@ import moduleSettings from './module' ...@@ -12,16 +12,16 @@ import moduleSettings from './module'
const DataTable = () => { const DataTable = () => {
// ** Store Vars // ** Store Vars
const dispatch = useDispatch() const dispatch = useDispatch()
const store = useSelector(state => state.menupages) const store = useSelector(state => state.playlists)
return ( return (
<DataTableServerSide <DataTableServerSide
cardTitle={moduleSettings.mainTitle} cardTitle={moduleSettings.mainTitle}
allData={store.allDataMenuPages} allData={store.allDataPlaylists}
getData={getData_menupages} getData={getData_playlists}
serverSideColumns={serverSideColumns} serverSideColumns={serverSideColumns}
linkAddButton={`${moduleSettings.baseURL}/add`} linkAddButton={`${moduleSettings.baseURL}/add`}
total={store.totalMenuPages} total={store.totalPlaylists}
/> />
) )
......
...@@ -36,7 +36,7 @@ export const getData_playlists = params => { ...@@ -36,7 +36,7 @@ export const getData_playlists = params => {
.then(response => { .then(response => {
dispatch({ dispatch({
type: 'ADD_PLAYLIST', type: 'ADD_PLAYLIST',
params: newparams params
}) })
}) })
.then(() => { .then(() => {
......
...@@ -49,7 +49,7 @@ const playlists = (state = initialState, action) => { ...@@ -49,7 +49,7 @@ const playlists = (state = initialState, action) => {
return { ...state, return { ...state,
selectedPlaylist : action.data selectedPlaylist : action.data
} }
case 'GET_MENUPLAYLIST': case 'GET_PLAYLIST':
return { ...state, return { ...state,
selectedPlaylist : action.data selectedPlaylist : action.data
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment