fix: Add ability to add a new lane to the board

Author: rcdexta

src/actions/BoardActions.js

@@ -1,3 +1,4 @@
 import {createAction} from 'redux-actions'
 
 export const loadBoard = createAction('LOAD_BOARD')
+export const addLane = createAction('ADD_LANE')

src/components/BoardContainer.js

@@ -1,43 +1,26 @@
 import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import pick from 'lodash/pick'
-import isEqual from 'lodash/isEqual'
-import {BoardDiv} from '../styles/Base'
 import {bindActionCreators} from 'redux'
 import {connect} from 'react-redux'
-import Lane from './Lane'
 import Container from '../dnd/Container'
 import Draggable from '../dnd/Draggable'
+import PropTypes from 'prop-types'
+import pick from 'lodash/pick'
+import isEqual from 'lodash/isEqual'
+import {BoardDiv, LaneSection} from '../styles/Base'
+import {NewLaneButton} from '../styles/Elements'
+import Lane from './Lane'
+import NewLane from './NewLane'
+
 import * as boardActions from '../actions/BoardActions'
 import * as laneActions from '../actions/LaneActions'
 
 class BoardContainer extends Component {
-  wireEventBus = () => {
-    const {actions, eventBusHandle} = this.props
-    let eventBus = {
-      publish: event => {
-        switch (event.type) {
-          case 'ADD_CARD':
-            return actions.addCard({laneId: event.laneId, card: event.card})
-          case 'REMOVE_CARD':
-            return actions.removeCard({laneId: event.laneId, cardId: event.cardId})
-          case 'REFRESH_BOARD':
-            return actions.loadBoard(event.data)
-          case 'MOVE_CARD':
-            return actions.moveCardAcrossLanes({
-              fromLaneId: event.fromLaneId,
-              toLaneId: event.toLaneId,
-              cardId: event.cardId,
-              index: event.index
-            })
-          case 'UPDATE_LANES':
-            return actions.updateLanes(event.lanes)
-        }
-      }
-    }
-    eventBusHandle(eventBus)
+  //+add 2018.08.23
+  state = {
+    addLaneMode: false
   }
 
+  //+end
   componentWillMount() {
     const {actions, eventBusHandle} = this.props
     actions.loadBoard(this.props.data)
@@ -58,27 +41,81 @@ class BoardContainer extends Component {
     }
   }
 
-  getCardDetails = (laneId, cardIndex) => {
-    return this.props.reducerData.lanes.find(lane => lane.id === laneId).cards[cardIndex]
-  }
-
   onDragStart = ({payload}) => {
     const {handleLaneDragStart} = this.props
     handleLaneDragStart(payload.id)
   }
 
   onLaneDrop = ({removedIndex, addedIndex, payload}) => {
     const {actions, handleLaneDragEnd} = this.props
-    actions.moveLane({oldIndex: removedIndex, newIndex: addedIndex})
-    handleLaneDragEnd(payload.id, addedIndex)
+    if (removedIndex !== addedIndex) {//  2018.08.22
+      // actions.moveLane({oldIndex: removedIndex, newIndex: addedIndex});
+      handleLaneDragEnd(removedIndex, addedIndex, payload)
+    }
+  }
+  getCardDetails = (laneId, cardIndex) => {
+    return this.props.reducerData.lanes.find(lane => lane.id === laneId).cards[cardIndex]
   }
-
   getLaneDetails = index => {
     return this.props.reducerData.lanes[index]
   }
 
+  wireEventBus = () => {
+    const {actions, eventBusHandle} = this.props
+    let eventBus = {
+      publish: event => {
+        switch (event.type) {
+          case 'ADD_CARD':
+            return actions.addCard({laneId: event.laneId, card: event.card})
+          case 'REMOVE_CARD':
+            return actions.removeCard({laneId: event.laneId, cardId: event.cardId})
+          case 'REFRESH_BOARD':
+            return actions.loadBoard(event.data)
+          case 'MOVE_CARD':
+            return actions.moveCardAcrossLanes({
+              fromLaneId: event.fromLaneId,
+              toLaneId: event.toLaneId,
+              cardId: event.cardId,
+              index: event.index
+            });
+          case 'UPDATE_LANES':
+            return actions.updateLanes(event.lanes)
+        }
+      },
+    };
+    eventBusHandle(eventBus)
+  }
+
+  // + add
+  hideEditableLane = () => {
+    this.setState({addLaneMode: false})
+  }
+
+  showEditableLane = () => {
+    this.setState({addLaneMode: true})
+  }
+
+  addNewLane = params => {
+    this.hideEditableLane()
+    this.props.actions.addLane(params)
+  }
+
+  renderNewLane = () => {
+    const {newLaneTemplate} = this.props
+    if (newLaneTemplate) {
+      const newCardWithProps = React.cloneElement(newLaneTemplate, {
+        onCancel: this.hideEditableLane,
+        onAdd: this.addNewLane
+      })
+      return <span>{newCardWithProps}</span>
+    } else {
+      return <NewLane onCancel={this.hideEditableLane} onAdd={this.addNewLane}/>
+    }
+  }
+
   render() {
-    const {id, reducerData, draggable, laneDraggable, laneDragClass, style, ...otherProps} = this.props
+    const {id, reducerData, draggable, laneDraggable, laneDragClass, style, addLaneTitle, editable, ...otherProps} = this.props
+    const {addLaneMode} = this.state
     // Stick to whitelisting attributes to segregate board and lane props
     const passthroughProps = pick(this.props, [
       'onLaneScroll',
@@ -94,14 +131,17 @@ class BoardContainer extends Component {
       'editable',
       'hideCardDeleteIcon',
       'customCardLayout',
-      'newCardTemplate',
       'customLaneHeader',
       'tagStyle',
       'handleDragStart',
       'handleDragEnd',
       'cardDragClass',
-      'children'
-    ])
+      'children',
+      'addLaneTitle',
+      'addCardTitle',
+      'newLaneTemplate',
+      'newCardTemplate'
+    ]);
 
     return (
       <BoardDiv style={style} {...otherProps} draggable={false}>
@@ -110,9 +150,10 @@ class BoardContainer extends Component {
           onDragStart={this.onDragStart}
           dragClass={laneDragClass}
           onDrop={this.onLaneDrop}
-          lockAxis={'x'}
+          lockAxis="x"
           getChildPayload={index => this.getLaneDetails(index)}
-          groupName={`TrelloBoard${id}`}>
+          groupName={`TrelloBoard${id}`}
+        >
           {reducerData.lanes.map((lane, index) => {
             const {id, droppable, ...otherProps} = lane
             const laneToRender = (
@@ -125,16 +166,25 @@ class BoardContainer extends Component {
                 {...otherProps}
                 {...passthroughProps}
               />
-            )
+            );
             return draggable && laneDraggable ? (
               <Draggable key={lane.id}>{laneToRender}</Draggable>
             ) : (
               <span key={lane.id}>{laneToRender}</span>
-            )
+            );
           })}
         </Container>
+        <Container
+          orientation="horizontal"
+        >
+          {editable && !addLaneMode ? (
+            <LaneSection style={{width: 200}}>
+              <NewLaneButton onClick={this.showEditableLane}>{addLaneTitle}</NewLaneButton>
+            </LaneSection>
+          ) : (addLaneMode && this.renderNewLane())}
+        </Container>
       </BoardDiv>
-    )
+    );
   }
 }
 
