* adding laout menu edit

*  module optimizations

src/router/routes/screens.js

@@ -16,6 +16,13 @@ const ScreensRoutes = [
       navLink: '/screens/layoutmenus/add'
     }
   },
+  {
+    path: '/screens/layoutmenus/edit/:id',
+    component: lazy(() => import('../../views/screens/layoutmenus/edit')),
+    meta: {
+      navLink: '/screens/layoutmenus/edit'
+    }
+  },
   {
     path: '/screens/layoutmenus',
     component: lazy(() => import('../../views/screens/layoutmenus'))

src/views/screens/layoutmenus/add/index.js

@@ -12,7 +12,8 @@ import Breadcrumbs from '@components/breadcrumbs'
 // ** Third Party Components
 import { Row, Col } from 'reactstrap'
 
-
+// module settings
+import moduleSettings from '../module'
 // ** Tables
 import ElementCard from '../card'
 // ** Styles
@@ -22,9 +23,9 @@ const Tables = () => {
     const dispatch = useDispatch()
     const onSubmitHandler = values => {
             dispatch(
-              addlayoutmenu({
-                id: values.id,
-                name: values.name
+              addlayoutmenu({ 
+                name: values.name,
+                slug: values.slug
             })
             )
           
@@ -32,19 +33,19 @@ const Tables = () => {
 
   return (
     <Fragment>
-       <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive='Layout menus' />
+       <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
       <Row>
         <Col sm='12'>
-          <Link to="/screens/layoutmenus">Back to layout menus</Link>
+          <Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitle}</Link>
         </Col>
       </Row>
       <Row>
         <Col sm='12'>
-           <div class="card">
-             <div class="card-header">
-                <h4 class="card-title">New layout menu</h4>
+           <div className="card">
+             <div className="card-header">
+                <h4 className="card-title">New {moduleSettings.mainTitleSingle}</h4>
                </div>
-               <div class="card-body">
+               <div className="card-body">
                   <ElementCard selectedProject={{
                     id: '<generate>',
                     name: '',

src/views/screens/layoutmenus/card/index.js

@@ -39,7 +39,7 @@ const SuccessProgressToast = () => (
 )
 
 
-const ElementCard = ({ selectedProject, onSubmitHandler }) => {
+const ElementCard = ({ selectedElement, onSubmitHandler }) => {
   const store = useSelector(state => state.projectsettings)
   const [PlatformName, setPlatformName] = useState('Web')
 
@@ -58,25 +58,29 @@ const handleError = (text) => {
   })
 }
 
-  const  [dataProject, setProjectData] = useState(null),
+  const  [dataElement, setElementData] = useState(null),
      { register, errors, handleSubmit } = useForm(),
       dispatch = useDispatch(),
      notifySuccessProgress = () => toast.success(<SuccessProgressToast />),
       onSubmit = values => {
-      if (isObjEmpty(errors)) { 
-          onSubmitHandler({
-            id: null,
-            name :PlatformName
-          })
+      if (isObjEmpty(errors)) {
+        
+        const submitElement = {
+          ...dataElement,
+          name: values.name,
+          slug: values.slug
+        }
+        onSubmitHandler(submitElement)
+    
         }
       }
 
 
   useEffect(() => {
-    if (selectedProject !== null || (selectedProject !== null && dataProject !== null && selectedProject.id !== dataProject.id)) {
-      return setProjectData(selectedProject) 
+    if (selectedElement !== null || (selectedElement !== null && dataElement !== null && selectedElement.id !== dataElement.id)) {
+      return setElementData(selectedElement) 
     }
-  }, [selectedProject])
+  }, [selectedElement])
 
   useEffect(() => { 
     if (store.errorMsg !== '') {
@@ -106,10 +110,9 @@ return (
             readOnly={true} 
             type='text' 
             name='id' 
-            id='id' 
-            innerRef={register({ required: true })}
+            id='id'   
             placeholder='id' 
-            defaultValue={dataProject && dataProject.id}  
+            defaultValue={dataElement && dataElement.id}  
             />
         </FormGroup>
       </Col>
@@ -122,7 +125,7 @@ return (
             id='name'
             innerRef={register({ required: true })} 
             placeholder='Name' 
-            defaultValue={dataProject && dataProject.name} 
+            defaultValue={dataElement && dataElement.name} 
             className={classnames({ 'is-invalid': errors['name'] })}
             />
         </FormGroup>
@@ -136,7 +139,7 @@ return (
             id='slug'
             innerRef={register({ required: true })} 
             placeholder='Slug' 
-            defaultValue={dataProject && dataProject.slug}
+            defaultValue={dataElement && dataElement.slug}
             className={classnames({ 'is-invalid': errors['slug'] })}
             />
         </FormGroup>
@@ -150,7 +153,7 @@ return (
       {/* <Col md='4' sm='12'>
         <FormGroup>
           <Label for='name'>Name</Label>
-          <Input type='select' name='name' id='name' defaultValue={dataProject && dataProject.name} onChange={e => setPlatformName(e.target.value)}>
+          <Input type='select' name='name' id='name' defaultValue={dataElement && dataElement.name} onChange={e => setPlatformName(e.target.value)}>
             <option value='Web'>Web</option>
             <option value='iOS Phone'>iOS Phone</option>
             <option value='iOS Tablet'>iOS Tablet</option>
@@ -165,7 +168,7 @@ return (
         <Button.Ripple className='mb-1 mb-sm-0 mr-0 mr-sm-1' type='submit' color='primary'>
           Save Changes
         </Button.Ripple>
-        {/* <Button.Ripple color='secondary' outline  onClick={() => dispatch(getPlatform(selectedProject.id))} >
+        {/* <Button.Ripple color='secondary' outline  onClick={() => dispatch(getPlatform(selectedElement.id))} >
           Reset
         </Button.Ripple> */}
       </Col>

src/views/screens/layoutmenus/data.js

+// ** React Imports
+import { Link } from 'react-router-dom'
+
 // ** Custom Components
 import Avatar from '@components/avatar'
+// module settings
+import moduleSettings from './module'
 
 // ** Third Party Components
 import axios from 'axios'
@@ -212,7 +217,22 @@ export const serverSideColumns = [
     name: 'Name',
     selector: 'name',
     sortable: true,
-    minWidth: '225px'
+    minWidth: '225px',
+    cell: row => (
+      <div className='d-flex justify-content-left align-items-center'>
+        
+        <div className='d-flex flex-column'>
+          <Link
+            to={`${moduleSettings.baseURL}/edit/${row.id}`}
+            className='user-name text-truncate mb-0'
+            // onClick={() => store.dispatch(cleanProject(row.id))}
+          >
+            <span className='font-weight-bold'>{row.name}</span>
+          </Link>
+          <small className='text-truncate text-muted mb-0'>edit</small>
+        </div>
+      </div>
+    )
   },
   {
     name: 'Slug',

src/views/screens/layoutmenus/edit/index.js

@@ -9,27 +9,29 @@ import Breadcrumbs from '@components/breadcrumbs'
 import { Row, Col } from 'reactstrap'
 
 // ** Tables
-import ProjectsEdit from './main'
+import ElementEdit from './main'
 // ** Styles
 import '@styles/react/libs/tables/react-dataTable-component.scss'
+// module settings
+import moduleSettings from '../module'
 
 const Tables = () => {
   return (
     <Fragment>
-       <Breadcrumbs breadCrumbTitle='Settings' breadCrumbParent='Settings' breadCrumbActive='Platforms' />
+      <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
       <Row>
         <Col sm='12'>
-          <Link to="/settings/platforms">Back to Platforms</Link>
+          <Link to={moduleSettings.baseURL}>Back to {moduleSettings.mainTitleSingle}</Link>
         </Col>
       </Row>
       <Row>
         <Col sm='12'>
            <div class="card">
              <div class="card-header">
-                <h4 class="card-title">Platform</h4>
+                <h4 class="card-title">{moduleSettings.mainTitleSingle}</h4>
                </div>
                <div class="card-body">
-                  <ProjectsEdit />
+                  <ElementEdit />
                </div>
            </div>
         

src/views/screens/layoutmenus/edit/main.js

@@ -2,27 +2,30 @@ import { useState, useEffect, Fragment } from 'react'
 import { useParams, Link } from 'react-router-dom'
  
 // ** Store & Actions
-import { getProject, updateProject } from '../../store/actions'
+import { getLayoutMenu, updateLayoutMenu } from '../../store/actions'
 import { useSelector, useDispatch } from 'react-redux'
 
 
 import { Alert } from 'reactstrap'
 
 import  ElementCard from '../card'
+// module settings
+import moduleSettings from '../module'
 
-const ProjectsEdit = () => {
+
+const ElementEdit = () => {
     // ** States & Vars
     const store = useSelector(state => state.projectsettings),
-      [dataProject, setProjectData] = useState(null),
+      [dataElement, setElementData] = useState(null),
       dispatch = useDispatch(),
       { id } = useParams()
 
     const onSubmitHandler = values => {
       dispatch(
-          updateProject({
+          updateLayoutMenu({
               id: values.id,
-              app_name: values.app_name,
-              customer_name: values.customer_name
+              name: values.name,
+              slug: values.slug
           })
         )
       
@@ -30,31 +33,31 @@ const ProjectsEdit = () => {
 
     // ** Function to get user on mount
     useEffect(() => {
-      dispatch(getProject(id))
+      dispatch(getLayoutMenu(id))
     }, [dispatch])
 
 
           // ** Update user image on mount or change
   useEffect(() => {
-    if (store.selectedProject !== null || (store.selectedProject !== null && dataProject !== null && store.selectedProject.id !== dataProject.id)) {
-      return setProjectData(store.selectedProject) 
+    if (store.selectedElement !== null || (store.selectedElement !== null && dataElement !== null && store.selectedElement.id !== dataElement.id)) {
+      return setElementData(store.selectedElement) 
     }
-  }, [store.selectedProject])
+  }, [store.selectedElement])
 
    
-  return store.selectedProject !== null && store.selectedProject !== undefined  ? (
+  return store.selectedElement !== null && store.selectedElement !== undefined  ? (
     <ElementCard 
-      selectedProject={store.selectedProject} 
+      selectedElement={store.selectedElement} 
       onSubmitHandler={onSubmitHandler} 
     /> 
   ) : (
     <Alert color='info'>
-      <h4 className='alert-heading'>Loading Project</h4>
+      <h4 className='alert-heading'>Loading {moduleSettings.mainTitleSingle}</h4>
       <div className='alert-body'>
-        If Project with id: {id} doesn't exist. Check list of all Projects: <Link to='/settings/projects'>Projects List</Link>
+        If {moduleSettings.mainTitleSingle} with id: {id} doesn't exist. Check list of all {moduleSettings.mainTitle}: <Link to={moduleSettings.baseURL}>{moduleSettings.mainTitle} List</Link>
       </div>
 
     </Alert>
   )
   }
-export default ProjectsEdit
+export default ElementEdit

src/views/screens/layoutmenus/edit/plataform.js

-import {Media, Button, Label, Form, FormGroup, Input, Table, CustomInput, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert } from 'reactstrap'
-
-import { Lock, Edit, Trash2 } from 'react-feather'
-
-
-const ProjectPlatform = ({dataElement}) => {
- console.log(dataElement)
-return (
-    <div clssName='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>
-        </h6>
-        <Table borderless striped responsive>
-        <thead className='thead-light'>
-            <tr>
-            <th>Platforms</th> 
-            <th>Locked</th> 
-            <th>Menu start status</th>
-            <th>Min version</th>
-            <th>Menu orientation</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-            <td>IOS</td>
-            <td>
-                <CustomInput type='checkbox' id='admin-1' label='' defaultChecked />
-            </td>
-            
-            </tr>
-            <tr>
-            <td>Android</td>
-            <td>
-                <CustomInput type='checkbox' id='staff-1' label='' />
-            </td>
-            
-            </tr>
-            <tr>
-            <td>Android Tv</td>
-            <td>
-                <CustomInput type='checkbox' id='author-1' label='' defaultChecked />
-            </td>
-            
-            </tr>
-            <tr>
-            <td>Roku</td>
-            <td>
-                <CustomInput type='checkbox' id='contributor-1' label='' />
-            </td>
-            </tr>
-            <tr>
-            <td>STV</td>
-            <td>
-                <CustomInput type='checkbox' id='user-1' label='' />
-            </td>
-            </tr>
-        </tbody>
-        </Table>
-    </div>
-    )
-}
-export default ProjectPlatform

src/views/screens/layoutmenus/index.js

@@ -11,11 +11,13 @@ import { Row, Col } from 'reactstrap'
 import DataTable from './table'
 // ** Styles
 import '@styles/react/libs/tables/react-dataTable-component.scss'
+// module settings
+import moduleSettings from './module'
 
 const Tables = () => {
   return (
     <Fragment>
-      <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive='Layout Menus' />
+      <Breadcrumbs breadCrumbTitle='Screens' breadCrumbParent='Screens' breadCrumbActive={moduleSettings.mainTitle} />
       <Row>
         <Col sm='12'>
           <DataTable />

src/views/screens/layoutmenus/module.js

+const moduleSettings = {
+    mainTitle: 'Layout Menus',
+    mainTitleSingle: 'Layout Menu',
+    baseURL: '/screens/layoutmenus'
+}
+   
+
+export default moduleSettings
\ No newline at end of file

src/views/screens/layoutmenus/table.js

@@ -7,7 +7,8 @@ import { getData_layoutmenus } from '../store/actions'
 import { useSelector, useDispatch } from 'react-redux'
 
 import DataTableServerSide from '@components/datatable'
-
+// module settings
+import moduleSettings from './module'
 const DataTable = () => {
     // ** Store Vars
     const dispatch = useDispatch()
@@ -15,11 +16,11 @@ const DataTable = () => {
 
     return (
         <DataTableServerSide 
-            cardTitle='Layout Menus'
+            cardTitle={moduleSettings.mainTitle}
             allData={store.allDataLayoutMenus}
             getData={getData_layoutmenus} 
             serverSideColumns={serverSideColumns}
-            linkAddButton='/screens/layoutmenus/add'
+            linkAddButton={`${moduleSettings.baseURL}/add`} 
             total={store.totalLayoutMenus}
          />
 

src/views/screens/store/actions/index.js

 import axios from 'axios'
 
 
+export const setSaveSatus = params => {
+  return async dispatch => { 
+      dispatch({
+        type: 'SAVE_STATUS',
+        status:  params
+      })
+  }
+}
+export const setErrorMsg = params => {
+  return async dispatch => { 
+   
+      dispatch({
+        type: 'SAVE_ERROR',
+        errorMsg:  params
+      })
+  }
+}
+
 export const resetResults = id => {
     return async dispatch => {
       dispatch({
@@ -44,9 +62,45 @@ export const getData_layoutmenus = params => {
           // dispatch(getData_layoumenus())
         })
         .catch(err => { 
-          dispatch(setErrorMsg(err.response.data.message))
           console.log(err.response.data)
+          dispatch(setErrorMsg(err.response.data.message))
+          
+        })
+    }
+  }  
+
+  export const getLayoutMenu = id => {
+    return async dispatch => {
+      await axios
+        .get(`${process.env.REACT_APP_API}/api/layoutmenus/${id}`)
+        .then(response => {
+          // console.log('leu')
+          //  console.log(response)
+          dispatch({
+            type: 'GET_LAYOUTMENU',
+            data: response.data.data
+          })
         })
+        .catch(err => console.log(err))
     }
   }  
-  
+  
\ No newline at end of file
+  export const updateLayoutMenu = layoumenu => {
+    return (dispatch, getState) => {
+      axios
+        .put(`${process.env.REACT_APP_API}/api/layoumenus/${layoumenu.id}`, project)
+        .then(response => {
+          dispatch({
+            type: 'UPDATE_LAYOUTMENU',
+            layoumenu
+          })
+        })
+        .then(() => {
+          dispatch(setSaveSatus(true))
+        })
+        .catch(err => { 
+          dispatch(setErrorMsg(err.response.data.message))
+          console.log(err.response.data)
+        })
+    }
+  }
\ No newline at end of file

src/views/screens/store/reducer/index.js

@@ -51,8 +51,18 @@ const screens = (state = initialState, action) => {
           totalLayoutMenus: action.totalPages, 
           paramsLayoutMenus: action.params
         }
-       case 'ADD_LAYOUTMENU':
-            return { ...state } 
+      case 'ADD_LAYOUTMENU':
+          return { ...state } 
+          case 'GET_PROJECT':
+            return { ...state,  
+              selectedLayoutMenu : action.data
+            }
+        
+      case 'UPDATE_LAYOUTMENU':
+        return { ...state } 
+        
+      case 'ADD_LAYOUTMENU':
+        return { ...state }        
 
       default:
             return state