Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-19 13:19:44 +02:00
Code Issues Releases Activity

feat: Add board activity log

Browse source
This commit is contained in:
Maksim Eltyshev 2025-05-22 23:14:46 +02:00
parent 777ff467f3
commit 86cfd155f2
72 changed files with 833 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

73
client/src/components/activities/BoardActivitiesModal/BoardActivitiesModal.jsx Executable file
View file

@ -0,0 +1,73 @@
/*!
* Copyright (c) 2024 PLANKA Software GmbH
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
*/
import React, { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { useInView } from 'react-intersection-observer';
import { Comment, Loader } from 'semantic-ui-react';
import selectors from '../../../selectors';
import entryActions from '../../../entry-actions';
import { useClosableModal } from '../../../hooks';
import Item from './Item';
import styles from './BoardActivitiesModal.module.scss';
const BoardActivitiesModal = React.memo(() => {
const activityIds = useSelector(selectors.selectActivityIdsForCurrentBoard);
const { isActivitiesFetching, isAllActivitiesFetched } = useSelector(
selectors.selectCurrentBoard,
);
const dispatch = useDispatch();
const [t] = useTranslation();
const handleClose = useCallback(() => {
dispatch(entryActions.closeModal());
}, [dispatch]);
const [inViewRef] = useInView({
threshold: 1,
onChange: (inView) => {
if (inView) {
dispatch(entryActions.fetchActivitiesInCurrentBoard());
}
},
});
const [ClosableModal] = useClosableModal();
return (
<ClosableModal closeIcon size="small" centered={false} onClose={handleClose}>
<ClosableModal.Header>
{t('common.boardActions', {
context: 'title',
})}
</ClosableModal.Header>
<ClosableModal.Content>
<div className={styles.itemsWrapper}>
<Comment.Group className={styles.items}>
{activityIds.map((activityId) => (
<Item key={activityId} id={activityId} />
))}
</Comment.Group>
</div>
{isActivitiesFetching !== undefined && isAllActivitiesFetched !== undefined && (
<div className={styles.loaderWrapper}>
{isActivitiesFetching ? (
<Loader active inverted inline="centered" size="small" />
) : (
!isAllActivitiesFetched && <div ref={inViewRef} />
)}
</div>
)}
</ClosableModal.Content>
</ClosableModal>
);
});
export default BoardActivitiesModal;

18
client/src/components/activities/BoardActivitiesModal/BoardActivitiesModal.module.scss Normal file
View file

@ -0,0 +1,18 @@
/*!
* Copyright (c) 2024 PLANKA Software GmbH
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
*/
:global(#app) {
.items {
max-width: none;
}
.itemsWrapper {
margin-top: 12px;
}
.loaderWrapper {
margin-top: 10px;
}
}

220
client/src/components/activities/BoardActivitiesModal/Item.jsx Executable file
View file

@ -0,0 +1,220 @@
/*!
* Copyright (c) 2024 PLANKA Software GmbH
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
*/
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { useTranslation, Trans } from 'react-i18next';
import { Link } from 'react-router-dom';
import { Comment } from 'semantic-ui-react';
import selectors from '../../../selectors';
import Paths from '../../../constants/Paths';
import { StaticUserIds } from '../../../constants/StaticUsers';
import { ActivityTypes } from '../../../constants/Enums';
import TimeAgo from '../../common/TimeAgo';
import UserAvatar from '../../users/UserAvatar';
import styles from './Item.module.scss';
const Item = React.memo(({ id }) => {
const selectActivityById = useMemo(() => selectors.makeSelectActivityById(), []);
const selectUserById = useMemo(() => selectors.makeSelectUserById(), []);
const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
const activity = useSelector((state) => selectActivityById(state, id));
const user = useSelector((state) => selectUserById(state, activity.userId));
const card = useSelector((state) => selectCardById(state, activity.cardId));
const [t] = useTranslation();
const userName =
user.id === StaticUserIds.DELETED
? t(`common.${user.name}`, {
context: 'title',
})
: user.name;
const cardName = card ? card.name : activity.data.card.name;
let contentNode;
switch (activity.type) {
case ActivityTypes.CREATE_CARD: {
const { list } = activity.data;
const listName = list.name || t(`common.${list.type}`);
contentNode = (
<Trans
i18nKey="common.userAddedCardToList"
values={{
user: userName,
card: cardName,
list: listName,
}}
>
<span className={styles.author}>{userName}</span>
{' added '}
<Link to={Paths.CARDS.replace(':id', activity.cardId)}>{cardName}</Link>
{' to '}
{listName}
</Trans>
);
break;
}
case ActivityTypes.MOVE_CARD: {
const { fromList, toList } = activity.data;
const fromListName = fromList.name || t(`common.${fromList.type}`);
const toListName = toList.name || t(`common.${toList.type}`);
contentNode = (
<Trans
i18nKey="common.userMovedCardFromListToList"
values={{
user: userName,
card: cardName,
fromList: fromListName,
toList: toListName,
}}
>
<span className={styles.author}>{userName}</span>
{' moved '}
<Link to={Paths.CARDS.replace(':id', activity.cardId)}>{cardName}</Link>
{' from '}
{fromListName}
{' to '}
{toListName}
</Trans>
);
break;
}
case ActivityTypes.ADD_MEMBER_TO_CARD:
contentNode =
user.id === activity.data.user.id ? (
<Trans
i18nKey="common.userJoinedCard"
values={{
user: userName,
card: cardName,
}}
>
<span className={styles.author}>{userName}</span>
{' joined '}
<Link to={Paths.CARDS.replace(':id', activity.cardId)}>{cardName}</Link>
</Trans>
) : (
<Trans
i18nKey="common.userAddedUserToCard"
values={{
actorUser: userName,
addedUser: activity.data.user.name,
card: cardName,
}}
>
<span className={styles.author}>{userName}</span>
{' added '}
{activity.data.user.name}
{' to '}
<Link to={Paths.CARDS.replace(':id', activity.cardId)}>{cardName}</Link>
</Trans>
);
break;
case ActivityTypes.REMOVE_MEMBER_FROM_CARD:
contentNode =
user.id === activity.data.user.id ? (
<Trans
i18nKey="common.userLeftCard"
values={{
user: userName,
card: cardName,
}}
>
<span className={styles.author}>{userName}</span>
{' left '}
<Link to={Paths.CARDS.replace(':id', activity.cardId)}>{cardName}</Link>
</Trans>
) : (
<Trans
i18nKey="common.userRemovedUserFromCard"
values={{
actorUser: userName,
removedUser: activity.data.user.name,
card: cardName,
}}
>
<span className={styles.author}>{userName}</span>
{' removed '}
{activity.data.user.name}
{' from '}
<Link to={Paths.CARDS.replace(':id', activity.cardId)}>{cardName}</Link>
</Trans>
);
break;
case ActivityTypes.COMPLETE_TASK:
contentNode = (
<Trans
i18nKey="common.userCompletedTaskOnCard"
values={{
user: userName,
task: activity.data.task.name,
card: cardName,
}}
>
<span className={styles.author}>{userName}</span>
{' completed '}
{activity.data.task.name}
{' on '}
<Link to={Paths.CARDS.replace(':id', activity.cardId)}>{cardName}</Link>
</Trans>
);
break;
case ActivityTypes.UNCOMPLETE_TASK:
contentNode = (
<Trans
i18nKey="common.userMarkedTaskIncompleteOnCard"
values={{
user: userName,
task: activity.data.task.name,
card: cardName,
}}
>
<span className={styles.author}>{userName}</span>
{' marked '}
{activity.data.task.name}
{' incomplete on '}
<Link to={Paths.CARDS.replace(':id', activity.cardId)}>{cardName}</Link>
</Trans>
);
break;
default:
contentNode = null;
}
return (
<Comment>
<span className={styles.user}>
<UserAvatar id={activity.userId} />
</span>
<div className={styles.content}>
<div>{contentNode}</div>
<span className={styles.date}>
<TimeAgo date={activity.createdAt} />
</span>
</div>
</Comment>
);
});
Item.propTypes = {
id: PropTypes.string.isRequired,
};
export default Item;

7
client/src/components/activities/Activities/Item.module.scss → client/src/components/activities/BoardActivitiesModal/Item.module.scss
View file

@ -7,12 +7,12 @@
.author {
color: #17394d;
font-weight: bold;
line-height: 20px;
}
.content {
border-bottom: 1px solid #092d4221;
display: inline-block;
line-height: 20px;
padding-bottom: 14px;
vertical-align: top;
width: calc(100% - 40px);
@ -21,11 +21,6 @@
.date {
color: #6b808c;
font-size: 12px;
line-height: 20px;
}
.text {
line-height: 20px;
}
.user {

8
client/src/components/activities/BoardActivitiesModal/index.js Executable file
View file

@ -0,0 +1,8 @@
/*!
* Copyright (c) 2024 PLANKA Software GmbH
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
*/
import BoardActivitiesModal from './BoardActivitiesModal';
export default BoardActivitiesModal;

6
client/src/components/activities/Activities/Activities.jsx → client/src/components/activities/CardActivities/CardActivities.jsx
View file

@ -12,9 +12,9 @@ import selectors from '../../../selectors';
import entryActions from '../../../entry-actions';
import Item from './Item';
import styles from './Activities.module.scss';
import styles from './CardActivities.module.scss';
const Activities = React.memo(() => {
const CardActivities = React.memo(() => {
const activityIds = useSelector(selectors.selectActivityIdsForCurrentCard);
const { isActivitiesFetching, isAllActivitiesFetched } = useSelector(selectors.selectCurrentCard);
@ -51,4 +51,4 @@ const Activities = React.memo(() => {
);
});
export default Activities;
export default CardActivities;

0
client/src/components/activities/Activities/Activities.module.scss → client/src/components/activities/CardActivities/CardActivities.module.scss
View file

52
client/src/components/activities/Activities/Item.jsx → client/src/components/activities/CardActivities/Item.jsx
View file

@ -48,10 +48,8 @@ const Item = React.memo(({ id }) => {
}}
>
<span className={styles.author}>{userName}</span>
<span className={styles.text}>
{' added this card to '}
{listName}
</span>
{' added this card to '}
{listName}
</Trans>
);
@ -73,12 +71,10 @@ const Item = React.memo(({ id }) => {
}}
>
<span className={styles.author}>{userName}</span>
<span className={styles.text}>
{' moved this card from '}
{fromListName}
{' to '}
{toListName}
</span>
{' moved this card from '}
{fromListName}
{' to '}
{toListName}
</Trans>
);
@ -94,7 +90,7 @@ const Item = React.memo(({ id }) => {
}}
>
<span className={styles.author}>{userName}</span>
<span className={styles.text}>{' joined this card'}</span>
{' joined this card'}
</Trans>
) : (
<Trans
@ -105,11 +101,9 @@ const Item = React.memo(({ id }) => {
}}
>
<span className={styles.author}>{userName}</span>
<span className={styles.text}>
{' added '}
{activity.data.user.name}
{' to this card'}
</span>
{' added '}
{activity.data.user.name}
{' to this card'}
</Trans>
);
@ -124,7 +118,7 @@ const Item = React.memo(({ id }) => {
}}
>
<span className={styles.author}>{userName}</span>
<span className={styles.text}>{' left this card'}</span>
{' left this card'}
</Trans>
) : (
<Trans
@ -135,11 +129,9 @@ const Item = React.memo(({ id }) => {
}}
>
<span className={styles.author}>{userName}</span>
<span className={styles.text}>
{' removed '}
{activity.data.user.name}
{' from this card'}
</span>
{' removed '}
{activity.data.user.name}
{' from this card'}
</Trans>
);
@ -154,11 +146,9 @@ const Item = React.memo(({ id }) => {
}}
>
<span className={styles.author}>{userName}</span>
<span className={styles.text}>
{' completed '}
{activity.data.task.name}
{' on this card'}
</span>
{' completed '}
{activity.data.task.name}
{' on this card'}
</Trans>
);
@ -173,11 +163,9 @@ const Item = React.memo(({ id }) => {
}}
>
<span className={styles.author}>{userName}</span>
<span className={styles.text}>
{' marked '}
{activity.data.task.name}
{' incomplete on this card'}
</span>
{' marked '}
{activity.data.task.name}
{' incomplete on this card'}
</Trans>
);

