imagery update

src/views/assets/projectassets/card/imagery.js

+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

@@ -27,6 +27,7 @@ import withReactContent from 'sweetalert2-react-content'
 
 import TextualBlock from './textual'
 import AvaliabilityBlock from './avaliability'
+import ImageryBlock from './imagery'
 
 // ** Styles
 import '@styles/react/apps/app-users.scss'
@@ -80,6 +81,7 @@ const handleError = (text) => {
      [pagetypes, setPagetypes] = useState(null),
      [layoutplaylists, setLayoutplaylists] = useState(null),
      [activeTab, setActiveTab] = useState(0),
+     [uploadFiles, setUploadFile] = useState([]),
      //
      toggle = tab => setActiveTab(tab),
      dispatch = useDispatch(),
@@ -94,7 +96,7 @@ const handleError = (text) => {
           parenttype: values.parenttype,
           external_id: values.external_id
         }
-        onSubmitHandler(submitElement)
+        onSubmitHandler(submitElement, uploadFiles)
     
         }
       },
@@ -186,6 +188,17 @@ const handleError = (text) => {
           break
       }
       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(() => {
@@ -436,7 +449,10 @@ return (
                 </TabPane>
     
                 <TabPane tabId={1}>
-                   soon... 
+                   <ImageryBlock
+                      dataElement={dataElement && dataElement.imagery}
+                      handleElmChange={handleImageryChange}
+                      />
                 </TabPane>
        
                 <TabPane tabId={2}>

src/views/assets/projectassets/edit/main.js

@@ -11,7 +11,8 @@ import { Alert } from 'reactstrap'
 import  ElementCard from '../card'
 // module settings
 import moduleSettings from '../module'
-
+import { Upload } from 'react-feather'
+import _ from 'lodash'
 
 const ElementEdit = () => {
     // ** States & Vars
@@ -20,8 +21,10 @@ const ElementEdit = () => {
       dispatch = useDispatch(),
       { id } = useParams()
 
-    const onSubmitHandler = values => {
-      console.log(values)
+    const onSubmitHandler = (values, uploadFile) => {
+      // console.log(values)
+      // console.log(uploadFile)
+
       dispatch(
           updateasset({
               ...dataElement,
@@ -31,7 +34,8 @@ const ElementEdit = () => {
               parenttype: values.parenttype,
               external_id: values.external_id,
               genres: values.genres,
-              subgenres: values.subgenres
+              subgenres: values.subgenres,
+              data: uploadFile
           })
         )