Skip to content

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

adding plaform to layout menu

parent 3a84115e
Show whitespace changes
Inline Side-by-side
Showing with 307 additions and 25 deletions
src/views/screens/layoutmenus/add/index.js
View file @ bc1708d0
......@@ -25,7 +25,8 @@ const Tables = () => {
dispatch(
addlayoutmenu({
name: values.name,
slug: values.slug
slug: values.slug,
platforms: values.platforms
})
)
......@@ -46,10 +47,11 @@ const Tables = () => {
<h4 className="card-title">New {moduleSettings.mainTitleSingle}</h4>
</div>
<div className="card-body">
<ElementCard selectedProject={{
<ElementCard selectedElement={{
id: '<generate>',
name: '',
slug: ''
slug: '',
platforms: []
}}
onSubmitHandler={onSubmitHandler}
/>
......
src/views/screens/layoutmenus/card/index.js
View file @ bc1708d0
......@@ -20,6 +20,8 @@ import classnames from 'classnames'
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'
import ElementPlatform from './plataform'
const SuccessProgressToast = () => (
<Fragment>
......@@ -144,25 +146,9 @@ return (
/>
</FormGroup>
</Col>
{/* <Col md='4' sm='12'>
<FormGroup>
<Label for='email'>Email</Label>
<Input disabled='disabled' type='text' id='email' placeholder='Email' defaultValue={ProjectData && ProjectData.email} />
</FormGroup>
</Col> */}
{/* <Col md='4' sm='12'>
<FormGroup>
<Label for='name'>Name</Label>
<Input type='select' name='name' id='name' defaultValue={dataElement && dataElement.name} onChange={e => setPlatformName(e.target.value)}>
<option value='Web'>Web</option>
<option value='iOS Phone'>iOS Phone</option>
<option value='iOS Tablet'>iOS Tablet</option>
<option value='Android Phone'>Android Phone</option>
<option value='Android Tablet'>Android Tablet</option>
</Input>
</FormGroup>
</Col> */}
<Col sm='12'>
<ElementPlatform dataElement={dataElement} setElement={setElementData} store={store} />
</Col>
<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'>
......
src/views/screens/layoutmenus/card/plataform.js 0 → 100644
View file @ bc1708d0
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'
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) {
if (field === 'type') platform.pivot.type = value
if (field === 'show_screen_title') platform.pivot.show_screen_title = value
if (field === 'show_breadcrumbs') platform.pivot.show_breadcrumbs = value
if (field === 'offset_y') platform.pivot.offset_y = value
if (field === 'offset_x') platform.pivot.offset_x = value
if (field === 'vertical_block_spacing') platform.pivot.vertical_block_spacing = value
if (field === 'vertical_playlist_spacing') platform.pivot.vertical_playlist_spacing = value
if (field === 'tab_alignment') platform.pivot.tab_alignment = value
if (field === 'menu_animation') platform.pivot.menu_animation = value
if (field === 'menu_behaviour') platform.pivot.menu_behaviour = 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>Platforms</th>
<th>type</th>
<th>show screen title </th>
<th>show breadcrumbs </th>
<th>offset y </th>
<th>offset x </th>
<th>vertical block spacing </th>
<th>vertical playlist spacing </th>
<th>tab alignment </th>
<th>menu animation </th>
<th>menu behaviour </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>
<td>
<Input
type='text'
name='type'
id='type'
style={{ width: '10rem'}}
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.type}
className={classnames({ 'is-invalid': errors['type'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'type')}
/>
</td>
<td >
<Input
type='text'
name='show_screen_title'
id='show_screen_title'
style={{ width: '20rem'}}
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.show_screen_title}
className={classnames({ 'is-invalid': errors['show_screen_title'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'show_screen_title')}
/>
</td>
<td>
<Input
type='text'
name='show_breadcrumbs'
id='show_breadcrumbs'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.show_breadcrumbs}
className={classnames({ 'is-invalid': errors['show_breadcrumbs'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'show_breadcrumbs')}
/>
</td>
<td>
<Input
type='text'
name='offset_y'
id='offset_y'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.offset_y}
className={classnames({ 'is-invalid': errors['offset_y'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'offset_y')}
/>
</td>
<td>
<Input
type='text'
name='offset_x'
id='offset_x'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.offset_x}
className={classnames({ 'is-invalid': errors['offset_x'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'offset_x')}
/>
</td>
<td>
<Input
type='text'
name='vertical_block_spacing'
id='vertical_block_spacing'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.vertical_block_spacing}
className={classnames({ 'is-invalid': errors['vertical_block_spacing'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'vertical_block_spacing')}
/>
</td>
<td>
<Input
type='text'
name='vertical_playlist_spacing'
id='vertical_playlist_spacing'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.vertical_playlist_spacing}
className={classnames({ 'is-invalid': errors['vertical_playlist_spacing'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'vertical_playlist_spacing')}
/>
</td>
<td>
<Input type='select' name='tab_alignment'
id='tab_alignment'
defaultValue={plataformsOptions && plataformsOptions.tab_alignment}
onChange={(e) => handleGridChange(e.target.value, index, 'tab_alignment')}
>
<option value='start'>start</option>
<option value='center'>center</option>
<option value='end'>end</option>
</Input>
</td>
<td>
<Input
type='text'
name='menu_animation'
id='menu_animation'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions ? plataformsOptions.menu_animation : 0}
className={classnames({ 'is-invalid': errors['menu_animation'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'menu_animation')}
/>
</td>
<td>
<Input
type='text'
name='menu_behaviour'
id='menu_behaviour'
innerRef={register({ required: true })}
placeholder='0'
defaultValue={plataformsOptions && plataformsOptions.menu_behaviour}
className={classnames({ 'is-invalid': errors['menu_behaviour'] })}
onChange={(e) => handleGridChange(e.target.value, index, 'menu_behaviour')}
/>
</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:{
type: '',
show_screen_title: '',
show_breadcrumbs: 0,
offset_y: 0,
offset_x: 0,
vertical_block_spacing: 0,
vertical_playlist_spacing: 0,
tab_alignment: 'start',
menu_animation: 0,
menu_behaviour: 0
}
})
setElement(
{
...dataElement,
elementAdded
}
)
}} >
add
</Button.Ripple>
</FormGroup>
</Col>
</Row>
</div>
) : (
<Fragment>
</Fragment>
)
}
export default ElementPlatform
src/views/screens/layoutmenus/edit/main.js
View file @ bc1708d0
......@@ -23,9 +23,11 @@ const ElementEdit = () => {
const onSubmitHandler = values => {
dispatch(
updateLayoutMenu({
...dataElement,
id: values.id,
name: values.name,
slug: values.slug
slug: values.slug,
platforms: values.platforms
})
)
......
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