@@ -161,15 +211,17 @@ BoardContainer.propTypes = {
   handleLaneDragStart: PropTypes.func,
   handleLaneDragEnd: PropTypes.func,
   customCardLayout: PropTypes.bool,
-  newCardTemplate: PropTypes.node,
   customLaneHeader: PropTypes.element,
   style: PropTypes.object,
   tagStyle: PropTypes.object,
   laneDraggable: PropTypes.bool,
   cardDraggable: PropTypes.bool,
   cardDragClass: PropTypes.string,
-  laneDragClass: PropTypes.string
-}
+  laneDragClass: PropTypes.string,
+  addLaneTitle: PropTypes.string,
+  addCardTitle: PropTypes.string,
+  newLaneTemplate: PropTypes.node
+};
 
 BoardContainer.defaultProps = {
   onDataChange: () => {},
@@ -184,12 +236,14 @@ BoardContainer.defaultProps = {
   laneDraggable: true,
   cardDraggable: true,
   cardDragClass: 'react_trello_dragClass',
-  laneDragClass: 'react_trello_dragLaneClass'
-}
+  laneDragClass: 'react_trello_dragLaneClass',
+  addLaneTitle: '+ Add another lane',
+  addCardTitle: 'Add Card'
+};
 
 const mapStateToProps = state => {
   return state.lanes ? {reducerData: state} : {}
-}
+};
 
 const mapDispatchToProps = dispatch => ({actions: bindActionCreators({...boardActions, ...laneActions}, dispatch)})
 

