diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js
index 115a0210..765f6794 100644
--- a/frontend/src/components/people-list/index.js
+++ b/frontend/src/components/people-list/index.js
@@ -14,7 +14,6 @@ const buttonStyle = {
const People = (props) => {
const {
- people = [],
orgUI = {},
handleToggle,
} = props;
@@ -37,9 +36,7 @@ const People = (props) => {
-
+
@@ -49,7 +46,6 @@ const People = (props) => {
People.propTypes = {
handleToggle: React.PropTypes.func,
orgUI: React.PropTypes.object,
- people: React.PropTypes.array
};
module.exports = People;
\ No newline at end of file
diff --git a/frontend/src/components/people-list/person-role.js b/frontend/src/components/people-list/person-role.js
new file mode 100644
index 00000000..5844b042
--- /dev/null
+++ b/frontend/src/components/people-list/person-role.js
@@ -0,0 +1,18 @@
+const React = require('react');
+
+const PersonRole = (props) => {
+
+ const {
+ role
+ } = props;
+
+ return (
+ {role}
+ );
+};
+
+PersonRole.propTypes = {
+ role: React.PropTypes.string
+};
+
+module.exports = PersonRole;
\ No newline at end of file
diff --git a/frontend/src/components/people-list/person-status.js b/frontend/src/components/people-list/person-status.js
new file mode 100644
index 00000000..3a93b9a6
--- /dev/null
+++ b/frontend/src/components/people-list/person-status.js
@@ -0,0 +1,65 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('@ui/shared/functions');
+const composers = require('@ui/shared/composers');
+
+const {
+ pseudoEl
+} = composers;
+
+const {
+ default: styled
+} = Styled;
+
+const {
+ remcalc
+} = fns;
+
+const borderSide = props => props.toggled
+ ? 'bottom'
+ : 'top';
+
+const StyledWrapper = styled.div`
+ position: relative;
+
+ &:after {
+ border-left: ${remcalc(5)} solid transparent;
+ border-right: ${remcalc(5)} solid transparent;
+ border-${borderSide}: ${remcalc(5)} solid black;
+
+ ${pseudoEl({
+ top: '50%',
+ right: remcalc(10)
+ })}
+ }
+`;
+
+const PersonStatus = (props) => {
+
+ const {
+ toggled,
+ person,
+ handleStatusTooltip
+ } = props;
+
+ return (
+
+
+ {person.status}
+
+
+ );
+};
+
+PersonStatus.propTypes = {
+ handleStatusTooltip: React.PropTypes.bool,
+ person: React.PropTypes.object,
+ toggled: React.PropTypes.bool,
+};
+
+module.exports = PersonStatus;
\ No newline at end of file
diff --git a/frontend/src/components/people-list/table.js b/frontend/src/components/people-list/table.js
index 8198659e..0af1d367 100644
--- a/frontend/src/components/people-list/table.js
+++ b/frontend/src/components/people-list/table.js
@@ -3,9 +3,16 @@ const React = require('react');
const Table = require('@ui/components/table-data-table');
const Checkbox = require('@ui/components/checkbox');
-const PeopleTable = ({
- people = []
-}) => {
+const PersonStatus = require('./person-status');
+const PersonRole = require('./person-role');
+
+const PeopleTable = (props) => {
+
+ const {
+ handleStatusTooltip,
+ people = [],
+ orgUI = {}
+ } = props;
const columns = [{
title: ,
@@ -24,13 +31,23 @@ const PeopleTable = ({
width: '10%' // Empty title for delete
}];
- const data = people.map( (person) => ({
- checkbox: ,
- name: person.name,
- status: person.status,
- role: person.role,
- bin: ''
- }));
+ const data = people.map( (person) => {
+ const status = (person) => (
+
+ );
+
+ return {
+ checkbox: ,
+ name: person.name,
+ status: status(person),
+ role: ,
+ bin: ''
+ };
+ });
return (
{
@@ -37,7 +38,8 @@ const mapStateToProps = (state, {
});
const mapDispatchToProps = (dispatch) => ({
- handleToggle: () => dispatch(handleInviteToggle())
+ handleToggle: () => dispatch(handleInviteToggle()),
+ handleStatusTooltip: () => dispatch(handlePeopleStatusTooltip())
});
module.exports = connect(
diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index c942b5f0..be4d72b1 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -199,6 +199,7 @@
"orgs": {
"ui": {
"invite_toggled": true,
+ "member_role_tooltip": false,
"sections": [
"projects",
"people",
diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js
index e24eb3c6..ccbec33d 100644
--- a/frontend/src/state/actions.js
+++ b/frontend/src/state/actions.js
@@ -16,5 +16,7 @@ module.exports = {
toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),
- handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`)
+ handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`),
+ handlePeopleStatusTooltip:
+ createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`),
};
diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js
index e0243100..7332b38d 100644
--- a/frontend/src/state/reducers/orgs.js
+++ b/frontend/src/state/reducers/orgs.js
@@ -7,7 +7,8 @@ const {
} = ReduxActions;
const {
- handleInviteToggle
+ handleInviteToggle,
+ handlePeopleStatusTooltip
} = actions;
module.exports = handleActions({
@@ -19,5 +20,14 @@ module.exports = handleActions({
invite_toggled: !state.ui.invite_toggled
}
};
+ },
+ [handlePeopleStatusTooltip.toString()]: (state, action) => {
+ return {
+ ...state,
+ ui: {
+ ...state.ui,
+ member_role_tooltip: !state.ui.member_role_tooltip
+ }
+ };
}
}, {});