manage menu playlist UI

src/@core/components/datatable/tableHeader.js

@@ -44,11 +44,13 @@ const CustomHeader = ({ linkAddButton, handlePerPage, rowsPerPage, handleFilter,
                 onChange={e => handleFilter(e.target.value)}
               />
             </div>
-            <Button.Ripple color='primary'>
+            {linkAddButton && <Button.Ripple color='primary'>
                 <Link to={linkAddButton} className="btn-primary">
                      Add New
                 </Link>
             </Button.Ripple>
+            }
+        
           </Col>
         </Row>
       </div>

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

@@ -31,7 +31,8 @@ const Tables = () => {
                 type: values.type,
                 display: values.display,
                 pagetypeid: values.pagetypeid,
-                order: values.order
+                order: values.order,
+                menu_page_layouts: values.menu_page_layouts
             })
             )
           
@@ -39,7 +40,7 @@ const Tables = () => {
 
   return (
     <Fragment>
-       <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
+       <Breadcrumbs breadCrumbTitle='Pages' breadCrumbParent='Pages' breadCrumbActive={moduleSettings.mainTitle} />
       <Row>
         <Col sm='12'>
           <Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitle}</Link>
@@ -61,7 +62,8 @@ const Tables = () => {
                         type: '',
                         display: '',
                         pagetypeid: '',
-                        order: '0'
+                        order: '0',
+                        menu_page_layouts: []
                         }}
                     onSubmitHandler={onSubmitHandler}
                     />

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

@@ -6,10 +6,13 @@ 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 { isObjEmpty } from '@utils'
 
 import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
 
+import TabLayoutPlaylist from './tablayoutplaylists'
+
 
 // ** Store & Actions
 import {resetResults} from '../../store/actions'
@@ -23,6 +26,8 @@ import classnames from 'classnames'
 import Swal from 'sweetalert2'
 import withReactContent from 'sweetalert2-react-content'
 
