admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored header to pull from masterdata.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-05 22:00:00 -08:00
parent 2842af38b7
commit 76b6b9c7b9
5 changed files with 96 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
client/src/components/header-app-bar/header-app-bar.component.jsx
View File

@@ -3,10 +3,6 @@ import { Menu, Icon } from "antd";
const { SubMenu } = Menu;
class HeaderAppBar extends Component {
state = {
current: "alipay"
};
handleClick = e => {
console.log("click ", e);
this.setState({
@@ -15,47 +11,53 @@ class HeaderAppBar extends Component {
};
render() {
const { selectedNavItem, navItems } = this.props;
return (
<Menu
onClick={this.handleClick}
selectedKeys={[this.state.current]}
selectedKeys={selectedNavItem}
mode="horizontal"
>
<Menu.Item key="mail">
<Icon type="mail" />
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled>
<Icon type="appstore" />
Navigation Two
</Menu.Item>
<SubMenu
title={
<span className="submenu-title-wrapper">
<Icon type="setting" />
Navigation Three - Submenu
</span>
}
>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a
href="https://ant.design"
target="_blank"
rel="noopener noreferrer"
>
Navigation Four - Link
</a>
</Menu.Item>
{navItems.map(navItem => (
<Menu.Item key={navItem.title}>{navItem.title}</Menu.Item>
))}
</Menu>
// <Menu.Item key="mail">
// <Icon type="mail" />
// Navigation One
// </Menu.Item>
// <Menu.Item key="app" disabled>
// <Icon type="appstore" />
// Navigation Two
// </Menu.Item>
// <SubMenu
// title={
// <span className="submenu-title-wrapper">
// <Icon type="setting" />
// Navigation Three - Submenu
// </span>
// }
// >
// <Menu.ItemGroup title="Item 1">
// <Menu.Item key="setting:1">Option 1</Menu.Item>
// <Menu.Item key="setting:2">Option 2</Menu.Item>
// </Menu.ItemGroup>
// <Menu.ItemGroup title="Item 2">
// <Menu.Item key="setting:3">Option 3</Menu.Item>
// <Menu.Item key="setting:4">Option 4</Menu.Item>
// </Menu.ItemGroup>
// </SubMenu>
// <Menu.Item key="alipay">
// <a
// href="https://ant.design"
// target="_blank"
// rel="noopener noreferrer"
// >
// Navigation Four - Link
// </a>
// </Menu.Item>
// </Menu>
);
}
}

44
client/src/components/header-app-bar/header-app-bar.container.jsx Normal file
View File

@@ -0,0 +1,44 @@
import React from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";
import { Spin, Alert } from "antd";
import HeaderAppBar from "./header-app-bar.component";
const GET_NAV_ITEMS = gql`
query nav_items {
masterdata_by_pk(key: "NAV_ITEMS") {
value
}
}
`;
const GET_SELECTED_NAV_ITEM = gql`
query selected_nav_item {
selectedNavItem @client
}
`;
const HeaderAppBarContainer = () => (
<Query query={GET_SELECTED_NAV_ITEM}>
{({ loading, error, data: { selectedNavItem } }) => {
console.log("Selected Nav item", selectedNavItem);
return (
<Query query={GET_NAV_ITEMS}>
{({ loading, error, data }) => {
if (loading) return <Spin size="large" />;
return (
<HeaderAppBar
selectedNavItem={selectedNavItem}
navItems={data.masterdata_by_pk.value}
/>
);
}}
</Query>
);
}}
</Query>
);
export default HeaderAppBarContainer;