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 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 (
<Table
columns={columns}
data={data}
<div>
<Row>
<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),
};
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 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 (
<Section {...props}>
<Row>
<Column smOffset={9} xs={2}>
<Button style={buttonStyle}>Invite</Button>
</Column>
</Row>
<Row>
<Column xs={12}>
<PeopleList
people={people}
/>
</Column>
</Row>
<PeopleSection {...props} />
</Section>
);
};
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,

View File

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

View File

@ -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`)
};

View File

@ -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,