+// ** Styles
+import '@styles/react/apps/app-users.scss'
 
 const SuccessProgressToast = () => (
   <Fragment>
@@ -67,6 +72,9 @@ const handleError = (text) => {
      screensStore = useSelector(state => state.screens),
      [pagetypes, setPagetypes] = useState(null),
      [layoumenu, setLayoumenu] = useState(null),
+     [activeTab, setActiveTab] = useState(0),
+     //
+     toggle = tab => setActiveTab(tab),
      dispatch = useDispatch(),
      notifySuccessProgress = () => toast.success(<SuccessProgressToast />),
      onSubmit = values => {
@@ -85,6 +93,20 @@ const handleError = (text) => {
         onSubmitHandler(submitElement)
     
         }
+      },
+     handleAddBlock = () => {
+        if (!dataElement) return
+
+        const newData  = dataElement
+        newData.menu_page_layouts.push({
+          id: '<generated>',
+          layout_id: null,
+          order: 1,
+          page_id: dataElement.id
+        })
+        setElementData(newData)
+        setActiveTab(newData.menu_page_layouts.length - 1)
+       console.log(newData)
         } 
 
 
@@ -290,8 +312,59 @@ return (
             />
         </FormGroup>
       </Col>
+    </Row>
+
+    <Row className='app-user-edit'>
+      <Col sm='12'>
+        <Card>
+          <CardBody className='pt-2'>
+         
+            <h4 className="card-title">Blocks</h4>
+            <Nav pills>
+              
+                {dataElement && dataElement.menu_page_layouts.map((block, index) => {
+                  return  <NavItem>
+                            <NavLink key={index}
+                              active={activeTab === index} 
+                              onClick={() => toggle(index)}
+                              >
+                              <span className='align-middle d-none d-sm-block'>Blocks {index + 1}</span>
+                            </NavLink>
+                      </NavItem>
+                   })}
+              <NavItem>
+                  <NavLink  
+                    className='btn-primary' 
+                    onClick={() => handleAddBlock()}
+                    >
+                   <span className='align-middle d-none d-sm-block'>+ add New </span>
+                  </NavLink>
+              </NavItem>
+            </Nav>
+            <TabContent 
+               activeTab={activeTab}
+              >
+                {!!dataElement && dataElement.menu_page_layouts.map((block, index) => {
+                  return <TabPane tabId={index}>
+                        <TabLayoutPlaylist block={block} selectedDataElement={dataElement}  setElementData={setElementData} />
+                      </TabPane>
+                    }
+                  )
+                }
+                <TabPane tabId={dataElement ? dataElement.menu_page_layouts.length : 0}>
+                  <div 
+                  // selectedUser={store.selectedUser} 
+                    >
                        
+                      </div>
+                </TabPane>
+            </TabContent>  
+          </CardBody>  
+        </Card>     
+      </Col>
+    </Row>
 
+    <Row className='app-user-edit'>
       <Col className='d-flex flex-sm-row flex-column mt-2' sm='12'>
         <Button.Ripple className='mb-1 mb-sm-0 mr-0 mr-sm-1' type='submit' color='primary'>
           Save Changes

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

+import { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+// ** Third Party Components
+import { Row, Col, FormGroup, Label, Input, Button } from 'reactstrap'
+import { useForm } from 'react-hook-form'
+import classnames from 'classnames'
+
+import { getData_menupagesplaylists, updatemenupages } from '../../store/actions'
+import DataTableServerSide from '@components/datatable'
+
+// ** Table Server Side Column
+const serverSideColumns = [
+    {
+      name: 'ID',
+      selector: 'id',
+      sortable: true,
+      minWidth: '25px'
+    },
+    {
+      name: 'System name',
+      selector: 'system_name',
+      sortable: true,
+      minWidth: '225px'
+    }
+  ]
+   
+
+const ManagePlaylist = (ElementID) => { 
+    const store = useSelector(state => state.menupages),
+    [avaliablePlaylists, setavaliablePlaylists] = useState([]),
+    [selectedPlaylists, setSelectedPlaylists] = useState([])
+
+    const handleAdd = (value) => {
+        const newValue = selectedPlaylists.concat(value)
+        setSelectedPlaylists(newValue)
+          }
+    const handleRemove = (value) => {
+        const newValue = selectedPlaylists.filter(element => element.id !== value.id)
+        setSelectedPlaylists(newValue)
+        }  
+        const  serverSideColumnsLeft = [
+            ...serverSideColumns,
+            {
+            name: 'Action',
+            selector: 'Action',
+            sortable: true,
+            minWidth: '25px',
+            cell: row => (
+                <div className='d-flex justify-content-left align-items-center'>
+                    
+                    <div className='d-flex flex-column'>
+                    <Button className='user-name text-truncate mb-0'
+                        onClick={() => { handleRemove(row) }}
+                    >
+                        <span className='font-weight-bold'>Remove</span>
+                    </Button>
+                    </div>
+                </div>
+                )
+            }
+        ]        
+    const  serverSideColumnsRight = [
+        ...serverSideColumns,
+        {
+        name: 'Action',
+        selector: 'Action',
+        sortable: true,
+        minWidth: '25px',
+        cell: row => (
+            <div className='d-flex justify-content-left align-items-center'>
+                
+                <div className='d-flex flex-column'>
+                <Button className='user-name text-truncate mb-0'
+                    onClick={() => { handleAdd(row) }}
+                >
+                    <span className='font-weight-bold'>Add</span>
+                </Button>
+                </div>
+            </div>
+            )
+        }
+    ]   
+        
+    useEffect(() => {
+        const Ids = selectedPlaylists.map(elem => elem.id)
+        const filtered = store.allDataMenuPages.filter(element => !Ids.includes(element.id))
+        setavaliablePlaylists(filtered)
+      }, [store.allDataMenuPages])    
+    useEffect(() => {
+        const Ids = selectedPlaylists.map(elem => elem.id)
+        const filtered = store.allDataMenuPages.filter(element => !Ids.includes(element.id))
+        setavaliablePlaylists(filtered)
+      }, [selectedPlaylists])
+
+    return <div className="card">
+        <div className="card-header">
+            <h4 className="card-title">playlist</h4>
+        </div>
+        <div className="card-body">
+            <Row>
+                <Col sm='6'>
+                    <DataTableServerSide 
+                        cardTitle='Content'
+                        allData={selectedPlaylists}
+                        getData={getData_menupagesplaylists} 
+                        serverSideColumns={serverSideColumnsLeft}
+                        // linkAddButton={`/add`} 
+                        total={selectedPlaylists.length}
+                    />
+                </Col>
+                <Col sm='6'>
+                    <DataTableServerSide 
+                        cardTitle='List to add'
+                        allData={avaliablePlaylists}
+                        getData={getData_menupagesplaylists} 
+                        serverSideColumns={serverSideColumnsRight}
+                        // linkAddButton={`/add`} 
+                        total={store.totalMenuPages}
+                    />
+
+                </Col>
+            </Row>
+        </div>
+    </div>  
+}
+
+export default ManagePlaylist
\ No newline at end of file

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

+
+import { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+// ** Third Party Components
+import { Row, Col, FormGroup, Label, Input, Button } from 'reactstrap'
+import { useForm } from 'react-hook-form'
+import classnames from 'classnames'
+
+import { getData_layoutPlaylists } from '../../../screens/store/actions'
+import { DivideCircle } from 'react-feather'
+// import { Button } from 'bootstrap'
+import ManagePlaylist from './manageplaylist'
+
+const TabLayoutPlaylist = ({block, selectedDataElement, setElementData}) => {
+    const [dataElement, setDataElement] = useState(null),
+        [layoutPlaylists, setLayoutPlaylists] = useState(null),
+        dispatch = useDispatch(),
+        screensStore = useSelector(state => state.screens),
+        { register, errors, handleSubmit } = useForm()
+
+    const handleDetailChange = (value, field) => {
+        const newData = selectedDataElement.menu_page_layouts.map((mpagelayout) => {
+                if (mpagelayout.id === block.id) {
+                    mpagelayout[field] = value
+                }
+            })
+        setElementData(
+            {
+                ...selectedDataElement
+            })
+        }
+
+    useEffect(() => {
+        if (block !== null || (block !== null && dataElement !== null && block.id !== dataElement.id)) {
+          return setDataElement(block) 
+        }
+      }, [block])
+ // populate layout playlist
+  useEffect(() => {
+    if (!screensStore.allDataLayoutPlaylists || screensStore.allDataLayoutPlaylists.length < 1) {
+          dispatch(getData_layoutPlaylists({
+            start: 1,
+            length: 1000,
+            q: null
+        }))
+        }
+    }, [dispatch])
+    useEffect(() => {
+        setLayoutPlaylists(screensStore.allDataLayoutPlaylists)
+      }, [screensStore.allDataLayoutPlaylists])    
+
+    return (
+        <Col sm='12'>
+           <div className="card">
+             <div className="card-header">
+                <h4 className="card-title">ElementCard {dataElement && dataElement.id} </h4>
+            </div>
+               <div className="card-body">
+               <Row>
+                    <Col md='4' sm='12'>
+                        <FormGroup>
+                        <Label for='id'>ID</Label>
+                        <Input 
+                            readOnly={true} 
+                            type='text' 
+                            name='id' 
+                            id='id'   
+                            placeholder='id' 
+                            defaultValue={dataElement && dataElement.id}  
+                            />
+                        </FormGroup>
+                    </Col>
+                    <Col md='4' sm='12'>
+                        <FormGroup>
+                        <Label for='layout_id'>Layout</Label>
+                        <Input 
+                            type='select' 
+                            name='layout_id' 
+                            id='layout_id'   
+                            placeholder='layout_id' 
+                            innerRef={register({ required: true })} 
+                            defaultValue={dataElement && dataElement.layout_id} 
+                            className={classnames({ 'is-invalid': errors['layout_id'] })} 
+                            onChange={(e) => handleDetailChange(e.target.value, 'layout_id')}
+                                   
+                            >
+                            {!!layoutPlaylists ? layoutPlaylists.map(option => {
+                            return  <option key={option.id} 
+                              selected={option.id === dataElement.layout_id ? option.id : ''}
+                              value={option.id}>{option.name}</option>
+                        }) : <option>Loading</option> }
+                      </Input>
+                        </FormGroup>
+                    </Col>
+                    <Col md='4' sm='12'>
+                        <FormGroup>
+                        <Label for='order'>order</Label>
+                        <Input 
+                            type='text' 
+                            name='order' 
+                            order='order'   
+                            placeholder='order' 
+                            innerRef={register({ required: true })} 
+                            defaultValue={dataElement && dataElement.order}
+                            className={classnames({ 'is-invalid': errors['order'] })}  
+                            onChange={(e) => handleDetailChange(e.target.value, 'order')}
+                            />
+                        </FormGroup>
+                    </Col>
+                </Row>
+               </div>
+            </div>
+
+            <ManagePlaylist ElementID={dataElement && dataElement.layout_id}  />  
+
+          </Col>  
+             
+    )
+}
+
+export default TabLayoutPlaylist
\ No newline at end of file

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

@@ -18,7 +18,7 @@ import moduleSettings from '../module'
 const Tables = () => {
   return (
     <Fragment>
-      <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
+      <Breadcrumbs breadCrumbTitle='Pages' breadCrumbParent='Pages' breadCrumbActive={moduleSettings.mainTitle} />
       <Row>
         <Col sm='12'>
           <Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitleSingle}</Link>

src/views/menupages/store/actions/pages.js

@@ -98,3 +98,12 @@ export const getData_menupages = params => {
         })
     }
   }
+
+
+  export const getData_menupagesplaylists = params => {
+    const newparams = {
+      ...params,
+      idproject: 2
+      }
+      return _getData_menupages(newparams)
+  }  
\ No newline at end of file