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