Skip to content

C
cms
Commit e319af13 authored by PDuarte's avatar PDuarte
Browse files
Options

* adding laout menu edit 

*  module optimizations
parent 9d35f392
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 119 deletions
src/router/routes/screens.js
View file @ e319af13
......@@ -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
View file @ e319af13
......@@ -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
View file @ e319af13
......@@ -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
View file @ e319af13
// ** 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
View file @ e319af13
......@@ -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
View file @ e319af13
......@@ -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 deleted 100644 → 0
View file @ 9d35f392
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
View file @ e319af13
......@@ -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 0 → 100644
View file @ e319af13
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
View file @ e319af13
......@@ -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
View file @ e319af13
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
View file @ e319af13
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment