mirror of
https://github.com/plankanban/planka.git
synced 2025-07-18 20:59:44 +02:00
feat: fully rework 'move list to board' feature to match review requirements
- All async logic for moving lists between boards is now handled via Redux sagas, not in React components. - Removed direct API calls and sessionStorage usage from UI. - Added a unified action creator for moving lists between boards. - Saga watcher now uses the correct action type constant. - On the backend, the move-to-board helper now: - Detaches card members who are not present on the target board. - Converts board-wide custom fields to per-card fields when moving lists. - Added selector memoization in BoardSelectStep to prevent unnecessary rerenders. - All business logic is now outside of UI components. - The feature now fully handles: - Users (members/assignees) who do not exist on the target board. - Board-wide custom fields, which are now either copied or converted to per-card fields. - All review comments are addressed: no business logic in components, no sessionStorage, all edge cases handled, only sagas and request used for async actions.
This commit is contained in:
parent
9c08ce51f1
commit
869d9c1d11
7 changed files with 99 additions and 22 deletions
|
@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Menu } from 'semantic-ui-react';
|
import { Menu } from 'semantic-ui-react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { Popup } from '../../../lib/custom-ui';
|
import { Popup } from '../../../lib/custom-ui';
|
||||||
|
|
||||||
import selectors from '../../../selectors';
|
import selectors from '../../../selectors';
|
||||||
|
@ -21,7 +20,6 @@ import SelectListTypeStep from '../SelectListTypeStep';
|
||||||
import ConfirmationStep from '../../common/ConfirmationStep';
|
import ConfirmationStep from '../../common/ConfirmationStep';
|
||||||
import ArchiveCardsStep from '../../cards/ArchiveCardsStep';
|
import ArchiveCardsStep from '../../cards/ArchiveCardsStep';
|
||||||
import BoardSelectStep from './BoardSelectStep';
|
import BoardSelectStep from './BoardSelectStep';
|
||||||
import api from '../../../api/lists';
|
|
||||||
|
|
||||||
import styles from './ActionsStep.module.scss';
|
import styles from './ActionsStep.module.scss';
|
||||||
|
|
||||||
|
@ -42,7 +40,6 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
const [step, openStep, handleBack] = useSteps();
|
const [step, openStep, handleBack] = useSteps();
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const handleTypeSelect = useCallback(
|
const handleTypeSelect = useCallback(
|
||||||
(type) => {
|
(type) => {
|
||||||
|
@ -90,22 +87,10 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
|
||||||
}, [openStep]);
|
}, [openStep]);
|
||||||
|
|
||||||
const handleMoveToBoard = useCallback(
|
const handleMoveToBoard = useCallback(
|
||||||
async (targetBoardId) => {
|
(targetBoardId) => {
|
||||||
try {
|
dispatch(entryActions.moveListToBoardRequest(listId, targetBoardId));
|
||||||
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],
|
[listId, dispatch],
|
||||||
);
|
);
|
||||||
|
|
||||||
if (step) {
|
if (step) {
|
||||||
|
|
|
@ -1,16 +1,25 @@
|
||||||
import React from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
import PopupHeader from '../../../lib/custom-ui/components/Popup/PopupHeader';
|
import PopupHeader from '../../../lib/custom-ui/components/Popup/PopupHeader';
|
||||||
import styles from './ActionsStep.module.scss';
|
import styles from './ActionsStep.module.scss';
|
||||||
import selectors from '../../../selectors';
|
import selectors from '../../../selectors';
|
||||||
|
|
||||||
|
const makeSelectBoardsByIds = () =>
|
||||||
|
createSelector(
|
||||||
|
(state, boardIds) => boardIds,
|
||||||
|
(state) => state,
|
||||||
|
(boardIds, state) => boardIds.map((id) => selectors.selectBoardById(state, id)),
|
||||||
|
);
|
||||||
|
|
||||||
function BoardSelectStep({ currentBoardId, onSelect, onBack, onClose }) {
|
function BoardSelectStep({ currentBoardId, onSelect, onBack, onClose }) {
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
const projectId = useSelector((state) => selectors.selectPath(state).projectId);
|
const projectId = useSelector((state) => selectors.selectPath(state).projectId);
|
||||||
const boardIds = useSelector((state) => selectors.selectBoardIdsByProjectId(state, projectId));
|
const boardIds = useSelector((state) => selectors.selectBoardIdsByProjectId(state, projectId));
|
||||||
const boards = useSelector((state) => boardIds.map((id) => selectors.selectBoardById(state, id)));
|
const selectBoardsByIds = useMemo(makeSelectBoardsByIds, []);
|
||||||
|
const boards = useSelector((state) => selectBoardsByIds(state, boardIds));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.boardSelectStep}>
|
<div className={styles.boardSelectStep}>
|
||||||
|
|
|
@ -276,4 +276,8 @@ export default {
|
||||||
NOTIFICATION_SERVICE_TEST: `${PREFIX}/NOTIFICATION_SERVICE_TEST`,
|
NOTIFICATION_SERVICE_TEST: `${PREFIX}/NOTIFICATION_SERVICE_TEST`,
|
||||||
NOTIFICATION_SERVICE_DELETE: `${PREFIX}/NOTIFICATION_SERVICE_DELETE`,
|
NOTIFICATION_SERVICE_DELETE: `${PREFIX}/NOTIFICATION_SERVICE_DELETE`,
|
||||||
NOTIFICATION_SERVICE_DELETE_HANDLE: `${PREFIX}/NOTIFICATION_SERVICE_DELETE_HANDLE`,
|
NOTIFICATION_SERVICE_DELETE_HANDLE: `${PREFIX}/NOTIFICATION_SERVICE_DELETE_HANDLE`,
|
||||||
|
|
||||||
|
/* Move List to Board Request */
|
||||||
|
|
||||||
|
MOVE_LIST_TO_BOARD_REQUEST: `${PREFIX}/MOVE_LIST_TO_BOARD_REQUEST`,
|
||||||
};
|
};
|
||||||
|
|
|
@ -86,6 +86,14 @@ const handleListDelete = (list, cards) => ({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const moveListToBoardRequest = (listId, targetBoardId) => ({
|
||||||
|
type: EntryActionTypes.MOVE_LIST_TO_BOARD_REQUEST,
|
||||||
|
payload: {
|
||||||
|
listId,
|
||||||
|
targetBoardId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
createListInCurrentBoard,
|
createListInCurrentBoard,
|
||||||
handleListCreate,
|
handleListCreate,
|
||||||
|
@ -98,4 +106,5 @@ export default {
|
||||||
handleListClear,
|
handleListClear,
|
||||||
deleteList,
|
deleteList,
|
||||||
handleListDelete,
|
handleListDelete,
|
||||||
|
moveListToBoardRequest,
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,13 +5,13 @@
|
||||||
|
|
||||||
import { call, put, select } from 'redux-saga/effects';
|
import { call, put, select } from 'redux-saga/effects';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
import request from '../request';
|
import request from '../request';
|
||||||
import selectors from '../../../selectors';
|
import selectors from '../../../selectors';
|
||||||
import actions from '../../../actions';
|
import actions from '../../../actions';
|
||||||
import api from '../../../api';
|
import api from '../../../api';
|
||||||
import { createLocalId } from '../../../utils/local-id';
|
import { createLocalId } from '../../../utils/local-id';
|
||||||
import ToastTypes from '../../../constants/ToastTypes';
|
import ToastTypes from '../../../constants/ToastTypes';
|
||||||
|
import modalActions from '../../../actions/modals';
|
||||||
|
|
||||||
export function* createList(boardId, data) {
|
export function* createList(boardId, data) {
|
||||||
const localId = yield call(createLocalId);
|
const localId = yield call(createLocalId);
|
||||||
|
@ -183,6 +183,23 @@ export function* handleListDelete(list, cards) {
|
||||||
yield put(actions.handleListDelete(list, cards));
|
yield put(actions.handleListDelete(list, cards));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function* moveListToBoardSaga(action) {
|
||||||
|
const { listId, targetBoardId } = action.payload;
|
||||||
|
try {
|
||||||
|
const { item: updatedList, included } = yield call(request, api.moveToBoard, listId, {
|
||||||
|
targetBoardId,
|
||||||
|
});
|
||||||
|
yield put(actions.handleListUpdate(updatedList));
|
||||||
|
if (included && included.cards) {
|
||||||
|
yield put(actions.handleCardsUpdate(included.cards, []));
|
||||||
|
}
|
||||||
|
yield put(modalActions.closeModal());
|
||||||
|
} catch (err) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
createList,
|
createList,
|
||||||
createListInCurrentBoard,
|
createListInCurrentBoard,
|
||||||
|
@ -196,4 +213,5 @@ export default {
|
||||||
handleListClear,
|
handleListClear,
|
||||||
deleteList,
|
deleteList,
|
||||||
handleListDelete,
|
handleListDelete,
|
||||||
|
moveListToBoardSaga,
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
|
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { all, takeEvery } from 'redux-saga/effects';
|
import { all, takeEvery, takeLatest } from 'redux-saga/effects';
|
||||||
|
|
||||||
import services from '../services';
|
import services from '../services';
|
||||||
import EntryActionTypes from '../../../constants/EntryActionTypes';
|
import EntryActionTypes from '../../../constants/EntryActionTypes';
|
||||||
|
@ -41,5 +41,6 @@ export default function* listsWatchers() {
|
||||||
takeEvery(EntryActionTypes.LIST_DELETE_HANDLE, ({ payload: { list, cards } }) =>
|
takeEvery(EntryActionTypes.LIST_DELETE_HANDLE, ({ payload: { list, cards } }) =>
|
||||||
services.handleListDelete(list, cards),
|
services.handleListDelete(list, cards),
|
||||||
),
|
),
|
||||||
|
takeLatest(EntryActionTypes.MOVE_LIST_TO_BOARD_REQUEST, services.moveListToBoardSaga),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -58,6 +58,57 @@ module.exports = {
|
||||||
});
|
});
|
||||||
await Promise.all(migrateLabelsPromises);
|
await Promise.all(migrateLabelsPromises);
|
||||||
|
|
||||||
|
await Promise.all(
|
||||||
|
updatedCards.map(async (card) => {
|
||||||
|
const cardMemberships = await CardMembership.find({ cardId: card.id });
|
||||||
|
await Promise.all(
|
||||||
|
cardMemberships.map(async (membership) => {
|
||||||
|
const userMembership = await BoardMembership.findOne({
|
||||||
|
boardId: inputs.targetBoard.id,
|
||||||
|
userId: membership.userId,
|
||||||
|
});
|
||||||
|
if (!userMembership) {
|
||||||
|
await CardMembership.destroy({ id: membership.id });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
await Promise.all(
|
||||||
|
updatedCards.map(async (card) => {
|
||||||
|
const customFieldValues = await CustomFieldValue.find({ cardId: card.id });
|
||||||
|
await Promise.all(
|
||||||
|
customFieldValues.map(async (value) => {
|
||||||
|
const group = await CustomFieldGroup.findOne({ id: value.customFieldGroupId });
|
||||||
|
if (group && group.boardId && group.boardId !== inputs.targetBoard.id) {
|
||||||
|
const newGroup = await CustomFieldGroup.create({
|
||||||
|
name: group.name,
|
||||||
|
position: group.position,
|
||||||
|
cardId: card.id,
|
||||||
|
baseCustomFieldGroupId: group.baseCustomFieldGroupId,
|
||||||
|
}).fetch();
|
||||||
|
const field = await CustomField.findOne({ id: value.customFieldId });
|
||||||
|
const newField = await CustomField.create({
|
||||||
|
name: field.name,
|
||||||
|
position: field.position,
|
||||||
|
showOnFrontOfCard: field.showOnFrontOfCard,
|
||||||
|
customFieldGroupId: newGroup.id,
|
||||||
|
baseCustomFieldGroupId: field.baseCustomFieldGroupId,
|
||||||
|
}).fetch();
|
||||||
|
await CustomFieldValue.updateOne(
|
||||||
|
{ id: value.id },
|
||||||
|
{
|
||||||
|
customFieldGroupId: newGroup.id,
|
||||||
|
customFieldId: newField.id,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
updatedList,
|
updatedList,
|
||||||
updatedCards,
|
updatedCards,
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue