Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-08-09 23:45:31 +02:00
Code Issues Releases Activity

#27 add trello import to UI

Browse source
This commit is contained in:
Christoph Enne 2022-12-08 17:35:13 +01:00
parent 0a63ada320
commit 2880ffccaa
9 changed files with 206 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

11
client/src/api/boards.js
View file

@ -1,4 +1,5 @@
import socket from './socket'; import socket from './socket';
import http from './http';
import { transformCard } from './cards'; import { transformCard } from './cards';
import { transformAttachment } from './attachments'; import { transformAttachment } from './attachments';
@ -7,6 +8,15 @@ import { transformAttachment } from './attachments';
const createBoard = (projectId, data, headers) => const createBoard = (projectId, data, headers) =>
socket.post(`/projects/${projectId}/boards`, data, headers); socket.post(`/projects/${projectId}/boards`, data, headers);
const importBoard = (projectId, data, headers) =>
http.post(
`/projects/${projectId}/imports/boards?name=${data.name}&position=${data.position}`,
{
file: data.file,
},
headers,
);
const getBoard = (id, headers) => const getBoard = (id, headers) =>
socket.get(`/boards/${id}`, undefined, headers).then((body) => ({ socket.get(`/boards/${id}`, undefined, headers).then((body) => ({
...body, ...body,
@ -23,6 +33,7 @@ const deleteBoard = (id, headers) => socket.delete(`/boards/${id}`, undefined, h
export default { export default {
createBoard, createBoard,
importBoard,
getBoard, getBoard,
updateBoard, updateBoard,
deleteBoard, deleteBoard,

48
client/src/components/Boards/AddPopup.jsx
View file

@ -1,21 +1,24 @@
import React, { useCallback, useEffect, useRef } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Button, Form } from 'semantic-ui-react'; import { Button, Form, Divider, Menu } from 'semantic-ui-react';
import { withPopup } from '../../lib/popup'; import { withPopup } from '../../lib/popup';
import { Input, Popup } from '../../lib/custom-ui'; import { Input, Popup, FilePicker } from '../../lib/custom-ui';
import { useForm } from '../../hooks'; import { useForm } from '../../hooks';
import styles from './AddPopup.module.scss'; import styles from './AddPopup.module.scss';
const AddStep = React.memo(({ onCreate, onClose }) => { const AddStep = React.memo(({ onCreate, onImport, onClose }) => {
const [t] = useTranslation(); const [t] = useTranslation();
const [data, handleFieldChange] = useForm({ const [data, handleFieldChange] = useForm({
name: '', name: '',
file: null,
}); });
const [selectedFile, setSelectedFile] = useState(null);
const nameField = useRef(null); const nameField = useRef(null);
const handleSubmit = useCallback(() => { const handleSubmit = useCallback(() => {
@ -30,9 +33,25 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
return; return;
} }
onCreate(cleanData); if (data.file) {
onImport(cleanData);
} else {
onCreate(cleanData);
}
onClose(); onClose();
}, [onCreate, onClose, data]); }, [onClose, data, onImport, onCreate]);
const handleFileSelect = useCallback(
(file) => {
handleFieldChange(null, {
name: 'file',
value: file,
});
setSelectedFile(file);
},
[handleFieldChange, setSelectedFile],
);
useEffect(() => { useEffect(() => {
nameField.current.focus(); nameField.current.focus();
@ -55,7 +74,21 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
className={styles.field} className={styles.field}
onChange={handleFieldChange} onChange={handleFieldChange}
/> />
<Button positive content={t('action.createBoard')} /> <Divider />
<FilePicker onSelect={handleFileSelect} accept=".json">
<Menu.Item className={styles.menuItem}>
{selectedFile
? selectedFile.name
: t('common.uploadTrelloFile', {
context: 'title',
})}
</Menu.Item>
</FilePicker>
<Divider />
<Button
positive
content={selectedFile ? t('action.importTrelloBoard') : t('action.createBoard')}
/>
</Form> </Form>
</Popup.Content> </Popup.Content>
</> </>
@ -64,6 +97,7 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
AddStep.propTypes = { AddStep.propTypes = {
onCreate: PropTypes.func.isRequired, onCreate: PropTypes.func.isRequired,
onImport: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
}; };

193
client/src/components/Boards/Boards.jsx
View file

@ -14,118 +14,121 @@ import EditPopup from './EditPopup';
import styles from './Boards.module.scss'; import styles from './Boards.module.scss';
const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMove, onDelete }) => { const Boards = React.memo(
const tabsWrapper = useRef(null); ({ items, currentId, canEdit, onCreate, onImport, onUpdate, onMove, onDelete }) => {
const tabsWrapper = useRef(null);
const handleWheel = useCallback(({ deltaY }) => { const handleWheel = useCallback(({ deltaY }) => {
tabsWrapper.current.scrollBy({ tabsWrapper.current.scrollBy({
left: deltaY, left: deltaY,
}); });
}, []); }, []);
const handleDragStart = useCallback(() => { const handleDragStart = useCallback(() => {
closePopup(); closePopup();
}, []); }, []);
const handleDragEnd = useCallback( const handleDragEnd = useCallback(
({ draggableId, source, destination }) => { ({ draggableId, source, destination }) => {
if (!destination || source.index === destination.index) { if (!destination || source.index === destination.index) {
return; return;
} }
onMove(draggableId, destination.index); onMove(draggableId, destination.index);
}, },
[onMove], [onMove],
); );
const handleUpdate = useCallback( const handleUpdate = useCallback(
(id, data) => { (id, data) => {
onUpdate(id, data); onUpdate(id, data);
}, },
[onUpdate], [onUpdate],
); );
const handleDelete = useCallback( const handleDelete = useCallback(
(id) => { (id) => {
onDelete(id); onDelete(id);
}, },
[onDelete], [onDelete],
); );
const itemsNode = items.map((item, index) => ( const itemsNode = items.map((item, index) => (
<Draggable <Draggable
key={item.id} key={item.id}
draggableId={item.id} draggableId={item.id}
index={index} index={index}
isDragDisabled={!item.isPersisted || !canEdit} isDragDisabled={!item.isPersisted || !canEdit}
> >
{({ innerRef, draggableProps, dragHandleProps }) => ( {({ innerRef, draggableProps, dragHandleProps }) => (
// eslint-disable-next-line react/jsx-props-no-spreading // eslint-disable-next-line react/jsx-props-no-spreading
<div {...draggableProps} ref={innerRef} className={styles.tabWrapper}> <div {...draggableProps} ref={innerRef} className={styles.tabWrapper}>
<div className={classNames(styles.tab, item.id === currentId && styles.tabActive)}> <div className={classNames(styles.tab, item.id === currentId && styles.tabActive)}>
{item.isPersisted ? ( {item.isPersisted ? (
<> <>
<Link <Link
{...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
to={Paths.BOARDS.replace(':id', item.id)} to={Paths.BOARDS.replace(':id', item.id)}
title={item.name} title={item.name}
className={styles.link} className={styles.link}
>
{item.name}
</Link>
{canEdit && (
<EditPopup
defaultData={pick(item, 'name')}
onUpdate={(data) => handleUpdate(item.id, data)}
onDelete={() => handleDelete(item.id)}
> >
<Button className={classNames(styles.editButton, styles.target)}> {item.name}
<Icon fitted name="pencil" size="small" /> </Link>
</Button> {canEdit && (
</EditPopup> <EditPopup
)} defaultData={pick(item, 'name')}
</> onUpdate={(data) => handleUpdate(item.id, data)}
) : ( onDelete={() => handleDelete(item.id)}
// eslint-disable-next-line react/jsx-props-no-spreading >
<span {...dragHandleProps} className={styles.link}> <Button className={classNames(styles.editButton, styles.target)}>
{item.name} <Icon fitted name="pencil" size="small" />
</span> </Button>
)} </EditPopup>
)}
</>
) : (
// eslint-disable-next-line react/jsx-props-no-spreading
<span {...dragHandleProps} className={styles.link}>
{item.name}
</span>
)}
</div>
</div> </div>
</div> )}
)} </Draggable>
</Draggable> ));
));
return ( return (
<div className={styles.wrapper} onWheel={handleWheel}> <div className={styles.wrapper} onWheel={handleWheel}>
<div ref={tabsWrapper} className={styles.tabsWrapper}> <div ref={tabsWrapper} className={styles.tabsWrapper}>
<DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}> <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal"> <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
{({ innerRef, droppableProps, placeholder }) => ( {({ innerRef, droppableProps, placeholder }) => (
// eslint-disable-next-line react/jsx-props-no-spreading // eslint-disable-next-line react/jsx-props-no-spreading
<div {...droppableProps} ref={innerRef} className={styles.tabs}> <div {...droppableProps} ref={innerRef} className={styles.tabs}>
{itemsNode} {itemsNode}
{placeholder} {placeholder}
{canEdit && ( {canEdit && (
<AddPopup onCreate={onCreate}> <AddPopup onCreate={onCreate} onImport={onImport}>
<Button icon="plus" className={styles.addButton} /> <Button icon="plus" className={styles.addButton} />
</AddPopup> </AddPopup>
)} )}
</div> </div>
)} )}
</Droppable> </Droppable>
</DragDropContext> </DragDropContext>
</div>
</div> </div>
</div> );
); },
}); );
Boards.propTypes = { Boards.propTypes = {
items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
currentId: PropTypes.string, currentId: PropTypes.string,
canEdit: PropTypes.bool.isRequired, canEdit: PropTypes.bool.isRequired,
onCreate: PropTypes.func.isRequired, onCreate: PropTypes.func.isRequired,
onImport: PropTypes.func.isRequired,
onUpdate: PropTypes.func.isRequired, onUpdate: PropTypes.func.isRequired,
onMove: PropTypes.func.isRequired, onMove: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired, onDelete: PropTypes.func.isRequired,

1
client/src/constants/EntryActionTypes.js
View file

@ -76,6 +76,7 @@ export default {
/* Boards */ /* Boards */
BOARD_IN_CURRENT_PROJECT_CREATE: `${PREFIX}/BOARD_IN_CURRENT_PROJECT_CREATE`, BOARD_IN_CURRENT_PROJECT_CREATE: `${PREFIX}/BOARD_IN_CURRENT_PROJECT_CREATE`,
TRELLO_BOARD_IN_CURRENT_PROJECT_IMPORT: `${PREFIX}/TRELLO_BOARD_IN_CURRENT_PROJECT_IMPORT`,
BOARD_CREATE_HANDLE: `${PREFIX}/BOARD_CREATE_HANDLE`, BOARD_CREATE_HANDLE: `${PREFIX}/BOARD_CREATE_HANDLE`,
BOARD_FETCH: `${PREFIX}/BOARD_FETCH`, BOARD_FETCH: `${PREFIX}/BOARD_FETCH`,
BOARD_UPDATE: `${PREFIX}/BOARD_UPDATE`, BOARD_UPDATE: `${PREFIX}/BOARD_UPDATE`,

1
client/src/containers/BoardsContainer.js
View file

@ -21,6 +21,7 @@ const mapDispatchToProps = (dispatch) =>
bindActionCreators( bindActionCreators(
{ {
onCreate: entryActions.createBoardInCurrentProject, onCreate: entryActions.createBoardInCurrentProject,
onImport: entryActions.importTrelloBoardInCurrentProject,
onUpdate: entryActions.updateBoard, onUpdate: entryActions.updateBoard,
onMove: entryActions.moveBoard, onMove: entryActions.moveBoard,
onDelete: entryActions.deleteBoard, onDelete: entryActions.deleteBoard,

8
client/src/entry-actions/boards.js
View file

@ -7,6 +7,13 @@ const createBoardInCurrentProject = (data) => ({
}, },
}); });
const importTrelloBoardInCurrentProject = (data) => ({
type: EntryActionTypes.TRELLO_BOARD_IN_CURRENT_PROJECT_IMPORT,
payload: {
data,
},
});
const handleBoardCreate = (board) => ({ const handleBoardCreate = (board) => ({
type: EntryActionTypes.BOARD_CREATE_HANDLE, type: EntryActionTypes.BOARD_CREATE_HANDLE,
payload: { payload: {
@ -60,6 +67,7 @@ const handleBoardDelete = (board) => ({
export default { export default {
createBoardInCurrentProject, createBoardInCurrentProject,
importTrelloBoardInCurrentProject,
handleBoardCreate, handleBoardCreate,
fetchBoard, fetchBoard,
updateBoard, updateBoard,

2
client/src/locales/en/core.js
View file

@ -143,6 +143,7 @@ export default {
time: 'Time', time: 'Time',
timer: 'Timer', timer: 'Timer',
title: 'Title', title: 'Title',
uploadTrelloFile_title: 'Import Trello JSON File',
userActions_title: 'User Actions', userActions_title: 'User Actions',
userAddedThisCardToList: '<0>{{user}}</0><1> added this card to {{list}}</1>', userAddedThisCardToList: '<0>{{user}}</0><1> added this card to {{list}}</1>',
userLeftNewCommentToCard: '{{user}} left a new comment «{{comment}}» to <2>{{card}}</2>', userLeftNewCommentToCard: '{{user}} left a new comment «{{comment}}» to <2>{{card}}</2>',
@ -201,6 +202,7 @@ export default {
editTitle_title: 'Edit Title', editTitle_title: 'Edit Title',
editUsername_title: 'Edit Username', editUsername_title: 'Edit Username',
hideDetails: 'Hide details', hideDetails: 'Hide details',
importTrelloBoard: 'Import Trello Board',
leaveBoard: 'Leave board', leaveBoard: 'Leave board',
leaveProject: 'Leave project', leaveProject: 'Leave project',
logOut_title: 'Log Out', logOut_title: 'Log Out',

41
client/src/sagas/core/services/boards.js
View file

@ -46,6 +46,46 @@ export function* createBoardInCurrentProject(data) {
yield call(createBoard, projectId, data); yield call(createBoard, projectId, data);
} }
export function* importBoard(projectId, data) {
const nextData = {
...data,
position: yield select(selectors.selectNextBoardPosition, projectId),
};
const localId = yield call(createLocalId);
yield put(
actions.createBoard({
...nextData,
projectId,
id: localId,
}),
);
let board;
let boardMemberships;
try {
({
item: board,
included: { boardMemberships },
} = yield call(request, api.importBoard, projectId, nextData));
} catch (error) {
yield put(actions.createBoard.failure(localId, error));
return;
}
yield put(actions.createBoard.success(localId, board, boardMemberships));
yield put(actions.fetchBoard(board.id));
yield call(goToBoard, board.id);
}
export function* importTrelloBoardInCurrentProject(data) {
const { projectId } = yield select(selectors.selectPath);
yield call(importBoard, projectId, data);
}
export function* handleBoardCreate(board) { export function* handleBoardCreate(board) {
yield put(actions.handleBoardCreate(board)); yield put(actions.handleBoardCreate(board));
} }
@ -163,6 +203,7 @@ export function* handleBoardDelete(board) {
export default { export default {
createBoard, createBoard,
createBoardInCurrentProject, createBoardInCurrentProject,
importTrelloBoardInCurrentProject,
handleBoardCreate, handleBoardCreate,
fetchBoard, fetchBoard,
updateBoard, updateBoard,

3
client/src/sagas/core/watchers/boards.js
View file

@ -8,6 +8,9 @@ export default function* boardsWatchers() {
takeEvery(EntryActionTypes.BOARD_IN_CURRENT_PROJECT_CREATE, ({ payload: { data } }) => takeEvery(EntryActionTypes.BOARD_IN_CURRENT_PROJECT_CREATE, ({ payload: { data } }) =>
services.createBoardInCurrentProject(data), services.createBoardInCurrentProject(data),
), ),
takeEvery(EntryActionTypes.TRELLO_BOARD_IN_CURRENT_PROJECT_IMPORT, ({ payload: { data } }) =>
services.importTrelloBoardInCurrentProject(data),
),
takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board } }) => takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board } }) =>
services.handleBoardCreate(board), services.handleBoardCreate(board),
), ),