1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-18 20:59:44 +02:00

feat: Trello board JSON import (#352)

Closes #27, closes #105
This commit is contained in:
Christoph Enne 2022-12-16 23:48:06 +01:00 committed by GitHub
parent c880a72f02
commit 948485c861
20 changed files with 537 additions and 89 deletions

View file

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

View file

@ -1,70 +0,0 @@
import React, { useCallback, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Button, Form } from 'semantic-ui-react';
import { withPopup } from '../../lib/popup';
import { Input, Popup } from '../../lib/custom-ui';
import { useForm } from '../../hooks';
import styles from './AddPopup.module.scss';
const AddStep = React.memo(({ onCreate, onClose }) => {
const [t] = useTranslation();
const [data, handleFieldChange] = useForm({
name: '',
});
const nameField = useRef(null);
const handleSubmit = useCallback(() => {
const cleanData = {
...data,
type: 'kanban',
name: data.name.trim(),
};
if (!cleanData.name) {
nameField.current.select();
return;
}
onCreate(cleanData);
onClose();
}, [onCreate, onClose, data]);
useEffect(() => {
nameField.current.focus();
}, []);
return (
<>
<Popup.Header>
{t('common.createBoard', {
context: 'title',
})}
</Popup.Header>
<Popup.Content>
<Form onSubmit={handleSubmit}>
<Input
fluid
ref={nameField}
name="name"
value={data.name}
className={styles.field}
onChange={handleFieldChange}
/>
<Button positive content={t('action.createBoard')} />
</Form>
</Popup.Content>
</>
);
});
AddStep.propTypes = {
onCreate: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
};
export default withPopup(AddStep);

View file

@ -1,5 +0,0 @@
:global(#app) {
.field {
margin-bottom: 8px;
}
}

View file

@ -0,0 +1,116 @@
import React, { useCallback, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Button, Form, Icon } from 'semantic-ui-react';
import { useDidUpdate, useToggle } from '../../../lib/hooks';
import { withPopup } from '../../../lib/popup';
import { Input, Popup } from '../../../lib/custom-ui';
import { useForm, useSteps } from '../../../hooks';
import ImportStep from './ImportStep';
import styles from './AddPopup.module.scss';
const StepTypes = {
IMPORT: 'IMPORT',
};
const AddStep = React.memo(({ onCreate, onClose }) => {
const [t] = useTranslation();
const [data, handleFieldChange, setData] = useForm({
name: '',
import: null,
});
const [step, openStep, handleBack] = useSteps();
const [focusNameFieldState, focusNameField] = useToggle();
const nameField = useRef(null);
const handleImportSelect = useCallback(
(nextImport) => {
setData((prevData) => ({
...prevData,
import: nextImport,
}));
},
[setData],
);
const handleImportBack = useCallback(() => {
handleBack();
focusNameField();
}, [handleBack, focusNameField]);
const handleSubmit = useCallback(() => {
const cleanData = {
...data,
type: 'kanban',
name: data.name.trim(),
};
if (!cleanData.name) {
nameField.current.select();
return;
}
onCreate(cleanData);
onClose();
}, [onClose, data, onCreate]);
const handleImportClick = useCallback(() => {
openStep(StepTypes.IMPORT);
}, [openStep]);
useEffect(() => {
nameField.current.focus();
}, []);
useDidUpdate(() => {
nameField.current.focus();
}, [focusNameFieldState]);
if (step && step.type === StepTypes.IMPORT) {
return <ImportStep onSelect={handleImportSelect} onBack={handleImportBack} />;
}
return (
<>
<Popup.Header>
{t('common.createBoard', {
context: 'title',
})}
</Popup.Header>
<Popup.Content>
<Form onSubmit={handleSubmit}>
<Input
fluid
ref={nameField}
name="name"
value={data.name}
className={styles.field}
onChange={handleFieldChange}
/>
<div className={styles.controls}>
<Button positive content={t('action.createBoard')} className={styles.createButton} />
<Button type="button" className={styles.importButton} onClick={handleImportClick}>
<Icon
name={data.import ? data.import.type : 'arrow down'}
className={styles.importButtonIcon}
/>
{data.import ? data.import.file.name : t('action.import')}
</Button>
</div>
</Form>
</Popup.Content>
</>
);
});
AddStep.propTypes = {
onCreate: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
};
export default withPopup(AddStep);

View file

@ -0,0 +1,42 @@
:global(#app) {
.controls {
display: flex;
max-width: 280px;
@media only screen and (max-width: 767px) {
max-width: 226px;
}
}
.createButton {
white-space: nowrap;
}
.field {
margin-bottom: 8px;
}
.importButton {
background: transparent;
box-shadow: none;
color: #6b808c;
font-weight: normal;
margin-left: auto;
margin-right: 0;
overflow: hidden;
text-align: left;
text-decoration: underline;
text-overflow: ellipsis;
transition: none;
white-space: nowrap;
&:hover {
background: rgba(9, 30, 66, 0.08);
color: #092d42;
}
}
.importButtonIcon {
text-decoration: none;
}
}

View file

@ -0,0 +1,51 @@
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Button } from 'semantic-ui-react';
import { FilePicker, Popup } from '../../../lib/custom-ui';
import styles from './ImportStep.module.scss';
const ImportStep = React.memo(({ onSelect, onBack }) => {
const [t] = useTranslation();
const handleFileSelect = useCallback(
(type, file) => {
onSelect({
type,
file,
});
onBack();
},
[onSelect, onBack],
);
return (
<>
<Popup.Header onBack={onBack}>
{t('common.importBoard', {
context: 'title',
})}
</Popup.Header>
<Popup.Content>
<FilePicker onSelect={(file) => handleFileSelect('trello', file)} accept=".json">
<Button
fluid
type="button"
icon="trello"
content={t('common.fromTrello')}
className={styles.button}
/>
</FilePicker>
</Popup.Content>
</>
);
});
ImportStep.propTypes = {
onSelect: PropTypes.func.isRequired,
onBack: PropTypes.func.isRequired,
};
export default ImportStep;

