#833 Connecting boards to API #2 (wip)

metasfresh · Jun 20, 2017 · 3e99424 · 3e99424
1 parent 9285884
commit 3e99424
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "react-translate-component": "~0.14.0",
     "redux": "~3.5.2",
     "redux-thunk": "~2.1.0",
-    "sockjs-client": "~1.1.1",
+    "sockjs-client": "1.0.0",
     "stompjs": "~2.3.3"
   }
 }
diff --git a/src/actions/BoardActions.js b/src/actions/BoardActions.js
@@ -1,11 +1,23 @@
 import axios from 'axios';
 
-export function getView(entity, boardId, viewId, firstRow) {
+export function getView(boardId, viewId, firstRow) {
     return axios.get(
         config.API_URL +
-        '/' + entity + '/' + boardId +
+        '/board/' + boardId +
         '/newCardsView' +
         (viewId ? '/' + viewId : '') +
         (viewId ? '?firstRow=' + firstRow + '&pageLength=20' : '')
     );
 }
+
+export function addCard(boardId, laneId, cardId, index) {
+    return axios.post(
+        config.API_URL +
+        '/board/' + boardId +
+        '/card', {
+            "laneId": laneId,
+            "position": index,
+            "documentId": cardId
+        }
+    );
+}
diff --git a/src/assets/css/board.css b/src/assets/css/board.css
@@ -25,7 +25,7 @@
     background-color: $brand-bright-color;
 }
 
-.board-draggable-wrapper, .board-draggable-wrapper > * {
+.board-draggable-wrapper, .board-draggable-placeholder > * {
     height: 100%;
 }
 

diff --git a/src/components/board/Card.js b/src/components/board/Card.js
@@ -9,16 +9,23 @@ const cardTarget = {
         props.onDrop && props.onDrop(monitor.getItem(), props.laneId);
     },
     hover(props, monitor) {
-        const hoverIndex = props.index;
-        const dragIndex = monitor.getItem().index;
-
-        if(dragIndex === hoverIndex || !props.onHover){
+        if(
+            !props.onHover
+        ){
             return;
         }
 
+        if(
+             monitor.getItem().index === props.index &&
+             props.laneId === monitor.getItem().laneId
+        ){
+            return;
+        }
+
         props.onHover(monitor.getItem(), props.laneId, props.index);
 
-        monitor.getItem().index = hoverIndex;
+        monitor.getItem().index = props.index;
+        monitor.getItem().laneId = props.laneId;
     }
 };
 
@@ -33,8 +40,12 @@ const cardSource = {
         return {
             id: props.cardId,
             index: props.index,
+            initLaneId: props.laneId,
             laneId: props.laneId
         };
+    },
+    endDrag(props) {
+        props.onReject && props.onReject();
     }
 };
 
