project - languages based UI

src/views/playlists/projectplaylists/card/index.js

@@ -5,7 +5,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { toast } from 'react-toastify'
 import Avatar from '@components/avatar'
 
-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 {Spinner, 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'
 
@@ -221,7 +221,7 @@ return (
       <Col md='4' sm='12'>
         <FormGroup>
           <Label for='layout_id'>Layout Playlist</Label>
-          <Input 
+           <Input 
             type='select' 
             name='layout_id'
             id='layout_id'
@@ -235,7 +235,8 @@ return (
                 selected={option.id === dataElement.layout_id ? option.id : ''}
                 value={option.id}>{option.name}</option>
           }) : <option>Loading</option> }
-        </Input>
+        </Input>  
+
         </FormGroup>
       </Col>
       <Col md='4' sm='12'>

src/views/settings/projects/edit/index.js

@@ -24,11 +24,11 @@ const Tables = () => {
       </Row>
       <Row>
         <Col sm='12'>
-           <div class="card">
-             <div class="card-header">
-                <h4 class="card-title">Project</h4>
+           <div className="card">
+             <div className="card-header">
+                <h4 className="card-title">Project</h4>
                </div>
-               <div class="card-body">
+               <div className="card-body">
                   <ProjectsEdit />
                </div>
            </div>

src/views/settings/projects/edit/plataform.js

@@ -57,7 +57,7 @@ const ProjectPlatform = ({dataElement, setElement, store}) => {
     }
 
 return !!dataElement ?  (
-    <div clssName='permissions border mt-1'>   
+    <div className='permissions border mt-1'>   
         <h6 className='py-1 mx-1 mb-0 font-medium-2'>
         <Lock size={18} className='mr-25' />
         <span className='align-middle'>Platforms</span>

src/views/settings/projects/edit/projectCard.js

@@ -4,11 +4,13 @@ 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, X, AlertTriangle, Info, Flag } from 'react-feather'
 
 
 // ** Store & Actions
@@ -60,6 +62,7 @@ const handleError = (text) => {
 }
 
   const  [dataProject, setProjectData] = useState(null),
+    [projectLang, setProjectLang] = useState(null),
      { register, errors, handleSubmit } = useForm(),
       dispatch = useDispatch(),
      notifySuccessProgress = () => toast.success(<SuccessProgressToast />),
@@ -80,10 +83,41 @@ const handleError = (text) => {
           onSubmitHandler(submitProject)
         }
       }
-
+      const langOptions = [
+        { value: 'English', label: 'English'},
+        { value: 'Spanish', label: 'Spanish'},
+        { value: 'German', label: 'German'}
+      ]
+
+      const langOnChange = (value, { action, removedValue }) => {
+        switch (action) {
+          case 'remove-value':
+          case 'pop-value':
+            if (removedValue.isFixed) { 
+              return
+            }
+            setProjectLang(value)
+            break
+          case 'clear':
+            value = langOptions.filter(v => v.isFixed)
+            setProjectLang(value) 
+            break
+          default:
+            setProjectLang(value) 
+            break
+        }
+      } 
 
   useEffect(() => {
     if (selectedProject !== null || (selectedProject !== null && dataProject !== null && selectedProject.id !== dataProject.id)) {
+      
+      const langActive = langOptions.filter(lang => {
+        return selectedProject.languages.filter(elm => {
+         return  elm.name === lang.value
+        }).length > 0
+      })
+     console.log(langActive) 
+      setProjectLang(langActive)
       return setProjectData(selectedProject) 
     }
   }, [selectedProject])
@@ -102,7 +136,6 @@ const handleError = (text) => {
     }
   }, [store.saveSucces]) 
 
-
 return (
   <Fragment>
     <Form  
@@ -167,7 +200,27 @@ return (
           </Input>
         </FormGroup>
       </Col> */}
+      
+       <Col sm='12'>
+      </Col>
 
+          <Col className='mb-1' md='12' sm='12'>
+            <h6 className="py-1 mx-1 mb-0 font-medium-2"><Flag /> Languages</h6>
+             
+           <Select
+              isClearable={false}
+              theme={selectThemeColors}
+              value={projectLang}
+              isMulti
+              name='languages'
+              options={langOptions}
+              onChange={langOnChange}
+              className='react-select'
+              classNamePrefix='select'
+            /> 
+          </Col>
+      <Col sm='12'>
+      </Col>  
       <Col sm='12'>
         <ProjectPlatform  dataElement={dataProject} setElement={setProjectData} store={store} />
       </Col>