avaliability UI

src/@core/scss/base/plugins/forms/pickers/form-flat-pickr.scss

@@ -133,8 +133,9 @@
     }
 
     .flatpickr-time {
+      height: 40px !important;
       border-color: $theme-dark-body-bg !important;
-      height: 40px;
+      
 
       .numInput,
       .flatpickr-am-pm {

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

@@ -61,7 +61,8 @@ const Tables = () => {
                         external_id: '',
                         textual: [],
                         genres: [],
-                        subgenres: []
+                        subgenres: [],
+                        availability: []
                         }}
                     onSubmitHandler={onSubmitHandler}
                     />

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

@@ -10,8 +10,10 @@ import { selectThemeColors } from '@utils'
 import Flatpickr from 'react-flatpickr' 
 import Select, { components } from 'react-select'
 import { platform } from 'chart.js'
+import Moment from 'moment'
   
-const PlanAvaliability =  ({dataElement, AvaChange}) => {
+
+const PlanAvaliability =  ({dataElement, handleElmChange}) => {
     const [pickerstartdate, setPickerstartdate] = useState(Date.parse(dataElement.startdate)),
     [pickerenddate, setPickerenddate] = useState(Date.parse(dataElement.enddate)),
     [plataforms, setPlatforms] = useState([]),
@@ -68,6 +70,117 @@ const PlanAvaliability =  ({dataElement, AvaChange}) => {
 
     }, [dataElement])
 
+    const  updatePlatforms = (value) => {
+        const newValue = value.map(elm => {
+            return {
+              id: elm.value,
+              name: elm.label,
+              pivot: {
+                idavailability: dataElement.id, 
+                idplatform:elm.value
+              }
+            }
+          })
+          const newData = {
+            ...dataElement,
+            plataforms: newValue
+          }
+          handleElmChange(newData)
+        },
+        updateStartDate = (value) => {
+            const newData = {
+                ...dataElement,
+                startdate: Moment(value[0]).format('YYYY-MM-DD HH:mm:ss')
+              }
+              handleElmChange(newData)
+              setPickerstartdate(value) 
+           console.log(value)
+        },
+        updateEndDate = (value) => {
+            const newData = {
+                ...dataElement,
+                enddate: Moment(value[0]).format('YYYY-MM-DD HH:mm:ss')
+              }
+              handleElmChange(newData)
+              setPickerenddate(value) 
+        },
+        updateGeo = (value, actionValue) => {
+        const newValue = value.map(elm => {
+            return {
+              id: elm.value,
+              name: elm.label,
+              pivot: {
+                idgeolocation: elm.value,
+                idavailability: dataElement.id, 
+                action: actionValue
+              }
+            }
+          })
+          const newData = {
+            ...dataElement,
+            geolocations: newValue
+          }
+          handleElmChange(newData)
+        },
+
+      platfomsOnChange = (value, { action, removedValue }) => {
+        switch (action) {
+          case 'remove-value':
+          case 'pop-value':
+            if (removedValue.isFixed) { 
+              return
+            }
+            setAvaliaPlatforms(value)
+            break
+          case 'clear':
+            value = genresAllOptions.filter(v => v.isFixed)
+            setAvaliaPlatforms(value) 
+            break
+          default:
+            setAvaliaPlatforms(value) 
+            break
+        }
+       updatePlatforms(value)
+      },
+
+      permitGeoOnChange = (value, { action, removedValue }) => {
+        switch (action) {
+          case 'remove-value':
+          case 'pop-value':
+            if (removedValue.isFixed) { 
+              return
+            }
+            setPermitGeo(value)
+            break
+          case 'clear':
+            value = genresAllOptions.filter(v => v.isFixed)
+            setPermitGeo(value) 
+            break
+          default:
+            setPermitGeo(value) 
+            break
+        }
+       updateGeo(value, 'permit')
+      },
+      denyGeoOnChange = (value, { action, removedValue }) => {
+        switch (action) {
+          case 'remove-value':
+          case 'pop-value':
+            if (removedValue.isFixed) { 
+              return
+            }
+            setDenyGeo(value)
+            break
+          case 'clear':
+            value = genresAllOptions.filter(v => v.isFixed)
+            setDenyGeo(value) 
+            break
+          default:
+            setDenyGeo(value) 
+            break
+        }
+       updateGeo(value, 'deny')
+      }
     return <Fragment>
     <Row>
         <Col md='12' sm='12'>
@@ -84,7 +197,7 @@ const PlanAvaliability =  ({dataElement, AvaChange}) => {
     
                 id={`startdate-picker${dataElement.id}`}
                 className='form-control'
-                onChange={date => setPickerstartdate(date)}
+                onChange={date => updateStartDate(date)}
                 options={{
                     enableTime: true,
                     dateFormat: 'Y-m-d H:i',
@@ -94,7 +207,7 @@ const PlanAvaliability =  ({dataElement, AvaChange}) => {
             </FormGroup>
         </Col>
         <Col md='8' sm='12'>
-            <Label for='plataforms'>Plataforms</Label>
+            <Label for='plataforms'>Platforms</Label>
             <Select
                 isClearable={false}
                 theme={selectThemeColors}
@@ -102,7 +215,7 @@ const PlanAvaliability =  ({dataElement, AvaChange}) => {
                 isMulti
                 name={`platforms${dataElement.id}`}
                  options={plataforms}
-                // onChange={genreSubOnChange}
+                onChange={platfomsOnChange}
                 className='react-select'
                 classNamePrefix='select'
             /> 
@@ -120,7 +233,7 @@ const PlanAvaliability =  ({dataElement, AvaChange}) => {
     
                 id={`enddate-picker${dataElement.id}`}
                 className='form-control'
-                onChange={date => setPickerenddate(date)}
+                onChange={date => updateEndDate(date) }
                 options={{
                     enableTime: true,
                     dateFormat: 'Y-m-d H:i',
@@ -139,7 +252,7 @@ const PlanAvaliability =  ({dataElement, AvaChange}) => {
                 isMulti
                 name={`platforms${dataElement.id}`}
                 options={geolocations}
-                // onChange={genreSubOnChange}
+                onChange={permitGeoOnChange}
                 className='react-select'
                 classNamePrefix='select'
             /> 
@@ -153,7 +266,7 @@ const PlanAvaliability =  ({dataElement, AvaChange}) => {
                 isMulti
                 name={`platforms${dataElement.id}`}
                 options={geolocations}
-                // onChange={genreSubOnChange}
+                onChange={denyGeoOnChange}
                 className='react-select'
                 classNamePrefix='select'
             /> 
@@ -164,7 +277,35 @@ const PlanAvaliability =  ({dataElement, AvaChange}) => {
     </Fragment>  
 }
 
-const AvaliabilityBlock = ({dataElement, handleAvailiabilityChange}) => {
+const AvaliabilityBlock = ({dataElement, handleElmChange}) => {
+    const handleAvalChange = (value) => { 
+        const newData = dataElement.map(elm => {
+            if (elm.id === value.id) {
+                 elm.plataforms = value.plataforms
+                 elm.geolocations = value.geolocations
+                 elm.startdate = value.startdate
+                 elm.enddate = value.enddate
+            }
+        })
+       // console.log(value)
+    },
+    handleAddBlock = () => {
+      if (!dataElement) return
+
+      const newData  = dataElement
+        
+      newData.push({
+        id: `<generated${dataElement.length}>`,
+        idassets: 'current',
+        startdate: '',
+        enddate: '',
+        plataforms: [],
+        geolocations: []
+      })
+      handleElmChange(newData)
+      console.log(dataElement)
+    }
+
     return  <Row>
         <Col sm='12'>
             <Card>  
@@ -173,12 +314,18 @@ const AvaliabilityBlock = ({dataElement, handleAvailiabilityChange}) => {
                         return  <PlanAvaliability 
                                 key={elm.id}
                                 dataElement={elm}
+                                handleElmChange={handleAvalChange}
                             />
                         })
                     }
                     <Col sm="12" className="text-center">
-                        <Button.Ripple className='mb-1 mb-sm-0 mr-0 mr-sm-1' type='button' color='primary'>
-                             new
+                        <Button.Ripple 
+                            className='mb-1 mb-sm-0 mr-0 mr-sm-1' 
+                            type='button' 
+                            color='primary'
+                            onClick={() => handleAddBlock()}
+                            >
+                             New
                         </Button.Ripple>
                     </Col>
                 </CardBody>

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

@@ -105,6 +105,14 @@ const handleError = (text) => {
        }
        setElementData(newData)
       },
+      handleAvalChange = value => {
+        // console.log(value)
+        const newData = {
+          ...dataElement,
+          availability: value
+        }
+        setElementData(newData)
+      }, 
     updateGenres = (value) => {
       const newValue = value.map(elm => {
         return {
@@ -434,7 +442,7 @@ return (
                 <TabPane tabId={2}>
                   <AvaliabilityBlock 
                     dataElement={dataElement && dataElement.availability}
-                  //  handleTextualChange={handleTextualChange}
+                    handleElmChange={handleAvalChange}
                     />
                 </TabPane>
             </TabContent>  

src/views/menupages/mainpages/card/index.js

@@ -111,7 +111,7 @@ const handleError = (text) => {
         })
         setElementData(newData)
         setActiveTab(newData.menu_page_layouts.length - 1)
-       console.log(newData)
+      //  console.log(newData)
         }