diff --git a/client/src/components/boards/Board/ShortcutsProvider.jsx b/client/src/components/boards/Board/ShortcutsProvider.jsx index 45f0bc0c..2821a38d 100644 --- a/client/src/components/boards/Board/ShortcutsProvider.jsx +++ b/client/src/components/boards/Board/ShortcutsProvider.jsx @@ -18,6 +18,7 @@ import { isModifierKeyPressed } from '../../../utils/event-helpers'; import { BoardShortcutsContext } from '../../../contexts'; import Paths from '../../../constants/Paths'; import { BoardMembershipRoles, ListTypes } from '../../../constants/Enums'; +import CardActionsStep from '../../cards/CardActionsStep'; const canEditCardName = (boardMembership, list) => { if (isListArchiveOrTrash(list)) { @@ -35,6 +36,14 @@ const canArchiveCard = (boardMembership, list) => { return boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR; }; +const canUseCardMembers = (boardMembership, list) => { + if (isListArchiveOrTrash(list)) { + return false; + } + + return boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR; +}; + const canUseCardLabels = (boardMembership, list) => { if (isListArchiveOrTrash(list)) { return false; @@ -50,11 +59,11 @@ const ShortcutsProvider = React.memo(({ children }) => { const selectedCardRef = useRef(null); - const handleCardMouseEnter = useCallback((id, editName, archive) => { + const handleCardMouseEnter = useCallback((id, editName, openActions) => { selectedCardRef.current = { id, editName, - archive, + openActions, }; }, []); @@ -128,7 +137,51 @@ const ShortcutsProvider = React.memo(({ children }) => { return; } - selectedCardRef.current.archive(); + selectedCardRef.current.openActions(CardActionsStep.StepTypes.ARCHIVE); + }; + + const handleCardMembers = () => { + if (!selectedCardRef.current) { + return; + } + + const state = store.getState(); + const card = selectors.selectCardById(state, selectedCardRef.current.id); + + if (!card || !card.isPersisted) { + return; + } + + const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state); + const list = selectors.selectListById(state, card.listId); + + if (!canUseCardMembers(boardMembership, list)) { + return; + } + + selectedCardRef.current.openActions(CardActionsStep.StepTypes.MEMBERS); + }; + + const handleCardLabels = () => { + if (!selectedCardRef.current) { + return; + } + + const state = store.getState(); + const card = selectors.selectCardById(state, selectedCardRef.current.id); + + if (!card || !card.isPersisted) { + return; + } + + const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state); + const list = selectors.selectListById(state, card.listId); + + if (!canUseCardLabels(boardMembership, list)) { + return; + } + + selectedCardRef.current.openActions(CardActionsStep.StepTypes.LABELS); }; const handleLabelToCardAdd = (index) => { @@ -179,6 +232,16 @@ const ShortcutsProvider = React.memo(({ children }) => { case 'Enter': handleCardOpen(); + break; + case 'KeyL': + event.preventDefault(); + handleCardLabels(); + + break; + case 'KeyM': + event.preventDefault(); + handleCardMembers(); + break; case 'KeyT': event.preventDefault(); diff --git a/client/src/components/cards/Card/Card.jsx b/client/src/components/cards/Card/Card.jsx index cacdae9e..6ed22ddc 100755 --- a/client/src/components/cards/Card/Card.jsx +++ b/client/src/components/cards/Card/Card.jsx @@ -21,7 +21,7 @@ import ProjectContent from './ProjectContent'; import StoryContent from './StoryContent'; import InlineContent from './InlineContent'; import EditName from './EditName'; -import ActionsStep from './ActionsStep'; +import CardActionsStep from '../CardActionsStep'; import styles from './Card.module.scss'; import globalStyles from '../../../styles.module.scss'; @@ -69,11 +69,11 @@ const Card = React.memo(({ id, isInline }) => { () => { setIsEditNameOpened(true); }, - () => { + (step) => { closePopup(); actionsPopupRef.current.open({ - defaultStep: ActionsStep.StepTypes.ARCHIVE, + defaultStep: step, }); }, ); @@ -98,7 +98,7 @@ const Card = React.memo(({ id, isInline }) => { setIsEditNameOpened(false); }, []); - const ActionsPopup = usePopup(ActionsStep); + const CardActionsPopup = usePopup(CardActionsStep); if (isEditNameOpened) { return ; @@ -149,11 +149,11 @@ const Card = React.memo(({ id, isInline }) => { {colorLineNode} {canUseActions && ( - + - + )} ) : ( diff --git a/client/src/components/cards/Card/ActionsStep.jsx b/client/src/components/cards/CardActionsStep/CardActionsStep.jsx similarity index 96% rename from client/src/components/cards/Card/ActionsStep.jsx rename to client/src/components/cards/CardActionsStep/CardActionsStep.jsx index 237610fa..918ad91b 100644 --- a/client/src/components/cards/Card/ActionsStep.jsx +++ b/client/src/components/cards/CardActionsStep/CardActionsStep.jsx @@ -23,12 +23,12 @@ import ConfirmationStep from '../../common/ConfirmationStep'; import BoardMembershipsStep from '../../board-memberships/BoardMembershipsStep'; import LabelsStep from '../../labels/LabelsStep'; -import styles from './ActionsStep.module.scss'; +import styles from './CardActionsStep.module.scss'; const StepTypes = { - EDIT_TYPE: 'EDIT_TYPE', - USERS: 'USERS', + MEMBERS: 'MEMBERS', LABELS: 'LABELS', + EDIT_TYPE: 'EDIT_TYPE', EDIT_DUE_DATE: 'EDIT_DUE_DATE', EDIT_STOPWATCH: 'EDIT_STOPWATCH', MOVE: 'MOVE', @@ -36,7 +36,7 @@ const StepTypes = { DELETE: 'DELETE', }; -const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) => { +const CardActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) => { const selectCardById = useMemo(() => selectors.makeSelectCardById(), []); const selectListById = useMemo(() => selectors.makeSelectListById(), []); const selectPrevListById = useMemo(() => selectors.makeSelectListById(), []); @@ -180,18 +180,18 @@ const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) => onClose(); }, [onNameEdit, onClose]); - const handleEditTypeClick = useCallback(() => { - openStep(StepTypes.EDIT_TYPE); - }, [openStep]); - - const handleUsersClick = useCallback(() => { - openStep(StepTypes.USERS); + const handleMembersClick = useCallback(() => { + openStep(StepTypes.MEMBERS); }, [openStep]); const handleLabelsClick = useCallback(() => { openStep(StepTypes.LABELS); }, [openStep]); + const handleEditTypeClick = useCallback(() => { + openStep(StepTypes.EDIT_TYPE); + }, [openStep]); + const handleEditDueDateClick = useCallback(() => { openStep(StepTypes.EDIT_DUE_DATE); }, [openStep]); @@ -214,19 +214,7 @@ const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) => if (step) { switch (step.type) { - case StepTypes.EDIT_TYPE: - return ( - - ); - case StepTypes.USERS: + case StepTypes.MEMBERS: return ( onBack={handleBack} /> ); + case StepTypes.EDIT_TYPE: + return ( + + ); case StepTypes.EDIT_DUE_DATE: return ; case StepTypes.EDIT_STOPWATCH: @@ -305,7 +305,7 @@ const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) => )} {card.type === CardTypes.PROJECT && canUseMembers && ( - + {t('common.members', { context: 'title', @@ -321,7 +321,7 @@ const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) => )} {card.type === CardTypes.STORY && canUseMembers && ( - + {t('common.members', { context: 'title', @@ -395,17 +395,17 @@ const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) => ); }); -ActionsStep.propTypes = { +CardActionsStep.propTypes = { cardId: PropTypes.string.isRequired, defaultStep: PropTypes.string, onNameEdit: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, }; -ActionsStep.defaultProps = { +CardActionsStep.defaultProps = { defaultStep: undefined, }; -ActionsStep.StepTypes = StepTypes; +CardActionsStep.StepTypes = StepTypes; -export default ActionsStep; +export default CardActionsStep; diff --git a/client/src/components/cards/Card/ActionsStep.module.scss b/client/src/components/cards/CardActionsStep/CardActionsStep.module.scss similarity index 100% rename from client/src/components/cards/Card/ActionsStep.module.scss rename to client/src/components/cards/CardActionsStep/CardActionsStep.module.scss diff --git a/client/src/components/cards/CardActionsStep/index.js b/client/src/components/cards/CardActionsStep/index.js new file mode 100644 index 00000000..41cb4292 --- /dev/null +++ b/client/src/components/cards/CardActionsStep/index.js @@ -0,0 +1,3 @@ +import CardActionsStep from './CardActionsStep'; + +export default CardActionsStep;