Skip to content

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

asset genre subgenre UI

parent 6c0e4a98
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 7 deletions
src/views/assets/projectassets/add/index.js
View file @ 7328ff4b
......@@ -29,7 +29,9 @@ const Tables = () => {
parentid: values.parentid,
parenttype: values.parenttype,
external_id: values.external_id,
textual: values.textual
textual: values.textual,
genres: values.genres,
subgenres: values.subgenres
}
)
)
......@@ -57,7 +59,9 @@ const Tables = () => {
parentid: null,
parenttype: null,
external_id: '',
textual: []
textual: [],
genres: [],
subgenres: []
}}
onSubmitHandler={onSubmitHandler}
/>
......
src/views/assets/projectassets/card/index.js
View file @ 7328ff4b
......@@ -4,12 +4,14 @@ import { useSelector, useDispatch } from 'react-redux'
import { toast } from 'react-toastify'
import Avatar from '@components/avatar'
import Select, { components } from 'react-select'
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 { isObjEmpty, selectThemeColors } from '@utils'
import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
import { Bell, Check, Hash, X, AlertTriangle, Info } from 'react-feather'
// ** Store & Actions
import {resetResults} from '../../store/actions'
......@@ -66,6 +68,9 @@ const handleError = (text) => {
}
const [dataElement, setElementData] = useState(null),
[genresAllOptions, setGenresAllOptions] = useState([]),
[genresAsset, setGenresAsset] = useState([]),
[genresSubAsset, setGenresSubAsset] = useState([]),
{ register, errors, handleSubmit } = useForm(),
settingStore = useSelector(state => state.projectsettings),
screensStore = useSelector(state => state.screens),
......@@ -96,11 +101,98 @@ const handleError = (text) => {
textual: value
}
setElementData(newData)
}
},
updateGenres = (value) => {
const newValue = value.map(elm => {
return {
id: elm.value,
idproject: dataElement.projectid,
name: elm.label,
pivot: {
idasset: dataElement.id,
idgenres:elm.value1
}
}
})
const newData = {
...dataElement,
genres: newValue
}
setElementData(newData)
},
updateSubGenres = (value) => {
const newValue = value.map(elm => {
return {
id: elm.value,
idproject: dataElement.projectid,
name: elm.label,
pivot: {
idasset: dataElement.id,
idgenres:elm.value1
}
}
})
const newData = {
...dataElement,
subgenres: newValue
}
setElementData(newData)
},
genreOnChange = (value, { action, removedValue }) => {
switch (action) {
case 'remove-value':
case 'pop-value':
if (removedValue.isFixed) {
return
}
setGenresAsset(value)
break
case 'clear':
value = genresAllOptions.filter(v => v.isFixed)
setGenresAsset(value)
break
default:
setGenresAsset(value)
break
}
updateGenres(value)
},
genreSubOnChange = (value, { action, removedValue }) => {
switch (action) {
case 'remove-value':
case 'pop-value':
if (removedValue.isFixed) {
return
}
setGenresSubAsset(value)
break
case 'clear':
value = genresAllOptions.filter(v => v.isFixed)
setGenresSubAsset(value)
break
default:
setGenresSubAsset(value)
break
}
updateSubGenres(value)
}
useEffect(() => {
if (selectedElement !== null || (selectedElement !== null && dataElement !== null && selectedElement.id !== dataElement.id)) {
const genres = selectedElement.genres.map(elm => {
return {
value: elm.id,
label: elm.name
}
})
setGenresAsset(genres)
const subgenres = selectedElement.subgenres.map(elm => {
return {
value: elm.id,
label: elm.name
}
})
setGenresSubAsset(subgenres)
return setElementData(selectedElement)
}
}, [selectedElement])
......@@ -133,6 +225,21 @@ const handleError = (text) => {
setPagetypes(settingStore.allDataPagetypes)
}, [settingStore.allDataPagetypes])
useEffect(() => {
if (!settingStore.selectedProject) return
console.log(settingStore.selectedProject)
const genres = settingStore.selectedProject.genres.map(elm => {
return {
value: elm.id,
label: elm.name
}
})
setGenresAllOptions(genres)
}, [settingStore.selectedProject])
// populate layout menus
useEffect(() => {
if (!screensStore.allDataLayoutPlaylists || screensStore.allDataLayoutPlaylists.length < 1) {
......@@ -239,6 +346,38 @@ return (
</FormGroup>
</Col>
</Row>
<Row>
<Col className='mb-1' md='6' sm='12'>
<h6 className="py-1 mx-1 mb-0 font-medium-2"><Hash /> Genres</h6>
<Select
isClearable={false}
theme={selectThemeColors}
value={genresAsset}
isMulti
name='genreassets'
options={genresAllOptions}
onChange={genreOnChange}
className='react-select'
classNamePrefix='select'
/>
</Col>
<Col className='mb-1' md='6' sm='12'>
<h6 className="py-1 mx-1 mb-0 font-medium-2"><Hash /> Sub-genres</h6>
<Select
isClearable={false}
theme={selectThemeColors}
value={genresSubAsset}
isMulti
name='subgenreassets'
options={genresAllOptions}
onChange={genreSubOnChange}
className='react-select'
classNamePrefix='select'
/>
</Col>
</Row>
<Row className='app-user-edit'>
......@@ -255,6 +394,24 @@ return (
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={false}
onClick={() => toggle(1)}
>
<span className='align-middle d-none d-sm-block'>Imagery</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={false}
onClick={() => toggle(2)}
>
<span className='align-middle d-none d-sm-block'>Avaliability</span>
</NavLink>
</NavItem>
</Nav>
<TabContent
activeTab={activeTab}
......
src/views/assets/projectassets/edit/main.js
View file @ 7328ff4b
......@@ -29,7 +29,9 @@ const ElementEdit = () => {
title: values.title,
parentid: values.parentid,
parenttype: values.parenttype,
external_id: values.external_id
external_id: values.external_id,
genres: values.genres,
subgenres: values.subgenres
})
)
......
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