feat: Add ability to link tasks to cards

client/patches/semantic-ui-react+2.1.5.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/semantic-ui-react/dist/es/lib/doesNodeContainClick.js b/node_modules/semantic-ui-react/dist/es/lib/doesNodeContainClick.js
-index 6d06078..fb7534d 100644
+index 6d06078..e22d4f0 100644
 --- a/node_modules/semantic-ui-react/dist/es/lib/doesNodeContainClick.js
 +++ b/node_modules/semantic-ui-react/dist/es/lib/doesNodeContainClick.js
 @@ -17,13 +17,7 @@ var doesNodeContainClick = function doesNodeContainClick(node, e) {
@@ -17,6 +17,46 @@ index 6d06078..fb7534d 100644
    } // Below logic handles cases where the e.target is no longer in the document.
    // The result of the click likely has removed the e.target node.
    // Instead of node.contains(), we'll identify the click by X/Y position.
+diff --git a/node_modules/semantic-ui-react/dist/es/modules/Dropdown/Dropdown.js b/node_modules/semantic-ui-react/dist/es/modules/Dropdown/Dropdown.js
+index 1cc1bab..7abb016 100644
+--- a/node_modules/semantic-ui-react/dist/es/modules/Dropdown/Dropdown.js
++++ b/node_modules/semantic-ui-react/dist/es/modules/Dropdown/Dropdown.js
+@@ -342,7 +342,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
+         return;
+       }
+ 
+-      if (searchQuery.length >= minCharacters || minCharacters === 1) {
++      if (searchQuery.length >= minCharacters || minCharacters === 0) {
+         _this.open(e);
+ 
+         return;
+@@ -480,7 +480,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
+       } // close search dropdown if search query is too small
+ 
+ 
+-      if (open && minCharacters !== 1 && newQuery.length < minCharacters) _this.close();
++      if (open && minCharacters !== 0 && newQuery.length < minCharacters) _this.close();
+     };
+ 
+     _this.handleKeyDown = function (e) {
+@@ -1048,7 +1048,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
+ 
+     if (!prevState.focus && this.state.focus) {
+       if (!this.isMouseDown) {
+-        var openable = !search || search && minCharacters === 1 && !this.state.open;
++        var openable = !search || search && minCharacters === 0 && !this.state.open;
+         if (openOnFocus && openable) this.open();
+       }
+     } else if (prevState.focus && !this.state.focus) {
+@@ -1436,7 +1436,7 @@ Dropdown.defaultProps = {
+   closeOnEscape: true,
+   deburr: false,
+   icon: 'dropdown',
+-  minCharacters: 1,
++  minCharacters: 0,
+   noResultsMessage: 'No results found.',
+   openOnFocus: true,
+   renderLabel: renderItemContent,
 diff --git a/node_modules/semantic-ui-react/src/lib/doesNodeContainClick.js b/node_modules/semantic-ui-react/src/lib/doesNodeContainClick.js
 index d1ae271..43e1170 100644
 --- a/node_modules/semantic-ui-react/src/lib/doesNodeContainClick.js

client/src/components/cards/Card/TaskList/Task.jsx

@@ -3,45 +3,49 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { Icon } from 'semantic-ui-react';
 
 import selectors from '../../../../selectors';
+import Paths from '../../../../constants/Paths';
 import Linkify from '../../../common/Linkify';
 
 import styles from './Task.module.scss';
 
 const Task = React.memo(({ id }) => {
   const selectTaskById = useMemo(() => selectors.makeSelectTaskById(), []);
-  const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
+  const selectLinkedCardById = useMemo(() => selectors.makeSelectCardById(), []);
 
   const task = useSelector((state) => selectTaskById(state, id));
 
-  const isCompleted = useSelector((state) => {
+  const linkedCard = useSelector(
-    if (task.isCompleted) {
+    (state) => task.linkedCardId && selectLinkedCardById(state, task.linkedCardId),
-      return true;
+  );
-    }
 
-    const regex = /\/cards\/([^/]+)/g;
+  const handleLinkClick = useCallback((event) => {
-    const matches = task.name.matchAll(regex);
+    event.stopPropagation();
-
+  }, []);
-    // 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;
-  });
 
   return (
-    <li className={classNames(styles.wrapper, isCompleted && styles.wrapperCompleted)}>
+    <li className={styles.wrapper}>
-      <Linkify linkStopPropagation>{task.name}</Linkify>
+      {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>
+      )}
     </li>
   );
 });

client/src/components/cards/Card/TaskList/Task.module.scss

@@ -4,6 +4,21 @@
  */
 
 :global(#app) {
+  .icon {
+    color: rgba(9, 30, 66, 0.24);
+  }
+
+  .name {
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .nameCompleted {
+    color: #aaa;
+    text-decoration: line-through;
+  }
+
   .wrapper {
     display: block;
     font-size: 12px;
@@ -18,9 +33,4 @@
       left: 10px;
     }
   }
-
-  .wrapperCompleted {
-    color: #aaa;
-    text-decoration: line-through;
-  }
 }

client/src/components/cards/Card/TaskList/TaskList.jsx

@@ -16,32 +16,14 @@ import Task from './Task';
 import styles from './TaskList.module.scss';
 
 const TaskList = React.memo(({ id }) => {
-  const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
   const selectTasksByTaskListId = useMemo(() => selectors.makeSelectTasksByTaskListId(), []);
 
   const tasks = useSelector((state) => selectTasksByTaskListId(state, id));
 
   // TODO: move to selector?
-  const completedTasksTotal = useSelector((state) =>
+  const completedTasksTotal = useMemo(
-    tasks.reduce((result, task) => {
+    () => tasks.reduce((result, task) => (task.isCompleted ? result + 1 : result), 0),
-      if (task.isCompleted) {
+    [tasks],
-        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 [isOpened, toggleOpened] = useToggle();

client/src/components/common/Linkify/Link.jsx

@@ -6,23 +6,22 @@
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import LinkifyReact from 'linkify-react';
 
-import history from '../../history';
+import history from '../../../history';
-import selectors from '../../selectors';
+import selectors from '../../../selectors';
-import matchPaths from '../../utils/match-paths';
+import matchPaths from '../../../utils/match-paths';
-import Paths from '../../constants/Paths';
+import Paths from '../../../constants/Paths';
 
-const Linkify = React.memo(({ children, linkStopPropagation, ...props }) => {
+const Linkify = React.memo(({ href, content, stopPropagation, ...props }) => {
   const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
 
   const url = useMemo(() => {
     try {
-      return new URL(children, window.location);
+      return new URL(href, window.location);
     } catch {
       return null;
     }
-  }, [children]);
+  }, [href]);
 
   const isSameSite = !!url && url.origin === window.location.origin;
 
@@ -42,9 +41,9 @@ const Linkify = React.memo(({ children, linkStopPropagation, ...props }) => {
     return selectCardById(state, cardsPathMatch.params.id);
   });
 
-  const handleLinkClick = useCallback(
+  const handleClick = useCallback(
     (event) => {
-      if (linkStopPropagation) {
+      if (stopPropagation) {
         event.stopPropagation();
       }
 
@@ -53,44 +52,30 @@ const Linkify = React.memo(({ children, linkStopPropagation, ...props }) => {
         history.push(event.target.href);
       }
     },
-    [linkStopPropagation, isSameSite],
+    [stopPropagation, isSameSite],
-  );
-
-  const linkRenderer = useCallback(
-    ({ attributes: { href, ...linkProps }, content }) => (
-      <a
-        {...linkProps} // eslint-disable-line react/jsx-props-no-spreading
-        href={href}
-        target={isSameSite ? undefined : '_blank'}
-        rel={isSameSite ? undefined : 'noreferrer'}
-        onClick={handleLinkClick}
-      >
-        {card ? card.name : content}
-      </a>
-    ),
-    [isSameSite, card, handleLinkClick],
   );
 
   return (
-    <LinkifyReact
+    <a
       {...props} // eslint-disable-line react/jsx-props-no-spreading
-      options={{
+      href={href}
-        defaultProtocol: 'https',
+      target={isSameSite ? undefined : '_blank'}
-        render: linkRenderer,
+      rel={isSameSite ? undefined : 'noreferrer'}
-      }}
+      onClick={handleClick}
     >
-      {children}
+      {card ? card.name : content}
-    </LinkifyReact>
+    </a>
   );
 });
 
 Linkify.propTypes = {
-  children: PropTypes.string.isRequired,
+  href: PropTypes.string.isRequired,
-  linkStopPropagation: PropTypes.bool,
+  content: PropTypes.string.isRequired,
+  stopPropagation: PropTypes.bool,
 };
 
 Linkify.defaultProps = {
-  linkStopPropagation: false,
+  stopPropagation: false,
 };
 
 export default Linkify;

client/src/components/common/Linkify/Linkify.jsx

@@ -0,0 +1,43 @@
+/*!
+ * 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 PropTypes from 'prop-types';
+import LinkifyReact from 'linkify-react';
+
+import Link from './Link';
+
+const Linkify = React.memo(({ children, linkStopPropagation, ...props }) => {
+  const linkRenderer = useCallback(
+    ({ attributes: { href, ...linkProps }, content }) => (
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      <Link {...linkProps} href={href} content={content} stopPropagation={linkStopPropagation} />
+    ),
+    [linkStopPropagation],
+  );
+
+  return (
+    <LinkifyReact
+      {...props} // eslint-disable-line react/jsx-props-no-spreading
+      options={{
+        defaultProtocol: 'https',
+        render: linkRenderer,
+      }}
+    >
+      {children}
+    </LinkifyReact>
+  );
+});
+
+Linkify.propTypes = {
+  children: PropTypes.string.isRequired,
+  linkStopPropagation: PropTypes.bool,
+};
+
+Linkify.defaultProps = {
+  linkStopPropagation: undefined,
+};
+
+export default Linkify;

client/src/components/common/Linkify/index.js

@@ -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 Linkify from './Linkify';
+
+export default Linkify;

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 [fieldRef, handleFieldRef] = useNestedRef();
-  const [buttonRef, handleButtonRef] = 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) {
+      if (isLinkingToCard) {
-        nameFieldRef.current.select();
+        if (!cleanData.linkedCardId) {
-        return;
+          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();
+        if (!isLinkingToCard) {
-        submit(isModifierKeyPressed(event));
+          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();
+    if (isLinkingToCard) {
-  }, [nameFieldRef]);
+      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();
+    fieldRef.current.focus();
-  }, [focusNameFieldState]);
+  }, [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
+      {isLinkingToCard ? (
-        {...clickAwayProps} // eslint-disable-line react/jsx-props-no-spreading
+        <Dropdown
-        ref={handleNameFieldRef}
+          fluid
-        as={TextareaAutosize}
+          selection
-        name="name"
+          search
-        value={data.name}
+          ref={handleFieldRef}
-        placeholder={t('common.enterTaskDescription')}
+          name="linkedCardId"
-        maxLength={1024}
+          options={cards.map((card) => ({
-        minRows={2}
+            text: card.name,
-        spellCheck={false}
+            value: card.id,
-        className={styles.field}
+          }))}
-        onKeyDown={handleFieldKeyDown}
+          value={data.linkedCardId}
-        onChange={handleFieldChange}
+          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>
   );

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 {

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}>
+          {!task.linkedCardId && (
-            {t('action.editDescription', {
+            <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
-              context: 'title',
+              {t('action.editDescription', {
-            })}
+                context: 'title',
-          </Menu.Item>
+              })}
+            </Menu.Item>
+          )}
           <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
             {t('action.deleteTask', {
               context: 'title',

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 linkedCard = useSelector(
-    const regex = /\/cards\/([^/]+)/g;
+    (state) => task.linkedCardId && selectLinkedCardById(state, task.linkedCardId),
-    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 { 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}
+                checked={task.isCompleted}
-                disabled={isToggleDisabled}
+                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)}>
+                  <span
-                    <Linkify linkStopPropagation>{task.name}</Linkify>
+                    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
+                        {!task.linkedCardId && (
-                          currentUserId={task.assigneeUserId}
+                          <SelectAssigneePopup
-                          onUserSelect={handleUserSelect}
+                            currentUserId={task.assigneeUserId}
-                          onUserDeselect={handleUserDeselect}
+                            onUserSelect={handleUserSelect}
-                        >
+                            onUserDeselect={handleUserDeselect}
-                          {task.assigneeUserId ? (
+                          >
-                            <UserAvatar
+                            {task.assigneeUserId ? (
-                              id={task.assigneeUserId}
+                              <UserAvatar
-                              size="tiny"
+                                id={task.assigneeUserId}
-                              className={styles.assigneeUserAvatar}
+                                size="tiny"
-                            />
+                                className={styles.assigneeUserAvatar}
-                          ) : (
+                              />
-                            <Button className={styles.button}>
+                            ) : (
-                              <Icon fitted name="add user" size="small" />
+                              <Button className={styles.button}>
-                            </Button>
+                                <Icon fitted name="add user" size="small" />
-                          )}
+                              </Button>
-                        </SelectAssigneePopup>
+                            )}
+                          </SelectAssigneePopup>
+                        )}
                         <ActionsPopup taskId={id} onNameEdit={handleNameEdit}>
                           <Button className={styles.button}>
                             <Icon fitted name="pencil" size="small" />

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 {

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);
   }, []);

client/src/locales/en-GB/core.js

@@ -206,6 +206,7 @@ export default {
       leaveBoard_title: 'Leave Board',
       leaveProject_title: 'Leave Project',
       limitCardTypesToDefaultOne: 'Limit card types to default one',
+      linkToCard: 'Link to card',
       list: 'List',
       listActions_title: 'List Actions',
       lists: 'Lists',
@@ -223,6 +224,7 @@ export default {
       newVersionAvailable: 'New version available',
       newestFirst: 'Newest first',
       noBoards: 'No boards',
+      noCardsFound: 'No cards found.',
       noConnectionToServer: 'No connection to server',
       noLists: 'No lists',
       noProjects: 'No projects',

client/src/locales/en-US/core.js

@@ -201,6 +201,7 @@ export default {
       leaveBoard_title: 'Leave Board',
       leaveProject_title: 'Leave Project',
       limitCardTypesToDefaultOne: 'Limit card types to default one',
+      linkToCard: 'Link to card',
       list: 'List',
       listActions_title: 'List Actions',
       lists: 'Lists',
@@ -218,6 +219,7 @@ export default {
       newVersionAvailable: 'New version available',
       newestFirst: 'Newest first',
       noBoards: 'No boards',
+      noCardsFound: 'No cards found.',
       noConnectionToServer: 'No connection to server',
       noLists: 'No lists',
       noProjects: 'No projects',

client/src/models/Card.js

@@ -322,15 +322,21 @@ export default class extends BaseModel {
             payload.data.listChangedAt = new Date(); // eslint-disable-line no-param-reassign
           }
 
+          if (payload.data.isClosed !== undefined && payload.data.isClosed !== cardModel.isClosed) {
+            cardModel.linkedTasks.update({
+              isCompleted: payload.data.isClosed,
+            });
+          }
+
           cardModel.update(payload.data);
         }
 
         break;
       }
-      case ActionTypes.CARD_UPDATE_HANDLE:
+      case ActionTypes.CARD_UPDATE_HANDLE: {
-        if (payload.card.boardId === null || payload.isFetched) {
+        const cardModel = Card.withId(payload.card.id);
-          const cardModel = Card.withId(payload.card.id);
 
+        if (payload.card.boardId === null || payload.isFetched) {
           if (cardModel) {
             cardModel.deleteWithRelated();
           }
@@ -338,6 +344,12 @@ export default class extends BaseModel {
 
         if (payload.card.boardId !== null) {
           Card.upsert(payload.card);
+
+          if (cardModel && payload.card.isClosed !== cardModel.isClosed) {
+            cardModel.linkedTasks.update({
+              isCompleted: payload.card.isClosed,
+            });
+          }
         }
 
         if (payload.cardMemberships) {
@@ -353,6 +365,7 @@ export default class extends BaseModel {
         }
 
         break;
+      }
       case ActionTypes.CARD_DUPLICATE:
         Card.withId(payload.id).duplicate(payload.localId, payload.data);
 
@@ -623,6 +636,12 @@ export default class extends BaseModel {
       taskListModel.deleteWithRelated();
     });
 
+    this.linkedTasks.toModelArray().forEach((taskModel) => {
+      taskModel.update({
+        linkedCardId: null,
+      });
+    });
+
     this.attachments.delete();
 
     this.customFieldGroups.toModelArray().forEach((customFieldGroupModel) => {

client/src/models/List.js

@@ -137,6 +137,10 @@ export default class extends BaseModel {
             cardModel.update({
               isClosed,
             });
+
+            cardModel.linkedTasks.update({
+              isCompleted: isClosed,
+            });
           });
         }
 
@@ -162,6 +166,10 @@ export default class extends BaseModel {
               cardModel.update({
                 isClosed,
               });
+
+              cardModel.linkedTasks.update({
+                isCompleted: isClosed,
+              });
             });
           }
         } else {

client/src/models/Task.js

@@ -23,6 +23,11 @@ export default class extends BaseModel {
       as: 'taskList',
       relatedName: 'tasks',
     }),
+    linkedCardId: fk({
+      to: 'Card',
+      as: 'linkedCard',
+      relatedName: 'linkedTasks',
+    }),
     assigneeUserId: fk({
       to: 'User',
       as: 'user',

client/src/sagas/core/services/tasks.js

@@ -12,6 +12,11 @@ import api from '../../../api';
 import { createLocalId } from '../../../utils/local-id';
 
 export function* createTask(taskListId, data) {
+  let isCompleted;
+  if (data.linkedCardId) {
+    ({ isClosed: isCompleted } = yield select(selectors.selectCardById, data.linkedCardId));
+  }
+
   const localId = yield call(createLocalId);
 
   const nextData = {
@@ -24,6 +29,9 @@ export function* createTask(taskListId, data) {
       ...nextData,
       taskListId,
       id: localId,
+      ...(isCompleted !== undefined && {
+        isCompleted,
+      }),
     }),
   );
 

client/src/selectors/boards.js

@@ -314,6 +314,28 @@ export const selectAvailableListsForCurrentBoard = createSelector(
   },
 );
 
+export const selectCardsExceptCurrentForCurrentBoard = createSelector(
+  orm,
+  (state) => selectPath(state).boardId,
+  (state) => selectPath(state).cardId,
+  ({ Board }, id, cardId) => {
+    if (!id) {
+      return id;
+    }
+
+    const boardModel = Board.withId(id);
+
+    if (!boardModel) {
+      return boardModel;
+    }
+
+    return boardModel
+      .getCardsModelArray()
+      .filter((cardModel) => cardModel.id !== cardId)
+      .map((cardModel) => cardModel.ref);
+  },
+);
+
 export const selectFilteredCardIdsForCurrentBoard = createSelector(
   orm,
   (state) => selectPath(state).boardId,
@@ -462,6 +484,7 @@ export default {
   selectTrashListIdForCurrentBoard,
   selectFiniteListIdsForCurrentBoard,
   selectAvailableListsForCurrentBoard,
+  selectCardsExceptCurrentForCurrentBoard,
   selectFilteredCardIdsForCurrentBoard,
   selectCustomFieldGroupIdsForCurrentBoard,
   selectCustomFieldGroupsForCurrentBoard,

server/api/controllers/tasks/create.js

@@ -12,6 +12,9 @@ const Errors = {
   TASK_LIST_NOT_FOUND: {
     taskListNotFound: 'Task list not found',
   },
+  LINKED_CARD_NOT_FOUND: {
+    linkedCardNotFound: 'Linked card not found',
+  },
 };
 
 module.exports = {
@@ -20,6 +23,7 @@ module.exports = {
       ...idInput,
       required: true,
     },
+    linkedCardId: idInput,
     position: {
       type: 'number',
       min: 0,
@@ -28,7 +32,7 @@ module.exports = {
     name: {
       type: 'string',
       maxLength: 1024,
-      required: true,
+      // required: true,
     },
     isCompleted: {
       type: 'boolean',
@@ -42,6 +46,9 @@ module.exports = {
     taskListNotFound: {
       responseType: 'notFound',
     },
+    linkedCardNotFound: {
+      responseType: 'notFound',
+    },
   },
 
   async fn(inputs) {
@@ -51,7 +58,7 @@ module.exports = {
       .getPathToProjectById(inputs.taskListId)
       .intercept('pathNotFound', () => Errors.TASK_LIST_NOT_FOUND);
 
-    const boardMembership = await BoardMembership.qm.getOneByBoardIdAndUserId(
+    let boardMembership = await BoardMembership.qm.getOneByBoardIdAndUserId(
       board.id,
       currentUser.id,
     );
@@ -64,6 +71,33 @@ module.exports = {
       throw Errors.NOT_ENOUGH_RIGHTS;
     }
 
+    let linkedCard;
+    if (!_.isUndefined(inputs.linkedCardId)) {
+      const path = await sails.helpers.cards
+        .getPathToProjectById(inputs.linkedCardId)
+        .intercept('pathNotFound', () => Errors.LINKED_CARD_NOT_FOUND);
+
+      ({ card: linkedCard } = path);
+
+      if (currentUser.role !== User.Roles.ADMIN || path.project.ownerProjectManagerId) {
+        const isProjectManager = await sails.helpers.users.isProjectManager(
+          currentUser.id,
+          path.project.id,
+        );
+
+        if (!isProjectManager) {
+          boardMembership = await BoardMembership.qm.getOneByBoardIdAndUserId(
+            linkedCard.boardId,
+            currentUser.id,
+          );
+
+          if (!boardMembership) {
+            throw Errors.LINKED_CARD_NOT_FOUND; // Forbidden
+          }
+        }
+      }
+    }
+
     const values = _.pick(inputs, ['position', 'name', 'isCompleted']);
 
     const task = await sails.helpers.tasks.createOne.with({
@@ -74,6 +108,7 @@ module.exports = {
       values: {
         ...values,
         taskList,
+        linkedCard,
       },
       actorUser: currentUser,
       request: this.req,

server/api/controllers/tasks/update.js

@@ -83,6 +83,14 @@ module.exports = {
       throw Errors.NOT_ENOUGH_RIGHTS;
     }
 
+    if (task.linkedCardId) {
+      const availableInputKeys = ['id', 'taskListId', 'position'];
+
+      if (_.difference(Object.keys(inputs), availableInputKeys).length > 0) {
+        throw Errors.NOT_ENOUGH_RIGHTS;
+      }
+    }
+
     let nextTaskList;
     if (!_.isUndefined(inputs.taskListId)) {
       nextTaskList = await TaskList.qm.getOneById(inputs.taskListId, {

server/api/helpers/cards/delete-related.js

@@ -39,6 +39,15 @@ module.exports = {
 
     await sails.helpers.taskLists.deleteRelated(taskLists);
 
+    await Task.qm.update(
+      {
+        linkedCardId: cardIdOrIds,
+      },
+      {
+        linkedCardId: null,
+      },
+    );
+
     const { fileReferences } = await Attachment.qm.delete({
       cardId: cardIdOrIds,
     });

server/api/helpers/cards/duplicate-one.js

@@ -147,7 +147,7 @@ module.exports = {
     const nextTaskLists = await TaskList.qm.create(nextTaskListsValues);
 
     const nextTasksValues = tasks.map((task) => ({
-      ..._.pick(task, ['assigneeUserId', 'position', 'name', 'isCompleted']),
+      ..._.pick(task, ['linkedCardId', 'assigneeUserId', 'position', 'name', 'isCompleted']),
       taskListId: nextTaskListIdByTaskListId[task.taskListId],
     }));
 
@@ -172,9 +172,9 @@ module.exports = {
       const nextCoverAttachmentId = nextAttachmentIdByAttachmentId[inputs.record.coverAttachmentId];
 
       if (nextCoverAttachmentId) {
-        card = await Card.qm.updateOne(card.id, {
+        ({ card } = await Card.qm.updateOne(card.id, {
           coverAttachmentId: nextCoverAttachmentId,
-        });
+        }));
       }
     }
 

server/api/helpers/cards/update-one.js

@@ -397,7 +397,10 @@ module.exports = {
         values.listChangedAt = new Date().toISOString();
       }
 
-      card = await Card.qm.updateOne(inputs.record.id, values);
+      const updateResult = await Card.qm.updateOne(inputs.record.id, values);
+
+      ({ card } = updateResult);
+      const { tasks } = updateResult;
 
       if (!card) {
         return card;
@@ -491,6 +494,32 @@ module.exports = {
         }
       }
 
+      if (tasks) {
+        const taskListIds = sails.helpers.utils.mapRecords(tasks, 'taskListId', true);
+        const taskLists = await TaskList.qm.getByIds(taskListIds);
+        const taskListById = _.keyBy(taskLists, 'id');
+
+        const cardIds = sails.helpers.utils.mapRecords(taskLists, 'cardId', true);
+        const cards = await Card.qm.getByIds(cardIds);
+        const cardById = _.keyBy(cards, 'id');
+
+        const boardIdByTaskId = tasks.reduce(
+          (result, task) => ({
+            ...result,
+            [task.id]: cardById[taskListById[task.taskListId].cardId].boardId,
+          }),
+          {},
+        );
+
+        tasks.forEach((task) => {
+          sails.sockets.broadcast(`board:${boardIdByTaskId[task.id]}`, 'taskUpdate', {
+            item: task,
+          });
+        });
+
+        // TODO: send webhooks
+      }
+
       sails.helpers.utils.sendWebhooks.with({
         webhooks,
         event: Webhook.Events.CARD_UPDATE,

server/api/helpers/lists/delete-one.js

@@ -29,7 +29,7 @@ module.exports = {
   async fn(inputs) {
     const trashList = await List.qm.getOneTrashByBoardId(inputs.board.id);
 
-    const cards = await Card.qm.update(
+    const { cards } = await Card.qm.update(
       {
         listId: inputs.record.id,
       },

server/api/helpers/lists/move-cards.js

@@ -55,7 +55,7 @@ module.exports = {
       values.prevListId = null;
     }
 
-    const cards = await Card.qm.update(
+    const { cards } = await Card.qm.update(
       {
         listId: inputs.record.id,
       },

server/api/helpers/lists/sort-one.js

@@ -78,8 +78,8 @@ module.exports = {
     }
 
     cards = await Promise.all(
-      cards.map((card, index) =>
+      cards.map(async (card, index) => {
-        Card.qm.updateOne(
+        const { card: nextCard } = await Card.qm.updateOne(
           {
             id: card.id,
             listId: card.listId,
@@ -87,8 +87,10 @@ module.exports = {
           {
             position: POSITION_GAP * (index + 1),
           },
-        ),
+        );
-      ),
+
+        return nextCard;
+      }),
     );
 
     sails.sockets.broadcast(

server/api/helpers/lists/update-one.js

@@ -33,28 +33,6 @@ module.exports = {
   async fn(inputs) {
     const { values } = inputs;
 
-    if (values.type) {
-      let isClosed;
-      if (values.type === List.Types.CLOSED) {
-        if (inputs.record.type === List.Types.ACTIVE) {
-          isClosed = true;
-        }
-      } else if (inputs.record.type === List.Types.CLOSED) {
-        isClosed = false;
-      }
-
-      if (!_.isUndefined(isClosed)) {
-        await Card.qm.update(
-          {
-            listId: inputs.record.id,
-          },
-          {
-            isClosed,
-          },
-        );
-      }
-    }
-
     if (!_.isUndefined(values.position)) {
       const lists = await sails.helpers.boards.getFiniteListsById(
         inputs.board.id,
@@ -94,7 +72,7 @@ module.exports = {
       }
     }
 
-    const list = await List.qm.updateOne(inputs.record.id, values);
+    const { list, tasks } = await List.qm.updateOne(inputs.record.id, values);
 
     if (list) {
       sails.sockets.broadcast(
@@ -106,6 +84,32 @@ module.exports = {
         inputs.request,
       );
 
+      if (tasks) {
+        const taskListIds = sails.helpers.utils.mapRecords(tasks, 'taskListId', true);
+        const taskLists = await TaskList.qm.getByIds(taskListIds);
+        const taskListById = _.keyBy(taskLists, 'id');
+
+        const cardIds = sails.helpers.utils.mapRecords(taskLists, 'cardId', true);
+        const cards = await Card.qm.getByIds(cardIds);
+        const cardById = _.keyBy(cards, 'id');
+
+        const boardIdByTaskId = tasks.reduce(
+          (result, task) => ({
+            ...result,
+            [task.id]: cardById[taskListById[task.taskListId].cardId].boardId,
+          }),
+          {},
+        );
+
+        tasks.forEach((task) => {
+          sails.sockets.broadcast(`board:${boardIdByTaskId[task.id]}`, 'taskUpdate', {
+            item: task,
+          });
+        });
+
+        // TODO: send webhooks
+      }
+
       const webhooks = await Webhook.qm.getAll();
 
       sails.helpers.utils.sendWebhooks.with({

server/api/helpers/tasks/create-one.js

@@ -67,6 +67,17 @@ module.exports = {
       // TODO: send webhooks
     }
 
+    if (values.linkedCard) {
+      Object.assign(values, {
+        linkedCardId: values.linkedCard.id,
+        name: values.linkedCard.name,
+      });
+
+      if (values.linkedCard.isClosed) {
+        values.isCompleted = true;
+      }
+    }
+
     const task = await Task.qm.createOne({
       ...values,
       position,

server/api/hooks/query-methods/models/Card.js

@@ -200,9 +200,69 @@ const getOneById = (id, { listId } = {}) => {
   return Card.findOne(criteria);
 };
 
-const update = (criteria, values) => Card.update(criteria).set(values).fetch();
+const update = async (criteria, values) => {
+  if (!_.isUndefined(values.isClosed)) {
+    return sails.getDatastore().transaction(async (db) => {
+      const cards = await Card.update(criteria).set(values).fetch().usingConnection(db);
 
-const updateOne = (criteria, values) => Card.updateOne(criteria).set({ ...values });
+      let tasks = [];
+      if (card) {
+        tasks = await Task.update({
+          linkedCardId: sails.helpers.utils.mapRecords(cards),
+        })
+          .set({
+            isCompleted: card.isClosed,
+          })
+          .fetch()
+          .usingConnection(db);
+      }
+
+      return {
+        cards,
+        tasks,
+      };
+    });
+  }
+
+  const cards = await Card.update(criteria).set(values).fetch();
+
+  return {
+    cards,
+  };
+};
+
+const updateOne = async (criteria, values) => {
+  if (!_.isUndefined(values.isClosed)) {
+    return sails.getDatastore().transaction(async (db) => {
+      const card = await Card.updateOne(criteria)
+        .set({ ...values })
+        .usingConnection(db);
+
+      let tasks = [];
+      if (card) {
+        tasks = await Task.update({
+          linkedCardId: card.id,
+        })
+          .set({
+            isCompleted: card.isClosed,
+          })
+          .fetch()
+          .usingConnection(db);
+      }
+
+      return {
+        card,
+        tasks,
+      };
+    });
+  }
+
+  const card = await Card.updateOne(criteria).set({ ...values });
+
+  return {
+    card,
+  };
+};
 
 // eslint-disable-next-line no-underscore-dangle
 const delete_ = (criteria) => Card.destroy(criteria).fetch();

server/api/hooks/query-methods/models/List.js

@@ -47,7 +47,61 @@ const getOneTrashByBoardId = (boardId) =>
     type: List.Types.TRASH,
   });
 
-const updateOne = (criteria, values) => List.updateOne(criteria).set({ ...values });
+const updateOne = async (criteria, values) => {
+  if (values.type) {
+    return sails.getDatastore().transaction(async (db) => {
+      const list = await List.updateOne(criteria)
+        .set({ ...values })
+        .usingConnection(db);
+
+      let cards = [];
+      let tasks = [];
+
+      if (list) {
+        let isClosed;
+        if (list.type === List.Types.ACTIVE) {
+          isClosed = false;
+        } else if (list.type === List.Types.CLOSED) {
+          isClosed = true;
+        }
+
+        if (!_.isUndefined(isClosed)) {
+          cards = await Card.update({
+            listId: list.id,
+          })
+            .set({
+              isClosed,
+            })
+            .fetch()
+            .usingConnection(db);
+
+          if (cards.length > 0) {
+            tasks = await Task.update({
+              linkedCardId: sails.helpers.utils.mapRecords(cards),
+            })
+              .set({
+                isCompleted: isClosed,
+              })
+              .fetch()
+              .usingConnection(db);
+          }
+        }
+      }
+
+      return {
+        list,
+        cards,
+        tasks,
+      };
+    });
+  }
+
+  const list = await List.updateOne(criteria).set({ ...values });
+
+  return {
+    list,
+  };
+};
 
 // eslint-disable-next-line no-underscore-dangle
 const delete_ = (criteria) => List.destroy(criteria).fetch();

server/api/hooks/query-methods/models/Task.js

@@ -36,6 +36,11 @@ const getByTaskListIds = async (taskListIds, { sort = ['position', 'id'] } = {})
     { sort },
   );
 
+const getByLinkedCardId = (linkedCardId) =>
+  defaultFind({
+    linkedCardId,
+  });
+
 const getOneById = (id, { taskListId } = {}) => {
   const criteria = {
     id,
@@ -63,6 +68,7 @@ module.exports = {
   getByIds,
   getByTaskListId,
   getByTaskListIds,
+  getByLinkedCardId,
   getOneById,
   update,
   updateOne,

server/api/models/Task.js

@@ -43,6 +43,10 @@ module.exports = {
       required: true,
       columnName: 'task_list_id',
     },
+    linkedCardId: {
+      model: 'Card',
+      columnName: 'linked_card_id',
+    },
     assigneeUserId: {
       model: 'User',
       columnName: 'assignee_user_id',

server/db/migrations/20250709160208_add_ability_to_link_tasks_to_cards.js

@@ -0,0 +1,20 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+exports.up = async (knex) =>
+  knex.schema.alterTable('task', (table) => {
+    /* Columns */
+
+    table.bigInteger('linked_card_id');
+
+    /* Indexes */
+
+    table.index('linked_card_id');
+  });
+
+exports.down = (knex) =>
+  knex.schema.table('task', (table) => {
+    table.dropColumn('linked_card_id');
+  });