1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-19 05:09:43 +02:00

feat: Implemented moving a list between boards with instant UI update. Fixed authorization for socket requests (automatic token injection). After moving a list, user is automatically switched to the target board. Added translations for the new move list action to all locale files.

This commit is contained in:
symonbaikov 2025-06-11 14:17:12 +03:00
parent 18c7ff093b
commit 9c08ce51f1
39 changed files with 331 additions and 171 deletions

View file

@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { Menu } from 'semantic-ui-react';
import { useNavigate } from 'react-router-dom';
import { Popup } from '../../../lib/custom-ui';
import selectors from '../../../selectors';
@ -19,6 +20,8 @@ import SortStep from './SortStep';
import SelectListTypeStep from '../SelectListTypeStep';
import ConfirmationStep from '../../common/ConfirmationStep';
import ArchiveCardsStep from '../../cards/ArchiveCardsStep';
import BoardSelectStep from './BoardSelectStep';
import api from '../../../api/lists';
import styles from './ActionsStep.module.scss';
@ -28,6 +31,7 @@ const StepTypes = {
SORT: 'SORT',
ARCHIVE_CARDS: 'ARCHIVE_CARDS',
DELETE: 'DELETE',
MOVE_TO_BOARD: 'MOVE_TO_BOARD',
};
const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
@ -38,6 +42,7 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
const dispatch = useDispatch();
const [t] = useTranslation();
const [step, openStep, handleBack] = useSteps();
const navigate = useNavigate();
const handleTypeSelect = useCallback(
(type) => {
@ -84,6 +89,25 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
openStep(StepTypes.DELETE);
}, [openStep]);
const handleMoveToBoard = useCallback(
async (targetBoardId) => {
try {
const { item: updatedList, included } = await api.moveToBoard(listId, { targetBoardId });
dispatch(entryActions.handleListUpdate(updatedList));
if (included && included.cards) {
dispatch(entryActions.handleCardsUpdate(included.cards, []));
}
sessionStorage.setItem('movedListId', listId);
onClose();
navigate(`/boards/${targetBoardId}`);
} catch (err) {
// eslint-disable-next-line no-console
console.error(err);
}
},
[listId, onClose, dispatch, navigate],
);
if (step) {
switch (step.type) {
case StepTypes.EDIT_TYPE:
@ -114,6 +138,14 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
onBack={handleBack}
/>
);
case StepTypes.MOVE_TO_BOARD:
return (
<BoardSelectStep
currentBoardId={list.boardId}
onSelect={handleMoveToBoard}
onBack={handleBack}
/>
);
default:
}
}
@ -164,6 +196,9 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
context: 'title',
})}
</Menu.Item>
<Menu.Item className={styles.menuItem} onClick={() => openStep(StepTypes.MOVE_TO_BOARD)}>
{t('action.moveListToBoard', { context: 'title' })}
</Menu.Item>
</Menu>
</Popup.Content>
</>