View file

@ -0,0 +1,17 @@
:global(#app) {
.button {
background: transparent;
box-shadow: none;
color: #6b808c;
font-weight: normal;
margin-top: 8px;
padding: 6px 11px;
text-align: left;
transition: none;
&:hover {
background: rgba(9, 30, 66, 0.08);
color: #092d42;
}
}
}

View file

@ -0,0 +1,3 @@
import AddPopup from './AddPopup';
export default AddPopup;

View file

@ -7,10 +7,11 @@ const createBoardInCurrentProject = (data) => ({
},
});
const handleBoardCreate = (board) => ({
const handleBoardCreate = (board, requestId) => ({
type: EntryActionTypes.BOARD_CREATE_HANDLE,
payload: {
board,
requestId,
},
});

View file

@ -92,8 +92,10 @@ export default {
filterByLabels_title: 'Filter By Labels',
filterByMembers_title: 'Filter By Members',
fromComputer_title: 'From Computer',
fromTrello: 'From Trello',
general: 'General',
hours: 'Hours',
importBoard_title: 'Import Board',
invalidCurrentPassword: 'Invalid current password',
labels: 'Labels',
language: 'Language',
@ -201,6 +203,7 @@ export default {
editTitle_title: 'Edit Title',
editUsername_title: 'Edit Username',
hideDetails: 'Hide details',
import: 'Import',
leaveBoard: 'Leave board',
leaveProject: 'Leave project',
logOut_title: 'Log Out',

View file

@ -125,11 +125,7 @@ export default class extends Model {
break;
case ActionTypes.BOARD_CREATE__SUCCESS:
Board.withId(payload.localId).delete();
Board.upsert({
...payload.board,
isFetching: false,
});
Board.upsert(payload.board);
break;
case ActionTypes.BOARD_FETCH__SUCCESS:

View file

@ -7,7 +7,7 @@ import actions from '../../../actions';
import api from '../../../api';
import { createLocalId } from '../../../utils/local-id';
export function* createBoard(projectId, data) {
export function* createBoard(projectId, { import: boardImport, ...data }) {
const nextData = {
...data,
position: yield select(selectors.selectNextBoardPosition, projectId),
@ -30,7 +30,19 @@ export function* createBoard(projectId, data) {
({
item: board,
included: { boardMemberships },
} = yield call(request, api.createBoard, projectId, nextData));
} = yield boardImport
? call(
request,
api.createBoardWithImport,
projectId,
{
...nextData,
importType: boardImport.type,
importFile: boardImport.file,
},
localId,
)
: call(request, api.createBoard, projectId, nextData));
} catch (error) {
yield put(actions.createBoard.failure(localId, error));
return;
@ -46,8 +58,12 @@ export function* createBoardInCurrentProject(data) {
yield call(createBoard, projectId, data);
}
export function* handleBoardCreate(board) {
yield put(actions.handleBoardCreate(board));
export function* handleBoardCreate(board, requestId) {
const isExists = yield select(selectors.selectIsBoardWithIdExists, requestId);
if (!isExists) {
yield put(actions.handleBoardCreate(board));
}
}
export function* fetchBoard(id) {

View file

@ -8,8 +8,8 @@ export default function* boardsWatchers() {
takeEvery(EntryActionTypes.BOARD_IN_CURRENT_PROJECT_CREATE, ({ payload: { data } }) =>
services.createBoardInCurrentProject(data),
),
takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board } }) =>
services.handleBoardCreate(board),
takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board, requestId } }) =>
services.handleBoardCreate(board, requestId),
),
takeEvery(EntryActionTypes.BOARD_FETCH, ({ payload: { id } }) => services.fetchBoard(id)),
takeEvery(EntryActionTypes.BOARD_UPDATE, ({ payload: { id, data } }) =>

View file

@ -48,8 +48,8 @@ const createSocketEventsChannel = () =>
emit(entryActions.handleProjectManagerDelete(item));
};
const handleBoardCreate = ({ item }) => {
emit(entryActions.handleBoardCreate(item));
const handleBoardCreate = ({ item, requestId }) => {
emit(entryActions.handleBoardCreate(item, requestId));
};
const handleBoardUpdate = ({ item }) => {

View file

@ -172,6 +172,12 @@ export const selectCurrentUserMembershipForCurrentBoard = createSelector(
},
);
export const selectIsBoardWithIdExists = createSelector(
orm,
(_, id) => id,
({ Board }, id) => Board.idExists(id),
);
export default {
makeSelectBoardById,
selectBoardById,
@ -182,4 +188,5 @@ export default {
selectFilterUsersForCurrentBoard,
selectFilterLabelsForCurrentBoard,
selectCurrentUserMembershipForCurrentBoard,
selectIsBoardWithIdExists,
};