#27 add trello import to UI

2025-08-09 07:25:24 +02:00 · 2022-12-08 17:35:13 +01:00 · 2022-12-08 17:35:13 +01:00 · 2880ffccaa
commit 2880ffccaa
parent 0a63ada320
9 changed files with 206 additions and 102 deletions
--- a/client/src/api/boards.js
+++ b/client/src/api/boards.js
@ -1,4 +1,5 @@
 import socket from './socket';
+import http from './http';
 import { transformCard } from './cards';
 import { transformAttachment } from './attachments';

@ -7,6 +8,15 @@ import { transformAttachment } from './attachments';
 const createBoard = (projectId, 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) =>
  socket.get(`/boards/${id}`, undefined, headers).then((body) => ({
    ...body,
@ -23,6 +33,7 @@ const deleteBoard = (id, headers) => socket.delete(`/boards/${id}`, undefined, h

 export default {
  createBoard,
+  importBoard,
  getBoard,
  updateBoard,
  deleteBoard,
--- a/client/src/components/Boards/AddPopup.jsx
+++ b/client/src/components/Boards/AddPopup.jsx
@ -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 { 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 { Input, Popup } from '../../lib/custom-ui';
+import { Input, Popup, FilePicker } from '../../lib/custom-ui';

 import { useForm } from '../../hooks';

 import styles from './AddPopup.module.scss';

-const AddStep = React.memo(({ onCreate, onClose }) => {
+const AddStep = React.memo(({ onCreate, onImport, onClose }) => {
  const [t] = useTranslation();

  const [data, handleFieldChange] = useForm({
    name: '',
+    file: null,
  });

+  const [selectedFile, setSelectedFile] = useState(null);
+
  const nameField = useRef(null);

  const handleSubmit = useCallback(() => {
@ -30,9 +33,25 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
      return;
    }

-    onCreate(cleanData);
+    if (data.file) {
+      onImport(cleanData);
+    } else {
+      onCreate(cleanData);
+    }
+
    onClose();
-  }, [onCreate, onClose, data]);
+  }, [onClose, data, onImport, onCreate]);
+
+  const handleFileSelect = useCallback(
+    (file) => {
+      handleFieldChange(null, {
+        name: 'file',
+        value: file,
+      });
+      setSelectedFile(file);
+    },
+    [handleFieldChange, setSelectedFile],
+  );

  useEffect(() => {
    nameField.current.focus();
@ -55,7 +74,21 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
            className={styles.field}
            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>
      </Popup.Content>
    </>
@ -64,6 +97,7 @@ const AddStep = React.memo(({ onCreate, onClose }) => {

 AddStep.propTypes = {
  onCreate: PropTypes.func.isRequired,
+  onImport: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
 };

--- a/client/src/components/Boards/Boards.jsx
+++ b/client/src/components/Boards/Boards.jsx
@ -14,118 +14,121 @@ import EditPopup from './EditPopup';

 import styles from './Boards.module.scss';

-const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMove, onDelete }) => {
-  const tabsWrapper = useRef(null);
+const Boards = React.memo(
+  ({ items, currentId, canEdit, onCreate, onImport, onUpdate, onMove, onDelete }) => {
+    const tabsWrapper = useRef(null);

-  const handleWheel = useCallback(({ deltaY }) => {
-    tabsWrapper.current.scrollBy({
-      left: deltaY,
-    });
-  }, []);
+    const handleWheel = useCallback(({ deltaY }) => {
+      tabsWrapper.current.scrollBy({
+        left: deltaY,
+      });
+    }, []);

-  const handleDragStart = useCallback(() => {
-    closePopup();
-  }, []);
+    const handleDragStart = useCallback(() => {
+      closePopup();
+    }, []);

-  const handleDragEnd = useCallback(
-    ({ draggableId, source, destination }) => {
-      if (!destination || source.index === destination.index) {
-        return;
-      }
+    const handleDragEnd = useCallback(
+      ({ draggableId, source, destination }) => {
+        if (!destination || source.index === destination.index) {
+          return;
+        }

-      onMove(draggableId, destination.index);
-    },
-    [onMove],
-  );
+        onMove(draggableId, destination.index);
+      },
+      [onMove],
+    );

-  const handleUpdate = useCallback(
-    (id, data) => {
-      onUpdate(id, data);
-    },
-    [onUpdate],
-  );
+    const handleUpdate = useCallback(
+      (id, data) => {
+        onUpdate(id, data);
+      },
+      [onUpdate],
+    );

-  const handleDelete = useCallback(
-    (id) => {
-      onDelete(id);
-    },
-    [onDelete],
-  );
+    const handleDelete = useCallback(
+      (id) => {
+        onDelete(id);
+      },
+      [onDelete],
+    );

-  const itemsNode = items.map((item, index) => (
-    <Draggable
-      key={item.id}
-      draggableId={item.id}
-      index={index}
-      isDragDisabled={!item.isPersisted || !canEdit}
-    >
-      {({ innerRef, draggableProps, dragHandleProps }) => (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <div {...draggableProps} ref={innerRef} className={styles.tabWrapper}>
-          <div className={classNames(styles.tab, item.id === currentId && styles.tabActive)}>
-            {item.isPersisted ? (
-              <>
-                <Link
-                  {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
-                  to={Paths.BOARDS.replace(':id', item.id)}
-                  title={item.name}
-                  className={styles.link}
-                >
-                  {item.name}
-                </Link>
-                {canEdit && (
-                  <EditPopup
-                    defaultData={pick(item, 'name')}
-                    onUpdate={(data) => handleUpdate(item.id, data)}
-                    onDelete={() => handleDelete(item.id)}
+    const itemsNode = items.map((item, index) => (
+      <Draggable
+        key={item.id}
+        draggableId={item.id}
+        index={index}
+        isDragDisabled={!item.isPersisted || !canEdit}
+      >
+        {({ innerRef, draggableProps, dragHandleProps }) => (
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          <div {...draggableProps} ref={innerRef} className={styles.tabWrapper}>
+            <div className={classNames(styles.tab, item.id === currentId && styles.tabActive)}>
+              {item.isPersisted ? (
+                <>
+                  <Link
+                    {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
+                    to={Paths.BOARDS.replace(':id', item.id)}
+                    title={item.name}
+                    className={styles.link}
                  >
-                    <Button className={classNames(styles.editButton, styles.target)}>
-                      <Icon fitted name="pencil" size="small" />
-                    </Button>
-                  </EditPopup>
-                )}
-              </>
-            ) : (
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              <span {...dragHandleProps} className={styles.link}>
-                {item.name}
-              </span>
-            )}
+                    {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)}>
+                        <Icon fitted name="pencil" size="small" />
+                      </Button>
+                    </EditPopup>
+                  )}
+                </>
+              ) : (
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                <span {...dragHandleProps} className={styles.link}>
+                  {item.name}
+                </span>
+              )}
+            </div>
          </div>
-        </div>
-      )}
-    </Draggable>
-  ));
+        )}
+      </Draggable>
+    ));

-  return (
-    <div className={styles.wrapper} onWheel={handleWheel}>
-      <div ref={tabsWrapper} className={styles.tabsWrapper}>
-        <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-          <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
-            {({ innerRef, droppableProps, placeholder }) => (
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              <div {...droppableProps} ref={innerRef} className={styles.tabs}>
-                {itemsNode}
-                {placeholder}
-                {canEdit && (
-                  <AddPopup onCreate={onCreate}>
-                    <Button icon="plus" className={styles.addButton} />
-                  </AddPopup>
-                )}
-              </div>
-            )}
-          </Droppable>
-        </DragDropContext>
+    return (
+      <div className={styles.wrapper} onWheel={handleWheel}>
+        <div ref={tabsWrapper} className={styles.tabsWrapper}>
+          <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+            <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
+              {({ innerRef, droppableProps, placeholder }) => (
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                <div {...droppableProps} ref={innerRef} className={styles.tabs}>
+                  {itemsNode}
+                  {placeholder}
+                  {canEdit && (
+                    <AddPopup onCreate={onCreate} onImport={onImport}>
+                      <Button icon="plus" className={styles.addButton} />
+                    </AddPopup>
+                  )}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </div>
      </div>
-    </div>
-  );
-});
+    );
+  },
+);

 Boards.propTypes = {
  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
  currentId: PropTypes.string,
  canEdit: PropTypes.bool.isRequired,
  onCreate: PropTypes.func.isRequired,
+  onImport: PropTypes.func.isRequired,
  onUpdate: PropTypes.func.isRequired,
  onMove: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
--- a/client/src/constants/EntryActionTypes.js
+++ b/client/src/constants/EntryActionTypes.js
@ -76,6 +76,7 @@ export default {
  /* Boards */

  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_FETCH: `${PREFIX}/BOARD_FETCH`,
  BOARD_UPDATE: `${PREFIX}/BOARD_UPDATE`,
--- a/client/src/containers/BoardsContainer.js
+++ b/client/src/containers/BoardsContainer.js
@ -21,6 +21,7 @@ const mapDispatchToProps = (dispatch) =>
  bindActionCreators(
    {
      onCreate: entryActions.createBoardInCurrentProject,
+      onImport: entryActions.importTrelloBoardInCurrentProject,
      onUpdate: entryActions.updateBoard,
      onMove: entryActions.moveBoard,
      onDelete: entryActions.deleteBoard,
--- a/client/src/entry-actions/boards.js
+++ b/client/src/entry-actions/boards.js
@ -7,6 +7,13 @@ const createBoardInCurrentProject = (data) => ({
  },
 });

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

 export default {
  createBoardInCurrentProject,
+  importTrelloBoardInCurrentProject,
  handleBoardCreate,
  fetchBoard,
  updateBoard,
--- a/client/src/locales/en/core.js
+++ b/client/src/locales/en/core.js
@ -143,6 +143,7 @@ export default {
      time: 'Time',
      timer: 'Timer',
      title: 'Title',
+      uploadTrelloFile_title: 'Import Trello JSON File',
      userActions_title: 'User Actions',
      userAddedThisCardToList: '<0>{{user}}</0><1> added this card to {{list}}</1>',
      userLeftNewCommentToCard: '{{user}} left a new comment «{{comment}}» to <2>{{card}}</2>',
@ -201,6 +202,7 @@ export default {
      editTitle_title: 'Edit Title',
      editUsername_title: 'Edit Username',
      hideDetails: 'Hide details',
+      importTrelloBoard: 'Import Trello Board',
      leaveBoard: 'Leave board',
      leaveProject: 'Leave project',
      logOut_title: 'Log Out',
--- a/client/src/sagas/core/services/boards.js
+++ b/client/src/sagas/core/services/boards.js
@ -46,6 +46,46 @@ export function* createBoardInCurrentProject(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) {
  yield put(actions.handleBoardCreate(board));
 }
@ -163,6 +203,7 @@ export function* handleBoardDelete(board) {
 export default {
  createBoard,
  createBoardInCurrentProject,
+  importTrelloBoardInCurrentProject,
  handleBoardCreate,
  fetchBoard,
  updateBoard,
--- a/client/src/sagas/core/watchers/boards.js
+++ b/client/src/sagas/core/watchers/boards.js
@ -8,6 +8,9 @@ export default function* boardsWatchers() {
    takeEvery(EntryActionTypes.BOARD_IN_CURRENT_PROJECT_CREATE, ({ payload: { data } }) =>
      services.createBoardInCurrentProject(data),
    ),
+    takeEvery(EntryActionTypes.TRELLO_BOARD_IN_CURRENT_PROJECT_IMPORT, ({ payload: { data } }) =>
+      services.importTrelloBoardInCurrentProject(data),
+    ),
    takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board } }) =>
      services.handleBoardCreate(board),
    ),