diff --git a/client/src/components/Memberships/ActionsStep.jsx b/client/src/components/Memberships/ActionsStep.jsx index b2463367..c6c4c75a 100755 --- a/client/src/components/Memberships/ActionsStep.jsx +++ b/client/src/components/Memberships/ActionsStep.jsx @@ -3,6 +3,7 @@ import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import { Button } from 'semantic-ui-react'; +import { Popup } from '../../lib/custom-ui'; import { useSteps } from '../../hooks'; import User from '../User'; @@ -19,6 +20,7 @@ const ActionsStep = React.memo( ({ membership, permissionsSelectStep, + title, leaveButtonContent, leaveConfirmationTitle, leaveConfirmationContent, @@ -31,6 +33,7 @@ const ActionsStep = React.memo( canLeave, onUpdate, onDelete, + onBack, onClose, }) => { const [t] = useTranslation(); @@ -53,6 +56,11 @@ const ActionsStep = React.memo( [onUpdate], ); + const handleDeleteConfirm = useCallback(() => { + onDelete(); + onClose(); + }, [onDelete, onClose]); + if (step) { switch (step.type) { case StepTypes.EDIT_PERMISSIONS: { @@ -81,7 +89,7 @@ const ActionsStep = React.memo( ? leaveConfirmationButtonContent : deleteConfirmationButtonContent } - onConfirm={onDelete} + onConfirm={handleDeleteConfirm} onBack={handleBack} /> ); @@ -89,7 +97,7 @@ const ActionsStep = React.memo( } } - return ( + const contentNode = ( <> @@ -125,12 +133,26 @@ const ActionsStep = React.memo( )} ); + + return onBack ? ( + <> + + {t(title, { + context: 'title', + })} + + {contentNode} + + ) : ( + contentNode + ); }, ); ActionsStep.propTypes = { membership: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types permissionsSelectStep: PropTypes.elementType, + title: PropTypes.string, leaveButtonContent: PropTypes.string, leaveConfirmationTitle: PropTypes.string, leaveConfirmationContent: PropTypes.string, @@ -143,11 +165,13 @@ ActionsStep.propTypes = { canLeave: PropTypes.bool.isRequired, onUpdate: PropTypes.func, onDelete: PropTypes.func.isRequired, + onBack: PropTypes.func, onClose: PropTypes.func.isRequired, }; ActionsStep.defaultProps = { permissionsSelectStep: undefined, + title: 'common.memberActions', leaveButtonContent: 'action.leaveBoard', leaveConfirmationTitle: 'common.leaveBoard', leaveConfirmationContent: 'common.areYouSureYouWantToLeaveBoard', @@ -157,6 +181,7 @@ ActionsStep.defaultProps = { deleteConfirmationContent: 'common.areYouSureYouWantToRemoveThisMemberFromBoard', deleteConfirmationButtonContent: 'action.removeMember', onUpdate: undefined, + onBack: undefined, }; export default ActionsStep; diff --git a/client/src/components/Memberships/Memberships.jsx b/client/src/components/Memberships/Memberships.jsx index 1aece7f0..bb37513a 100644 --- a/client/src/components/Memberships/Memberships.jsx +++ b/client/src/components/Memberships/Memberships.jsx @@ -5,10 +5,10 @@ import { usePopup } from '../../lib/popup'; import AddStep from './AddStep'; import ActionsStep from './ActionsStep'; +import MembershipsStep from './MembershipsStep'; import User from '../User'; import styles from './Memberships.module.scss'; -import MembershipsStep from './MembershipsStep'; const MAX_MEMBERS = 6; @@ -17,7 +17,9 @@ const Memberships = React.memo( items, allUsers, permissionsSelectStep, + title, addTitle, + actionsTitle, leaveButtonContent, leaveConfirmationTitle, leaveConfirmationContent, @@ -73,6 +75,8 @@ const Memberships = React.memo( )} @@ -113,7 +117,9 @@ Memberships.propTypes = { allUsers: PropTypes.array.isRequired, /* eslint-enable react/forbid-prop-types */ permissionsSelectStep: PropTypes.elementType, + title: PropTypes.string, addTitle: PropTypes.string, + actionsTitle: PropTypes.string, leaveButtonContent: PropTypes.string, leaveConfirmationTitle: PropTypes.string, leaveConfirmationContent: PropTypes.string, @@ -131,7 +137,9 @@ Memberships.propTypes = { Memberships.defaultProps = { permissionsSelectStep: undefined, + title: undefined, addTitle: undefined, + actionsTitle: undefined, leaveButtonContent: undefined, leaveConfirmationTitle: undefined, leaveConfirmationContent: undefined, diff --git a/client/src/components/Memberships/MembershipsStep.jsx b/client/src/components/Memberships/MembershipsStep.jsx index d1afa1b0..32e7a663 100644 --- a/client/src/components/Memberships/MembershipsStep.jsx +++ b/client/src/components/Memberships/MembershipsStep.jsx @@ -1,15 +1,20 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; -import { useTranslation } from 'react-i18next'; -import BoardMembershipsStep from '../BoardMembershipsStep/BoardMembershipsStep'; +import { useSteps } from '../../hooks'; import ActionsStep from './ActionsStep'; -import { Popup } from '../../lib/custom-ui'; +import BoardMembershipsStep from '../BoardMembershipsStep'; + +const StepTypes = { + EDIT: 'EDIT', +}; const MembershipsStep = React.memo( ({ items, permissionsSelectStep, + title, + actionsTitle, leaveButtonContent, leaveConfirmationTitle, leaveConfirmationContent, @@ -24,49 +29,54 @@ const MembershipsStep = React.memo( onDelete, onClose, }) => { - const [t] = useTranslation(); - - const [editingItem, setEditingItem] = useState(); + const [step, openStep, handleBack] = useSteps(); - const handleUserClick = useCallback( - (id) => { - setEditingItem(items.find((item) => item.user.id === id)); + const handleUserSelect = useCallback( + (userId) => { + openStep(StepTypes.EDIT, { + userId, + }); }, - [setEditingItem, items], + [openStep], ); - if (editingItem) { - return ( - <> - setEditingItem(null)}>{t('common.memberInfo')} - - - - - ); + if (step && step.type === StepTypes.EDIT) { + const currentItem = items.find((item) => item.userId === step.params.userId); + + if (currentItem) { + return ( + onUpdate(currentItem.id, data)} + onDelete={() => onDelete(currentItem.id)} + onBack={handleBack} + onClose={onClose} + /> + ); + } + + openStep(null); } return ( + // FIXME: hack {}} /> ); @@ -76,6 +86,8 @@ const MembershipsStep = React.memo( MembershipsStep.propTypes = { items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types permissionsSelectStep: PropTypes.elementType, + title: PropTypes.string, + actionsTitle: PropTypes.string, leaveButtonContent: PropTypes.string, leaveConfirmationTitle: PropTypes.string, leaveConfirmationContent: PropTypes.string, @@ -93,14 +105,16 @@ MembershipsStep.propTypes = { MembershipsStep.defaultProps = { permissionsSelectStep: undefined, - leaveButtonContent: 'action.leaveBoard', - leaveConfirmationTitle: 'common.leaveBoard', - leaveConfirmationContent: 'common.areYouSureYouWantToLeaveBoard', - leaveConfirmationButtonContent: 'action.leaveBoard', - deleteButtonContent: 'action.removeFromBoard', - deleteConfirmationTitle: 'common.removeMember', - deleteConfirmationContent: 'common.areYouSureYouWantToRemoveThisMemberFromBoard', - deleteConfirmationButtonContent: 'action.removeMember', + title: undefined, + actionsTitle: undefined, + leaveButtonContent: undefined, + leaveConfirmationTitle: undefined, + leaveConfirmationContent: undefined, + leaveConfirmationButtonContent: undefined, + deleteButtonContent: undefined, + deleteConfirmationTitle: undefined, + deleteConfirmationContent: undefined, + deleteConfirmationButtonContent: undefined, onUpdate: undefined, }; diff --git a/client/src/components/ProjectSettingsModal/ManagersPane.jsx b/client/src/components/ProjectSettingsModal/ManagersPane.jsx index 90bd792a..ebc66507 100644 --- a/client/src/components/ProjectSettingsModal/ManagersPane.jsx +++ b/client/src/components/ProjectSettingsModal/ManagersPane.jsx @@ -12,7 +12,9 @@ const ManagersPane = React.memo(({ items, allUsers, onCreate, onDelete }) => {