moving people/member component into the projects container

This commit is contained in:
Alex Windett 2017-01-30 11:29:18 +00:00
parent fb9fc6e25c
commit fdfe2272cd
5 changed files with 222 additions and 15 deletions

View File

@ -1,9 +1,59 @@
const React = require('react'); const React = require('react');
const ReactRedux = require('react-redux');
const PeopleSection = require('@components/people-list');
const selectors = require('@state/selectors');
const Section = require('./section'); const Section = require('./section');
const actions = require('@state/actions');
module.exports = (props) => ( const {
<Section {...props}> connect
<p>people</p> } = ReactRedux;
</Section>
); const {
peopleByProjectIdSelector,
projectUISelector,
projectIndexByIdSelect,
membersSelector,
} = selectors;
const {
projecthandleInviteToggle,
projecthandlePeopleRoleTooltip,
projecthandlePeopleStatusTooltip,
projecthandleMemberUpdate,
projectremoveMember,
} = actions;
const People = (props) => {
return (
<Section {...props}>
<PeopleSection {...props} />
</Section>
);
};
const mapStateToProps = (state, {
params = {}
}) => ({
people: peopleByProjectIdSelector(params.projectId)(state),
UI: projectUISelector(state),
parentIndex: projectIndexByIdSelect(params.projectId)(state),
platformMembers: membersSelector(state)
});
const mapDispatchToProps = (dispatch) => ({
handleToggle: () => dispatch(projecthandleInviteToggle()),
handleStatusTooltip: (id) => dispatch(projecthandlePeopleStatusTooltip(id)),
handleRoleTooltip: (id) => dispatch(projecthandlePeopleRoleTooltip(id)),
handleMemberUpdate: (updatedMember) =>
dispatch(projecthandleMemberUpdate(updatedMember)),
removeMember: (removeData) =>
dispatch(projectremoveMember(removeData)),
});
module.exports = connect(
mapStateToProps,
mapDispatchToProps
)(People);

View File

@ -541,6 +541,16 @@
"people", "people",
"settings", "settings",
"manifest" "manifest"
],
"members_status": [
"Active",
"Inactive",
"Invitation Sent"
],
"members_roles": [
"Owner",
"Unassigned",
"Read Only"
] ]
}, },
"data": [{ "data": [{
@ -548,7 +558,17 @@
"org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc", "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
"id": "forest-foundation-dev", "id": "forest-foundation-dev",
"name": "Forest Foundation Dev", "name": "Forest Foundation Dev",
"plan": "20.05$ per day" "plan": "20.05$ per day",
"members": [{
"uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
"role": "Owner",
"status": "Active"
},
{
"uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
"role": "Unassigned",
"status": "Sent invitation"
}]
}, { }, {
"uuid": "9fcb374d-a267-4c2a-9d9c-ba469b804639", "uuid": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
"org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc", "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",

View File

@ -7,6 +7,32 @@ const {
const APP = constantCase(process.env['APP_NAME']); const APP = constantCase(process.env['APP_NAME']);
const projectMemberActions = {
projecthandleInviteToggle:
createAction(`${APP}/PROJECT_HANDLE_INVITE_MEMBER_TOGGLE`),
projecthandlePeopleStatusTooltip:
createAction(`${APP}/PROJECT_HANDLE_PERSON_STATUS_TOOLTIP`),
projecthandlePeopleRoleTooltip:
createAction(`${APP}/PROJECT_HANDLE_PERSON_ROLE_TOOLTIP`),
projecthandleMemberUpdate:
createAction(`${APP}/PROJECT_HANDLE_MEMBER_UPDATE`),
projectremoveMember:
createAction(`${APP}/PROJECT_REMOVE_MEMBER_FROM_ROLE`),
};
const orgMemberActions = {
handleInviteToggle:
createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`),
handlePeopleStatusTooltip:
createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`),
handlePeopleRoleTooltip:
createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`),
handleMemberUpdate:
createAction(`${APP}/HANDLE_MEMBER_UPDATE`),
removeMember:
createAction(`${APP}/REMOVE_MEMBER_FROM_ROLE`),
};
module.exports = { module.exports = {
...require('@state/thunks'), ...require('@state/thunks'),
updateRouter: createAction(`${APP}/UPDATE_ROUTER`), updateRouter: createAction(`${APP}/UPDATE_ROUTER`),
@ -17,11 +43,6 @@ module.exports = {
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`), ...orgMemberActions,
handlePeopleStatusTooltip: ...projectMemberActions,
createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`),
handlePeopleRoleTooltip:
createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`),
handleMemberUpdate: createAction(`${APP}/HANDLE_MEMBER_UPDATE`),
removeMember: createAction(`${APP}/REMOVE_MEMBER_FROM_ROLE`),
}; };

View File

@ -1,9 +1,101 @@
const ReduxActions = require('redux-actions'); const ReduxActions = require('redux-actions');
const actions = require('@state/actions');
const { const {
handleActions handleActions
} = ReduxActions; } = ReduxActions;
const {
projecthandleInviteToggle,
projecthandlePeopleRoleTooltip,
projecthandlePeopleStatusTooltip,
projecthandleMemberUpdate,
projectremoveMember,
} = actions;
module.exports = handleActions({ module.exports = handleActions({
'x': (state) => state // somehow handleActions needs at least one reducer [projecthandleInviteToggle.toString()]: (state, action) => {
return {
...state,
ui: {
...state.ui,
invite_toggled: !state.ui.invite_toggled
}
};
},
[projecthandlePeopleStatusTooltip.toString()]: (state, action) => {
return {
...state,
ui: {
...state.ui,
member_status_tooltip:
action.payload === state.ui.member_status_tooltip
? ''
: action.payload
}
};
},
[projecthandlePeopleRoleTooltip.toString()]: (state, action) => {
return {
...state,
ui: {
...state.ui,
member_role_tooltip:
action.payload === state.ui.member_role_tooltip
? ''
: action.payload
}
};
},
[projecthandleMemberUpdate.toString()]: (state, action) => {
const {
parentIndex,
person,
personIndex,
} = action.payload;
return {
...state,
ui: {
...state.ui,
member_status_tooltip: false,
member_role_tooltip: false
},
data: [
...state.data.slice(0, parentIndex),
{
...state.data[parentIndex],
members: [
...state.data[parentIndex].members.slice(0, personIndex),
{
...person,
},
...state.data[parentIndex].members.slice(personIndex + 1)
]
},
...state.data.slice(parentIndex + 1),
]
};
},
[projectremoveMember.toString()]: (state, action) => {
const {
parentIndex,
personIndex,
} = action.payload;
return {
...state,
data: [
...state.data.slice(0, parentIndex),
{
...state.data[parentIndex],
members: [
...state.data[parentIndex].members.slice(0, personIndex),
...state.data[parentIndex].members.slice(personIndex + 1)
]
},
...state.data.slice(parentIndex + 1),
]
};
},
}, {}); }, {});

