Skip to content

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

avaliability UI

parent df5e724a
Show whitespace changes
Inline Side-by-side
Showing with 171 additions and 14 deletions
src/@core/scss/base/plugins/forms/pickers/form-flat-pickr.scss
View file @ 68b657a9
......@@ -133,8 +133,9 @@
}
.flatpickr-time {
height: 40px !important;
border-color: $theme-dark-body-bg !important;
height: 40px;
.numInput,
.flatpickr-am-pm {
......
src/views/assets/projectassets/add/index.js
View file @ 68b657a9
......@@ -61,7 +61,8 @@ const Tables = () => {
external_id: '',
textual: [],
genres: [],
subgenres: []
subgenres: [],
availability: []
}}
onSubmitHandler={onSubmitHandler}
/>
......
src/views/assets/projectassets/card/avaliability.js
View file @ 68b657a9
......@@ -10,8 +10,10 @@ import { selectThemeColors } from '@utils'
import Flatpickr from 'react-flatpickr'
import Select, { components } from 'react-select'
import { platform } from 'chart.js'
import Moment from 'moment'
const PlanAvaliability = ({dataElement, AvaChange}) => {
const PlanAvaliability = ({dataElement, handleElmChange}) => {
const [pickerstartdate, setPickerstartdate] = useState(Date.parse(dataElement.startdate)),
[pickerenddate, setPickerenddate] = useState(Date.parse(dataElement.enddate)),
[plataforms, setPlatforms] = useState([]),
......@@ -68,6 +70,117 @@ const PlanAvaliability = ({dataElement, AvaChange}) => {
}, [dataElement])
const updatePlatforms = (value) => {
const newValue = value.map(elm => {
return {
id: elm.value,
name: elm.label,
pivot: {
idavailability: dataElement.id,
idplatform:elm.value
}
}
})
const newData = {
...dataElement,
plataforms: newValue
}
handleElmChange(newData)
},
updateStartDate = (value) => {
const newData = {
...dataElement,
startdate: Moment(value[0]).format('YYYY-MM-DD HH:mm:ss')
}
handleElmChange(newData)
setPickerstartdate(value)
console.log(value)
},
updateEndDate = (value) => {
const newData = {
...dataElement,
enddate: Moment(value[0]).format('YYYY-MM-DD HH:mm:ss')
}
handleElmChange(newData)
setPickerenddate(value)
},
updateGeo = (value, actionValue) => {
const newValue = value.map(elm => {
return {
id: elm.value,
name: elm.label,
pivot: {
idgeolocation: elm.value,
idavailability: dataElement.id,
action: actionValue
}
}
})
const newData = {
...dataElement,
geolocations: newValue
}
handleElmChange(newData)
},
platfomsOnChange = (value, { action, removedValue }) => {
switch (action) {
case 'remove-value':
case 'pop-value':
if (removedValue.isFixed) {
return
}
setAvaliaPlatforms(value)
break
case 'clear':
value = genresAllOptions.filter(v => v.isFixed)
setAvaliaPlatforms(value)
break
default:
setAvaliaPlatforms(value)
break
}
updatePlatforms(value)
},
permitGeoOnChange = (value, { action, removedValue }) => {
switch (action) {
case 'remove-value':
case 'pop-value':
if (removedValue.isFixed) {
return
}
setPermitGeo(value)
break
case 'clear':
value = genresAllOptions.filter(v => v.isFixed)
setPermitGeo(value)
break
default:
setPermitGeo(value)
break
}
updateGeo(value, 'permit')
},
denyGeoOnChange = (value, { action, removedValue }) => {
switch (action) {
case 'remove-value':
case 'pop-value':
if (removedValue.isFixed) {
return
}
setDenyGeo(value)
break
case 'clear':
value = genresAllOptions.filter(v => v.isFixed)
setDenyGeo(value)
break
default:
setDenyGeo(value)
break
}
updateGeo(value, 'deny')
}
return <Fragment>
<Row>
<Col md='12' sm='12'>
......@@ -84,7 +197,7 @@ const PlanAvaliability = ({dataElement, AvaChange}) => {
id={`startdate-picker${dataElement.id}`}
className='form-control'
onChange={date => setPickerstartdate(date)}
onChange={date => updateStartDate(date)}
options={{
enableTime: true,
dateFormat: 'Y-m-d H:i',
......@@ -94,7 +207,7 @@ const PlanAvaliability = ({dataElement, AvaChange}) => {
</FormGroup>
</Col>
<Col md='8' sm='12'>
<Label for='plataforms'>Plataforms</Label>
<Label for='plataforms'>Platforms</Label>
<Select
isClearable={false}
theme={selectThemeColors}
......@@ -102,7 +215,7 @@ const PlanAvaliability = ({dataElement, AvaChange}) => {
isMulti
name={`platforms${dataElement.id}`}
options={plataforms}
// onChange={genreSubOnChange}
onChange={platfomsOnChange}
className='react-select'
classNamePrefix='select'
/>
......@@ -120,7 +233,7 @@ const PlanAvaliability = ({dataElement, AvaChange}) => {
id={`enddate-picker${dataElement.id}`}
className='form-control'
onChange={date => setPickerenddate(date)}
onChange={date => updateEndDate(date) }
options={{
enableTime: true,
dateFormat: 'Y-m-d H:i',
......@@ -139,7 +252,7 @@ const PlanAvaliability = ({dataElement, AvaChange}) => {
isMulti
name={`platforms${dataElement.id}`}
options={geolocations}
// onChange={genreSubOnChange}
onChange={permitGeoOnChange}
className='react-select'
classNamePrefix='select'
/>
......@@ -153,7 +266,7 @@ const PlanAvaliability = ({dataElement, AvaChange}) => {
isMulti
name={`platforms${dataElement.id}`}
options={geolocations}
// onChange={genreSubOnChange}
onChange={denyGeoOnChange}
className='react-select'
classNamePrefix='select'
/>
......@@ -164,7 +277,35 @@ const PlanAvaliability = ({dataElement, AvaChange}) => {
</Fragment>
}
const AvaliabilityBlock = ({dataElement, handleAvailiabilityChange}) => {
const AvaliabilityBlock = ({dataElement, handleElmChange}) => {
const handleAvalChange = (value) => {
const newData = dataElement.map(elm => {
if (elm.id === value.id) {
elm.plataforms = value.plataforms
elm.geolocations = value.geolocations
elm.startdate = value.startdate
elm.enddate = value.enddate
}
})
// console.log(value)
},
handleAddBlock = () => {
if (!dataElement) return
const newData = dataElement
newData.push({
id: `<generated${dataElement.length}>`,
idassets: 'current',
startdate: '',
enddate: '',
plataforms: [],
geolocations: []
})
handleElmChange(newData)
console.log(dataElement)
}
return <Row>
<Col sm='12'>
<Card>
......@@ -173,12 +314,18 @@ const AvaliabilityBlock = ({dataElement, handleAvailiabilityChange}) => {
return <PlanAvaliability
key={elm.id}
dataElement={elm}
handleElmChange={handleAvalChange}
/>
})
}
<Col sm="12" className="text-center">
<Button.Ripple className='mb-1 mb-sm-0 mr-0 mr-sm-1' type='button' color='primary'>
new
<Button.Ripple
className='mb-1 mb-sm-0 mr-0 mr-sm-1'
type='button'
color='primary'
onClick={() => handleAddBlock()}
>
New
</Button.Ripple>
</Col>
</CardBody>
......
src/views/assets/projectassets/card/index.js
View file @ 68b657a9
......@@ -105,6 +105,14 @@ const handleError = (text) => {
}
setElementData(newData)
},
handleAvalChange = value => {
// console.log(value)
const newData = {
...dataElement,
availability: value
}
setElementData(newData)
},
updateGenres = (value) => {
const newValue = value.map(elm => {
return {
......@@ -434,7 +442,7 @@ return (
<TabPane tabId={2}>
<AvaliabilityBlock
dataElement={dataElement && dataElement.availability}
// handleTextualChange={handleTextualChange}
handleElmChange={handleAvalChange}
/>
</TabPane>
</TabContent>
......
src/views/menupages/mainpages/card/index.js
View file @ 68b657a9
......@@ -111,7 +111,7 @@ const handleError = (text) => {
})
setElementData(newData)
setActiveTab(newData.menu_page_layouts.length - 1)
console.log(newData)
// console.log(newData)
}
......
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