diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js
index 5f52a1dd..0d791a02 100644
--- a/frontend/src/components/people-list/index.js
+++ b/frontend/src/components/people-list/index.js
@@ -1,41 +1,53 @@
const React = require('react');
const PropTypes = require('@root/prop-types');
-const Table = require('@ui/components/table-data-table');
+const Row = require('@ui/components/row');
+const Column = require('@ui/components/column');
+const Button = require('@ui/components/button');
-const PeopleList = ({
- people = []
-}) => {
- const columns = [{
- title: 'Member',
- }, {
- title: 'Status',
- }, {
- title: 'Role',
- }, {
- title: '', // Empty title for delete
- }];
+const PeopleTable = require('./table');
- const data = [];
+const buttonStyle = {
+ float: 'right'
+};
- people.forEach( (person) => {
- data.push({
- name: person.name,
- status: person.status,
- role: person.role,
- });
- });
+const People = (props) => {
+
+ const {
+ people = [],
+ orgUI = {},
+ handleToggle
+ } = props;
return (
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
-PeopleList.propTypes = {
+People.propTypes = {
+ handleToggle: React.PropTypes.func,
+ orgUI: React.PropTypes.obj,
people: React.PropTypes.arrayOf(PropTypes.person),
};
-module.exports = PeopleList;
\ No newline at end of file
+module.exports = People;
\ No newline at end of file
diff --git a/frontend/src/components/people-list/table.js b/frontend/src/components/people-list/table.js
new file mode 100644
index 00000000..0697d597
--- /dev/null
+++ b/frontend/src/components/people-list/table.js
@@ -0,0 +1,47 @@
+const React = require('react');
+
+const PropTypes = require('@root/prop-types');
+const Table = require('@ui/components/table-data-table');
+const Checkbox = require('@ui/components/checkbox');
+
+const PeopleTable = ({
+ people = []
+}) => {
+ const columns = [{
+ title: ,
+ width: '5%'
+ }, {
+ title: 'Member',
+ width: '35%'
+ }, {
+ title: 'Status',
+ width: '25%'
+ }, {
+ title: 'Role',
+ width: '25%'
+ }, {
+ title: '',
+ width: '10%' // Empty title for delete
+ }];
+
+ const data = people.map( (person) => ({
+ checkbox: ,
+ name: person.name,
+ status: person.status,
+ role: person.role,
+ bin: ''
+ }));
+
+ return (
+
+ );
+};
+
+PeopleTable.propTypes = {
+ people: React.PropTypes.arrayOf(PropTypes.person)
+};
+
+module.exports = PeopleTable;
\ No newline at end of file
diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js
index 67166758..a9ca21b7 100644
--- a/frontend/src/containers/org/people.js
+++ b/frontend/src/containers/org/people.js
@@ -1,69 +1,42 @@
const React = require('react');
-// const ReactIntl = require('react-intl');
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 PeopleSection = require('@components/people-list');
const selectors = require('@state/selectors');
-
const Section = require('./section');
-
-// const {
-// FormattedMessage
-// } = ReactIntl;
+const actions = require('@state/actions');
const {
connect
} = ReactRedux;
const {
- peopleByOrgIdSelector
+ peopleByOrgIdSelector,
+ orgUISelector
} = selectors;
-const buttonStyle = {
- float: 'right'
-};
+const {
+ handleInviteToggle
+} = actions;
const People = (props) => {
- const {
- people = []
- } = props;
-
return (
-
-
-
-
-
-
-
-
-
-
-
+
);
};
-People.propTypes = {
- people: React.PropTypes.arrayOf(PropTypes.person)
-};
-
const mapStateToProps = (state, {
params = {}
}) => ({
- people: peopleByOrgIdSelector(params.org)(state)
+ people: peopleByOrgIdSelector(params.org)(state),
+ orgUI: orgUISelector(state)
});
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = (dispatch) => ({
+ handleToggle: () => dispatch(handleInviteToggle())
+});
module.exports = connect(
mapStateToProps,
diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index 1fa3e146..b2609be4 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -198,6 +198,7 @@
},
"orgs": {
"ui": {
+ "invite_toggled": false,
"sections": [
"projects",
"people",
diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js
index ae351c99..e24eb3c6 100644
--- a/frontend/src/state/actions.js
+++ b/frontend/src/state/actions.js
@@ -15,5 +15,6 @@ module.exports = {
addMetric: createAction(`${APP}/ADD_METRIC`),
toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
- switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`)
+ switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),
+ handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`)
};
diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js
index c02682ad..894ccc42 100644
--- a/frontend/src/state/selectors.js
+++ b/frontend/src/state/selectors.js
@@ -13,6 +13,7 @@ const orgUiSections = (state) => get(state, 'orgs.ui.sections', []);
const projectUiSections = (state) => get(state, 'projects.ui.sections', []);
const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
const orgs = (state) => get(state, 'orgs.data', []);
+const orgUI = (state) => get(state, 'orgs.ui', []);
const projects = (state) => get(state, 'projects.data', []);
const services = (state) => get(state, 'services.data', []);
const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
@@ -129,6 +130,7 @@ module.exports = {
accountUISelector: accountUi,
orgByIdSelector: orgById,
orgsSelector: orgs,
+ orgUISelector: orgUI,
servicesSelector: services,
serviceByIdSelector: serviceById,
orgSectionsSelector: orgSections,