AhmedTawfik/planka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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
client/src/components/activities/BoardActivitiesModal/BoardActivitiesModal.jsx
Executable
+73
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;
client/src/components/activities/BoardActivitiesModal/BoardActivitiesModal.module.scss
+18
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;
}
}
client/src/components/activities/BoardActivitiesModal/Item.jsx
Executable
+220
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;
client/src/components/activities/Activities/Item.module.scss → client/src/components/activities/BoardActivitiesModal/Item.module.scss
+1 -6
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 {
client/src/components/activities/BoardActivitiesModal/index.js
Executable
+8
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;
client/src/components/activities/Activities/Activities.jsx → client/src/components/activities/CardActivities/CardActivities.jsx
+3 -3
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;
client/src/components/activities/Activities/Activities.module.scss → client/src/components/activities/CardActivities/CardActivities.module.scss
View File
client/src/components/activities/Activities/Item.jsx → client/src/components/activities/CardActivities/Item.jsx
+20 -32
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>
);
client/src/components/activities/CardActivities/Item.module.scss
+31
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;
}
}
client/src/components/activities/Activities/index.js → client/src/components/activities/CardActivities/index.js
+2 -2
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;