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

feat: Add selector for card names and update task completion logic

Browse source
This commit is contained in:
Daniel Silvestre 2025-07-05 02:19:15 +02:00
parent b22dba0d11
commit 5e073a3648
5 changed files with 110 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

39
client/src/components/task-lists/TaskList/Task/Task.jsx
View file

@ -16,7 +16,7 @@ import selectors from '../../../../selectors';
import entryActions from '../../../../entry-actions';
import { usePopupInClosableContext } from '../../../../hooks';
import { isListArchiveOrTrash } from '../../../../utils/record-helpers';
import { BoardMembershipRoles } from '../../../../constants/Enums';
import { BoardMembershipRoles, ListTypes } from '../../../../constants/Enums';
import { ClosableContext } from '../../../../contexts';
import EditName from './EditName';
import SelectAssigneeStep from './SelectAssigneeStep';
@ -29,9 +29,26 @@ import styles from './Task.module.scss';
const Task = React.memo(({ id, index }) => {
const selectTaskById = useMemo(() => selectors.makeSelectTaskById(), []);
const selectListById = useMemo(() => selectors.makeSelectListById(), []);
const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
const task = useSelector((state) => selectTaskById(state, id));
const isLinkedCardCompleted = useSelector((state) => {
const regex = /\/cards\/([^/]+)/g;
const matches = task.name.matchAll(regex);
// eslint-disable-next-line no-restricted-syntax
for (const [, cardId] of matches) {
const card = selectCardById(state, cardId);
if (card) {
const list = selectListById(state, card.listId);
if (list && list.type === ListTypes.CLOSED) {
return true;
}
}
}
return false;
});
const { canEdit, canToggle } = useSelector((state) => {
const { listId } = selectors.selectCurrentCard(state);
const list = selectListById(state, listId);
@ -56,13 +73,21 @@ const Task = React.memo(({ id, index }) => {
const [isEditNameOpened, setIsEditNameOpened] = useState(false);
const [, , setIsClosableActive] = useContext(ClosableContext);
const isEditable = task.isPersisted && canEdit;
const isCompleted = task.isCompleted || isLinkedCardCompleted;
const isToggleDisabled = !task.isPersisted || !canToggle || isLinkedCardCompleted;
const handleToggleChange = useCallback(() => {
if (isToggleDisabled) {
return;
}
dispatch(
entryActions.updateTask(id, {
isCompleted: !task.isCompleted,
}),
);
}, [id, task.isCompleted, dispatch]);
}, [id, task.isCompleted, dispatch, isToggleDisabled]);
const handleUserSelect = useCallback(
(userId) => {
@ -83,8 +108,6 @@ const Task = React.memo(({ id, index }) => {
);
}, [id, dispatch]);
const isEditable = task.isPersisted && canEdit;
const handleClick = useCallback(() => {
if (isEditable) {
setIsEditNameOpened(true);
@ -122,8 +145,8 @@ const Task = React.memo(({ id, index }) => {
>
<span className={styles.checkboxWrapper}>
<Checkbox
checked={task.isCompleted}
disabled={!task.isPersisted || !canToggle}
checked={isCompleted}
disabled={isToggleDisabled}
className={styles.checkbox}
onChange={handleToggleChange}
/>
@ -138,9 +161,7 @@ const Task = React.memo(({ id, index }) => {
className={classNames(styles.text, canEdit && styles.textEditable)}
onClick={handleClick}
>
<span
className={classNames(styles.task, task.isCompleted && styles.taskCompleted)}
>
<span className={classNames(styles.task, isCompleted && styles.taskCompleted)}>
<Linkify linkStopPropagation>{task.name}</Linkify>
</span>
</span>