playlist avalibility UI

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

@@ -340,7 +340,7 @@ const AvaliabilityBlock = ({dataElement, handleElmChange}) => {
         <Col sm='12'>
             <Card>  
                 <CardBody className='pt-2'> 
-                { dataElement !== null &&  dataElement.map(elm => {
+                { dataElement !== null  && dataElement !== undefined  &&  dataElement.map(elm => {
                         return  <PlanAvaliability 
                                 key={elm.id}
                                 dataElement={elm}

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

@@ -31,7 +31,8 @@ const Tables = () => {
                 dynamic: values.dynamic,
                 special: values.special,
                 special_id: values.special_id,
-                assets: values.assets
+                assets: values.assets,
+                availability: values.availability
               }
             )
           )
@@ -62,7 +63,14 @@ const Tables = () => {
                         dynamic: 0,
                         special: 0,
                         special_id: '',
-                        assets: []
+                        assets: [],
+                        parent: {
+                          textual: [],
+                          genres: [],
+                          subgenres: [],
+                          availability: [],
+                          imagery: []
+                          }
                         }}
                     onSubmitHandler={onSubmitHandler}
                     />

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

@@ -13,13 +13,11 @@ import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
 
 import ManageAssets from './manageassets'
 
-
-// import TabLayoutPlaylist from './tablayoutplaylists'
-
+import AvaliabilityBlock from '../../../assets/projectassets/card/avaliability'
 
 // ** Store & Actions
 import {resetResults} from '../../store/actions'
-import { getData_pagetypes } from  '../../../settings/store/actions'
+import { getProject } from  '../../../settings/store/actions'
 import { getData_assets } from '../../../assets/store/actions'
 import { getData_layoutPlaylists } from  '../../../screens/store/actions'
 
@@ -32,6 +30,8 @@ import withReactContent from 'sweetalert2-react-content'
 
 // ** Styles
 import '@styles/react/apps/app-users.scss'
+import '@styles/react/libs/flatpickr/flatpickr.scss'
+
 
 const SuccessProgressToast = () => (
   <Fragment>
@@ -53,6 +53,7 @@ const SuccessProgressToast = () => (
 
 const ElementCard = ({ selectedElement, onSubmitHandler, handelDelete }) => {
   const store = useSelector(state => state.projectsettings)
+  const storeNavbar = useSelector(state => state.navbar)
   const [PlatformName, setPlatformName] = useState('Web')
 
   const MySwal = withReactContent(Swal)
@@ -72,8 +73,8 @@ const handleError = (text) => {
 
   const  [dataElement, setElementData] = useState(null),
      { register, errors, handleSubmit } = useForm(),
-    //  settingStore = useSelector(state => state.projectsettings),
      screensStore = useSelector(state => state.screens),
+     projectStore = useSelector(state => state.projectsettings),
     //  [pagetypes, setPagetypes] = useState(null),
      [layoutplaylists, setLayoutplaylists] = useState(null),
      [activeTab, setActiveTab] = useState(0),
@@ -106,6 +107,13 @@ const handleError = (text) => {
     
         }
       },
+      handleAvalChange = (value) => {
+        const newData = {
+          ...dataElement,
+          availability: value
+        }
+        setElementData(newData)
+      },
      handleAddBlock = () => {
         if (!dataElement) return
 
@@ -123,8 +131,9 @@ const handleError = (text) => {
 
 
   useEffect(() => {
+    if (!!dataElement) return
     if (selectedElement !== null || (selectedElement !== null && dataElement !== null && selectedElement.id !== dataElement.id)) {
-      return setElementData(selectedElement) 
+      setElementData(selectedElement)
     }
   }, [selectedElement])
 
@@ -142,43 +151,32 @@ const handleError = (text) => {
     }
   }, [store.saveSucces]) 
 
-// populate page types
-  // useEffect(() => {
-  //   if (!settingStore.allDataPagetypes || settingStore.allDataPagetypes.length < 1) {
-  //         dispatch(getData_pagetypes({
-  //           start: 1,
-  //           length: 1000,
-  //           q: null
-  //       }))
-  //       }
-  //   }, [dispatch])
-  // useEffect(() => {
-  //     setPagetypes(settingStore.allDataPagetypes)
-  // }, [settingStore.allDataPagetypes])  
-
-  // populate layout menus
   useEffect(() => {
-    if (!screensStore.allDataLayoutPlaylists || screensStore.allDataLayoutPlaylists.length < 1) {
+      if (!screensStore.allDataLayoutPlaylists || screensStore.allDataLayoutPlaylists.length < 1) {
           dispatch(getData_layoutPlaylists({
             start: 1,
             length: 1000,
             q: null
         }))
         }
+      if (!projectStore.selectedProject) {
+        dispatch(getProject(selectedElement.idproject)) 
+      }
     }, [dispatch])
+
   useEffect(() => {
     setLayoutplaylists(screensStore.allDataLayoutPlaylists)
   }, [screensStore.allDataLayoutPlaylists])  
 
-  useEffect(() => {
-    if (dataElement !== null && (!store.allDataLayoutAssets || store.allDataLayoutAssets.length < 1)) {
+  useEffect(() => { 
+    if (dataElement !== null && (!store.allDataAssets || store.allDataAssets.length < 1)) {
         dispatch(getData_assets({
           start: 0,
           length: 1000,
           idproject: dataElement.idproject,
           q: null
       }))
-      }   
+      }
   }, [dataElement])
 
 return (
@@ -302,7 +300,48 @@ return (
 
     <Row className='app-user-edit'>
       <Col sm='12'>
-        <ManageAssets dataElement={dataElement && dataElement.assets}  handleChange={handleAssetsChange} />  
+        <Card>
+        <CardBody className='pt-2'>
+            <Nav pills>
+                <NavItem>
+                      <NavLink
+                        active={activeTab === 0} 
+                        onClick={() => toggle(0)}
+                        >
+                        <span className='align-middle d-none d-sm-block'>Assets</span>
+                      </NavLink>
+                </NavItem>
+               
+                <NavItem>
+                      <NavLink
+                        active={activeTab === 1} 
+                        onClick={() => toggle(1)}
+                        >
+                        <span className='align-middle d-none d-sm-block'>Avaliability</span>
+                      </NavLink>
+                </NavItem>
+              </Nav>
+              <TabContent 
+               activeTab={activeTab}
+              >
+         
+                <TabPane tabId={0}>
+                  <ManageAssets 
+                    dataElement={dataElement && dataElement.assets}  
+                    handleChange={handleAssetsChange} 
+                    />  
+                </TabPane>
+    
+                <TabPane tabId={1}>
+                <AvaliabilityBlock 
+                    dataElement={dataElement && dataElement.parent && dataElement.parent.availability}
+                     handleElmChange={handleAvalChange}
+                    />
+                </TabPane>
+              </TabContent>
+            </CardBody>   
+        </Card>
+
       </Col>   
     </Row>