Christoph Enne
3 years ago
committed by
GitHub
parent
9ce8b2ab9c
commit
738ed19e7f
@ -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);
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
:global(#app) {
|
|
||||||
.field {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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);
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import AddPopup from './AddPopup';
|
||||||
|
|
||||||
|
export default AddPopup;
|
||||||
@ -0,0 +1,152 @@
|
|||||||
|
module.exports = {
|
||||||
|
inputs: {
|
||||||
|
user: {
|
||||||
|
type: 'ref',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
board: {
|
||||||
|
type: 'ref',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
trelloBoard: {
|
||||||
|
type: 'json',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
async fn(inputs) {
|
||||||
|
const trelloToPlankaLabels = {};
|
||||||
|
|
||||||
|
const getTrelloLists = () => inputs.trelloBoard.lists.filter((list) => !list.closed);
|
||||||
|
|
||||||
|
const getUsedTrelloLabels = () => {
|
||||||
|
const result = {};
|
||||||
|
inputs.trelloBoard.cards
|
||||||
|
.map((card) => card.labels)
|
||||||
|
.flat()
|
||||||
|
.forEach((label) => {
|
||||||
|
result[label.id] = label;
|
||||||
|
});
|
||||||
|
|
||||||
|
return Object.values(result);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTrelloCardsOfList = (listId) =>
|
||||||
|
inputs.trelloBoard.cards.filter((card) => card.idList === listId && !card.closed);
|
||||||
|
|
||||||
|
const getAllTrelloCheckItemsOfCard = (cardId) =>
|
||||||
|
inputs.trelloBoard.checklists
|
||||||
|
.filter((checklist) => checklist.idCard === cardId)
|
||||||
|
.map((checklist) => checklist.checkItems)
|
||||||
|
.flat();
|
||||||
|
|
||||||
|
const getTrelloCommentsOfCard = (cardId) =>
|
||||||
|
inputs.trelloBoard.actions.filter(
|
||||||
|
(action) =>
|
||||||
|
action.type === 'commentCard' &&
|
||||||
|
action.data &&
|
||||||
|
action.data.card &&
|
||||||
|
action.data.card.id === cardId,
|
||||||
|
);
|
||||||
|
|
||||||
|
const getPlankaLabelColor = (trelloLabelColor) =>
|
||||||
|
Label.COLORS.find((color) => color.indexOf(trelloLabelColor) !== -1) || 'desert-sand';
|
||||||
|
|
||||||
|
const importCardLabels = async (plankaCard, trelloCard) => {
|
||||||
|
return Promise.all(
|
||||||
|
trelloCard.labels.map(async (trelloLabel) => {
|
||||||
|
return CardLabel.create({
|
||||||
|
cardId: plankaCard.id,
|
||||||
|
labelId: trelloToPlankaLabels[trelloLabel.id].id,
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const importTasks = async (plankaCard, trelloCard) => {
|
||||||
|
// TODO find workaround for tasks/checklist mismapping, see issue trello2planka#5
|
||||||
|
return Promise.all(
|
||||||
|
getAllTrelloCheckItemsOfCard(trelloCard.id).map(async (trelloCheckItem) => {
|
||||||
|
return Task.create({
|
||||||
|
cardId: plankaCard.id,
|
||||||
|
position: trelloCheckItem.pos,
|
||||||
|
name: trelloCheckItem.name,
|
||||||
|
isCompleted: trelloCheckItem.state === 'complete',
|
||||||
|
}).fetch();
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const importComments = async (plankaCard, trelloCard) => {
|
||||||
|
const trelloComments = getTrelloCommentsOfCard(trelloCard.id);
|
||||||
|
trelloComments.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
|
||||||
|
|
||||||
|
return Promise.all(
|
||||||
|
trelloComments.map(async (trelloComment) => {
|
||||||
|
return Action.create({
|
||||||
|
cardId: plankaCard.id,
|
||||||
|
userId: inputs.user.id,
|
||||||
|
type: 'commentCard',
|
||||||
|
data: {
|
||||||
|
text:
|
||||||
|
`${trelloComment.data.text}\n\n---\n*Note: imported comment, originally posted by ` +
|
||||||
|
`\n${trelloComment.memberCreator.fullName} (${trelloComment.memberCreator.username}) on ${trelloComment.date}*`,
|
||||||
|
},
|
||||||
|
}).fetch();
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const importCards = async (plankaList, trelloList) => {
|
||||||
|
return Promise.all(
|
||||||
|
getTrelloCardsOfList(trelloList.id).map(async (trelloCard) => {
|
||||||
|
const plankaCard = await Card.create({
|
||||||
|
boardId: inputs.board.id,
|
||||||
|
listId: plankaList.id,
|
||||||
|
creatorUserId: inputs.user.id,
|
||||||
|
position: trelloCard.pos,
|
||||||
|
name: trelloCard.name,
|
||||||
|
description: trelloCard.desc || null,
|
||||||
|
}).fetch();
|
||||||
|
|
||||||
|
await importCardLabels(plankaCard, trelloCard);
|
||||||
|
await importTasks(plankaCard, trelloCard);
|
||||||
|
await importComments(plankaCard, trelloCard);
|
||||||
|
|
||||||
|
return plankaCard;
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const importLabels = async () => {
|
||||||
|
return Promise.all(
|
||||||
|
getUsedTrelloLabels().map(async (trelloLabel) => {
|
||||||
|
const plankaLabel = await Label.create({
|
||||||
|
boardId: inputs.board.id,
|
||||||
|
name: trelloLabel.name || null,
|
||||||
|
color: getPlankaLabelColor(trelloLabel.color),
|
||||||
|
}).fetch();
|
||||||
|
|
||||||
|
trelloToPlankaLabels[trelloLabel.id] = plankaLabel;
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const importLists = async () => {
|
||||||
|
return Promise.all(
|
||||||
|
getTrelloLists().map(async (trelloList) => {
|
||||||
|
const plankaList = await List.create({
|
||||||
|
boardId: inputs.board.id,
|
||||||
|
name: trelloList.name,
|
||||||
|
position: trelloList.pos,
|
||||||
|
}).fetch();
|
||||||
|
|
||||||
|
return importCards(plankaList, trelloList);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
await importLabels();
|
||||||
|
await importLists();
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
const fs = require('fs').promises;
|
||||||
|
const rimraf = require('rimraf');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
inputs: {
|
||||||
|
file: {
|
||||||
|
type: 'json',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
exits: {
|
||||||
|
invalidFile: {},
|
||||||
|
},
|
||||||
|
|
||||||
|
async fn(inputs) {
|
||||||
|
const content = await fs.readFile(inputs.file.fd);
|
||||||
|
const trelloBoard = JSON.parse(content);
|
||||||
|
|
||||||
|
if (
|
||||||
|
!trelloBoard ||
|
||||||
|
!_.isArray(trelloBoard.lists) ||
|
||||||
|
!_.isArray(trelloBoard.cards) ||
|
||||||
|
!_.isArray(trelloBoard.checklists) ||
|
||||||
|
!_.isArray(trelloBoard.actions)
|
||||||
|
) {
|
||||||
|
throw 'invalidFile';
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
rimraf.sync(inputs.file.fd);
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(error.stack); // eslint-disable-line no-console
|
||||||
|
}
|
||||||
|
|
||||||
|
return trelloBoard;
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue