Skip to content

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

imagery update

parent 4d52b8a2
Show whitespace changes
Inline Side-by-side
Showing with 226 additions and 7 deletions
src/views/assets/projectassets/card/imagery.js 0 → 100644
View file @ 50cf6125
import { Fragment, useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {Button, Media, Card, CardBody, Row, Col, CardHeader, CardTitle, Label, Input, FormGroup, CardText } from 'reactstrap'
import { Camera, Lock, Edit, Trash2 } from 'react-feather'
const BlocoImage = ({title, img, handelImageChange}) => {
const [imgd, setImgd] = useState(false)
const onChange = e => {
const reader = new FileReader(),
files = e.target.files
reader.onload = function () {
setImgd(reader.result)
handelImageChange(title, JSON.stringify(reader.result))
}
reader.readAsDataURL(files[0])
}
useEffect(() => {
if (img !== null && img !== undefined) {
return setImgd(`${process.env.REACT_APP_API}/../${img}`)
}
}, [img])
return <Fragment>
<Media className='mb-2'>
{ imgd === null || imgd === false || imgd === undefined ? (
<Camera
className='user-avatar rounded mr-2 my-25 cursor-pointer'
alt={title}
height='90'
width='90'
/>) : (<img
className='user-avatar rounded mr-2 my-25 cursor-pointer'
src={imgd}
alt={title}
height='90'
width='90'
/>)}
<Media className='mt-50' body>
<h4>{title} </h4>
<div className='d-flex flex-wrap mt-1 px-0'>
<Button.Ripple id='change-img' tag={Label} className='mr-75 mb-0' color='primary'>
<span className='d-none d-sm-block'>Change</span>
<span className='d-block d-sm-none'>
<Edit size={14} />
</span>
<input type='file' hidden id={`change-img-${title}`}
onChange={onChange}
accept='image/*' />
</Button.Ripple>
<Button.Ripple color='secondary' outline onClick={ e => { setImgd(null) } }>
<span className='d-none d-sm-block'>Remove</span>
<span className='d-block d-sm-none'>
<Trash2 size={14} />
</span>
</Button.Ripple>
</div>
</Media>
</Media>
</Fragment>
}
const PlanImages = ({language, dataElement, handleElmChange}) => {
const handleInputChange = (value, file) => {
// console.log(value)
// console.log(file)
// //dataElement[field] = value
handleElmChange(value, file, language)
}
return <Fragment>
<CardTitle tag="h5">{language.name} Imagery </CardTitle>
<Col md='12' sm='12'>
<FormGroup>
<Label for='title'>Titlle</Label>
</FormGroup>
</Col>
<Row>
<Col md='4' >
<BlocoImage
title="portrait"
img={dataElement && dataElement.portrait}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="landscape"
img={dataElement && dataElement.landscape}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="thumbnail"
img={dataElement && dataElement.thumbnail}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="banner"
img={dataElement && dataElement.banner}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="icon"
img={dataElement && dataElement.icon}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="hbackground"
img={dataElement && dataElement.hbackground}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="vbackground"
img={dataElement && dataElement.vbackground}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="hover"
img={dataElement && dataElement.hover}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="focus"
img={dataElement && dataElement.focus}
handelImageChange={handleInputChange}
/>
</Col>
</Row>
</Fragment>
}
const ImageryBlock = ({dataElement, handleElmChange}) => {
const store = useSelector(state => state.projectsettings)
// dispatch = useDispatch(),
// handleLangChange = () => {
// handleTextualChange(dataElement)
// }
// useEffect(() => {
// console.log('aki')
// console.log(dataElement)
// }, [store.projectsettings])
return <Row>
<Col sm='12'>
<Card>
<CardBody className='pt-2'>
{ store.selectedProject !== null
&& dataElement
&& store.selectedProject.languages.map(language => {
let images = dataElement.filter(e => e.langcode === language.langcode)
if (images.length < 1) {
images = [
{
id: '<genrated>',
idassets: '<assetid>',
langcode: language.langcode,
longdescription: '',
shortdescriptions: '',
title: ''
}
]
dataElement.push(images[0])
}
return <PlanImages
key={language.id}
language={language}
dataElement={images[0]}
handleElmChange={handleElmChange}
/>
}
)}
</CardBody>
</Card>
</Col>
</Row>
}
export default ImageryBlock
\ No newline at end of file
src/views/assets/projectassets/card/index.js
View file @ 50cf6125
...@@ -27,6 +27,7 @@ import withReactContent from 'sweetalert2-react-content' ...@@ -27,6 +27,7 @@ import withReactContent from 'sweetalert2-react-content'
import TextualBlock from './textual' import TextualBlock from './textual'
import AvaliabilityBlock from './avaliability' import AvaliabilityBlock from './avaliability'
import ImageryBlock from './imagery'
// ** Styles // ** Styles
import '@styles/react/apps/app-users.scss' import '@styles/react/apps/app-users.scss'
...@@ -80,6 +81,7 @@ const handleError = (text) => { ...@@ -80,6 +81,7 @@ const handleError = (text) => {
[pagetypes, setPagetypes] = useState(null), [pagetypes, setPagetypes] = useState(null),
[layoutplaylists, setLayoutplaylists] = useState(null), [layoutplaylists, setLayoutplaylists] = useState(null),
[activeTab, setActiveTab] = useState(0), [activeTab, setActiveTab] = useState(0),
[uploadFiles, setUploadFile] = useState([]),
// //
toggle = tab => setActiveTab(tab), toggle = tab => setActiveTab(tab),
dispatch = useDispatch(), dispatch = useDispatch(),
...@@ -94,7 +96,7 @@ const handleError = (text) => { ...@@ -94,7 +96,7 @@ const handleError = (text) => {
parenttype: values.parenttype, parenttype: values.parenttype,
external_id: values.external_id external_id: values.external_id
} }
onSubmitHandler(submitElement) onSubmitHandler(submitElement, uploadFiles)
} }
}, },
...@@ -186,6 +188,17 @@ const handleError = (text) => { ...@@ -186,6 +188,17 @@ const handleError = (text) => {
break break
} }
updateSubGenres(value) updateSubGenres(value)
},
handleImageryChange = (prop, file, lang) => {
let newUpload = uploadFiles.filter(elm => elm.type !== prop)
newUpload = newUpload.concat({
type: prop,
langcode: lang,
obj: file
})
setUploadFile(newUpload)
} }
useEffect(() => { useEffect(() => {
...@@ -436,7 +449,10 @@ return ( ...@@ -436,7 +449,10 @@ return (
</TabPane> </TabPane>
<TabPane tabId={1}> <TabPane tabId={1}>
soon... <ImageryBlock
dataElement={dataElement && dataElement.imagery}
handleElmChange={handleImageryChange}
/>
</TabPane> </TabPane>
<TabPane tabId={2}> <TabPane tabId={2}>
......
src/views/assets/projectassets/edit/main.js
View file @ 50cf6125
...@@ -11,7 +11,8 @@ import { Alert } from 'reactstrap' ...@@ -11,7 +11,8 @@ import { Alert } from 'reactstrap'
import ElementCard from '../card' import ElementCard from '../card'
// module settings // module settings
import moduleSettings from '../module' import moduleSettings from '../module'
import { Upload } from 'react-feather'
import _ from 'lodash'
const ElementEdit = () => { const ElementEdit = () => {
// ** States & Vars // ** States & Vars
...@@ -20,8 +21,10 @@ const ElementEdit = () => { ...@@ -20,8 +21,10 @@ const ElementEdit = () => {
dispatch = useDispatch(), dispatch = useDispatch(),
{ id } = useParams() { id } = useParams()
const onSubmitHandler = values => { const onSubmitHandler = (values, uploadFile) => {
console.log(values) // console.log(values)
// console.log(uploadFile)
dispatch( dispatch(
updateasset({ updateasset({
...dataElement, ...dataElement,
...@@ -31,7 +34,8 @@ const ElementEdit = () => { ...@@ -31,7 +34,8 @@ const ElementEdit = () => {
parenttype: values.parenttype, parenttype: values.parenttype,
external_id: values.external_id, external_id: values.external_id,
genres: values.genres, genres: values.genres,
subgenres: values.subgenres subgenres: values.subgenres,
data: uploadFile
}) })
) )
......
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