1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

starting work on impliment people/members module

This commit is contained in:
Alex Windett 2017-01-18 17:00:59 +00:00
parent 77373ec32d
commit 2b1a94fbfa
7 changed files with 141 additions and 15 deletions

View File

@ -0,0 +1,31 @@
const React = require('react');
const PropTypes = require('@root/prop-types');
// const List = require('@ui/components/list');
// const {
// ListItem,
// ListItemView,
// ListItemMeta,
// ListItemTitle,
// ListItemOptions
// } = List;
const PersonItem = ({
person = {},
}) => {
return (
<tr>
<td>{person.uuid}</td>
<td>{person.uuid}</td>
<td>{person.uuid}</td>
</tr>
);
};
PersonItem.propTypes = {
person: PropTypes.person,
};
module.exports = PersonItem;

View File

@ -0,0 +1,39 @@
const React = require('react');
const PersonItem = require('@components/people-item');
const PropTypes = require('@root/prop-types');
const PeopleList = ({
people = []
}) => {
const peopleList = people.map((person) => (
<PersonItem
key={person.uuid}
person={person}
/>
));
return (
<div>
<table>
<thead>
<tr>
<th>Member</th>
<th>Status</th>
<th>Role</th>
</tr>
</thead>
<tbody>
{peopleList}
</tbody>
</table>
</div>
);
};
PeopleList.propTypes = {
people: React.PropTypes.arrayOf(PropTypes.person),
};
module.exports = PeopleList;

View File

@ -3,6 +3,13 @@ const React = require('react');
const ReactRedux = require('react-redux');
// const ReactRouter = require('react-router');
const Row = require('@ui/components/row');
const Column= require('@ui/components/column');
const Button= require('@ui/components/button');
const PropTypes = require('@root/prop-types');
const PeopleList = require('@components/people-list');
const selectors = require('@state/selectors');
const Section = require('./section');
// const {
@ -13,23 +20,53 @@ const {
connect
} = ReactRedux;
// const {
// Link,
// Match,
// Miss,
// Redirect
// } = ReactRouter;
const {
peopleByOrgIdSelector
} = selectors;
const buttonStyle = {
float: 'right'
};
const People = (props) => {
const {
people = []
} = props;
return (
<Section {...props}>
<p>people</p>
<Row>
<Column smOffset={9} xs={2}>
<Button style={buttonStyle}>Invite</Button>
</Column>
</Row>
<Row>
<Column>
<PeopleList
people={people}
/>
</Column>
</Row>
</Section>
);
};
People.propTypes = {};
People.propTypes = {
people: React.PropTypes.arrayOf(PropTypes.person)
// toggleCollapsed: React.PropTypes.func
};
const mapStateToProps = (state) => ({});
const mapStateToProps = (state, {
params = {}
}) => ({
people: peopleByOrgIdSelector(params.org)(state)
});
module.exports = connect(mapStateToProps)(People);
const mapDispatchToProps = (dispatch) => ({});
module.exports = connect(
mapStateToProps,
mapDispatchToProps
)(People);

View File

@ -211,18 +211,23 @@
"owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
"id": "nicola",
"name": "Your dashboard",
"image": "https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg"
"image": "https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg",
"members": {}
}, {
"owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
"uuid": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
"id": "biz-tech",
"name": "BizTech"
"name": "BizTech",
"members": [{
"uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f"
}]
}, {
"owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
"uuid": "551f316d-e414-480f-9787-b4c408db3edd",
"id": "make-us-proud",
"name": "Make Us Proud",
"image": "/static/images/make-us-proud.svg"
"image": "/static/images/make-us-proud.svg",
"members": {}
}]
},
"projects": {

View File

@ -61,6 +61,10 @@ const Sections = React.PropTypes.arrayOf(
React.PropTypes.string
);
const Person = React.PropTypes.shape({
...BaseObject
});
module.exports = {
account: Account,
link: Link,
@ -71,5 +75,6 @@ module.exports = {
instance: Instance,
metric: Metric,
metricType: MetricType,
dataset: Dataset
dataset: Dataset,
person: Person
};

View File

@ -18,6 +18,7 @@ const services = (state) => get(state, 'services.data', []);
const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
const collapsedInstances = (state) => get(state, 'instances.ui.collapsed', []);
const instances = (state) => get(state, 'instances.data', []);
const members = (state) => get(state, 'members.data', []);
const metricTypes = (state) => get(state, 'metrics.data.types', []);
const metricDatasets = (state) => get(state, 'metrics.data.datasets', []);
@ -110,6 +111,12 @@ const instancesByProjectId = (projectId) => createSelector(
}))
);
const peopleByOrgId = (orgId) => createSelector(
// [members, orgById(orgId)], (members, org) => org.members
[members, orgById(orgId)], (members, org) => org.members
);
module.exports = {
accountSelector: account,
accountUISelector: accountUi,
@ -126,5 +133,6 @@ module.exports = {
instancesByServiceIdSelector: instancesByServiceId,
metricsByServiceIdSelector: metricsByServiceId,
instancesByProjectIdSelector: instancesByProjectId,
metricTypeByUuidSelector: metricTypeByUuid
metricTypeByUuidSelector: metricTypeByUuid,
peopleByOrgIdSelector: peopleByOrgId
};

View File

@ -130,6 +130,7 @@ const style = css`
`;
const StyledButton = styled.button`
min-width: ${remcalc(120)};
${style}
`;