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

Added routing and basic board component.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-09 21:33:58 -08:00
parent 7de41f77ae
commit 620d2419a3
20 changed files with 407 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/App/App.container.jsx
View File

@@ -67,7 +67,8 @@ class AppContainer extends Component {
// See above for additional options, including other storage providers.
await persistCache({
cache,
storage: window.localStorage
storage: window.sessionStorage,
debug: true
});
} catch (error) {
console.error("Error restoring Apollo cache", error);

2
client/src/App/App.js
View File

@@ -74,7 +74,7 @@ class App extends React.Component {
}
render() {
console.log("this.props.currentUser", this.props.currentUser);
console.log("this.props.currentUser", this.props.currentUser.email);
return (
<div>
<Switch>

9
client/src/components/footer/footer.component.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
export default function FooterComponent() {
return (
<div>
Copyright Snapt Software 2019. All rights reserved.
</div>
)
}

1
client/src/components/header/header.component.jsx
View File

@@ -13,6 +13,7 @@ export default ({ landingHeader, selectedNavItem, navItems }) => {
};
return (
<Menu
theme="dark"
className="header"
onClick={handleClick}
selectedKeys={selectedNavItem}

11
client/src/components/manage-shop/manage-shop.component.jsx
View File

@@ -1,11 +0,0 @@
import React from "react";
import HeaderContainer from "../header/header.container";
export default function ManageShop() {
return (
<div>
<HeaderContainer />
This is the manage shop component.
</div>
);
}

7
client/src/components/manage-shop/manage-shop.container.jsx
View File

@@ -1,7 +0,0 @@
import React from "react";
import ManageShop from "./manage-shop.component";
const ManageShopContainer = () => <ManageShop />;
export default ManageShopContainer;

59
client/src/components/white-board-card/white-board-card.component.jsx Normal file
View File

@@ -0,0 +1,59 @@
import React from "react";
import { Skeleton, Switch, Card, Icon, Avatar } from "antd";
const { Meta } = Card;
class WhiteBoardCard extends React.Component {
state = {
loading: true
};
onChange = checked => {
this.setState({ loading: !checked });
};
render() {
const { loading } = this.state;
const {
onClick,
className,
name,
cardStyle,
body,
dueOn,
cardColor,
subTitle,
tagStyle,
escalationText,
tags,
showDeleteButton,
onDelete
} = this.props;
return (
<div>
<Card
style={{ width: 300, marginTop: 16 }}
actions={[
<Icon type="setting" key="setting" />,
<Icon type="edit" key="edit" />,
<Icon type="ellipsis" key="ellipsis" />,
<Switch checked={!loading} onChange={this.onChange} />
]}
>
<Skeleton loading={loading} avatar active>
<Meta
avatar={
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
}
title="Card title"
description="This is the description"
/>
</Skeleton>
</Card>
</div>
);
}
}
export default WhiteBoardCard;

3
client/src/graphql/initial-state.js
View File

@@ -5,5 +5,6 @@ export default {
token: null
},
selectedNavItem: "Home",
recentItems: []
recentItems: [],
whiteBoardLeftSiderVisible: true
};

6
client/src/graphql/local.queries.js
View File

@@ -15,3 +15,9 @@ export const GET_CURRENT_USER = gql`
}
}
`;
export const GET_WHITE_BOARD_LEFT_SIDER_VISIBLE = gql`
{
whiteBoardLeftSiderVisible @client
}
`;

19
client/src/graphql/resolvers.js
View File

@@ -1,9 +1,10 @@
import { gql } from "apollo-boost";
import { GET_CURRENT_USER } from "./local.queries";
import { GET_CURRENT_USER, GET_WHITE_BOARD_LEFT_SIDER_VISIBLE } from "./local.queries";
export const typeDefs = gql`
extend type Mutation {
SetCurrentUser(user: User!): User!
ToggleWhiteBoardLeftSiderVisible: Boolean!
}
extend type User {
@@ -22,6 +23,20 @@ export const resolvers = {
});
return user;
}
},
toggleWhiteBoardLeftSiderVisible: (_root, _args, { cache }) => {
const { whiteBoardLeftSiderVisible } = cache.readQuery({
query: GET_WHITE_BOARD_LEFT_SIDER_VISIBLE
});
cache.writeQuery({
query: GET_WHITE_BOARD_LEFT_SIDER_VISIBLE,
data: { whiteBoardLeftSiderVisible: !whiteBoardLeftSiderVisible }
});
return !whiteBoardLeftSiderVisible;
},
}
};

7
client/src/pages/jobs-detail/jobs-detail.page.container.jsx Normal file
View File

@@ -0,0 +1,7 @@
import React from "react";
import JobsDetail from "./jobs-detail.page";
export default function JobsDetailPageContainer({ match }) {
const jobId = match.params.jobId;
return <JobsDetail jobId={jobId} />;
}

5
client/src/pages/jobs-detail/jobs-detail.page.jsx Normal file
View File

@@ -0,0 +1,5 @@
import React from "react";
export default function JobsDetail({ jobId }) {
return <div>Jobs Detail Page - Job ID {jobId}</div>;
}

6
client/src/pages/jobs/jobs.page.container.jsx Normal file
View File

@@ -0,0 +1,6 @@
import React from "react";
import JobsPage from "./jobs.pages";
export default function JobsPageContainer() {
return <JobsPage />;
}

9
client/src/pages/jobs/jobs.pages.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
export default function JobsPage() {
return (
<div>
Jobs Master Page
</div>
)
}

6
client/src/pages/manage/manage.page.container.jsx Normal file
View File

@@ -0,0 +1,6 @@
import React from "react";
import ManagePage from "./manage.page";
export default function ManagePageContainer() {
return <ManagePage />;
}

52
client/src/pages/manage/manage.page.jsx
View File

@@ -1,19 +1,45 @@
import React from 'react'
import React from "react";
import { Route } from "react-router";
//Component Imports
import ManageShopContainer from '../../components/manage-shop/manage-shop.container';
import WhiteBoardPageContainer from "../white-board/white-board.page.container";
import JobsPageContainer from "../jobs/jobs.page.container";
import JobsDetailPageContainer from "../jobs-detail/jobs-detail.page.container";
import HeaderComponentContainer from "../../components/header/header.container";
import FooterComponent from "../../components/footer/footer.component";
import { Layout } from "antd";
//This page will handle all routing for the entire application.
export default function Manage({match}) {
console.log('Manage: match ', match)
return (
<div>
<Route exact path={`${match.path}`} component={ManageShopContainer}/>
<Route exact path={`${match.path}/jobs`} component={ManageShopContainer}/>
<Route exact path={`${match.path}/jobs/:jobId`} component={ManageShopContainer}/>
</div>
)
const { Header, Content, Footer } = Layout;
//This page will handle all routing for the entire application.
export default function Manage({ match }) {
return (
<Layout>
<Header>
<HeaderComponentContainer />
</Header>
<Content>
<Route
exact
path={`${match.path}`}
component={WhiteBoardPageContainer}
/>
<Route
exact
path={`${match.path}/jobs`}
component={JobsPageContainer}
/>
<Route
path={`${match.path}/jobs/:jobId`}
component={JobsDetailPageContainer}
/>
</Content>
<Footer>
<FooterComponent />
</Footer>
</Layout>
);
}

19
client/src/pages/white-board/white-board.page.container.jsx Normal file
View File

@@ -0,0 +1,19 @@
import React from "react";
import { Query, Mutation } from "react-apollo";
import WhiteBoardPage from "./white-board.page";
import Spin from "../../components/loading-spinner/loading-spinner.component";
import { GET_WHITE_BOARD_LEFT_SIDER_VISIBLE } from "../../graphql/local.queries";
export default function WhiteBoardPageContainer() {
return (
<Query query={GET_WHITE_BOARD_LEFT_SIDER_VISIBLE}>
{({ loading, error, data }) => {
if (loading) return <Spin />;
if (error) return error.message;
console.log('data from getwhiteboardquery', data)
return <WhiteBoardPage />;
}}
</Query>
);
}

87
client/src/pages/white-board/white-board.page.jsx Normal file
View File

@@ -0,0 +1,87 @@
import React from "react";
import Board from "react-trello";
import WhiteBoardCard from "../../components/white-board-card/white-board-card.component";
import { Layout, Icon, Menu } from "antd";
export default function WhiteBoardPage({ whiteBoardLeftSiderVisible }) {
const data = {
lanes: [
{
id: "lane1",
title: "Planned Tasks",
label: "2/2",
cards: [
{
id: "Card1",
title: "Write Blog",
description: "Can AI make memes",
label: "30 mins"
},
{
id: "Card2",
title: "Pay Rent",
description: "Transfer via NEFT",
label: "5 mins",
metadata: { sha: "be312a1" }
}
]
},
{
id: "lane2",
title: "Completed",
label: "0/0",
cards: []
}
]
};
const { Sider, Content } = Layout;
return (
<Layout>
<Sider
breakpoint="lg"
collapsedWidth="0"
onBreakpoint={broken => {
//console.log(broken);
}}
onCollapse={(collapsed, type) => {
//console.log(collapsed, type);
}}
>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={["4"]}>
<Menu.Item key="1">
<Icon type="user" />
<span className="nav-text">nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera" />
<span className="nav-text">nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload" />
<span className="nav-text">nav 3</span>
</Menu.Item>
<Menu.Item key="4">
<Icon type="user" />
<span className="nav-text">nav 4</span>
</Menu.Item>
</Menu>
</Sider>
<Content>
<Board
tagStyle={{ fontSize: "80%" }}
data={data}
draggable
components={{ Card: WhiteBoardCard }}
onCardClick={(cardId, metadata) =>
alert(
`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`
)
}
/>
</Content>
</Layout>
);
}