feat: Add ability to link tasks to cards

2025-12-26 09:15:01 +03:00 · 2025-07-11 01:04:02 +02:00
parent 49203e9d56
commit 230f50e3d9
35 changed files with 761 additions and 243 deletions
--- a/client/src/components/task-lists/TaskList/AddTask.jsx
+++ b/client/src/components/task-lists/TaskList/AddTask.jsx
@@ -5,12 +5,13 @@

 import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import TextareaAutosize from 'react-textarea-autosize';
-import { Button, Form, TextArea } from 'semantic-ui-react';
+import { Button, Dropdown, Form, Icon, TextArea } from 'semantic-ui-react';
 import { useClickAwayListener, useDidUpdate, useToggle } from '../../../lib/hooks';

+import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import { useForm, useNestedRef } from '../../../hooks';
 import { focusEnd } from '../../../utils/element-helpers';
@@ -20,18 +21,23 @@ import styles from './AddTask.module.scss';

 const DEFAULT_DATA = {
  name: '',
+  linkedCardId: null,
 };

 const MULTIPLE_REGEX = /\s*\r?\n\s*/;

 const AddTask = React.memo(({ children, taskListId, isOpened, onClose }) => {
+  const cards = useSelector(selectors.selectCardsExceptCurrentForCurrentBoard);
+
  const dispatch = useDispatch();
  const [t] = useTranslation();
  const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
-  const [focusNameFieldState, focusNameField] = useToggle();
+  const [isLinkingToCard, toggleLinkingToCard] = useToggle();
+  const [focusFieldState, focusField] = useToggle();

-  const [nameFieldRef, handleNameFieldRef] = useNestedRef();
-  const [buttonRef, handleButtonRef] = useNestedRef();
+  const [fieldRef, handleFieldRef] = useNestedRef();
+  const [submitButtonRef, handleSubmitButtonRef] = useNestedRef();
+  const [toggleLinkingButtonRef, handleToggleLinkingButtonRef] = useNestedRef();

  const submit = useCallback(
    (isMultiple = false) => {
@@ -40,12 +46,23 @@ const AddTask = React.memo(({ children, taskListId, isOpened, onClose }) => {
        name: data.name.trim(),
      };

-      if (!cleanData.name) {
-        nameFieldRef.current.select();
-        return;
+      if (isLinkingToCard) {
+        if (!cleanData.linkedCardId) {
+          fieldRef.current.querySelector('.search').focus();
+          return;
+        }
+
+        delete cleanData.name;
+      } else {
+        if (!cleanData.name) {
+          fieldRef.current.select();
+          return;
+        }
+
+        delete cleanData.linkedCardId;
      }

-      if (isMultiple) {
+      if (!isLinkingToCard && isMultiple) {
        cleanData.name.split(MULTIPLE_REGEX).forEach((name) => {
          dispatch(
            entryActions.createTask(taskListId, {
@@ -59,9 +76,9 @@ const AddTask = React.memo(({ children, taskListId, isOpened, onClose }) => {
      }

      setData(DEFAULT_DATA);
-      focusNameField();
+      focusField();
    },
-    [taskListId, dispatch, data, setData, focusNameField, nameFieldRef],
+    [taskListId, dispatch, data, setData, isLinkingToCard, focusField, fieldRef],
  );

  const handleSubmit = useCallback(() => {
@@ -71,34 +88,48 @@ const AddTask = React.memo(({ children, taskListId, isOpened, onClose }) => {
  const handleFieldKeyDown = useCallback(
    (event) => {
      if (event.key === 'Enter') {
-        event.preventDefault();
-        submit(isModifierKeyPressed(event));
+        if (!isLinkingToCard) {
+          event.preventDefault();
+          submit(isModifierKeyPressed(event));
+        }
      } else if (event.key === 'Escape') {
        onClose();
      }
    },
-    [onClose, submit],
+    [onClose, isLinkingToCard, submit],
  );

+  const handleToggleLinkingClick = useCallback(() => {
+    toggleLinkingToCard();
+  }, [toggleLinkingToCard]);
+
  const handleClickAwayCancel = useCallback(() => {
-    nameFieldRef.current.focus();
-  }, [nameFieldRef]);
+    if (isLinkingToCard) {
+      fieldRef.current.querySelector('.search').focus();
+    } else {
+      focusEnd(fieldRef.current);
+    }
+  }, [isLinkingToCard, fieldRef]);

  const clickAwayProps = useClickAwayListener(
-    [nameFieldRef, buttonRef],
+    [fieldRef, submitButtonRef, toggleLinkingButtonRef],
    onClose,
    handleClickAwayCancel,
  );

  useEffect(() => {
    if (isOpened) {
-      focusEnd(nameFieldRef.current);
+      if (isLinkingToCard) {
+        fieldRef.current.querySelector('.search').focus();
+      } else {
+        focusEnd(fieldRef.current);
+      }
    }
-  }, [isOpened, nameFieldRef]);
+  }, [isOpened, isLinkingToCard, fieldRef]);

  useDidUpdate(() => {
-    nameFieldRef.current.focus();
-  }, [focusNameFieldState]);
+    fieldRef.current.focus();
+  }, [focusFieldState]);

  if (!isOpened) {
    return children;
@@ -106,27 +137,63 @@ const AddTask = React.memo(({ children, taskListId, isOpened, onClose }) => {

  return (
    <Form className={styles.wrapper} onSubmit={handleSubmit}>
-      <TextArea
-        {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
-        ref={handleNameFieldRef}
-        as={TextareaAutosize}
-        name="name"
-        value={data.name}
-        placeholder={t('common.enterTaskDescription')}
-        maxLength={1024}
-        minRows={2}
-        spellCheck={false}
-        className={styles.field}
-        onKeyDown={handleFieldKeyDown}
-        onChange={handleFieldChange}
-      />
+      {isLinkingToCard ? (
+        <Dropdown
+          fluid
+          selection
+          search
+          ref={handleFieldRef}
+          name="linkedCardId"
+          options={cards.map((card) => ({
+            text: card.name,
+            value: card.id,
+          }))}
+          value={data.linkedCardId}
+          placeholder={t('common.searchCards')}
+          minCharacters={1}
+          closeOnBlur={false}
+          closeOnEscape={false}
+          noResultsMessage={t('common.noCardsFound')}
+          className={styles.field}
+          onKeyDown={handleFieldKeyDown}
+          onChange={handleFieldChange}
+        />
+      ) : (
+        <TextArea
+          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+          ref={handleFieldRef}
+          as={TextareaAutosize}
+          name="name"
+          value={data.name}
+          placeholder={t('common.enterTaskDescription')}
+          maxLength={1024}
+          minRows={2}
+          spellCheck={false}
+          className={styles.field}
+          onKeyDown={handleFieldKeyDown}
+          onChange={handleFieldChange}
+        />
+      )}
      <div className={styles.controls}>
        <Button
          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
          positive
-          ref={handleButtonRef}
+          ref={handleSubmitButtonRef}
          content={t('action.addTask')}
        />
+        <Button
+          {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+          ref={handleToggleLinkingButtonRef}
+          type="button"
+          className={styles.toggleLinkingButton}
+          onClick={handleToggleLinkingClick}
+        >
+          <Icon
+            name={isLinkingToCard ? 'align left' : 'exchange'}
+            className={styles.toggleLinkingButtonIcon}
+          />
+          {isLinkingToCard ? t('common.description') : t('common.linkToCard')}
+        </Button>
      </div>
    </Form>
  );
--- a/client/src/components/task-lists/TaskList/AddTask.module.scss
+++ b/client/src/components/task-lists/TaskList/AddTask.module.scss
@@ -5,7 +5,7 @@

 :global(#app) {
  .controls {
-    clear: both;
+    display: flex;
    margin-top: 6px;
  }

@@ -18,9 +18,41 @@
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 4px;
-    overflow: hidden;
    padding: 8px 12px;
    resize: none;
+
+    :global {
+      .menu {
+        border: 1px solid rgba(9, 30, 66, 0.08);
+      }
+
+      .search {
+        left: 0;
+      }
+    }
+  }
+
+  .toggleLinkingButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-left: auto;
+    margin-right: 0;
+    overflow: hidden;
+    text-align: left;
+    text-decoration: underline;
+    text-overflow: ellipsis;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
+  .toggleLinkingButtonIcon {
+    text-decoration: none;
  }

  .wrapper {
--- a/client/src/components/task-lists/TaskList/Task/ActionsStep.jsx
+++ b/client/src/components/task-lists/TaskList/Task/ActionsStep.jsx
@@ -3,13 +3,14 @@
 * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
 */

-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Menu } from 'semantic-ui-react';
 import { Popup } from '../../../../lib/custom-ui';

+import selectors from '../../../../selectors';
 import entryActions from '../../../../entry-actions';
 import { useSteps } from '../../../../hooks';
 import ConfirmationStep from '../../../common/ConfirmationStep';
@@ -21,6 +22,10 @@ const StepTypes = {
 };

 const ActionsStep = React.memo(({ taskId, onNameEdit, onClose }) => {
+  const selectTaskById = useMemo(() => selectors.makeSelectTaskById(), []);
+
+  const task = useSelector((state) => selectTaskById(state, taskId));
+
  const dispatch = useDispatch();
  const [t] = useTranslation();
  const [step, openStep, handleBack] = useSteps();
@@ -59,11 +64,13 @@ const ActionsStep = React.memo(({ taskId, onNameEdit, onClose }) => {
      </Popup.Header>
      <Popup.Content>
        <Menu secondary vertical className={styles.menu}>
-          <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
-            {t('action.editDescription', {
-              context: 'title',
-            })}
-          </Menu.Item>
+          {!task.linkedCardId && (
+            <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
+              {t('action.editDescription', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          )}
          <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
            {t('action.deleteTask', {
              context: 'title',
--- a/client/src/components/task-lists/TaskList/Task/Task.jsx
+++ b/client/src/components/task-lists/TaskList/Task/Task.jsx
@@ -8,6 +8,7 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { Draggable } from 'react-beautiful-dnd';
 import { Button, Checkbox, Icon } from 'semantic-ui-react';
 import { useDidUpdate } from '../../../../lib/hooks';
@@ -18,6 +19,7 @@ import { usePopupInClosableContext } from '../../../../hooks';
 import { isListArchiveOrTrash } from '../../../../utils/record-helpers';
 import { BoardMembershipRoles } from '../../../../constants/Enums';
 import { ClosableContext } from '../../../../contexts';
+import Paths from '../../../../constants/Paths';
 import EditName from './EditName';
 import SelectAssigneeStep from './SelectAssigneeStep';
 import ActionsStep from './ActionsStep';
@@ -28,26 +30,14 @@ import styles from './Task.module.scss';

 const Task = React.memo(({ id, index }) => {
  const selectTaskById = useMemo(() => selectors.makeSelectTaskById(), []);
-  const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
+  const selectLinkedCardById = useMemo(() => selectors.makeSelectCardById(), []);
  const selectListById = useMemo(() => selectors.makeSelectListById(), []);

  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 && card.isClosed) {
-        return true;
-      }
-    }
-
-    return false;
-  });
+  const linkedCard = useSelector(
+    (state) => task.linkedCardId && selectLinkedCardById(state, task.linkedCardId),
+  );

  const { canEdit, canToggle } = useSelector((state) => {
    const { listId } = selectors.selectCurrentCard(state);
@@ -101,14 +91,12 @@ const Task = React.memo(({ id, index }) => {
  }, [id, dispatch]);

  const isEditable = task.isPersisted && canEdit;
-  const isCompleted = task.isCompleted || isLinkedCardCompleted;
-  const isToggleDisabled = !task.isPersisted || !canToggle || isLinkedCardCompleted;

  const handleClick = useCallback(() => {
-    if (isEditable) {
+    if (!task.linkedCardId && isEditable) {
      setIsEditNameOpened(true);
    }
-  }, [isEditable]);
+  }, [task.linkedCardId, isEditable]);

  const handleNameEdit = useCallback(() => {
    setIsEditNameOpened(true);
@@ -118,6 +106,10 @@ const Task = React.memo(({ id, index }) => {
    setIsEditNameOpened(false);
  }, []);

+  const handleLinkClick = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+
  useDidUpdate(() => {
    setIsClosableActive(isEditNameOpened);
  }, [isEditNameOpened]);
@@ -141,8 +133,8 @@ const Task = React.memo(({ id, index }) => {
          >
            <span className={styles.checkboxWrapper}>
              <Checkbox
-                checked={isCompleted}
-                disabled={isToggleDisabled}
+                checked={task.isCompleted}
+                disabled={!!task.linkedCardId || !task.isPersisted || !canToggle}
                className={styles.checkbox}
                onChange={handleToggleChange}
              />
@@ -154,34 +146,69 @@ const Task = React.memo(({ id, index }) => {
                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
                                             jsx-a11y/no-static-element-interactions */}
                <span
-                  className={classNames(styles.text, canEdit && styles.textEditable)}
+                  className={classNames(
+                    styles.text,
+                    task.linkedCardId && styles.textLinked,
+                    canEdit && styles.textEditable,
+                    canEdit && !task.linkedCardId && styles.textPointable,
+                  )}
                  onClick={handleClick}
                >
-                  <span className={classNames(styles.task, isCompleted && styles.taskCompleted)}>
-                    <Linkify linkStopPropagation>{task.name}</Linkify>
+                  <span
+                    className={classNames(styles.task, task.isCompleted && styles.taskCompleted)}
+                  >
+                    {task.linkedCardId ? (
+                      <>
+                        <Icon name="exchange" size="small" className={styles.icon} />
+                        <span
+                          className={classNames(
+                            styles.name,
+                            task.isCompleted && styles.nameCompleted,
+                          )}
+                        >
+                          <Link
+                            to={Paths.CARDS.replace(':id', task.linkedCardId)}
+                            onClick={handleLinkClick}
+                          >
+                            {linkedCard ? linkedCard.name : task.name}
+                          </Link>
+                        </span>
+                      </>
+                    ) : (
+                      <span
+                        className={classNames(
+                          styles.name,
+                          task.isCompleted && styles.nameCompleted,
+                        )}
+                      >
+                        <Linkify linkStopPropagation>{task.name}</Linkify>
+                      </span>
+                    )}
                  </span>
                </span>
                {(task.assigneeUserId || isEditable) && (
                  <div className={classNames(styles.actions, isEditable && styles.actionsEditable)}>
                    {isEditable ? (
                      <>
-                        <SelectAssigneePopup
-                          currentUserId={task.assigneeUserId}
-                          onUserSelect={handleUserSelect}
-                          onUserDeselect={handleUserDeselect}
-                        >
-                          {task.assigneeUserId ? (
-                            <UserAvatar
-                              id={task.assigneeUserId}
-                              size="tiny"
-                              className={styles.assigneeUserAvatar}
-                            />
-                          ) : (
-                            <Button className={styles.button}>
-                              <Icon fitted name="add user" size="small" />
-                            </Button>
-                          )}
-                        </SelectAssigneePopup>
+                        {!task.linkedCardId && (
+                          <SelectAssigneePopup
+                            currentUserId={task.assigneeUserId}
+                            onUserSelect={handleUserSelect}
+                            onUserDeselect={handleUserDeselect}
+                          >
+                            {task.assigneeUserId ? (
+                              <UserAvatar
+                                id={task.assigneeUserId}
+                                size="tiny"
+                                className={styles.assigneeUserAvatar}
+                              />
+                            ) : (
+                              <Button className={styles.button}>
+                                <Icon fitted name="add user" size="small" />
+                              </Button>
+                            )}
+                          </SelectAssigneePopup>
+                        )}
                        <ActionsPopup taskId={id} onNameEdit={handleNameEdit}>
                          <Button className={styles.button}>
                            <Icon fitted name="pencil" size="small" />
--- a/client/src/components/task-lists/TaskList/Task/Task.module.scss
+++ b/client/src/components/task-lists/TaskList/Task/Task.module.scss
@@ -56,6 +56,22 @@
    }
  }

+  .icon {
+    color: rgba(9, 30, 66, 0.24);
+    margin-right: 8px;
+  }
+
+  .name {
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .nameCompleted {
+    color: #aaa;
+    text-decoration: line-through;
+  }
+
  .task {
    display: inline-block;
    overflow: hidden;
@@ -66,11 +82,6 @@
    width: 100%;
  }

-  .taskCompleted {
-    color: #aaa;
-    text-decoration: line-through;
-  }
-
  .text {
    background: transparent;
    border-radius: 3px;
@@ -81,11 +92,22 @@
    min-height: 32px;
    padding: 0 34px 0 40px;
    width: 100%;
+
+    &.textLinked {
+      padding-right: 0px;
+    }
  }

  .textEditable {
-    cursor: pointer;
    padding-right: 68px;
+
+    &.textLinked {
+      padding-right: 34px;
+    }
+  }
+
+  .textPointable {
+    cursor: pointer;
  }

  .wrapper {
--- a/client/src/components/task-lists/TaskList/TaskList.jsx
+++ b/client/src/components/task-lists/TaskList/TaskList.jsx
@@ -23,36 +23,12 @@ import styles from './TaskList.module.scss';

 const TaskList = React.memo(({ id }) => {
  const selectTaskListById = useMemo(() => selectors.makeSelectTaskListById(), []);
-  const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
  const selectListById = useMemo(() => selectors.makeSelectListById(), []);
  const selectTasksByTaskListId = useMemo(() => selectors.makeSelectTasksByTaskListId(), []);

  const taskList = useSelector((state) => selectTaskListById(state, id));
  const tasks = useSelector((state) => selectTasksByTaskListId(state, id));

-  // TODO: move to selector?
-  const completedTasksTotal = useSelector((state) =>
-    tasks.reduce((result, task) => {
-      if (task.isCompleted) {
-        return result + 1;
-      }
-
-      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 && card.isClosed) {
-          return result + 1;
-        }
-      }
-
-      return result;
-    }, 0),
-  );
-
  const canEdit = useSelector((state) => {
    const { listId } = selectors.selectCurrentCard(state);
    const list = selectListById(state, listId);
@@ -69,6 +45,12 @@ const TaskList = React.memo(({ id }) => {
  const [isAddOpened, setIsAddOpened] = useState(false);
  const [, , setIsClosableActive] = useContext(ClosableContext);

+  // TODO: move to selector?
+  const completedTasksTotal = useMemo(
+    () => tasks.reduce((result, task) => (task.isCompleted ? result + 1 : result), 0),
+    [tasks],
+  );
+
  const handleAddClick = useCallback(() => {
    setIsAddOpened(true);
  }, []);