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

feat: add global 'hide checked tasks' toggle for all checklists in card modal. Show toggle only if at least one checklist exists. Add translations for all locales.

Browse source
This commit is contained in:
symonbaikov 2025-06-12 20:59:48 +03:00
parent 3126a40bba
commit 386d3d4bdd
34 changed files with 145 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

53
client/src/components/cards/CardModal/TaskLists/TaskLists.jsx
View file

@ -3,9 +3,11 @@
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
*/
import React, { useCallback } from 'react';
import React, { useCallback, useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { Checkbox } from 'semantic-ui-react';
import { useTranslation } from 'react-i18next';
import { closePopup } from '../../../../lib/popup';
import selectors from '../../../../selectors';
@ -16,8 +18,19 @@ import Item from './Item';
import globalStyles from '../../../../styles.module.scss';
const HIDE_CHECKED_KEY = 'planka_hide_checked_tasks';
const TaskLists = React.memo(() => {
const [t] = useTranslation();
const taskListIds = useSelector(selectors.selectTaskListIdsForCurrentCard);
const [hideChecked, setHideChecked] = useState(() => {
const stored = localStorage.getItem(HIDE_CHECKED_KEY);
return stored === 'true';
});
useEffect(() => {
localStorage.setItem(HIDE_CHECKED_KEY, hideChecked);
}, [hideChecked]);
const dispatch = useDispatch();
@ -58,19 +71,31 @@ const TaskLists = React.memo(() => {
);
return (
<DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<Droppable droppableId="card" type={DroppableTypes.TASK_LIST} direction="vertical">
{({ innerRef, droppableProps, placeholder }) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<div {...droppableProps} ref={innerRef}>
{taskListIds.map((taskListId, index) => (
<Item key={taskListId} id={taskListId} index={index} />
))}
{placeholder}
</div>
)}
</Droppable>
</DragDropContext>
<>
{taskListIds.length > 0 && (
<div style={{ margin: '8px 0' }}>
<Checkbox
label={t('common.taskList_hideChecked')}
checked={hideChecked}
onChange={() => setHideChecked((prev) => !prev)}
toggle
/>
</div>
)}
<DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<Droppable droppableId="card" type={DroppableTypes.TASK_LIST} direction="vertical">
{({ innerRef, droppableProps, placeholder }) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<div {...droppableProps} ref={innerRef}>
{taskListIds.map((taskListId, index) => (
<Item key={taskListId} id={taskListId} index={index} hideChecked={hideChecked} />
))}
{placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</>
);
});