Skip to content

C
cms
Commit 41ddd740 authored by PDuarte's avatar PDuarte
Browse files
Options

*plalists curd completed 

* starting assets
parent 267ca079
Show whitespace changes
Inline Side-by-side
Showing with 1306 additions and 187 deletions
src/redux/reducers/rootReducer.js
View file @ 41ddd740
...@@ -18,6 +18,7 @@ import projectsettings from '@src/views/settings/store/reducer' ...@@ -18,6 +18,7 @@ import projectsettings from '@src/views/settings/store/reducer'
import screens from '@src/views/screens/store/reducer' import screens from '@src/views/screens/store/reducer'
import menupages from '@src/views/menupages/store/reducer' import menupages from '@src/views/menupages/store/reducer'
import playlists from '@src/views/playlists/store/reducer' import playlists from '@src/views/playlists/store/reducer'
import assets from '@src/views/assets/store/reducer'
const rootReducer = combineReducers({ const rootReducer = combineReducers({
auth, auth,
...@@ -34,7 +35,8 @@ const rootReducer = combineReducers({ ...@@ -34,7 +35,8 @@ const rootReducer = combineReducers({
screens, screens,
projectsettings, projectsettings,
menupages, menupages,
playlists playlists,
assets
}) })
export default rootReducer export default rootReducer
src/views/assets/projectassets/add/index.js 0 → 100644
View file @ 41ddd740
// ** React Imports
import { Fragment } from 'react'
import { Link } from 'react-router-dom'
// ** Store & Actions
import { addplaylist } from '../../store/actions'
import { useDispatch } from 'react-redux'
// ** Custom Components
import Breadcrumbs from '@components/breadcrumbs'
// ** Third Party Components
import { Row, Col } from 'reactstrap'
// module settings
import moduleSettings from '../module'
// ** Tables
import ElementCard from '../card'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
const Tables = () => {
const dispatch = useDispatch()
const onSubmitHandler = values => {
dispatch(
addplaylist({
idproject: values.idproject,
title: values.title,
layout_id: values.layout_id,
dynamic: values.dynamic,
special: values.special,
special_id: values.special_id
}
)
)
}
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Playlists' breadCrumbParent='Playlists' breadCrumbActive={moduleSettings.mainTitle} />
<Row>
<Col sm='12'>
<Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitle}</Link>
</Col>
</Row>
<Row>
<Col sm='12'>
<div className="card">
<div className="card-header">
<h4 className="card-title">New {moduleSettings.mainTitleSingle}</h4>
</div>
<div className="card-body">
<ElementCard selectedElement={{
id: '<generate>',
idproject: '2',
system_name: '',
last_seen: '',
layout_page_id: '',
type: '',
display: '',
pagetypeid: '',
order: '0',
menu_page_layouts: []
}}
onSubmitHandler={onSubmitHandler}
/>
</div>
</div>
</Col>
</Row>
</Fragment>
)
}
export default Tables
src/views/assets/projectassets/card/index.js 0 → 100644
View file @ 41ddd740
// ** React Imports
import { useState, useEffect, Fragment } from 'react'
import { useSelector, useDispatch } from 'react-redux'
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 ManageAssets from './manageassets'
// import TabLayoutPlaylist from './tablayoutplaylists'
// ** Store & Actions
import {resetResults} from '../../store/actions'
import { getData_pagetypes } from '../../../settings/store/actions'
import { getData_layoutPlaylists } from '../../../screens/store/actions'
import { useForm } from 'react-hook-form'
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>
<div className='toastify-header'>
<div className='title-wrapper'>
<Avatar size='sm' color='success' icon={<Check size={12} />} />
<h6 className='toast-title'>Saved !</h6>
</div>
<small className='text-muted'></small>
</div>
<div className='toastify-body'>
<span role='img' aria-label='toast-text'>
👋 Good job.
</span>
</div>
</Fragment>
)
const ElementCard = ({ selectedElement, onSubmitHandler }) => {
const store = useSelector(state => state.projectsettings)
const [PlatformName, setPlatformName] = useState('Web')
const MySwal = withReactContent(Swal)
const handleError = (text) => {
return MySwal.fire({
title: 'Error!',
text,
icon: 'error',
customClass: {
confirmButton: 'btn btn-primary'
},
buttonsStyling: false
})
}
const [dataElement, setElementData] = useState(null),
{ register, errors, handleSubmit } = useForm(),
settingStore = useSelector(state => state.projectsettings),
screensStore = useSelector(state => state.screens),
[pagetypes, setPagetypes] = useState(null),
[layoutplaylists, setLayoutplaylists] = useState(null),
[activeTab, setActiveTab] = useState(0),
//
toggle = tab => setActiveTab(tab),
dispatch = useDispatch(),
notifySuccessProgress = () => toast.success(<SuccessProgressToast />),
onSubmit = values => {
if (isObjEmpty(errors)) {
const submitElement = {
...dataElement,
idproject: values.idproject,
title: values.title,
layout_id: values.layout_id,
dynamic: values.dynamic,
special: values.special,
special_id: values.special_id
}
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(() => {
if (selectedElement !== null || (selectedElement !== null && dataElement !== null && selectedElement.id !== dataElement.id)) {
return setElementData(selectedElement)
}
}, [selectedElement])
useEffect(() => {
if (store.errorMsg !== '') {
handleError(store.errorMsg)
dispatch(resetResults())
}
}, [store.errorMsg])
useEffect(() => {
if (store.saveSucces) {
notifySuccessProgress()
dispatch(resetResults())
}
}, [store.saveSucces])
// populate page types
useEffect(() => {
if (!settingStore.allDataPagetypes || settingStore.allDataPagetypes.length < 1) {
dispatch(getData_pagetypes({
start: 1,
length: 1000,
q: null
}))
}
}, [dispatch])
useEffect(() => {
setPagetypes(settingStore.allDataPagetypes)
}, [settingStore.allDataPagetypes])
// populate layout menus
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 (
<Fragment>
<Form
onSubmit={handleSubmit(onSubmit)}
>
<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='name'>Project ID</Label>
<Input
readOnly={true}
type='text'
name='idproject'
id='idproject'
innerRef={register({ required: true })}
placeholder='idproject'
defaultValue={dataElement && dataElement.idproject}
className={classnames({ 'is-invalid': errors['idproject'] })}
/>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='title'>Title</Label>
<Input
type='text'
name='title'
id='title'
innerRef={register({ required: true })}
placeholder='title'
defaultValue={dataElement && dataElement.title}
className={classnames({ 'is-invalid': errors['title'] })}
/>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='layout_id'>Layout Playlist</Label>
<Input
type='select'
name='layout_id'
id='layout_id'
innerRef={register({ required: true })}
placeholder='layout_id'
defaultValue={dataElement && dataElement.layout_id}
className={classnames({ 'is-invalid': errors['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='dynamic'>dynamic</Label>
<Input
type='select'
name='dynamic'
id='dynamic'
innerRef={register({ required: true })}
placeholder='dynamic'
defaultValue={dataElement && dataElement.dynamic}
className={classnames({ 'is-invalid': errors['dynamic'] })}
>
<option value='0'>No</option>
<option value='1'>Yes</option>
</Input>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='special'>special</Label>
<Input
type='select'
name='special'
id='special'
innerRef={register({ required: true })}
placeholder='special'
defaultValue={dataElement && dataElement.special}
className={classnames({ 'is-invalid': errors['special'] })}
>
<option value='0'>No</option>
<option value='1'>Yes</option>
</Input>
</FormGroup>
</Col>
<Col md='4' sm='12'>
<FormGroup>
<Label for='special_id'>special_id</Label>
<Input
type='text'
name='special_id'
id='special_id'
innerRef={register({ required: false })}
placeholder='special_id'
defaultValue={dataElement && dataElement.special_id}
className={classnames({ 'is-invalid': errors['special_id'] })}
/>
</FormGroup>
</Col>
</Row>
<Row className='app-user-edit'>
<Col sm='12'>
<ManageAssets dataElement={dataElement && dataElement.assets} />
/</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
</Button.Ripple>
{/* <Button.Ripple color='secondary' outline onClick={() => dispatch(getPlatform(selectedElement.id))} >
Reset
</Button.Ripple> */}
</Col>
</Row>
</Form>
</Fragment>
)
}
export default ElementCard
\ No newline at end of file
src/views/playlists/projectplaylists/card/manageplaylist.js → src/views/assets/projectassets/card/manageassets.js
View file @ 41ddd740
...@@ -6,7 +6,7 @@ import { Row, Col, FormGroup, Label, Input, Button } from 'reactstrap' ...@@ -6,7 +6,7 @@ import { Row, Col, FormGroup, Label, Input, Button } from 'reactstrap'
import { useForm } from 'react-hook-form' import { useForm } from 'react-hook-form'
import classnames from 'classnames' import classnames from 'classnames'
import { getData_menupagesplaylists, updatemenupages } from '../../store/actions' import { getData_menupagesplaylists } from '../../store/actions'
import DataTableServerSide from '@components/datatable' import DataTableServerSide from '@components/datatable'
import { element } from 'prop-types' import { element } from 'prop-types'
...@@ -27,29 +27,30 @@ const serverSideColumns = [ ...@@ -27,29 +27,30 @@ const serverSideColumns = [
] ]
const ManagePlaylist = (dataElement) => { const ManageAssets = ({dataElement}) => {
const store = useSelector(state => state.menupages), const store = useSelector(state => state.playlists),
[avaliablePlaylists, setavaliablePlaylists] = useState([]), [avaliableAssets, setavaliableAssets] = useState([]),
[selectedPlaylists, setSelectedPlaylists] = useState([]), [selectedAssets, setSelectedAssets] = useState([]),
dispatch = useDispatch() dispatch = useDispatch()
const handleAdd = (value) => { const handleAdd = (value) => {
const newValue = selectedPlaylists.concat(value) const newValue = selectedAssets.concat(value)
setSelectedPlaylists(newValue) setSelectedAssets(newValue)
} }
const handleRemove = (value) => { const handleRemove = (value) => {
const newValue = selectedPlaylists.filter(element => element.id !== value.id) const newValue = selectedAssets.filter(element => element.id !== value.id)
setSelectedPlaylists(newValue) setSelectedAssets(newValue)
} }
const getData_selectedPlaylists = (params) => { const getData_selectedAssets = (params) => {
return (dispatch) => { return (dispatch) => {
if (params.q === '') { if (params.q === '') {
setSelectedPlaylists(dataElement.dataElement) if (dataElement === null) return
setSelectedAssets(dataElement)
return return
} }
const newValue = dataElement.dataElement.filter(element => element.title.includes(params.q)) const newValue = dataElement.filter(element => element.title.includes(params.q))
setSelectedPlaylists(newValue) setSelectedAssets(newValue)
} }
} }
...@@ -96,44 +97,61 @@ const ManagePlaylist = (dataElement) => { ...@@ -96,44 +97,61 @@ const ManagePlaylist = (dataElement) => {
} }
] ]
const getData_avaliableAssets = (params) => {
return (dispatch) => {
if (selectedAssets === null) return
const Ids = selectedAssets.map(elem => elem.id),
// tabAssets = store.allDataAssets.filter(element => !Ids.includes(element.id))
tabAssets = []
if (params.q === null || params.q === '') {
setavaliableAssets(tabAssets)
return
}
const newValue = tabAssets.filter(element => element.title.includes(params.q))
setavaliableAssets(newValue)
}
}
useEffect(() => { useEffect(() => {
const Ids = selectedPlaylists.map(elem => elem.id) const Ids = selectedAssets.map(elem => elem.id)
const filtered = store.allDataMenuPages.filter(element => !Ids.includes(element.id)) const filtered = store.allDataPlaylists.filter(element => !Ids.includes(element.id))
setavaliablePlaylists(filtered) setavaliableAssets(filtered)
}, [store.allDataMenuPages]) }, [store.allDataPlaylists])
useEffect(() => { useEffect(() => {
const Ids = selectedPlaylists.map(elem => elem.id) const Ids = selectedAssets.map(elem => elem.id)
const filtered = store.allDataMenuPages.filter(element => !Ids.includes(element.id)) const filtered = store.allDataPlaylists.filter(element => !Ids.includes(element.id))
setavaliablePlaylists(filtered) setavaliableAssets(filtered)
}, [selectedPlaylists]) }, [selectedAssets])
useEffect(() => { useEffect(() => {
if (dataElement !== null && dataElement.dataElement !== null) {
setSelectedPlaylists(dataElement.dataElement) if (dataElement !== null) {
setSelectedAssets(dataElement)
} }
}, [dataElement]) }, [dataElement])
return <div className="card"> return <div className="card">
<div className="card-header"> <div className="card-header">
<h4 className="card-title">playlist</h4> <h4 className="card-title">Assets</h4>
</div> </div>
<div className="card-body"> <div className="card-body">
<Row> <Row>
<Col sm='6'> <Col sm='6'>
<DataTableServerSide <DataTableServerSide
cardTitle='Content' cardTitle='Content'
allData={selectedPlaylists} allData={selectedAssets}
getData={getData_selectedPlaylists} getData={getData_selectedAssets}
serverSideColumns={serverSideColumnsLeft} serverSideColumns={serverSideColumnsLeft}
// linkAddButton={`/add`} // linkAddButton={`/add`}
total={selectedPlaylists.length} total={selectedAssets.length}
/> />
</Col> </Col>
<Col sm='6'> <Col sm='6'>
<DataTableServerSide <DataTableServerSide
cardTitle='List to add' cardTitle='List to add'
allData={avaliablePlaylists} allData={avaliableAssets}
getData={getData_menupagesplaylists} getData={getData_avaliableAssets}
serverSideColumns={serverSideColumnsRight} serverSideColumns={serverSideColumnsRight}
// linkAddButton={`/add`} // linkAddButton={`/add`}
total={store.totalMenuPages} total={store.totalMenuPages}
...@@ -145,4 +163,4 @@ const ManagePlaylist = (dataElement) => { ...@@ -145,4 +163,4 @@ const ManagePlaylist = (dataElement) => {
</div> </div>
} }
export default ManagePlaylist export default ManageAssets
\ No newline at end of file \ No newline at end of file
src/views/assets/projectassets/data.js 0 → 100644
View file @ 41ddd740
// ** React Imports
import { Link } from 'react-router-dom'
// import { cleanLayoutMenu } from '../store/actions'
import { store } from '@store/storeConfig/store'
// ** Custom Components
import Avatar from '@components/avatar'
// module settings
import moduleSettings from './module'
// ** Third Party Components
import axios from 'axios'
import { MoreVertical, Edit, FileText, Archive, Trash } from 'react-feather'
import { Badge, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'
// ** Vars
const states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary']
const status = {
1: { title: 'Current', color: 'light-primary' },
2: { title: 'Professional', color: 'light-success' },
3: { title: 'Rejected', color: 'light-danger' },
4: { title: 'Resigned', color: 'light-warning' },
5: { title: 'Applied', color: 'light-info' }
}
export let data
// ** Get initial Data
axios.get('/api/datatables/initial-data').then(response => {
data = response.data
})
// ** Table Zero Config Column
export const basicColumns = [
{
name: 'ID',
selector: 'id',
sortable: true,
maxWidth: '100px'
},
{
name: 'Name',
selector: 'name',
sortable: true,
minWidth: '225px'
},
{
name: 'Email',
selector: 'email',
sortable: true,
minWidth: '310px'
},
{
name: 'Position',
selector: 'post',
sortable: true,
minWidth: '250px'
},
{
name: 'Age',
selector: 'age',
sortable: true,
minWidth: '100px'
},
{
name: 'Salary',
selector: 'salary',
sortable: true,
minWidth: '175px'
}
]
// ** Expandable table component
const ExpandableTable = ({ data }) => {
return (
<div className='expandable-content p-2'>
<p>
<span className='font-weight-bold'>City:</span> {data.city}
</p>
<p>
<span className='font-weight-bold'>Experience:</span> {data.experience}
</p>
<p className='m-0'>
<span className='font-weight-bold'>Post:</span> {data.post}
</p>
</div>
)
}
// ** Table Common Column
export const columns = [
{
name: 'Name',
selector: 'name',
sortable: true,
minWidth: '250px',
cell: row => (
<div className='d-flex align-items-center'>
{row.avatar === '' ? (
<Avatar color={`light-${states[row.status]}`} content={row.full_name} initials />
) : (
<Avatar img={require(`@src/assets/images/portrait/small/avatar-s-${row.avatar}`).default} />
)}
<div className='user-info text-truncate ml-1'>
<span className='d-block font-weight-bold text-truncate'>{row.full_name}</span>
<small>{row.post}</small>
</div>
</div>
)
},
{
name: 'Status',
selector: 'status',
sortable: true,
minWidth: '150px',
cell: row => {
return (
<Badge color={status[row.status].color} pill>
{status[row.status].title}
</Badge>
)
}
},
{
name: 'Actions',
allowOverflow: true,
cell: row => {
return (
<div className='d-flex'>
<UncontrolledDropdown>
<DropdownToggle className='pr-1' tag='span'>
<MoreVertical size={15} />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
<FileText size={15} />
<span className='align-middle ml-50'>Details</span>
</DropdownItem>
<DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
<Archive size={15} />
<span className='align-middle ml-50'>Archive</span>
</DropdownItem>
<DropdownItem tag='a' href='/' className='w-100' onClick={e => e.preventDefault()}>
<Trash size={15} />
<span className='align-middle ml-50'>Delete</span>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<Edit size={15} />
</div>
)
}
}
]
// ** Table Intl Column
export const multiLingColumns = [
{
name: 'Name',
selector: 'name',
sortable: true,
minWidth: '200px'
},
{
name: 'Status',
selector: 'status',
sortable: true,
minWidth: '150px',
cell: row => {
return (
<Badge color={status[row.status].color} pill>
{status[row.status].title}
</Badge>
)
}
},
{
name: 'Actions',
allowOverflow: true,
cell: row => {
return (
<div className='d-flex'>
<UncontrolledDropdown>
<DropdownToggle className='pr-1' tag='span'>
<MoreVertical size={15} />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<FileText size={15} />
<span className='align-middle ml-50'>Details</span>
</DropdownItem>
<DropdownItem>
<Archive size={15} />
<span className='align-middle ml-50'>Archive</span>
</DropdownItem>
<DropdownItem>
<Trash size={15} />
<span className='align-middle ml-50'>Delete</span>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<Edit size={15} />
</div>
)
}
}
]
// ** Table Server Side Column
export const serverSideColumns = [
{
name: 'ID',
selector: 'id',
sortable: true,
minWidth: '25px'
},
{
name: 'Title',
selector: 'title',
sortable: true,
minWidth: '225px',
cell: row => (
<div className='d-flex justify-content-left align-items-center'>
<div className='d-flex flex-column'>
<Link
to={`${moduleSettings.baseURL}/edit/${row.id}`}
className='user-name text-truncate mb-0'
// onClick={() => store.dispatch(cleanLayoutMenu(row.id))}
>
<span className='font-weight-bold'>{row.title}</span>
</Link>
<small className='text-truncate text-muted mb-0'>edit</small>
</div>
</div>
)
},
{
name: 'Dynamic',
selector: 'dynamic',
sortable: true,
minWidth: '225px'
}
]
// ** Table Adv Search Column
export const advSearchColumns = [
{
name: 'Name',
selector: 'full_name',
sortable: true,
minWidth: '200px'
},
{
name: 'Email',
selector: 'email',
sortable: true,
minWidth: '250px'
},
{
name: 'Post',
selector: 'post',
sortable: true,
minWidth: '250px'
},
{
name: 'City',
selector: 'city',
sortable: true,
minWidth: '150px'
},
{
name: 'Date',
selector: 'start_date',
sortable: true,
minWidth: '150px'
},
{
name: 'Salary',
selector: 'salary',
sortable: true,
minWidth: '100px'
}
]
export default ExpandableTable
src/views/assets/projectassets/edit/index.js 0 → 100644
View file @ 41ddd740
// ** React Imports
import { Fragment } from 'react'
import { Link } from 'react-router-dom'
// ** Custom Components
import Breadcrumbs from '@components/breadcrumbs'
// ** Third Party Components
import { Row, Col } from 'reactstrap'
// ** Tables
import ElementEdit from './main'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
// module settings
import moduleSettings from '../module'
const Tables = () => {
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Playlists' breadCrumbParent='Playlists' breadCrumbActive={moduleSettings.mainTitle} />
<Row>
<Col sm='12'>
<Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitleSingle}</Link>
</Col>
</Row>
<Row>
<Col sm='12'>
<div className="card">
<div className="card-header">
<h4 className="card-title">{moduleSettings.mainTitleSingle}</h4>
</div>
<div className="card-body">
<ElementEdit />
</div>
</div>
</Col>
</Row>
</Fragment>
)
}
export default Tables
src/views/assets/projectassets/edit/main.js 0 → 100644
View file @ 41ddd740
import { useState, useEffect, Fragment } from 'react'
import { useParams, Link } from 'react-router-dom'
// ** Store & Actions
import { getplaylist, updateplaylist } from '../../store/actions'
import { useSelector, useDispatch } from 'react-redux'
import { Alert } from 'reactstrap'
import ElementCard from '../card'
// module settings
import moduleSettings from '../module'
const ElementEdit = () => {
// ** States & Vars
const store = useSelector(state => state.playlists),
[dataElement, setElementData] = useState(null),
dispatch = useDispatch(),
{ id } = useParams()
const onSubmitHandler = values => {
console.log(values)
dispatch(
updateplaylist({
...dataElement,
idproject: values.idproject,
title: values.title,
layout_id: values.layout_id,
dynamic: values.dynamic,
special: values.special,
special_id: values.special_id
})
)
}
// ** Function to get user on mount
useEffect(() => {
dispatch(getplaylist(id))
}, [dispatch])
// ** Update user image on mount or change
useEffect(() => {
if (store.selectedPlaylist !== null || (store.selectedPlaylist !== null && dataElement !== null && store.selectedPlaylist.id !== dataElement.id)) {
return setElementData(store.selectedPlaylist)
}
}, [store.selectedPlaylist])
return store.selectedPlaylist !== null && store.selectedPlaylist !== undefined ? (
<ElementCard
selectedElement={store.selectedPlaylist}
onSubmitHandler={onSubmitHandler}
/>
) : (
<Alert color='info'>
<h4 className='alert-heading'>Loading {moduleSettings.mainTitleSingle}</h4>
<div className='alert-body'>
If {moduleSettings.mainTitleSingle} with id: {id} doesn't exist. Check list of all {moduleSettings.mainTitle}: <Link to={moduleSettings.baseURL}>{moduleSettings.mainTitle} List</Link>
</div>
</Alert>
)
}
export default ElementEdit
src/views/assets/projectassets/index.js 0 → 100644
View file @ 41ddd740
// ** React Imports
import { Fragment } from 'react'
// ** Custom Components
import Breadcrumbs from '@components/breadcrumbs'
// ** Third Party Components
import { Row, Col } from 'reactstrap'
// ** Tables
import DataTable from './table'
// ** Styles
import '@styles/react/libs/tables/react-dataTable-component.scss'
// module settings
import moduleSettings from './module'
const Tables = () => {
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Playlists' breadCrumbParent='Playlists' breadCrumbActive={moduleSettings.mainTitle} />
<Row>
<Col sm='12'>
<DataTable />
</Col>
</Row>
</Fragment>
)
}
export default Tables
src/views/assets/projectassets/module.js 0 → 100644
View file @ 41ddd740
const moduleSettings = {
mainTitle: 'Assets',
mainTitleSingle: 'Asset',
apiBaseURL: '/api/assets',
baseURL: '/assets/projectassets',
newElement: {
slug: 0,
type: 0
},
elementsOption: {
}
}
export default moduleSettings
\ No newline at end of file
src/views/assets/projectassets/table.js 0 → 100644
View file @ 41ddd740
import { Fragment, useState, useEffect, memo } from 'react'
// ** Table Columns
import { serverSideColumns } from './data'
// ** Store & Actions
import { getData_playlists } from '../store/actions'
import { useSelector, useDispatch } from 'react-redux'
import DataTableServerSide from '@components/datatable'
// module settings
import moduleSettings from './module'
const DataTable = () => {
// ** Store Vars
const dispatch = useDispatch()
const store = useSelector(state => state.playlists)
return (
<DataTableServerSide
cardTitle={moduleSettings.mainTitle}
allData={store.allDataPlaylists}
getData={getData_playlists}
serverSideColumns={serverSideColumns}
linkAddButton={`${moduleSettings.baseURL}/add`}
total={store.totalPlaylists}
/>
)
}
export default memo(DataTable)
src/views/assets/store/actions/assets.js 0 → 100644
View file @ 41ddd740
import axios from 'axios'
import {setSaveSatus, setErrorMsg} from '../../../../redux/actions/api'
import moduleSettings from '../../projectassets/module'
// ** Get table Data ///api/datatables/data
const _getData_assets = params => {
return async dispatch => {
await axios.get(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}`, {params}
).then(response => {
dispatch({
type: 'GET_DATA_ASSETS',
allData: response.data.data,
// datalayoumenus: response.data.invoices,
totalPages: response.data.recordsTotal,
params: response.data.params
})
})
}
}
export const getData_assets = params => {
const newparams = {
...params,
idproject: 2
}
return _getData_assets(newparams)
}
export const addasset = params => {
return (dispatch, getState) => {
axios
.post(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}`, params)
.then(response => {
dispatch({
type: 'ADD_ASSET',
params
})
})
.then(() => {
dispatch(setSaveSatus(true))
// dispatch(getlayoumenu(layoumenu.id))
// dispatch(getData_layoumenus())
})
.catch(err => {
const errosMsg = !err.response ? 'error' : err.response.data.message
console.log(errosMsg)
dispatch(setErrorMsg(errosMsg))
})
}
}
export const getasset = id => {
return async dispatch => {
await axios
.get(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}/${id}`)
.then(response => {
// console.log('leu')
// console.log(response)
dispatch({
type: 'GET_ASSET',
data: response.data.data
})
})
.catch(err => console.log(err))
}
}
export const cleanasset = id => {
return async dispatch => {
dispatch({
type: 'GET_ASSETS',
data: null
})
}
}
export const updateasset = params => {
return (dispatch, getState) => {
axios
.put(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}/${params.id}`, params)
.then(response => {
dispatch({
type: 'UPDATE_ASSETS',
params
})
})
.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/assets/store/actions/index.js 0 → 100644
View file @ 41ddd740
export * from './assets'
export const resetResults = id => {
return async dispatch => {
dispatch({
type: 'RESET_RESULTS',
saveSucces: false,
errorMsg: ''
})
}
}
\ No newline at end of file
src/views/assets/store/reducer/index.js 0 → 100644
View file @ 41ddd740
// ** Initial State
const initialState = {
saveSucces: false,
errorMsg: '',
data: [],
total: 1,
params: {},
allData: [],
dataAssets: [],
totalAssets: 1,
paramsAssets: {},
allDataAssets: [],
selectedAsset: null
}
const assets = (state = initialState, action) => {
switch (action.type) {
case 'SAVE_STATUS':
return {
...state,
saveSucces: action.status
}
case 'SAVE_ERROR':
return {
...state,
errorMsg: action.errorMsg
}
case 'RESET_RESULTS':
return {
...state,
saveSucces: false,
errorMsg: ''
}
// layout menus
case 'GET_DATA_ASSETS':
return {
...state,
allDataAssets: action.allData,
dataAssets: action.data,
totalAssets: action.totalPages,
paramsAssets: action.params
}
case 'ADD_ASSETS':
return { ...state }
case 'GET_ASSET':
return { ...state,
selectedPlaylist : action.data
}
case 'UPDATE_ASSET':
return { ...state }
case 'ADD_ASSET':
return { ...state }
// default
default:
return state
}
}
export default assets
src/views/playlists/projectplaylists/add/index.js
View file @ 41ddd740
...@@ -29,7 +29,8 @@ const Tables = () => { ...@@ -29,7 +29,8 @@ const Tables = () => {
layout_id: values.layout_id, layout_id: values.layout_id,
dynamic: values.dynamic, dynamic: values.dynamic,
special: values.special, special: values.special,
special_id: values.special_id special_id: values.special_id,
assets: values.assets
} }
) )
) )
...@@ -53,14 +54,12 @@ const Tables = () => { ...@@ -53,14 +54,12 @@ const Tables = () => {
<ElementCard selectedElement={{ <ElementCard selectedElement={{
id: '<generate>', id: '<generate>',
idproject: '2', idproject: '2',
system_name: '', title: '',
last_seen: '', layout_id: null,
layout_page_id: '', dynamic: 0,
type: '', special: 0,
display: '', special_id: '',
pagetypeid: '', assets: []
order: '0',
menu_page_layouts: []
}} }}
onSubmitHandler={onSubmitHandler} onSubmitHandler={onSubmitHandler}
/> />
......
src/views/playlists/projectplaylists/card/index.js
View file @ 41ddd740
...@@ -11,6 +11,9 @@ import { isObjEmpty } from '@utils' ...@@ -11,6 +11,9 @@ import { isObjEmpty } from '@utils'
import { Bell, Check, X, AlertTriangle, Info } from 'react-feather' import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
import ManageAssets from './manageassets'
// import TabLayoutPlaylist from './tablayoutplaylists' // import TabLayoutPlaylist from './tablayoutplaylists'
...@@ -68,11 +71,21 @@ const handleError = (text) => { ...@@ -68,11 +71,21 @@ const handleError = (text) => {
const [dataElement, setElementData] = useState(null), const [dataElement, setElementData] = useState(null),
{ register, errors, handleSubmit } = useForm(), { register, errors, handleSubmit } = useForm(),
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),
[layoutplaylists, setLayoutplaylists] = useState(null), [layoutplaylists, setLayoutplaylists] = useState(null),
[activeTab, setActiveTab] = useState(0), [activeTab, setActiveTab] = useState(0),
//
handleAssetsChange = (value) => {
const newData = { ...dataElement}
newData.assets = value
setElementData(
{
...newData
})
},
// //
toggle = tab => setActiveTab(tab), toggle = tab => setActiveTab(tab),
dispatch = useDispatch(), dispatch = useDispatch(),
...@@ -129,18 +142,18 @@ const handleError = (text) => { ...@@ -129,18 +142,18 @@ const handleError = (text) => {
}, [store.saveSucces]) }, [store.saveSucces])
// populate page types // populate page types
useEffect(() => { // useEffect(() => {
if (!settingStore.allDataPagetypes || settingStore.allDataPagetypes.length < 1) { // if (!settingStore.allDataPagetypes || settingStore.allDataPagetypes.length < 1) {
dispatch(getData_pagetypes({ // dispatch(getData_pagetypes({
start: 1, // start: 1,
length: 1000, // length: 1000,
q: null // q: null
})) // }))
} // }
}, [dispatch]) // }, [dispatch])
useEffect(() => { // useEffect(() => {
setPagetypes(settingStore.allDataPagetypes) // setPagetypes(settingStore.allDataPagetypes)
}, [settingStore.allDataPagetypes]) // }, [settingStore.allDataPagetypes])
// populate layout menus // populate layout menus
useEffect(() => { useEffect(() => {
...@@ -277,13 +290,7 @@ return ( ...@@ -277,13 +290,7 @@ return (
<Row className='app-user-edit'> <Row className='app-user-edit'>
<Col sm='12'> <Col sm='12'>
<Card> <ManageAssets dataElement={dataElement && dataElement.assets} handleChange={handleAssetsChange} />
<CardBody className='pt-2'>
<h4 className="card-title">Assets</h4>
</CardBody>
</Card>
</Col> </Col>
</Row> </Row>
......
src/views/playlists/projectplaylists/card/manageassets.js 0 → 100644
View file @ 41ddd740
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_assets } from '../../../assets/store/actions'
import DataTableServerSide from '@components/datatable'
import { element } from 'prop-types'
// ** Table Server Side Column
const serverSideColumns = [
{
name: 'ID',
selector: 'id',
sortable: true,
minWidth: '25px'
},
{
name: 'Title',
selector: 'title',
sortable: true,
minWidth: '225px'
}
]
const ManageAssets = ({dataElement, handleChange}) => {
const store = useSelector(state => state.assets),
[avaliableAssets, setavaliableAssets] = useState([]),
[selectedAssets, setSelectedAssets] = useState([]),
dispatch = useDispatch()
const handleAdd = (value) => {
const newValue = selectedAssets.concat(value)
setSelectedAssets(newValue)
handleChange(newValue)
}
const handleRemove = (value) => {
const newValue = selectedAssets.filter(element => element.id !== value.id)
setSelectedAssets(newValue)
handleChange(newValue)
}
const getData_selectedAssets = (params) => {
return (dispatch) => {
if (params.q === '') {
if (dataElement === null) return
setSelectedAssets(dataElement)
return
}
const newValue = dataElement.filter(element => element.title.includes(params.q))
setSelectedAssets(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>
)
}
]
const getData_avaliableAssets = (params) => {
return (dispatch) => {
if (selectedAssets === null) return
const Ids = selectedAssets.map(elem => elem.id),
tabAssets = store.allDataAssets.filter(element => !Ids.includes(element.id))
if (params.q === null || params.q === '') {
setavaliableAssets(tabAssets)
return
}
const newValue = tabAssets.filter(element => element.title.includes(params.q))
setavaliableAssets(newValue)
}
}
useEffect(() => {
const Ids = selectedAssets.map(elem => elem.id)
const filtered = store.allDataAssets.filter(element => !Ids.includes(element.id))
setavaliableAssets(filtered)
}, [store.allDataAssets])
useEffect(() => {
const Ids = selectedAssets.map(elem => elem.id)
const filtered = store.allDataAssets.filter(element => !Ids.includes(element.id))
setavaliableAssets(filtered)
}, [selectedAssets])
useEffect(() => {
if (!store.allDataLayoutAssets || store.allDataLayoutAssets.length < 1) {
dispatch(getData_assets({
start: 0,
length: 1000,
q: null
}))
}
}, [dispatch])
useEffect(() => {
if (dataElement !== null) {
setSelectedAssets(dataElement)
}
}, [dataElement])
return <div className="card">
<div className="card-header">
<h4 className="card-title">Assets</h4>
</div>
<div className="card-body">
<Row>
<Col sm='6'>
<DataTableServerSide
cardTitle='Content'
allData={selectedAssets}
getData={getData_selectedAssets}
serverSideColumns={serverSideColumnsLeft}
// linkAddButton={`/add`}
total={selectedAssets.length}
/>
</Col>
<Col sm='6'>
<DataTableServerSide
cardTitle='List to add'
allData={avaliableAssets}
getData={getData_avaliableAssets}
serverSideColumns={serverSideColumnsRight}
// linkAddButton={`/add`}
total={store.totalMenuPages}
/>
</Col>
</Row>
</div>
</div>
}
export default ManageAssets
\ No newline at end of file
src/views/playlists/projectplaylists/card/tablayoutplaylists.js deleted 100644 → 0
View file @ 267ca079
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 dataElement={dataElement && dataElement.playlists} />
</Col>
)
}
export default TabLayoutPlaylist
\ No newline at end of file
src/views/playlists/projectplaylists/edit/main.js
View file @ 41ddd740
...@@ -30,7 +30,8 @@ const ElementEdit = () => { ...@@ -30,7 +30,8 @@ const ElementEdit = () => {
layout_id: values.layout_id, layout_id: values.layout_id,
dynamic: values.dynamic, dynamic: values.dynamic,
special: values.special, special: values.special,
special_id: values.special_id special_id: values.special_id,
assets: values.assets
}) })
) )
......
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