From f0fa3530ebe75b3f637f99dd0e51a9e1dcfbfa01 Mon Sep 17 00:00:00 2001
From: Ridene <rridene@centreon.com>
Date: Fri, 8 Jun 2018 18:00:21 +0200
Subject: [PATCH] feat(menu): map first level with api
---
www/frontSrc/Header/Nav/Nav.js | 94 ++++++++++++++--------
www/frontSrc/Header/Nav/NavContainer.js | 7 +-
www/frontSrc/Header/Reducers/navReducer.js | 6 +-
3 files changed, 68 insertions(+), 39 deletions(-)
diff --git a/www/frontSrc/Header/Nav/Nav.js b/www/frontSrc/Header/Nav/Nav.js
index a2fa641bd3..5f8c9da0b1 100644
--- a/www/frontSrc/Header/Nav/Nav.js
+++ b/www/frontSrc/Header/Nav/Nav.js
@@ -72,49 +72,75 @@ const Nav = (
onChange={handleChange}
classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
>
- <Tab disableRipple
- icon={<HomeIcon viewBox="6 156 600 600" className={classes.navIcons}/>}
- classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
- />
- <Tab
- icon={<MonitoringIcon viewBox="0 0 600 600"/>}
- classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
- />
- <Tab
- icon={<ReportingIcon viewBox="0 0 600 600"/>}
- classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
- />
- <Tab
- icon={<ConfigurationIcon viewBox="0 0 600 600"/>}
- classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
- />
- <Tab
- icon={<AdministrationIcon viewBox="6 156 600 600"/>}
- classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
- />
+ {
+ Object.keys(items).map((item) => {
+ const Components = {
+ 'Home': {
+ component: HomeIcon,
+ viewBox: '6 156 600 600',
+ className: classes.navIcons
+ },
+ 'Monitoring': {
+ component: MonitoringIcon,
+ viewBox: '0 0 600 600',
+ className: null
+ },
+ 'Reporting': {
+ component: ReportingIcon,
+ viewBox: '0 0 600 600',
+ className: null
+ },
+ 'Configuration': {
+ component: ConfigurationIcon,
+ viewBox: '0 0 600 600',
+ className: null
+ },
+ 'Administration': {
+ component: AdministrationIcon,
+ viewBox: '6 156 600 600',
+ className: null
+ },
+
+ }
+ const i = items[item]
+ const Icon = Components[i.label].component || HomeIcon
+
+ return (
+ <Tab disableRipple key={item}
+ icon={<Icon viewBox={Components[i.label].viewBox} className={Components[i.label].className} />}
+ classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+ />
+ )
+ }
+ )
+ }
</Tabs>
{
- items.map((item, index) => {
- if(value === index) {
- return (
- <div className={classes.wrapper} key={index}>
- <div className={classes.secondLevel} key={index} style={{ backgroundColor: item.color }}>
- {
- item.children.map((secondItem, i) => {
- return <SecondLevel
+ Object.keys(items).map((item, index) => {
+ console.log(items[item].children)
+ /*if(value === index) {
+
+ item.children.map((secondItem, i) => {
+ console.log('1',secondItem)
+ return (
+ <div className={classes.wrapper}>
+ <div className={classes.secondLevel} key={index} style={{ backgroundColor: item.color }}>
+ <SecondLevel
key={i}
id={i}
item={secondItem}
open={open}
- />
- })
- }
+ />
+ </div>
</div>
- </div>
- )
- }
+ )
+ })
+ }*/
})
}
+ <div className={classes.secondLevel} key={1} style={{ backgroundColor: '#009FDF' }}>
+ hello
+ </div>
</div>
)
diff --git a/www/frontSrc/Header/Nav/NavContainer.js b/www/frontSrc/Header/Nav/NavContainer.js
index 3feaf26c4a..00ece29844 100644
--- a/www/frontSrc/Header/Nav/NavContainer.js
+++ b/www/frontSrc/Header/Nav/NavContainer.js
@@ -31,11 +31,14 @@ class NavContainer extends Component {
const { data, dataFetched } = this.props.nav
if (dataFetched) {
- const key = data.reduce((acc, item) => {
- if (item.active) acc = item.key
+ //console.log(this.props.nav)
+ const key = Object.keys(data).reduce((acc, item) => {
+ if (data[item].active) acc = item.key
return acc
},0)
+
const activeItemKey = value !== key ? key : value
+
return <Nav
value={value}
items={data}
diff --git a/www/frontSrc/Header/Reducers/navReducer.js b/www/frontSrc/Header/Reducers/navReducer.js
index fc9b102f66..d0e128684e 100644
--- a/www/frontSrc/Header/Reducers/navReducer.js
+++ b/www/frontSrc/Header/Reducers/navReducer.js
@@ -20,7 +20,7 @@ export default function navReducer (
isFetching: true,
}
case REQUEST_NAV_ITEMS_SUCCESS:
- const color = ['#00A499', '#84BD00', '#E98F2C', '#009FDF', '#10069F']
+ /*const color = ['#00A499', '#84BD00', '#E98F2C', '#009FDF', '#10069F']
const data = action.data
const result = data.reduce((acc, item, i) => {
acc = [
@@ -32,11 +32,11 @@ export default function navReducer (
}
]
return acc
- }, [])
+ }, [])*/
return {
...state,
- data: result,
+ data: action.data,
dataFetched: true,
isFetching: false,
error: false,
--
GitLab