31
client/src/components/activities/CardActivities/Item.module.scss Normal file
View file

@ -0,0 +1,31 @@
/*!
* Copyright (c) 2024 PLANKA Software GmbH
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
*/
:global(#app) {
.author {
color: #17394d;
font-weight: bold;
}
.content {
border-bottom: 1px solid #092d4221;
display: inline-block;
line-height: 20px;
padding-bottom: 14px;
vertical-align: top;
width: calc(100% - 40px);
}
.date {
color: #6b808c;
font-size: 12px;
}
.user {
display: inline-block;
padding: 4px 8px 0 0;
vertical-align: top;
}
}

4
client/src/components/activities/Activities/index.js → client/src/components/activities/CardActivities/index.js
View file

@ -3,6 +3,6 @@
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
*/
import Activities from './Activities';
import CardActivities from './CardActivities';
export default Activities;
export default CardActivities;

18
client/src/components/boards/Board/Board.jsx
View file

@ -7,14 +7,17 @@ import React from 'react';
import { useSelector } from 'react-redux';
import selectors from '../../../selectors';
import ModalTypes from '../../../constants/ModalTypes';
import { BoardContexts, BoardViews } from '../../../constants/Enums';
import KanbanContent from './KanbanContent';
import FiniteContent from './FiniteContent';
import EndlessContent from './EndlessContent';
import CardModal from '../../cards/CardModal';
import BoardActivitiesModal from '../../activities/BoardActivitiesModal';
const Board = React.memo(() => {
const board = useSelector(selectors.selectCurrentBoard);
const modal = useSelector(selectors.selectCurrentModal);
const isCardModalOpened = useSelector((state) => !!selectors.selectPath(state).cardId);
let Content;
@ -35,10 +38,23 @@ const Board = React.memo(() => {
}
}
let modalNode = null;
if (isCardModalOpened) {
modalNode = <CardModal />;
} else if (modal) {
switch (modal.type) {
case ModalTypes.BOARD_ACTIVITIES:
modalNode = <BoardActivitiesModal />;
break;
default:
}
}
return (
<>
<Content />
{isCardModalOpened && <CardModal />}
{modalNode}
</>
);
});