@@ -58,16 +69,22 @@ class Card extends Component {
 
     renderCard = () => {
         const {
-            index, caption, description, users, placeholder
+            index, caption, description, users, placeholder, connectDragSource,
+            connectDropTarget, onDelete
         } = this.props;
+
         if(placeholder){
-            return (<div className="card-placeholder" />);
+            return connectDropTarget(<div className="card-placeholder" />);
         }else{
-            return (
-                <div className='card'>
+            return connectDragSource(connectDropTarget(
+                <div className="card">
+                    <i
+                        className="meta-icon-close-1 float-xs-right"
+                        onClick={onDelete}
+                    />
                     <b>{caption}</b>
                     <p>{description}</p>
-                    <span className='tag tag-primary'>asd</span>
+                    <span className="tag tag-primary">asd</span>
                     {users.map((user, i) =>
                         <Avatar 
                             key={i}
@@ -78,17 +95,16 @@ class Card extends Component {
                         />
                     )}
                 </div>
-            )
+            ));
         }
     } 
 
     render() {
         const {
-            connectDragSource, connectDropTarget, targetIndicator, index,
-            laneId
+            targetIndicator, index, laneId
         } = this.props;
 
-        return connectDragSource(connectDropTarget(
+        return (
             <div>
                 {targetIndicator && <TargetIndicator
                     {...targetIndicator}
@@ -97,7 +113,7 @@ class Card extends Component {
                 />}
                 {this.renderCard()}
             </div>
-        ));
+        );
     }
 }
 

diff --git a/src/components/board/Lane.js b/src/components/board/Lane.js
@@ -10,13 +10,18 @@ class Lane extends Component {
 
     render() {
         const {
-            caption, cards, laneId, onHover, onDrop, targetIndicator
+            caption, cards, laneId, onHover, onDrop, targetIndicator, onReject
         } = this.props;
 
         return (
             <div className="board-lane">
                 <div className="board-lane-header">{caption}</div>
-                <div className="board-draggable-wrapper">
+                <div 
+                    className={
+                        'board-draggable-wrapper ' +
+                        (!cards.length ? 'board-draggable-placeholder ' : '')
+                    }
+                >
                     {!cards.length && <Card
                         index={0}
                         {...{laneId, onHover, onDrop, targetIndicator}}
@@ -25,7 +30,9 @@ class Lane extends Component {
                     {cards.map((card, i) => <Card
                         key={i}
                         index={i}
-                        {...{laneId, onHover, onDrop, targetIndicator}}
+                        {...{
+                            laneId, onHover, onDrop, onReject, targetIndicator
+                        }}
                         {...card} />
                     )}
                 </div>

diff --git a/src/components/board/Lanes.js b/src/components/board/Lanes.js
@@ -7,7 +7,7 @@ class Lanes extends Component {
     }
 
     render() {
-        const {lanes, onDrop, onHover, targetIndicator} = this.props;
+        const {lanes, onDrop, onHover, onReject, targetIndicator} = this.props;
 
         if(!lanes) return false;
 
@@ -16,7 +16,7 @@ class Lanes extends Component {
                 {lanes.map((lane, i) => (
                     <Lane 
                         key={i}
-                        {...{onDrop, onHover, targetIndicator}}
+                        {...{onDrop, onHover, onReject, targetIndicator}}
                         {...lane}
                     />)
                 )}

diff --git a/src/components/board/Sidenav.js b/src/components/board/Sidenav.js
@@ -16,8 +16,8 @@ class Sidenav extends Component {
     componentWillMount = () => {
         const {boardId} = this.props;
 
-        getView('board', boardId).then(res => {
-            getView('board', boardId, res.data.viewId, 0).then(res =>
+        getView(boardId).then(res => {
+            getView(boardId, res.data.viewId, 0).then(res =>
                 this.setState({
                     view: res.data
                 })

diff --git a/src/containers/Board.js b/src/containers/Board.js
@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import update from 'react-addons-update';
+import update from 'immutability-helper';
 
 import {getData, patchRequest} from '../actions/GenericActions';
 import {connectWS, disconnectWS} from '../actions/WindowActions';
+import {addCard} from '../actions/BoardActions';
 
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend, { NativeTypes } from 'react-dnd-html5-backend';
@@ -53,17 +54,25 @@ class Board extends Component {
 
     handleDrop = (card, targetLaneId) => {
         const {board} = this.state;
-        this.setState({
-            targetIndicator: {
-                laneId: null,
-                index: null
-            }
-        });
 
-        patchRequest(
-            'board', board.boardId, null, null, null, 'laneId', targetLaneId,
-            'card', card.id
-        );
+        const laneIndex = board.lanes.findIndex(l => l.laneId === targetLaneId);
+
+        if(card.initLaneId === 0) {
+            // Adding card
+            addCard(
+                board.boardId, targetLaneId, card.id, card.index
+            ).then(res => {
+                this.setState(update(this.state.board.lanes[laneIndex], {
+                    cards: {$push: [res.data]}
+                }))
+            });
+        }else{
+            // Moving card
+            patchRequest(
+                'board', board.boardId, null, null, null, 'laneId',
+                targetLaneId, 'card', card.id
+            );
+        }
     }
 
     handleHover = (card, targetLaneId, targetIndex) => {
@@ -74,6 +83,15 @@ class Board extends Component {
             }
         });
     }
+
+    clearTargetIndicator = () => {
+        this.setState({
+            targetIndicator: {
+                laneId: undefined,
+                index: undefined
+            }
+        });
+    }
 
     render() {
         const {
@@ -115,6 +133,7 @@ class Board extends Component {
                             key='board-lanes'
                             onDrop={this.handleDrop}
                             onHover={this.handleHover}
+                            onReject={this.clearTargetIndicator}
                             lanes={board && board.lanes}
                         />
                     </div>