diff --git a/frontend/src/components/people-item/index.js b/frontend/src/components/people-item/index.js
new file mode 100644
index 00000000..8bff9fc2
--- /dev/null
+++ b/frontend/src/components/people-item/index.js
@@ -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 (
+
+ {person.uuid} |
+ {person.uuid} |
+ {person.uuid} |
+
+ );
+};
+
+PersonItem.propTypes = {
+ person: PropTypes.person,
+};
+
+module.exports = PersonItem;
\ No newline at end of file
diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js
new file mode 100644
index 00000000..304314d0
--- /dev/null
+++ b/frontend/src/components/people-list/index.js
@@ -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) => (
+
+ ));
+
+ return (
+
+
+
+
+ Member |
+ Status |
+ Role |
+
+
+
+ {peopleList}
+
+
+
+ );
+};
+
+PeopleList.propTypes = {
+ people: React.PropTypes.arrayOf(PropTypes.person),
+};
+
+module.exports = PeopleList;
diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js
index 044d7278..31109005 100644
--- a/frontend/src/containers/org/people.js
+++ b/frontend/src/containers/org/people.js
@@ -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 (
- people
+
+
+
+
+
+
+
+
+
+
+
);
};
-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);
diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index 3be8081a..d7cb4fd0 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -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": {
diff --git a/frontend/src/prop-types.js b/frontend/src/prop-types.js
index f7baee89..cc1ce973 100644
--- a/frontend/src/prop-types.js
+++ b/frontend/src/prop-types.js
@@ -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
};
diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js
index 23a06af4..da58c2ac 100644
--- a/frontend/src/state/selectors.js
+++ b/frontend/src/state/selectors.js
@@ -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
};
diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js
index 7fa255d2..1c3b0563 100644
--- a/ui/src/components/button/index.js
+++ b/ui/src/components/button/index.js
@@ -130,6 +130,7 @@ const style = css`
`;
const StyledButton = styled.button`
+ min-width: ${remcalc(120)};
${style}
`;