feat: Version 2

Closes #627, closes #1047

client/src/components/task-lists/TaskList/TaskList.jsx

@@ -0,0 +1,122 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useContext, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Droppable } from 'react-beautiful-dnd';
+import { Progress } from 'semantic-ui-react';
+import { useDidUpdate } from '../../../lib/hooks';
+
+import selectors from '../../../selectors';
+import { isListArchiveOrTrash } from '../../../utils/record-helpers';
+import DroppableTypes from '../../../constants/DroppableTypes';
+import { BoardMembershipRoles } from '../../../constants/Enums';
+import { ClosableContext } from '../../../contexts';
+import Task from './Task';
+import AddTask from './AddTask';
+
+import styles from './TaskList.module.scss';
+
+const TaskList = React.memo(({ id }) => {
+  const selectTaskListById = useMemo(() => selectors.makeSelectTaskListById(), []);
+  const selectListById = useMemo(() => selectors.makeSelectListById(), []);
+  const selectTasksByTaskListId = useMemo(() => selectors.makeSelectTasksByTaskListId(), []);
+
+  const taskList = useSelector((state) => selectTaskListById(state, id));
+  const tasks = useSelector((state) => selectTasksByTaskListId(state, id));
+
+  const canEdit = useSelector((state) => {
+    const { listId } = selectors.selectCurrentCard(state);
+    const list = selectListById(state, listId);
+
+    if (isListArchiveOrTrash(list)) {
+      return false;
+    }
+
+    const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+    return !!boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR;
+  });
+
+  const [t] = useTranslation();
+  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);
+  }, []);
+
+  const handleAddClose = useCallback(() => {
+    setIsAddOpened(false);
+  }, []);
+
+  useDidUpdate(() => {
+    setIsClosableActive(isAddOpened);
+  }, [isAddOpened]);
+
+  return (
+    <>
+      {tasks.length > 0 && (
+        <>
+          <span className={styles.progressWrapper}>
+            <Progress
+              autoSuccess
+              value={completedTasksTotal}
+              total={tasks.length}
+              color="blue"
+              size="tiny"
+              className={styles.progress}
+            />
+          </span>
+          <span className={styles.count}>
+            {completedTasksTotal}/{tasks.length}
+          </span>
+        </>
+      )}
+      <Droppable
+        droppableId={`task-list:${id}`}
+        type={DroppableTypes.TASK}
+        isDropDisabled={!taskList.isPersisted || !canEdit}
+      >
+        {({ innerRef, droppableProps, placeholder }) => (
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          <div {...droppableProps} ref={innerRef} className={styles.tasks}>
+            {tasks.map((task, index) => (
+              <Task key={task.id} id={task.id} index={index} />
+            ))}
+            {placeholder}
+          </div>
+        )}
+      </Droppable>
+      {canEdit && (
+        <AddTask taskListId={id} isOpened={isAddOpened} onClose={handleAddClose}>
+          <button
+            type="button"
+            disabled={!taskList.isPersisted}
+            className={styles.taskButton}
+            onClick={handleAddClick}
+          >
+            <span className={styles.taskButtonText}>
+              {tasks.length > 0 ? t('action.addAnotherTask') : t('action.addTask')}
+            </span>
+          </button>
+        </AddTask>
+      )}
+    </>
+  );
+});
+
+TaskList.propTypes = {
+  id: PropTypes.string.isRequired,
+};
+
+export default TaskList;