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

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>
);
}