View File

@ -15,6 +15,7 @@ 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 orgUI = (state) => get(state, 'orgs.ui', []);
const projects = (state) => get(state, 'projects.data', []); const projects = (state) => get(state, 'projects.data', []);
const projectsUI = (state) => get(state, 'projects.ui', []);
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', []);
const collapsedInstances = (state) => get(state, 'instances.ui.collapsed', []); const collapsedInstances = (state) => get(state, 'instances.ui.collapsed', []);
@ -40,6 +41,11 @@ const orgIndexById = (orgId) => createSelector(
(orgs) => orgs.map((o) => o.id).indexOf(orgId) (orgs) => orgs.map((o) => o.id).indexOf(orgId)
); );
const projectIndexById = (projectId) => createSelector(
projects,
(projects) => projects.map((p) => p.id).indexOf(projectId)
);
const serviceById = (serviceId) => createSelector( const serviceById = (serviceId) => createSelector(
[services], [services],
(services) => find(services, ['id', serviceId]) (services) => find(services, ['id', serviceId])
@ -141,6 +147,21 @@ const peopleByOrgId = (orgId) => createSelector(
} }
); );
const peopleByProjectId = (projectId) => createSelector(
[members, projectById(projectId)], (members, prj) => {
const matched = [];
if (Object.keys(prj.members).length > 0) {
prj.members.filter((m) => {
matched.push({
...find(members, ['uuid', m.uuid]),
...m
});
});
}
return matched;
}
);
module.exports = { module.exports = {
accountSelector: account, accountSelector: account,
accountUISelector: accountUi, accountUISelector: accountUi,
@ -163,4 +184,7 @@ module.exports = {
metricTypeByUuidSelector: metricTypeByUuid, metricTypeByUuidSelector: metricTypeByUuid,
peopleByOrgIdSelector: peopleByOrgId, peopleByOrgIdSelector: peopleByOrgId,
membersSelector: members, membersSelector: members,
peopleByProjectIdSelector: peopleByProjectId,
projectUISelector: projectsUI,
projectIndexByIdSelect: projectIndexById,
}; };