asset genre subgenre UI

src/views/assets/projectassets/add/index.js

@@ -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

@@ -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

@@ -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
           })
         )