Skip to content

C
cms
Commit 18cf491f authored by PDuarte's avatar PDuarte
Browse files
Options

manage menu playlist UI

parent b5b6870e
Hide whitespace changes
Inline Side-by-side
Showing with 347 additions and 11 deletions
src/@core/components/datatable/tableHeader.js
View file @ 18cf491f
......@@ -44,11 +44,13 @@ const CustomHeader = ({ linkAddButton, handlePerPage, rowsPerPage, handleFilter,
onChange={e => handleFilter(e.target.value)}
/>
</div>
<Button.Ripple color='primary'>
{linkAddButton && <Button.Ripple color='primary'>
<Link to={linkAddButton} className="btn-primary">
Add New
</Link>
</Button.Ripple>
}
</Col>
</Row>
</div>
......
src/views/menupages/mainpages/add/index.js
View file @ 18cf491f
......@@ -31,7 +31,8 @@ const Tables = () => {
type: values.type,
display: values.display,
pagetypeid: values.pagetypeid,
order: values.order
order: values.order,
menu_page_layouts: values.menu_page_layouts
})
)
......@@ -39,7 +40,7 @@ const Tables = () => {
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
<Breadcrumbs breadCrumbTitle='Pages' breadCrumbParent='Pages' breadCrumbActive={moduleSettings.mainTitle} />
<Row>
<Col sm='12'>
<Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitle}</Link>
......@@ -61,7 +62,8 @@ const Tables = () => {
type: '',
display: '',
pagetypeid: '',
order: '0'
order: '0',
menu_page_layouts: []
}}
onSubmitHandler={onSubmitHandler}
/>
......
src/views/menupages/mainpages/card/index.js
View file @ 18cf491f
......@@ -6,10 +6,13 @@ import { toast } from 'react-toastify'
import Avatar from '@components/avatar'
import {Media, Button, Label, Form, FormGroup, Input, Table, CustomInput, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, CardHeader, CardTitle, CardText } from 'reactstrap'
import { isObjEmpty } from '@utils'
import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
import TabLayoutPlaylist from './tablayoutplaylists'
// ** Store & Actions
import {resetResults} from '../../store/actions'
......@@ -23,6 +26,8 @@ import classnames from 'classnames'
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'
// ** Styles
import '@styles/react/apps/app-users.scss'
const SuccessProgressToast = () => (
<Fragment>
......@@ -67,9 +72,12 @@ const handleError = (text) => {
screensStore = useSelector(state => state.screens),
[pagetypes, setPagetypes] = useState(null),
[layoumenu, setLayoumenu] = useState(null),
dispatch = useDispatch(),
[activeTab, setActiveTab] = useState(0),
//
toggle = tab => setActiveTab(tab),
dispatch = useDispatch(),
notifySuccessProgress = () => toast.success(<SuccessProgressToast />),
onSubmit = values => {
onSubmit = values => {
if (isObjEmpty(errors)) {
const submitElement = {
...dataElement,
......@@ -85,7 +93,21 @@ const handleError = (text) => {
onSubmitHandler(submitElement)
}
}
},
handleAddBlock = () => {
if (!dataElement) return
const newData = dataElement
newData.menu_page_layouts.push({
id: '<generated>',
layout_id: null,
order: 1,
page_id: dataElement.id
})
setElementData(newData)
setActiveTab(newData.menu_page_layouts.length - 1)
console.log(newData)
}
useEffect(() => {
......@@ -290,8 +312,59 @@ return (
/>
</FormGroup>
</Col>
</Row>
<Row className='app-user-edit'>
<Col sm='12'>
<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}
>
</div>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
<Row className='app-user-edit'>
<Col className='d-flex flex-sm-row flex-column mt-2' sm='12'>
<Button.Ripple className='mb-1 mb-sm-0 mr-0 mr-sm-1' type='submit' color='primary'>
Save Changes
......
src/views/menupages/mainpages/card/manageplaylist.js 0 → 100644
View file @ 18cf491f
import { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
// ** Third Party Components
import { Row, Col, FormGroup, Label, Input, Button } from 'reactstrap'
import { useForm } from 'react-hook-form'
import classnames from 'classnames'
import { getData_menupagesplaylists, updatemenupages } from '../../store/actions'
import DataTableServerSide from '@components/datatable'
// ** Table Server Side Column
const serverSideColumns = [
{
name: 'ID',
selector: 'id',
sortable: true,
minWidth: '25px'
},
{
name: 'System name',
selector: 'system_name',
sortable: true,
minWidth: '225px'
}
]
const ManagePlaylist = (ElementID) => {
const store = useSelector(state => state.menupages),
[avaliablePlaylists, setavaliablePlaylists] = useState([]),
[selectedPlaylists, setSelectedPlaylists] = useState([])
const handleAdd = (value) => {
const newValue = selectedPlaylists.concat(value)
setSelectedPlaylists(newValue)
}
const handleRemove = (value) => {
const newValue = selectedPlaylists.filter(element => element.id !== value.id)
setSelectedPlaylists(newValue)
}
const serverSideColumnsLeft = [
...serverSideColumns,
{
name: 'Action',
selector: 'Action',
sortable: true,
minWidth: '25px',
cell: row => (
<div className='d-flex justify-content-left align-items-center'>
<div className='d-flex flex-column'>
<Button className='user-name text-truncate mb-0'
onClick={() => { handleRemove(row) }}
>
<span className='font-weight-bold'>Remove</span>
</Button>
</div>
</div>
)
}
]
const serverSideColumnsRight = [
...serverSideColumns,
{
name: 'Action',
selector: 'Action',
sortable: true,
minWidth: '25px',
cell: row => (
<div className='d-flex justify-content-left align-items-center'>
<div className='d-flex flex-column'>
<Button className='user-name text-truncate mb-0'
onClick={() => { handleAdd(row) }}
>
<span className='font-weight-bold'>Add</span>
</Button>
</div>
</div>
)
}
]
useEffect(() => {
const Ids = selectedPlaylists.map(elem => elem.id)
const filtered = store.allDataMenuPages.filter(element => !Ids.includes(element.id))
setavaliablePlaylists(filtered)
}, [store.allDataMenuPages])
useEffect(() => {
const Ids = selectedPlaylists.map(elem => elem.id)
const filtered = store.allDataMenuPages.filter(element => !Ids.includes(element.id))
setavaliablePlaylists(filtered)
}, [selectedPlaylists])
return <div className="card">
<div className="card-header">
<h4 className="card-title">playlist</h4>
</div>
<div className="card-body">
<Row>
<Col sm='6'>
<DataTableServerSide
cardTitle='Content'
allData={selectedPlaylists}
getData={getData_menupagesplaylists}
serverSideColumns={serverSideColumnsLeft}
// linkAddButton={`/add`}
total={selectedPlaylists.length}
/>
</Col>
<Col sm='6'>
<DataTableServerSide
cardTitle='List to add'
allData={avaliablePlaylists}
getData={getData_menupagesplaylists}
serverSideColumns={serverSideColumnsRight}
// linkAddButton={`/add`}
total={store.totalMenuPages}
/>
</Col>
</Row>
</div>
</div>
}
export default ManagePlaylist
\ No newline at end of file
src/views/menupages/mainpages/card/tablayoutplaylists.js 0 → 100644
View file @ 18cf491f
import { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
// ** Third Party Components
import { Row, Col, FormGroup, Label, Input, Button } from 'reactstrap'
import { useForm } from 'react-hook-form'
import classnames from 'classnames'
import { getData_layoutPlaylists } from '../../../screens/store/actions'
import { DivideCircle } from 'react-feather'
// import { Button } from 'bootstrap'
import ManagePlaylist from './manageplaylist'
const TabLayoutPlaylist = ({block, selectedDataElement, setElementData}) => {
const [dataElement, setDataElement] = useState(null),
[layoutPlaylists, setLayoutPlaylists] = useState(null),
dispatch = useDispatch(),
screensStore = useSelector(state => state.screens),
{ register, errors, handleSubmit } = useForm()
const handleDetailChange = (value, field) => {
const newData = selectedDataElement.menu_page_layouts.map((mpagelayout) => {
if (mpagelayout.id === block.id) {
mpagelayout[field] = value
}
})
setElementData(
{
...selectedDataElement
})
}
useEffect(() => {
if (block !== null || (block !== null && dataElement !== null && block.id !== dataElement.id)) {
return setDataElement(block)
}
}, [block])
// populate layout playlist
useEffect(() => {
if (!screensStore.allDataLayoutPlaylists || screensStore.allDataLayoutPlaylists.length < 1) {
dispatch(getData_layoutPlaylists({
start: 1,
length: 1000,
q: null
}))
}
}, [dispatch])
useEffect(() => {
setLayoutPlaylists(screensStore.allDataLayoutPlaylists)
}, [screensStore.allDataLayoutPlaylists])
return (
<Col sm='12'>
<div className="card">
<div className="card-header">
<h4 className="card-title">ElementCard {dataElement && dataElement.id} </h4>
</div>
<div className="card-body">
<Row>
<Col md='4' sm='12'>
<FormGroup>
<Label for='id'>ID</Label>
<Input
readOnly={true}
type='text'
name='id'
id='id'
placeholder='id'
defaultValue={dataElement && dataElement.id}
/>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='layout_id'>Layout</Label>
<Input
type='select'
name='layout_id'
id='layout_id'
placeholder='layout_id'
innerRef={register({ required: true })}
defaultValue={dataElement && dataElement.layout_id}
className={classnames({ 'is-invalid': errors['layout_id'] })}
onChange={(e) => handleDetailChange(e.target.value, 'layout_id')}
>
{!!layoutPlaylists ? layoutPlaylists.map(option => {
return <option key={option.id}
selected={option.id === dataElement.layout_id ? option.id : ''}
value={option.id}>{option.name}</option>
}) : <option>Loading</option> }
</Input>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='order'>order</Label>
<Input
type='text'
name='order'
order='order'
placeholder='order'
innerRef={register({ required: true })}
defaultValue={dataElement && dataElement.order}
className={classnames({ 'is-invalid': errors['order'] })}
onChange={(e) => handleDetailChange(e.target.value, 'order')}
/>
</FormGroup>
</Col>
</Row>
</div>
</div>
<ManagePlaylist ElementID={dataElement && dataElement.layout_id} />
</Col>
)
}
export default TabLayoutPlaylist
\ No newline at end of file
src/views/menupages/mainpages/edit/index.js
View file @ 18cf491f
......@@ -18,7 +18,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'>
<Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitleSingle}</Link>
......
src/views/menupages/store/actions/pages.js
View file @ 18cf491f
......@@ -97,4 +97,13 @@ export const getData_menupages = params => {
dispatch(setErrorMsg(errosMsg))
})
}
}
\ No newline at end of file
}
export const getData_menupagesplaylists = params => {
const newparams = {
...params,
idproject: 2
}
return _getData_menupages(newparams)
}
\ No newline at end of file
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