src/components/NewLane.js

@@ -0,0 +1,38 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {LaneTitle, NewLaneButtons, Section} from '../styles/Base'
+import EditableLabel from './widgets/EditableLabel'
+import {AddButton, CancelButton} from '../styles/Elements'
+
+class NewLane extends Component {
+  updateField = (field, value) => {
+    this.setState({[field]: value})
+  }
+
+  handleAdd = () => {
+    this.props.onAdd(this.state)
+  }
+
+  render() {
+    const {onCancel} = this.props
+    return (
+        <Section>
+          <LaneTitle>
+            <EditableLabel placeholder="title" onChange={val => this.updateField('title', val)} autoFocus/>
+          </LaneTitle>
+          <NewLaneButtons>
+            <AddButton onClick={this.handleAdd}>Add</AddButton>
+            <CancelButton onClick={onCancel}>Cancel</CancelButton>
+          </NewLaneButtons>
+        </Section>
+    )
+  }
+}
+
+NewLane.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onAdd: PropTypes.func.isRequired
+}
+NewLane.defaultProps = {}
+
+export default NewLane

src/helpers/LaneHelper.js

@@ -1,4 +1,5 @@
 import update from 'immutability-helper'
+import uuidv1 from 'uuid/v1'
 
 const LaneHelper = {
   initialiseLanes: (state, {lanes}) => {
@@ -40,6 +41,11 @@ const LaneHelper = {
     return update(state, {lanes: {$set: newLanes}})
   },
 
+  addLane: (state, lane) => {
+    const newLane = {...lane, id: uuidv1(), cards: []}
+    return update(state, {lanes: {$push: [newLane]}})
+  },
+
   removeCardFromLane: (state, {laneId, cardId}) => {
     const lanes = state.lanes.map(lane => {
       if (lane.id === laneId) {

src/reducers/BoardReducer.js

@@ -19,6 +19,8 @@ const boardReducer = (state = {lanes: []}, action) => {
       return Lh.paginateLane(state, payload)
     case 'MOVE_LANE':
       return Lh.moveLane(state, payload)
+    case 'ADD_LANE':
+      return Lh.addLane(state, payload)
     default:
       return state
   }

src/styles/Base.js

@@ -22,7 +22,7 @@ injectGlobal`
 `
 
 export const BoardDiv = styled.div`
-  background-color: #23719f;
+  background-color: #3179BA;
   overflow-y: hidden;
   padding: 5px;
   color: #393939;
@@ -163,3 +163,28 @@ export const AddCardLink = styled.a`
     text-decoration: underline;
   }
 `
+
+export const LaneTitle = styled.div`
+  font-size: 15px;
+  width:268px;
+  height: auto;
+`
+
+export const LaneSection = styled.section`
+  background-color: #2B6AA3;
+  border-radius: 3px;
+  margin: 5px ;
+  position: relative;
+  padding: 5px;
+  display: inline-flex;
+  height: auto;
+  flex-direction: column;
+`
+
+export const NewLaneSection = styled(LaneSection)`
+  background-color: #E0E3E6;
+`
+
+export const NewLaneButtons = styled.div`
+  margin-top: 10px;
+`

src/styles/Elements.js

@@ -139,3 +139,18 @@ export const CancelButton = styled.button`
   cursor: pointer;
   margin-bottom: 0;
 `
+export const NewLaneButton = styled.button`
+  background: #2B6AA3;
+  border: none; 
+  color: #fff;
+  transition: background 0.3s ease;
+  min-height: 32px;
+  padding: 4px 16px;
+  vertical-align: top;
+  margin-top: 0; 
+  margin-right: 0px; 
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  margin-bottom: 0;
+`

stories/EditableBoard.story.js

@@ -5,6 +5,7 @@ import {storiesOf} from '@storybook/react'
 import Board from '../src'
 
 const data = require('./data/base.json')
+const smallData = require('./data/data-sort')
 
 class NewCard extends Component {
   updateField = (field, evt) => {
@@ -80,3 +81,9 @@ storiesOf('Editable Board', module)
       return <Board data={data} editable newCardTemplate={<NewCard />} />
     })
   )
+  .add(
+    'Add New Lane',
+    withInfo('Allow adding new lane')(() => {
+      return <Board data={smallData} editable />
+    })
+  )