Skip to content

C
cms
Commit 267ca079 authored by PDuarte's avatar PDuarte
Browse files
Options

playlist basic crud

parent 9797b0aa
Show whitespace changes
Inline Side-by-side
Showing with 146 additions and 352 deletions
src/navigation/global/playllists.js 0 → 100644
View file @ 267ca079
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
View file @ 267ca079
......@@ -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
View file @ 267ca079
......@@ -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
View file @ 267ca079
......@@ -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 0 → 100644
View file @ 267ca079
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
View file @ 267ca079
......@@ -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
View file @ 267ca079
......@@ -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
View file @ 267ca079
......@@ -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/index.js
View file @ 267ca079
......@@ -11,13 +11,13 @@ import { isObjEmpty } from '@utils'
import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
import TabLayoutPlaylist from './tablayoutplaylists'
// import TabLayoutPlaylist from './tablayoutplaylists'
// ** Store & Actions
import {resetResults} from '../../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'
......@@ -71,7 +71,7 @@ const handleError = (text) => {
settingStore = useSelector(state => state.projectsettings),
screensStore = useSelector(state => state.screens),
[pagetypes, setPagetypes] = useState(null),
[layoumenu, setLayoumenu] = useState(null),
[layoutplaylists, setLayoutplaylists] = useState(null),
[activeTab, setActiveTab] = useState(0),
//
toggle = tab => setActiveTab(tab),
......@@ -82,13 +82,11 @@ const handleError = (text) => {
const submitElement = {
...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
}
onSubmitHandler(submitElement)
......@@ -146,8 +144,8 @@ const handleError = (text) => {
// populate layout menus
useEffect(() => {
if (!screensStore.allDataLayoutMenus || screensStore.allDataLayoutMenus.length < 1) {
dispatch(getData_layoutmenus({
if (!screensStore.allDataLayoutPlaylists || screensStore.allDataLayoutPlaylists.length < 1) {
dispatch(getData_layoutPlaylists({
start: 1,
length: 1000,
q: null
......@@ -155,8 +153,8 @@ const handleError = (text) => {
}
}, [dispatch])
useEffect(() => {
setLayoumenu(screensStore.allDataLayoutMenus)
}, [screensStore.allDataLayoutMenus])
setLayoutplaylists(screensStore.allDataLayoutPlaylists)
}, [screensStore.allDataLayoutPlaylists])
return (
......@@ -195,33 +193,33 @@ return (
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='system_name'>System name</Label>
<Label for='title'>Title</Label>
<Input
type='text'
name='system_name'
id='system_name'
name='title'
id='title'
innerRef={register({ required: true })}
placeholder='system_name'
defaultValue={dataElement && dataElement.system_name}
className={classnames({ 'is-invalid': errors['system_name'] })}
placeholder='title'
defaultValue={dataElement && dataElement.title}
className={classnames({ 'is-invalid': errors['title'] })}
/>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='layout_page_id'>Layout page</Label>
<Label for='layout_id'>Layout Playlist</Label>
<Input
type='select'
name='layout_page_id'
id='layout_page_id'
name='layout_id'
id='layout_id'
innerRef={register({ required: true })}
placeholder='layout_page_id'
defaultValue={dataElement && dataElement.layout_page_id}
className={classnames({ 'is-invalid': errors['layout_page_id'] })}
placeholder='layout_id'
defaultValue={dataElement && dataElement.layout_id}
className={classnames({ 'is-invalid': errors['layout_id'] })}
>
{!!layoumenu ? layoumenu.map(option => {
{!!layoutplaylists ? layoutplaylists.map(option => {
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>
}) : <option>Loading</option> }
</Input>
......@@ -229,86 +227,49 @@ return (
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='type'>type</Label>
<Label for='dynamic'>dynamic</Label>
<Input
type='select'
name='type'
id='type'
name='dynamic'
id='dynamic'
innerRef={register({ required: true })}
placeholder='type'
defaultValue={dataElement && dataElement.type}
className={classnames({ 'is-invalid': errors['type'] })}
placeholder='dynamic'
defaultValue={dataElement && dataElement.dynamic}
className={classnames({ 'is-invalid': errors['dynamic'] })}
>
<option value='master'>Master</option>
<option value='child'>Child</option>
<option value='0'>No</option>
<option value='1'>Yes</option>
</Input>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='display'>display</Label>
<Label for='special'>special</Label>
<Input
type='select'
name='display'
id='display'
name='special'
id='special'
innerRef={register({ required: true })}
placeholder='display'
defaultValue={dataElement && dataElement.display}
className={classnames({ 'is-invalid': errors['display'] })}
placeholder='special'
defaultValue={dataElement && dataElement.special}
className={classnames({ 'is-invalid': errors['special'] })}
>
<option value='icon_text'>Icon Text</option>
<option value='icon'>Icon</option>
<option value='text'>Text</option>
<option value='0'>No</option>
<option value='1'>Yes</option>
</Input>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='pagetypeid'>Page Type</Label>
<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>
<Label for='special_id'>special_id</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'
name='last_seen'
id='last_seen'
name='special_id'
id='special_id'
innerRef={register({ required: false })}
placeholder='last_seen'
defaultValue={dataElement && dataElement.last_seen}
className={classnames({ 'is-invalid': errors['last_seen'] })}
placeholder='special_id'
defaultValue={dataElement && dataElement.special_id}
className={classnames({ 'is-invalid': errors['special_id'] })}
/>
</FormGroup>
</Col>
......@@ -319,46 +280,8 @@ return (
<Card>
<CardBody className='pt-2'>
<h4 className="card-title">Blocks</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}
>
<h4 className="card-title">Assets</h4>
</div>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
......
src/views/playlists/projectplaylists/card/plataform.js deleted 100644 → 0
View file @ 9797b0aa
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
View file @ 267ca079
......@@ -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
View file @ 267ca079
......@@ -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
View file @ 267ca079
......@@ -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
View file @ 267ca079
......@@ -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
View file @ 267ca079
......@@ -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
View file @ 267ca079
......@@ -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
View file @ 267ca079
......@@ -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
}
......
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