Add an import feature for import Trello board as JSON to Planka

client/src/actions/entry/project.js

@@ -21,6 +21,13 @@ export const updateCurrentProjectBackgroundImage = (data) => ({
   },
 });
 
+export const importProject = (file) => ({
+  type: EntryActionTypes.IMPORT_PROJECT,
+  payload: {
+    file,
+  },
+});
+
 export const deleteCurrentProject = () => ({
   type: EntryActionTypes.CURRENT_PROJECT_DELETE,
   payload: {},

client/src/actions/project.js

@@ -9,6 +9,13 @@ export const createProject = (data) => ({
   },
 });
 
+export const importProject = (file) => ({
+  type: ActionTypes.IMPORT_PROJECT,
+  payload: {
+    file,
+  },
+});
+
 export const updateProject = (id, data) => ({
   type: ActionTypes.PROJECT_UPDATE,
   payload: {
@@ -60,6 +67,40 @@ export const createProjectReceived = (project, users, projectMemberships, boards
   },
 });
 
+export const importProjectSucceeded = (project, users, projectMemberships, boards) => ({
+  type: ActionTypes.PROJECT_IMPORT_SUCCEEDED,
+  payload: {
+    project,
+    users,
+    projectMemberships,
+    boards,
+  },
+});
+
+export const importProjectRequested = (file) => ({
+  type: ActionTypes.PROJECT_IMPORT_REQUESTED,
+  payload: {
+    file,
+  },
+});
+
+export const importProjectFailed = (error) => ({
+  type: ActionTypes.PROJECT_IMPORT_FAILED,
+  payload: {
+    error,
+  },
+});
+
+export const importProjectReceived = (project, users, projectMemberships, boards) => ({
+  type: ActionTypes.PROJECT_IMPORT_RECEIVED,
+  payload: {
+    project,
+    users,
+    projectMemberships,
+    boards,
+  },
+});
+
 export const updateProjectRequested = (id, data) => ({
   type: ActionTypes.PROJECT_UPDATE_REQUESTED,
   payload: {

client/src/api/projects.js

@@ -9,6 +9,8 @@ const createProject = (data, headers) => socket.post('/projects', data, headers)
 
 const updateProject = (id, data, headers) => socket.patch(`/projects/${id}`, data, headers);
 
+const importProject = (data, headers) => http.post(`/projects/import`, data, headers);
+
 const updateProjectBackgroundImage = (id, data, headers) =>
   http.post(`/projects/${id}/background-image`, data, headers);
 
@@ -20,4 +22,5 @@ export default {
   updateProject,
   updateProjectBackgroundImage,
   deleteProject,
+  importProject,
 };

client/src/assets/images/import-icon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24">
+    <path d="M11 5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5V12.1578L16.2428 8.91501L17.657 10.3292L12.0001 15.9861L6.34326 10.3292L7.75748 8.91501L11 12.1575V5Z"
+          fill="currentColor"/>
+    <path d="M4 14H6V18H18V14H20V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V14Z" fill="currentColor"/>
+</svg>

client/src/components/Projects/Projects.jsx

@@ -10,11 +10,13 @@ import { Container, Grid } from 'semantic-ui-react';
 import Paths from '../../constants/Paths';
 import { ProjectBackgroundTypes } from '../../constants/Enums';
 import { ReactComponent as PlusIcon } from '../../assets/images/plus-icon.svg';
+import { ReactComponent as UploadIcon } from '../../assets/images/import-icon.svg';
 
 import styles from './Projects.module.scss';
 import globalStyles from '../../styles.module.scss';
+import { FilePicker } from '../../lib/custom-ui';
 
-const Projects = React.memo(({ items, isEditable, onAdd }) => {
+const Projects = React.memo(({ items, isEditable, onAdd, onImport }) => {
   const [t] = useTranslation();
 
   return (
@@ -65,6 +67,20 @@ const Projects = React.memo(({ items, isEditable, onAdd }) => {
             </button>
           </Grid.Column>
         )}
+        {isEditable && (
+          <Grid.Column mobile={8} computer={4}>
+            <FilePicker onSelect={onImport}>
+              <button type="button" className={classNames(styles.card, styles.add)}>
+                <div className={styles.addTitleWrapper}>
+                  <div className={styles.addTitle}>
+                    <UploadIcon className={styles.addGridIcon} />
+                    {t('action.uploadProject')}
+                  </div>
+                </div>
+              </button>
+            </FilePicker>
+          </Grid.Column>
+        )}
       </Grid>
     </Container>
   );
@@ -74,6 +90,7 @@ Projects.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   isEditable: PropTypes.bool.isRequired,
   onAdd: PropTypes.func.isRequired,
+  onImport: PropTypes.func.isRequired,
 };
 
 export default Projects;

client/src/constants/ActionTypes.js

@@ -77,12 +77,17 @@ export default {
   /* Project */
 
   PROJECT_CREATE: 'PROJECT_CREATE',
+  IMPORT_PROJECT: 'IMPORT_PROJECT',
   PROJECT_UPDATE: 'PROJECT_UPDATE',
   PROJECT_DELETE: 'PROJECT_DELETE',
   PROJECT_CREATE_REQUESTED: 'PROJECT_CREATE_REQUESTED',
   PROJECT_CREATE_SUCCEEDED: 'PROJECT_CREATE_SUCCEEDED',
   PROJECT_CREATE_FAILED: 'PROJECT_CREATE_FAILED',
   PROJECT_CREATE_RECEIVED: 'PROJECT_CREATE_RECEIVED',
+  PROJECT_IMPORT_REQUESTED: 'PROJECT_IMPORT_REQUESTED',
+  PROJECT_IMPORT_SUCCEEDED: 'PROJECT_IMPORT_SUCCEEDED',
+  PROJECT_IMPORT_FAILED: 'PROJECT_IMPORT_FAILED',
+  PROJECT_IMPORT_RECEIVED: 'PROJECT_IMPORT_RECEIVED',
   PROJECT_UPDATE_REQUESTED: 'PROJECT_UPDATE_REQUESTED',
   PROJECT_UPDATE_SUCCEEDED: 'PROJECT_UPDATE_SUCCEEDED',
   PROJECT_UPDATE_FAILED: 'PROJECT_UPDATE_FAILED',

client/src/constants/EntryActionTypes.js

@@ -38,6 +38,7 @@ export default {
   /* Project */
 
   PROJECT_CREATE: `${PREFIX}/PROJECT_CREATE`,
+  IMPORT_PROJECT: `${PREFIX}/PROJECT_IMPORT`,
   CURRENT_PROJECT_UPDATE: `${PREFIX}/CURRENT_PROJECT_UPDATE`,
   CURRENT_PROJECT_BACKGROUND_IMAGE_UPDATE: `${PREFIX}/CURRENT_PROJECT_BACKGROUND_IMAGE_UPDATE`,
   CURRENT_PROJECT_DELETE: `${PREFIX}/CURRENT_PROJECT_DELETE`,

client/src/containers/ProjectsContainer.js

@@ -2,7 +2,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { currentUserSelector, projectsForCurrentUserSelector } from '../selectors';
-import { openProjectAddModal } from '../actions/entry';
+import { openProjectAddModal, importProject } from '../actions/entry';
 import Projects from '../components/Projects';
 
 const mapStateToProps = (state) => {
@@ -19,6 +19,7 @@ const mapDispatchToProps = (dispatch) =>
   bindActionCreators(
     {
       onAdd: openProjectAddModal,
+      onImport: importProject,
     },
     dispatch,
   );

client/src/locales/en/core.js

@@ -147,6 +147,7 @@ export default {
       addTask: 'Add task',
       addToCard: 'Add to card',
       addUser: 'Add user',
+      uploadProject: 'Import a project',
       createBoard: 'Create board',
       createFile: 'Create file',
       createLabel: 'Create label',

client/src/sagas/core/requests/project.js

@@ -8,6 +8,9 @@ import {
   deleteProjectFailed,
   deleteProjectRequested,
   deleteProjectSucceeded,
+  importProjectFailed,
+  importProjectRequested,
+  importProjectSucceeded,
   updateProjectBackgroundImageFailed,
   updateProjectBackgroundImageRequested,
   updateProjectBackgroundImageSucceeded,
@@ -44,6 +47,33 @@ export function* createProjectRequest(data) {
   }
 }
 
+export function* importProjectRequest(data) {
+  yield put(importProjectRequested(data));
+
+  try {
+    const {
+      item,
+      included: { users, projectMemberships, boards },
+    } = yield call(request, api.importProject, { file: data });
+
+    const action = importProjectSucceeded(item, users, projectMemberships, boards);
+    yield put(action);
+
+    return {
+      success: true,
+      payload: action.payload,
+    };
+  } catch (error) {
+    const action = importProjectFailed(error);
+    yield put(action);
+
+    return {
+      success: false,
+      payload: action.payload,
+    };
+  }
+}
+
 export function* updateProjectRequest(id, data) {
   yield put(updateProjectRequested(id, data));
 

client/src/sagas/core/services/project.js

@@ -3,12 +3,13 @@ import { call, put, select } from 'redux-saga/effects';
 import { goToProjectService, goToRootService } from './router';
 import {
   createProjectRequest,
+  importProjectRequest,
   deleteProjectRequest,
   updateProjectBackgroundImageRequest,
   updateProjectRequest,
 } from '../requests';
 import { pathSelector } from '../../../selectors';
-import { createProject, deleteProject, updateProject } from '../../../actions';
+import { createProject, deleteProject, importProject, updateProject } from '../../../actions';
 
 export function* createProjectService(data) {
   yield put(createProject(data));
@@ -23,6 +24,19 @@ export function* createProjectService(data) {
   }
 }
 
+export function* importProjectService(file) {
+  yield put(importProject(file));
+
+  const {
+    success,
+    payload: { project },
+  } = yield call(importProjectRequest, file);
+
+  if (success) {
+    yield call(goToProjectService, project.id);
+  }
+}
+
 export function* updateProjectService(id, data) {
   yield put(updateProject(id, data));
   yield call(updateProjectRequest, id, data);

client/src/sagas/core/watchers/project.js

@@ -3,6 +3,7 @@ import { all, takeLatest } from 'redux-saga/effects';
 import {
   createProjectService,
   deleteCurrentProjectService,
+  importProjectService,
   updateCurrentProjectBackgroundImageService,
   updateCurrentProjectService,
 } from '../services';
@@ -13,6 +14,9 @@ export default function* projectWatchers() {
     takeLatest(EntryActionTypes.PROJECT_CREATE, ({ payload: { data } }) =>
       createProjectService(data),
     ),
+    takeLatest(EntryActionTypes.IMPORT_PROJECT, ({ payload: { file } }) =>
+      importProjectService(file),
+    ),
     takeLatest(EntryActionTypes.CURRENT_PROJECT_UPDATE, ({ payload: { data } }) =>
       updateCurrentProjectService(data),
     ),

server/api/controllers/projects/import.js

@@ -0,0 +1,157 @@
+const got = require('got');
+
+const Errors = {
+  INVALID_IMPORT_FILE: {
+    invalidImport: 'Invalid Import',
+  },
+};
+
+module.exports = {
+  exits: {
+    cardNotFound: {
+      responseType: 'notFound',
+    },
+    uploadError: {
+      responseType: 'unprocessableEntity',
+    },
+  },
+
+  async fn(inputs, exits) {
+    const { currentUser } = this.req;
+
+    this.req.file('file').upload(sails.helpers.downloadImportData(), async (error, files) => {
+      try {
+        const data = JSON.parse(files[0].extra);
+        const { project, projectMembership } = await sails.helpers.createProject(
+          currentUser,
+          { name: data.name },
+          this.req,
+          true,
+          false,
+        );
+
+        // Création du tableau
+        const board = await sails.helpers.createBoard(
+          project,
+          { name: 'Premier tableau', position: 0, type: 'kanban' },
+          this.req,
+        );
+
+        // Création des labels
+        const labels = new Map();
+        /* eslint-disable no-await-in-loop */
+        // eslint-disable-next-line no-restricted-syntax
+        for (const l of data.labels) {
+          labels.set(
+            l.id,
+            await sails.helpers.createLabel(board, {
+              name: l.name || '?',
+              color: await sails.helpers.getColorFromTrello(l.color),
+            }),
+          );
+        }
+
+        // Création des listes
+        const lists = new Map();
+        // eslint-disable-next-line no-restricted-syntax
+        for (const l of data.lists) {
+          lists.set(
+            l.id,
+            await sails.helpers.createList(board, {
+              name: l.name || '?',
+              position: l.pos,
+            }),
+          );
+        }
+
+        // Création des cartes
+        const cards = new Map();
+        // eslint-disable-next-line no-restricted-syntax
+        for (const c of data.cards) {
+          const card = await sails.helpers.createCard(
+            board,
+            lists.get(c.idList),
+            {
+              position: Math.round(c.pos),
+              name: c.name,
+              description: c.desc || null,
+            },
+            currentUser,
+            this.req,
+          );
+          cards.set(c.id, card);
+          c.idLabels.forEach(async (l) => {
+            await sails.helpers.createCardLabel(card, labels.get(l), this.req);
+          });
+
+          // eslint-disable-next-line no-restricted-syntax
+          for (const a of c.attachments) {
+            if (a.url.startsWith('https://trello-attachments.s3.amazonaws.com/'))
+              got
+                .stream(a.url)
+                .pipe(sails.helpers.importAttachmentReceiver(a, card, currentUser, {}, this.req));
+          }
+        }
+
+        // Création des commentaires
+        const listOfComments = data.actions.filter((a) => a.type === 'commentCard');
+        // eslint-disable-next-line no-restricted-syntax
+        for (const comment of listOfComments) {
+          const userName =
+            data.members.find((u) => u.id === comment.idMemberCreator).fullName || 'Inconnu';
+          await sails.helpers.createAction(
+            cards.get(comment.data.card.id),
+            currentUser,
+            {
+              type: 'commentCard',
+              data: { text: `${userName} - ${comment.data.text}` },
+            },
+            this.req,
+            false,
+          );
+        }
+
+        // eslint-disable-next-line no-restricted-syntax
+        for (const listOfTask of data.checklists) {
+          const card = cards.get(listOfTask.idCard);
+          // eslint-disable-next-line no-restricted-syntax
+          for (const task of listOfTask.checkItems) {
+            await sails.helpers.createTask(
+              card,
+              {
+                name: task.name,
+                isCompleted: task.state === 'complete',
+              },
+              this.req,
+            );
+          }
+        }
+
+        sails.sockets.broadcast(
+          `user:${projectMembership.userId}`,
+          'projectCreate',
+          {
+            item: project,
+            included: {
+              users: [currentUser],
+              projectMemberships: [projectMembership],
+              boards: await sails.helpers.getBoardsForProject(project.id),
+            },
+          },
+          this.req,
+        );
+
+        return exits.success({
+          item: project,
+          included: {
+            users: [currentUser],
+            projectMemberships: [projectMembership],
+            boards: await sails.helpers.getBoardsForProject(project.id),
+          },
+        });
+      } catch (e) {
+        throw Errors.INVALID_IMPORT_FILE;
+      }
+    });
+  },
+};

server/api/helpers/create-project.js

@@ -15,6 +15,10 @@ module.exports = {
       type: 'boolean',
       defaultsTo: false,
     },
+    withBroadcast: {
+      type: 'boolean',
+      defaultsTo: true,
+    },
   },
 
   async fn(inputs, exits) {
@@ -25,6 +29,7 @@ module.exports = {
       userId: inputs.user.id,
     }).fetch();
 
+    if (inputs.withBroadcast)
       sails.sockets.broadcast(
         `user:${projectMembership.userId}`,
         'projectCreate',

server/api/helpers/download-import-data.js

@@ -0,0 +1,33 @@
+const util = require('util');
+const stream = require('stream');
+const streamToArray = require('stream-to-array');
+
+module.exports = {
+  sync: true,
+
+  fn(inputs, exits) {
+    const receiver = stream.Writable({
+      objectMode: true,
+    });
+
+    let firstFileHandled = false;
+    // eslint-disable-next-line no-underscore-dangle
+    receiver._write = async (file, receiverEncoding, done) => {
+      if (firstFileHandled) {
+        file.pipe(new stream.Writable());
+
+        return done();
+      }
+      firstFileHandled = true;
+
+      const buffer = await streamToArray(file).then((parts) =>
+        Buffer.concat(parts.map((part) => (util.isBuffer(part) ? part : Buffer.from(part)))),
+      );
+      // eslint-disable-next-line no-param-reassign
+      file.extra = buffer.toString('UTF-8');
+      return done();
+    };
+
+    return exits.success(receiver);
+  },
+};

server/api/helpers/get-color-from-trello.js

@@ -0,0 +1,35 @@
+module.exports = {
+  inputs: {
+    color: {
+      type: 'string',
+      required: true,
+    },
+  },
+
+  async fn(inputs, exits) {
+    switch (inputs.color) {
+      case 'green':
+        return exits.success('bright-moss');
+      case 'yellow':
+        return exits.success('egg-yellow');
+      case 'orange':
+        return exits.success('pumpkin-orange');
+      case 'red':
+        return exits.success('berry-red');
+      case 'purple':
+        return exits.success('red-burgundy');
+      case 'blue':
+        return exits.success('lagoon-blue');
+      case 'sky':
+        return exits.success('morning-sky');
+      case 'lime':
+        return exits.success('sunny-grass');
+      case 'pink':
+        return exits.success('pink-tulip');
+      case 'black':
+        return exits.success('dark-granite');
+      default:
+        return exits.success('berry-red');
+    }
+  },
+};

server/api/helpers/import-attachment-receiver.js

@@ -0,0 +1,81 @@
+const fs = require('fs');
+const path = require('path');
+const util = require('util');
+const { v4: uuid } = require('uuid');
+const sharp = require('sharp');
+
+const writeFile = util.promisify(fs.writeFile);
+
+module.exports = {
+  sync: true,
+  inputs: {
+    attachment: {
+      type: 'ref',
+      required: true,
+    },
+    card: {
+      type: 'ref',
+      required: true,
+    },
+    user: {
+      type: 'ref',
+      required: true,
+    },
+    values: {
+      type: 'json',
+      required: true,
+    },
+    request: {
+      type: 'ref',
+    },
+  },
+
+  fn(inputs, exits) {
+    const dirname = uuid();
+    const filename = inputs.attachment.fileName;
+    const rootPath = path.join(sails.config.custom.attachmentsPath, dirname);
+    fs.mkdirSync(rootPath);
+    const writeStream = fs.createWriteStream(path.join(rootPath, filename));
+    writeStream.on('finish', async () => {
+      const image = sharp(fs.readFileSync(path.join(rootPath, filename)));
+      let imageMetadata;
+
+      try {
+        imageMetadata = await image.metadata();
+      } catch (error) {} // eslint-disable-line no-empty
+
+      if (imageMetadata) {
+        let cover256Buffer;
+        if (imageMetadata.height > imageMetadata.width) {
+          cover256Buffer = await image.resize(256, 320).jpeg().toBuffer();
+        } else {
+          cover256Buffer = await image
+            .resize({
+              width: 256,
+            })
+            .jpeg()
+            .toBuffer();
+        }
+
+        const thumbnailsPath = path.join(rootPath, 'thumbnails');
+        fs.mkdirSync(thumbnailsPath);
+
+        await writeFile(path.join(thumbnailsPath, 'cover-256.jpg'), cover256Buffer);
+
+        await sails.helpers.createAttachment(
+          inputs.card,
+          inputs.user,
+          {
+            dirname,
+            filename: inputs.attachment.name,
+            isImage: !!imageMetadata,
+            name: inputs.attachment.name,
+          },
+          null,
+          inputs.request,
+        );
+      }
+    });
+    return exits.success(writeStream);
+  },
+};

server/config/policies.js

@@ -26,6 +26,7 @@ module.exports.policies = {
   'projects/update': ['is-authenticated', 'is-admin'],
   'projects/update-background-image': ['is-authenticated', 'is-admin'],
   'projects/delete': ['is-authenticated', 'is-admin'],
+  'projects/import': ['is-authenticated', 'is-admin'],
 
   'project-memberships/create': ['is-authenticated', 'is-admin'],
   'project-memberships/delete': ['is-authenticated', 'is-admin'],

server/config/routes.js

@@ -24,6 +24,7 @@ module.exports.routes = {
   'GET /api/projects': 'projects/index',
   'POST /api/projects': 'projects/create',
   'PATCH /api/projects/:id': 'projects/update',
+  'POST /api/projects/import': 'projects/import',
   'POST /api/projects/:id/background-image': 'projects/update-background-image',
   'DELETE /api/projects/:id': 'projects/delete',
 

server/package.json

@@ -42,6 +42,7 @@
     "dotenv": "^8.2.0",
     "dotenv-cli": "^4.0.0",
     "filenamify": "^4.2.0",
+    "got": "^11.8.2",
     "jsonwebtoken": "^8.5.1",
     "knex": "^0.21.17",
     "lodash": "^4.17.20",