starting work on impliment people/members module
This commit is contained in:
parent
77373ec32d
commit
2b1a94fbfa
31
frontend/src/components/people-item/index.js
Normal file
31
frontend/src/components/people-item/index.js
Normal 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;
|
39
frontend/src/components/people-list/index.js
Normal file
39
frontend/src/components/people-list/index.js
Normal 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;
|
@ -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);
|
||||
|
@ -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": {
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -130,6 +130,7 @@ const style = css`
|
||||
`;
|
||||
|
||||
const StyledButton = styled.button`
|
||||
min-width: ${remcalc(120)};
|
||||
${style}
|
||||
`;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user