mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
link settings and projects
This commit is contained in:
parent
1f62fa5fd5
commit
297c15db98
@ -1,4 +1,9 @@
|
||||
{
|
||||
"your-dashboard": "Your Dashboard",
|
||||
"welcome-to": "Welcome to"
|
||||
"settings": "Settings",
|
||||
"projects": "Projects",
|
||||
"people": "People",
|
||||
"no-personal-projects": "You don't have any personal projects at the moment.",
|
||||
"create-new": "Create new",
|
||||
"your-settings": "Your settings"
|
||||
}
|
@ -1,4 +1,9 @@
|
||||
{
|
||||
"your-dashboard": "O seu painel",
|
||||
"welcome-to": "Bem vindo a"
|
||||
"settings": "Preferências",
|
||||
"projects": "Projectos",
|
||||
"people": "Pessoas",
|
||||
"no-personal-projects": "No momento não tem projectos pessoais",
|
||||
"create-new": "Criar novo",
|
||||
"your-settings": "As suas preferências"
|
||||
}
|
@ -23,6 +23,7 @@
|
||||
"express": "^4.14.0",
|
||||
"inherits": "^2.0.3",
|
||||
"locale": "^0.1.0",
|
||||
"lodash.isempty": "^4.4.0",
|
||||
"lodash.template": "^4.4.0",
|
||||
"lodash.uniq": "^4.5.0",
|
||||
"param-case": "^2.1.0",
|
||||
|
@ -72,7 +72,7 @@ module.exports = (props) => {
|
||||
<App {...props}>
|
||||
<Header />
|
||||
<Article>
|
||||
<Match component={Home} pattern='/' />
|
||||
<Match component={Home} pattern='/:org?/:section?' />
|
||||
<Miss component={NotFound} />
|
||||
</Article>
|
||||
<Footer />
|
||||
|
@ -1,38 +1,72 @@
|
||||
const React = require('react');
|
||||
const ReactIntl = require('react-intl');
|
||||
// const ReactRedux = require('react-redux');
|
||||
// const ReactRouter = require('react-router');
|
||||
// const Styled = require('styled-components');
|
||||
const ReactRedux = require('react-redux');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
const H1 = require('@ui/components/h1');
|
||||
const Li = require('@ui/components/horizontal-list/li');
|
||||
const Redirect = require('@components/redirect');
|
||||
const Ul = require('@ui/components/horizontal-list/ul');
|
||||
|
||||
const Projects = require('./projects');
|
||||
const Settings = require('./settings');
|
||||
|
||||
// const fns = require('@ui/shared/functions');
|
||||
//
|
||||
const {
|
||||
FormattedMessage
|
||||
} = ReactIntl;
|
||||
//
|
||||
// const {
|
||||
// connect
|
||||
// } = ReactRedux;
|
||||
|
||||
// const {
|
||||
// Link,
|
||||
// Match
|
||||
// } = ReactRouter;
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
// const {
|
||||
// default: styled
|
||||
// } = Styled;
|
||||
//
|
||||
// const {
|
||||
// remcalc
|
||||
// } = fns;
|
||||
const {
|
||||
Link,
|
||||
Match,
|
||||
Miss
|
||||
} = ReactRouter;
|
||||
|
||||
const Dashboard = (props) => {
|
||||
const Dashboard = ({
|
||||
pathname = '',
|
||||
user = {}
|
||||
}) => {
|
||||
return (
|
||||
<h1>
|
||||
<FormattedMessage id='your-dashboard' />
|
||||
</h1>
|
||||
<div>
|
||||
<H1>
|
||||
<FormattedMessage id='your-dashboard' />
|
||||
</H1>
|
||||
<Ul>
|
||||
<Li>
|
||||
<Link activeClassName='active' to={`/${user.id}/projects`}>
|
||||
<FormattedMessage id='projects' />
|
||||
</Link>
|
||||
</Li>
|
||||
<Li>
|
||||
<Link activeClassName='active' to={`/${user.id}/settings`}>
|
||||
<FormattedMessage id='settings' />
|
||||
</Link>
|
||||
</Li>
|
||||
</Ul>
|
||||
<Match component={Projects} pattern={`/${user.id}/projects`} />
|
||||
<Match component={Settings} pattern={`/${user.id}/settings`} />
|
||||
<Miss component={Redirect(`/${user.id}/projects`)} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Dashboard;
|
||||
Dashboard.propTypes = {
|
||||
pathname: React.PropTypes.string,
|
||||
user: React.PropTypes.shape({
|
||||
id: React.PropTypes.string,
|
||||
name: React.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
projects: state.session.data.projects,
|
||||
user: {
|
||||
id: state.session.data.name,
|
||||
name: state.session.data.name
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = connect(mapStateToProps)(Dashboard);
|
||||
|
13
frontend/src/containers/dashboard/projects.js
Normal file
13
frontend/src/containers/dashboard/projects.js
Normal file
@ -0,0 +1,13 @@
|
||||
const ReactRedux = require('react-redux');
|
||||
|
||||
const Projects = require('@components/projects');
|
||||
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
projects: state.session.data.projects
|
||||
});
|
||||
|
||||
module.exports = connect(mapStateToProps)(Projects);
|
43
frontend/src/containers/dashboard/settings.js
Normal file
43
frontend/src/containers/dashboard/settings.js
Normal file
@ -0,0 +1,43 @@
|
||||
const React = require('react');
|
||||
const ReactIntl = require('react-intl');
|
||||
const ReactRedux = require('react-redux');
|
||||
// const ReactRouter = require('react-router');
|
||||
//
|
||||
const Column = require('@ui/components/column');
|
||||
// const Button = require('@ui/components/button');
|
||||
const Row = require('@ui/components/row');
|
||||
|
||||
const {
|
||||
FormattedMessage
|
||||
} = ReactIntl;
|
||||
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
// const {
|
||||
// Link,
|
||||
// Match,
|
||||
// Miss,
|
||||
// Redirect
|
||||
// } = ReactRouter;
|
||||
|
||||
const Settings = () => {
|
||||
return (
|
||||
<Row>
|
||||
<Column xs={12}>
|
||||
<FormattedMessage id='your-settings' />
|
||||
</Column>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
Settings.propTypes = {
|
||||
Settings: React.PropTypes.array
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
Settings: state.session.data.Settings
|
||||
});
|
||||
|
||||
module.exports = connect(mapStateToProps)(Settings);
|
@ -1,4 +1,3 @@
|
||||
const paramCase = require('param-case');
|
||||
const React = require('react');
|
||||
const ReactIntl = require('react-intl');
|
||||
const ReactRedux = require('react-redux');
|
||||
@ -7,8 +6,10 @@ const Styled = require('styled-components');
|
||||
|
||||
const Container = require('@ui/components/container');
|
||||
const Dashboard = require('@containers/dashboard');
|
||||
const fns = require('@ui/shared/functions');
|
||||
const Li = require('@ui/components/horizontal-list/li');
|
||||
const Org = require('@containers/org');
|
||||
const Redirect = require('@components/redirect');
|
||||
const Ul = require('@ui/components/horizontal-list/ul');
|
||||
|
||||
const {
|
||||
FormattedMessage
|
||||
@ -20,63 +21,35 @@ const {
|
||||
|
||||
const {
|
||||
Link,
|
||||
Match
|
||||
Match,
|
||||
Miss
|
||||
} = ReactRouter;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const StyledNav = styled.div`
|
||||
background-color: #f2f2f2;
|
||||
`;
|
||||
|
||||
const StyledUl = styled.ul`
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
const StyledLi = styled.li`
|
||||
display: inline-block;
|
||||
margin-right: ${remcalc(10)};
|
||||
padding-top: ${remcalc(10)};
|
||||
padding-bottom: ${remcalc(10)};
|
||||
|
||||
& a.active {
|
||||
cursor: default;
|
||||
color: #373A3C;
|
||||
text-decoration: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const Home = ({
|
||||
orgs = [],
|
||||
pathname = '/'
|
||||
pathname = '/',
|
||||
user = {}
|
||||
}) => {
|
||||
const parent = pathname.replace(/\/$/, '');
|
||||
const links = orgs.map((org) => `${parent}/${paramCase(org.name)}`);
|
||||
|
||||
const isDashboardActive = (location) => {
|
||||
return !links.some((link) => location.pathname.indexOf(link) >= 0);
|
||||
};
|
||||
|
||||
const navLinks = orgs.map(({
|
||||
id,
|
||||
name
|
||||
}) => {
|
||||
const to = `${parent}/${paramCase(name)}`;
|
||||
const to = `/${id}`;
|
||||
|
||||
return (
|
||||
<StyledLi key={to}>
|
||||
<Link
|
||||
activeClassName='active'
|
||||
to={to}
|
||||
>
|
||||
<Li key={to}>
|
||||
<Link activeClassName='active' to={to}>
|
||||
{name}
|
||||
</Link>
|
||||
</StyledLi>
|
||||
</Li>
|
||||
);
|
||||
});
|
||||
|
||||
@ -84,30 +57,20 @@ const Home = ({
|
||||
<div>
|
||||
<StyledNav>
|
||||
<Container>
|
||||
<StyledUl>
|
||||
<StyledLi key={pathname}>
|
||||
<Link
|
||||
activeClassName='active'
|
||||
isActive={isDashboardActive}
|
||||
to={pathname}
|
||||
>
|
||||
<Ul>
|
||||
<Li key={pathname}>
|
||||
<Link activeClassName='active' to={`/${user.id}`}>
|
||||
<FormattedMessage id='your-dashboard' />
|
||||
</Link>
|
||||
</StyledLi>
|
||||
</Li>
|
||||
{navLinks}
|
||||
</StyledUl>
|
||||
</Ul>
|
||||
</Container>
|
||||
</StyledNav>
|
||||
<Container>
|
||||
<Match
|
||||
exactly
|
||||
pattern={parent}
|
||||
render={Dashboard}
|
||||
/>
|
||||
<Match
|
||||
component={Org}
|
||||
pattern={`${parent}/:org`}
|
||||
/>
|
||||
<Match component={Dashboard} pattern={`/${user.id}/:section?`} />
|
||||
<Match component={Org} pattern='/:org' />
|
||||
<Miss component={Redirect(`/${user.id}`)} />
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
@ -115,13 +78,22 @@ const Home = ({
|
||||
|
||||
Home.propTypes = {
|
||||
orgs: React.PropTypes.arrayOf(React.PropTypes.shape({
|
||||
id: React.PropTypes.string,
|
||||
name: React.PropTypes.string
|
||||
})),
|
||||
pathname: React.PropTypes.string
|
||||
pathname: React.PropTypes.string,
|
||||
user: React.PropTypes.shape({
|
||||
id: React.PropTypes.string,
|
||||
name: React.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
orgs: state.session.data.orgs
|
||||
orgs: state.session.data.orgs,
|
||||
user: {
|
||||
id: state.session.data.name,
|
||||
name: state.session.data.name
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = connect(mapStateToProps)(Home);
|
||||
|
@ -1,48 +1,99 @@
|
||||
const isEmpty = require('lodash.isempty');
|
||||
const React = require('react');
|
||||
const ReactIntl = require('react-intl');
|
||||
// const ReactRedux = require('react-redux');
|
||||
// const ReactRouter = require('react-router');
|
||||
// const Styled = require('styled-components');
|
||||
//
|
||||
// const Container = require('@ui/components/container');
|
||||
// const fns = require('@ui/shared/functions');
|
||||
//
|
||||
const ReactRedux = require('react-redux');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
const H1 = require('@ui/components/h1');
|
||||
const Li = require('@ui/components/horizontal-list/li');
|
||||
const Ul = require('@ui/components/horizontal-list/ul');
|
||||
|
||||
const NotFound = require('@containers/not-found');
|
||||
|
||||
const People = require('./people');
|
||||
const Projects = require('./projects');
|
||||
const Settings = require('./settings');
|
||||
|
||||
const {
|
||||
FormattedMessage
|
||||
} = ReactIntl;
|
||||
//
|
||||
// const {
|
||||
// connect
|
||||
// } = ReactRedux;
|
||||
//
|
||||
// const {
|
||||
// Link,
|
||||
// Match
|
||||
// } = ReactRouter;
|
||||
//
|
||||
// const {
|
||||
// default: styled
|
||||
// } = Styled;
|
||||
//
|
||||
// const {
|
||||
// remcalc
|
||||
// } = fns;
|
||||
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
const {
|
||||
Link,
|
||||
Match,
|
||||
Miss,
|
||||
Redirect
|
||||
} = ReactRouter;
|
||||
|
||||
const Org = ({
|
||||
params
|
||||
org = {},
|
||||
params = {},
|
||||
user = {}
|
||||
}) => {
|
||||
if (user.id === params.org) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (isEmpty(org)) {
|
||||
return (
|
||||
<NotFound />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<h1>
|
||||
<FormattedMessage id='welcome-to' />
|
||||
<span> {params.org}</span>
|
||||
</h1>
|
||||
<div>
|
||||
<H1>{org.name}</H1>
|
||||
<Ul>
|
||||
<Li>
|
||||
<Link activeClassName='active' to={`/${org.id}/projects`}>
|
||||
<FormattedMessage id='projects' />
|
||||
</Link>
|
||||
</Li>
|
||||
<Li>
|
||||
<Link activeClassName='active' to={`/${org.id}/people`}>
|
||||
<FormattedMessage id='people' />
|
||||
</Link>
|
||||
</Li>
|
||||
<Li>
|
||||
<Link activeClassName='active' to={`/${org.id}/settings`}>
|
||||
<FormattedMessage id='settings' />
|
||||
</Link>
|
||||
</Li>
|
||||
</Ul>
|
||||
<Match component={Projects} pattern='/:org/projects' />
|
||||
<Match component={People} pattern='/:org/people' />
|
||||
<Match component={Settings} pattern='/:org/settings' />
|
||||
<Miss component={Redirect(`/${org.id}/projects`)} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Org.propTypes = {
|
||||
org: React.PropTypes.shape({
|
||||
id: React.PropTypes.string,
|
||||
name: React.PropTypes.string
|
||||
}),
|
||||
params: React.PropTypes.shape({
|
||||
org: React.PropTypes.string
|
||||
}),
|
||||
user: React.PropTypes.shape({
|
||||
id: React.PropTypes.string,
|
||||
name: React.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
module.exports = Org;
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
org: state.session.data.orgs.filter((org) => {
|
||||
return org.id === ownProps.params.org;
|
||||
}).pop(),
|
||||
user: {
|
||||
id: state.session.data.name,
|
||||
name: state.session.data.name
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = connect(mapStateToProps)(Org);
|
||||
|
29
frontend/src/containers/org/people.js
Normal file
29
frontend/src/containers/org/people.js
Normal file
@ -0,0 +1,29 @@
|
||||
const React = require('react');
|
||||
// const ReactIntl = require('react-intl');
|
||||
const ReactRedux = require('react-redux');
|
||||
// const ReactRouter = require('react-router');
|
||||
|
||||
// const {
|
||||
// FormattedMessage
|
||||
// } = ReactIntl;
|
||||
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
// const {
|
||||
// Link,
|
||||
// Match,
|
||||
// Miss,
|
||||
// Redirect
|
||||
// } = ReactRouter;
|
||||
|
||||
const People = () => {
|
||||
return <p>people</p>;
|
||||
};
|
||||
|
||||
People.propTypes = {};
|
||||
|
||||
const mapStateToProps = (state) => ({});
|
||||
|
||||
module.exports = connect(mapStateToProps)(People);
|
17
frontend/src/containers/org/projects.js
Normal file
17
frontend/src/containers/org/projects.js
Normal file
@ -0,0 +1,17 @@
|
||||
const ReactRedux = require('react-redux');
|
||||
|
||||
const Projects = require('@components/projects');
|
||||
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
return {
|
||||
projects: (state.session.data.orgs.filter((org) => {
|
||||
return org.id === ownProps.params.org;
|
||||
}).pop() || {}).projects
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = connect(mapStateToProps)(Projects);
|
29
frontend/src/containers/org/settings.js
Normal file
29
frontend/src/containers/org/settings.js
Normal file
@ -0,0 +1,29 @@
|
||||
const React = require('react');
|
||||
// const ReactIntl = require('react-intl');
|
||||
const ReactRedux = require('react-redux');
|
||||
// const ReactRouter = require('react-router');
|
||||
|
||||
// const {
|
||||
// FormattedMessage
|
||||
// } = ReactIntl;
|
||||
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
// const {
|
||||
// Link,
|
||||
// Match,
|
||||
// Miss,
|
||||
// Redirect
|
||||
// } = ReactRouter;
|
||||
|
||||
const Settings = () => {
|
||||
return <p>Settings</p>;
|
||||
};
|
||||
|
||||
Settings.propTypes = {};
|
||||
|
||||
const mapStateToProps = (state) => ({});
|
||||
|
||||
module.exports = connect(mapStateToProps)(Settings);
|
@ -26,12 +26,29 @@ const {
|
||||
const store = Store({
|
||||
session: {
|
||||
data: {
|
||||
id: 'nicola',
|
||||
name: 'Nicola',
|
||||
projects: [],
|
||||
orgs: [{
|
||||
id: 'biz-tech',
|
||||
name: 'BizTech',
|
||||
pinned: true
|
||||
pinned: true,
|
||||
projects: [{
|
||||
id: 'forest-foundation-dev',
|
||||
name: 'Forest Foundation Dev',
|
||||
plan: '20.05$ per day'
|
||||
}, {
|
||||
id: 'forest-foundation-testing',
|
||||
name: 'Forest Foundation Testing',
|
||||
plan: '20.05$ per day'
|
||||
}, {
|
||||
id: 'forest-foundation-production',
|
||||
name: 'Forest Foundation Production',
|
||||
plan: '100.17$ per day'
|
||||
}],
|
||||
}, {
|
||||
name: 'Make Us Proud'
|
||||
id: 'make-us-proud',
|
||||
name: 'Make Us Proud',
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
@ -3442,6 +3442,10 @@ lodash.foreach@^4.3.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
|
||||
|
||||
lodash.isempty:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
|
||||
|
||||
lodash.isequal@^4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.4.0.tgz#6295768e98e14dc15ce8d362ef6340db82852031"
|
||||
|
@ -23,6 +23,10 @@ const {
|
||||
|
||||
const padding = sizes.halfGutterWidth || '0.5rem';
|
||||
|
||||
const direction = (size) => (props) => {
|
||||
return props[size] ? 'column-reverse' : 'column';
|
||||
};
|
||||
|
||||
const width = (fallback) => (size) => (props) => {
|
||||
return !isUndefined(props[size])
|
||||
? calc(`(${props[size]} / ${sizes.gridColumns}) * 100%`)
|
||||
@ -54,10 +58,12 @@ module.exports = styled.div`
|
||||
flex-basis: ${flexBasis('xs')};
|
||||
max-width: ${maxWidth('xs')};
|
||||
margin-left: ${marginLeft('xsOffset')};
|
||||
flex-direction: ${direction('xsReverse')};
|
||||
|
||||
${sm`
|
||||
flex-basis: ${flexBasis('sm')};
|
||||
max-width: ${maxWidth('sm')};
|
||||
flex-direction: ${direction('smReverse')};
|
||||
`}
|
||||
|
||||
${smOffset`
|
||||
@ -67,6 +73,7 @@ module.exports = styled.div`
|
||||
${md`
|
||||
flex-basis: ${flexBasis('md')};
|
||||
max-width: ${maxWidth('md')};
|
||||
flex-direction: ${direction('mdReverse')};
|
||||
`}
|
||||
|
||||
${mdOffset`
|
||||
@ -76,6 +83,7 @@ module.exports = styled.div`
|
||||
${lg`
|
||||
flex-basis: ${flexBasis('lg')};
|
||||
max-width: ${maxWidth('lg')};
|
||||
flex-direction: ${direction('lgReverse')};
|
||||
`}
|
||||
|
||||
${lgOffset`
|
||||
|
Loading…
Reference in New Issue
Block a user