From c69ef9abb4cad52a76da3ff00b7998d70388b282 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 23 Jan 2017 14:00:10 +0000 Subject: [PATCH] adding html components to table and splitting module into component and container directories --- frontend/src/components/people-list/index.js | 66 ++++++++++++-------- frontend/src/components/people-list/table.js | 47 ++++++++++++++ frontend/src/containers/org/people.js | 53 ++++------------ frontend/src/mock-state.json | 1 + frontend/src/state/actions.js | 3 +- frontend/src/state/selectors.js | 2 + 6 files changed, 104 insertions(+), 68 deletions(-) create mode 100644 frontend/src/components/people-list/table.js 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,