adding html components to table and splitting module into component and container directories

This commit is contained in:
Alex Windett 2017-01-23 14:00:10 +00:00
parent cf8b020815
commit c69ef9abb4
6 changed files with 104 additions and 68 deletions

View File

@ -1,41 +1,53 @@
const React = require('react'); const React = require('react');
const PropTypes = require('@root/prop-types'); 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 = ({ const PeopleTable = require('./table');
people = []
}) => {
const columns = [{
title: 'Member',
}, {
title: 'Status',
}, {
title: 'Role',
}, {
title: '', // Empty title for delete
}];
const data = []; const buttonStyle = {
float: 'right'
};
people.forEach( (person) => { const People = (props) => {
data.push({
name: person.name, const {
status: person.status, people = [],
role: person.role, orgUI = {},
}); handleToggle
}); } = props;
return ( return (
<Table <div>
columns={columns} <Row>
data={data} <Column smOffset={9} xs={2}>
/> <Button
disabled={orgUI.invite_toggled}
onClick={handleToggle}
style={buttonStyle}
>
Invite
</Button>
</Column>
</Row>
<Row>
<Column xs={12}>
<PeopleTable
people={people}
/>
</Column>
</Row>
</div>
); );
}; };
PeopleList.propTypes = { People.propTypes = {
handleToggle: React.PropTypes.func,
orgUI: React.PropTypes.obj,
people: React.PropTypes.arrayOf(PropTypes.person), people: React.PropTypes.arrayOf(PropTypes.person),
}; };
module.exports = PeopleList; module.exports = People;

View File

@ -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: <Checkbox />,
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: <Checkbox />,
name: person.name,
status: person.status,
role: person.role,
bin: ''
}));
return (
<Table
columns={columns}
data={data}
/>
);
};
PeopleTable.propTypes = {
people: React.PropTypes.arrayOf(PropTypes.person)
};
module.exports = PeopleTable;

View File

@ -1,69 +1,42 @@
const React = require('react'); const React = require('react');
// const ReactIntl = require('react-intl');
const ReactRedux = require('react-redux'); const ReactRedux = require('react-redux');
// const ReactRouter = require('react-router'); const PeopleSection = require('@components/people-list');
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 selectors = require('@state/selectors');
const Section = require('./section'); const Section = require('./section');
const actions = require('@state/actions');
// const {
// FormattedMessage
// } = ReactIntl;
const { const {
connect connect
} = ReactRedux; } = ReactRedux;
const { const {
peopleByOrgIdSelector peopleByOrgIdSelector,
orgUISelector
} = selectors; } = selectors;
const buttonStyle = { const {
float: 'right' handleInviteToggle
}; } = actions;
const People = (props) => { const People = (props) => {
const {
people = []
} = props;
return ( return (
<Section {...props}> <Section {...props}>
<Row> <PeopleSection {...props} />
<Column smOffset={9} xs={2}>
<Button style={buttonStyle}>Invite</Button>
</Column>
</Row>
<Row>
<Column xs={12}>
<PeopleList
people={people}
/>
</Column>
</Row>
</Section> </Section>
); );
}; };
People.propTypes = {
people: React.PropTypes.arrayOf(PropTypes.person)
};
const mapStateToProps = (state, { const mapStateToProps = (state, {
params = {} 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( module.exports = connect(
mapStateToProps, mapStateToProps,

View File

@ -198,6 +198,7 @@
}, },
"orgs": { "orgs": {
"ui": { "ui": {
"invite_toggled": false,
"sections": [ "sections": [
"projects", "projects",
"people", "people",

View File

@ -15,5 +15,6 @@ module.exports = {
addMetric: createAction(`${APP}/ADD_METRIC`), addMetric: createAction(`${APP}/ADD_METRIC`),
toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`), toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`), 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`)
}; };

View File

@ -13,6 +13,7 @@ const orgUiSections = (state) => get(state, 'orgs.ui.sections', []);
const projectUiSections = (state) => get(state, 'projects.ui.sections', []); const projectUiSections = (state) => get(state, 'projects.ui.sections', []);
const serviceUiSections = (state) => get(state, 'services.ui.sections', []); const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
const orgs = (state) => get(state, 'orgs.data', []); const orgs = (state) => get(state, 'orgs.data', []);
const orgUI = (state) => get(state, 'orgs.ui', []);
const projects = (state) => get(state, 'projects.data', []); const projects = (state) => get(state, 'projects.data', []);
const services = (state) => get(state, 'services.data', []); const services = (state) => get(state, 'services.data', []);
const collapsedServices = (state) => get(state, 'services.ui.collapsed', []); const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
@ -129,6 +130,7 @@ module.exports = {
accountUISelector: accountUi, accountUISelector: accountUi,
orgByIdSelector: orgById, orgByIdSelector: orgById,
orgsSelector: orgs, orgsSelector: orgs,
orgUISelector: orgUI,
servicesSelector: services, servicesSelector: services,
serviceByIdSelector: serviceById, serviceByIdSelector: serviceById,
orgSectionsSelector: orgSections, orgSectionsSelector: orgSections,