29
client/src/components/boards/BoardActions/RightSide/ActionsStep.jsx
View file

@ -21,14 +21,14 @@ import CustomFieldGroupsStep from '../../../custom-field-groups/CustomFieldGroup
import styles from './ActionsStep.module.scss';
const StepTypes = {
EMPTY_TRASH: 'EMPTY_TRASH',
CUSTOM_FIELD_GROUPS: 'CUSTOM_FIELD_GROUPS',
EMPTY_TRASH: 'EMPTY_TRASH',
};
const ActionsStep = React.memo(({ onClose }) => {
const board = useSelector(selectors.selectCurrentBoard);
const { withSubscribe, withTrashEmptier, withCustomFieldGroups } = useSelector((state) => {
const { withSubscribe, withCustomFieldGroups, withTrashEmptier } = useSelector((state) => {
const isManager = selectors.selectIsCurrentUserManagerForCurrentProject(state);
const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
@ -42,8 +42,8 @@ const ActionsStep = React.memo(({ onClose }) => {
return {
withSubscribe: isMember, // TODO: rename?
withTrashEmptier: board.context === BoardContexts.TRASH && (isManager || isEditor),
withCustomFieldGroups: isEditor,
withTrashEmptier: board.context === BoardContexts.TRASH && (isManager || isEditor),
};
}, shallowEqual);
@ -69,21 +69,28 @@ const ActionsStep = React.memo(({ onClose }) => {
[onClose, dispatch],
);
const handleActivitiesClick = useCallback(() => {
dispatch(entryActions.openBoardActivitiesModal());
onClose();
}, [onClose, dispatch]);
const handleEmptyTrashConfirm = useCallback(() => {
dispatch(entryActions.clearTrashListInCurrentBoard());
onClose();
}, [onClose, dispatch]);
const handleEmptyTrashClick = useCallback(() => {
openStep(StepTypes.EMPTY_TRASH);
}, [openStep]);
const handleCustomFieldsClick = useCallback(() => {
openStep(StepTypes.CUSTOM_FIELD_GROUPS);
}, [openStep]);
const handleEmptyTrashClick = useCallback(() => {
openStep(StepTypes.EMPTY_TRASH);
}, [openStep]);
if (step) {
switch (step.type) {
case StepTypes.CUSTOM_FIELD_GROUPS:
return <CustomFieldGroupsStep onBack={handleBack} onClose={onClose} />;
case StepTypes.EMPTY_TRASH:
return (
<ConfirmationStep
@ -94,8 +101,6 @@ const ActionsStep = React.memo(({ onClose }) => {
onBack={handleBack}
/>
);
case StepTypes.CUSTOM_FIELD_GROUPS:
return <CustomFieldGroupsStep onBack={handleBack} onClose={onClose} />;
default:
}
}
@ -128,6 +133,12 @@ const ActionsStep = React.memo(({ onClose }) => {
})}
</Menu.Item>
)}
<Menu.Item className={styles.menuItem} onClick={handleActivitiesClick}>
<Icon name="list ul" className={styles.menuItemIcon} />
{t('common.actions', {
context: 'title',
})}
</Menu.Item>
{withTrashEmptier && (
<>
{(withSubscribe || withCustomFieldGroups) && <hr className={styles.divider} />}

4
client/src/components/cards/CardModal/Communication.jsx
View file

@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
import { Menu, Tab } from 'semantic-ui-react';
import Comments from '../../comments/Comments';
import Activities from '../../activities/Activities';
import CardActivities from '../../activities/CardActivities';
import styles from './Communication.module.scss';
@ -34,7 +34,7 @@ const Communication = React.memo(() => {
})}
</Menu.Item>
),
render: () => <Activities />,
render: () => <CardActivities />,
},
];

2
client/src/components/notifications/NotificationsStep/Item.module.scss
View file

@ -29,6 +29,7 @@
.content {
display: inline-block;
font-size: 13px;
line-height: 20px;
min-height: 36px;
overflow: hidden;
padding: 0 4px 0 8px;
@ -40,7 +41,6 @@
.date {
color: #6b808c;
font-size: 12px;
line-height: 20px;
}
.wrapper {