Add ability to update card data inline

Author: JoeyLeadJig

src/actions/LaneActions.js

@@ -4,6 +4,7 @@ export const addCard = createAction('ADD_CARD')
 export const removeCard = createAction('REMOVE_CARD')
 export const moveCardAcrossLanes = createAction('MOVE_CARD')
 export const updateCards = createAction('UPDATE_CARDS')
+export const updateCard = createAction('UPDATE_CARD')
 export const updateLanes = createAction('UPDATE_LANES')
 export const updateLane = createAction('UPDATE_LANE')
 export const paginateLane = createAction('PAGINATE_LANE')

src/components/Card.js

@@ -9,6 +9,7 @@ import {
   Detail,
   Footer
 } from 'rt/styles/Base'
+import InlineInput from 'rt/widgets/InlineInput'
 import Tag from './Card/Tag'
 import DeleteButton from 'rt/widgets/DeleteButton'
 
@@ -25,15 +26,22 @@ class Card extends Component {
       tagStyle,
       onClick,
       onDelete,
+      onChange,
       className,
       id,
       title,
       label,
       description,
       tags,
-      cardDraggable
+      cardDraggable,
+      editable,
+      t
     } = this.props
 
+    const updateCard = (card) => {
+      onChange({...card, id})
+    }
+
     return (
       <MovableCardWrapper
         data-id={id}
@@ -42,11 +50,17 @@ class Card extends Component {
         className={className}
       >
         <CardHeader>
-          <CardTitle draggable={cardDraggable}>{title}</CardTitle>
-          <CardRightContent>{label}</CardRightContent>
+          <CardTitle draggable={cardDraggable}>
+            {editable ? <InlineInput value={title} border placeholder={t('placeholder.title')} resize='vertical' onSave={(value) => updateCard({title: value})} /> : title}
+          </CardTitle>
+          <CardRightContent>
+            {editable ? <InlineInput value={label} border placeholder={t('placeholder.label')} resize='vertical' onSave={(value) => updateCard({label: value})} /> : label}
+          </CardRightContent>
           {showDeleteButton && <DeleteButton onClick={this.onDelete} />}
         </CardHeader>
-        <Detail>{description}</Detail>
+        <Detail>
+          {editable ? <InlineInput value={description} border placeholder={t('placeholder.description')} resize='vertical' onSave={(value) => updateCard({description: value})} /> : description}
+        </Detail>
         {tags && tags.length> 0 && (
           <Footer>
             {tags.map(tag => (

src/controllers/BoardContainer.js

@@ -76,6 +76,8 @@ class BoardContainer extends Component {
             })
           case 'UPDATE_CARDS':
             return actions.updateCards({laneId: event.laneId, cards: event.cards})
+          case 'UPDATE_CARD':
+            return actions.updateCard({laneId: event.laneId, updatedCard: event.card})
           case 'UPDATE_LANES':
             return actions.updateLanes(event.lanes)
           case 'UPDATE_LANE':
@@ -145,6 +147,7 @@ class BoardContainer extends Component {
       'onBeforeCardDelete',
       'onCardDelete',
       'onCardAdd',
+      'onCardUpdate',
       'onLaneClick',
       'laneSortFunction',
       'draggable',
@@ -221,6 +224,7 @@ BoardContainer.propTypes = {
   onBeforeCardDelete: PropTypes.func,
   onCardDelete: PropTypes.func,
   onCardAdd: PropTypes.func,
+  onCardUpdate: PropTypes.func,
   onLaneAdd: PropTypes.func,
   onLaneDelete: PropTypes.func,
   onLaneClick: PropTypes.func,
@@ -253,6 +257,7 @@ BoardContainer.defaultProps = {
   handleDragEnd: () => {},
   handleLaneDragStart: () => {},
   handleLaneDragEnd: () => {},
+  onCardUpdate: () => {},
   onLaneAdd: () => {},
   onLaneDelete: () => {},
   onCardMoveAcrossLanes: () => {},

src/controllers/Lane.js

@@ -141,6 +141,11 @@ class Lane extends Component {
     }
   }
 
+  updateCard = updatedCard => {
+    this.props.actions.updateCard({laneId: this.props.id, updatedCard})
+    this.props.onCardUpdate(this.props.id, updatedCard)
+  }
+
   renderDragContainer = isDraggingOver => {
     const {
       id,
@@ -170,9 +175,12 @@ class Lane extends Component {
           className="react-trello-card"
           onDelete={onDeleteCard}
           onClick={e => this.handleCardClick(e, card)}
+          onChange={updatedCard => this.updateCard(updatedCard)}
           showDeleteButton={!hideCardDeleteIcon}
           tagStyle={tagStyle}
           cardDraggable={cardDraggable}
+          editable={editable}
+          t={t}
           {...card}
         />
       )
@@ -292,6 +300,7 @@ Lane.propTypes = {
   onBeforeCardDelete: PropTypes.func,
   onCardDelete: PropTypes.func,
   onCardAdd: PropTypes.func,
+  onCardUpdate: PropTypes.func,
   onLaneDelete: PropTypes.func,
   onLaneUpdate: PropTypes.func,
   onLaneClick: PropTypes.func,
@@ -312,7 +321,8 @@ Lane.defaultProps = {
   label: undefined,
   editable: false,
   onLaneUpdate: () => {},
-  onCardAdd: () => {}
+  onCardAdd: () => {},
+  onCardUpdate: () => {}
 }
 
 const mapDispatchToProps = dispatch => ({

src/helpers/LaneHelper.js

@@ -95,6 +95,24 @@ const LaneHelper = {
     return update(state, {lanes: {$set: lanes}})
   },
 
+  updateCardForLane: (state, {laneId, updatedCard}) => {
+    const lanes = state.lanes.map(lane => {
+      if (lane.id === laneId) {
+        const cards = lane.cards.map(card => {
+          if (card.id === updatedCard.id) {
+            return {...card, ...updatedCard}
+          } else {
+            return card
+          }
+        })
+        return update(lane, {cards: {$set: cards}})
+      } else {
+        return lane
+      }
+    })
+    return update(state, {lanes: {$set: lanes}})
+  },
+
   updateLanes: (state, lanes) => {
     return {...state, ...{lanes: lanes}}
   },

src/reducers/BoardReducer.js

@@ -13,6 +13,8 @@ const boardReducer = (state = {lanes: []}, action) => {
       return Lh.moveCardAcrossLanes(state, payload)
     case 'UPDATE_CARDS':
       return Lh.updateCardsForLane(state, payload)
+    case 'UPDATE_CARD':
+      return Lh.updateCardForLane(state, payload)
     case 'UPDATE_LANES':
       return Lh.updateLanes(state, payload)
     case 'UPDATE_LANE':

src/styles/Base.js

@@ -156,7 +156,7 @@ export const Title = styled.span`
 `
 
 export const RightContent = styled.span`
-  width: 30%;
+  width: 38%;
   text-align: right;
   padding-right: 10px;
   font-size: 13px;
@@ -266,19 +266,21 @@ export const CardForm = styled.div`
 export const InlineInput = styled.textarea`
   overflow-x: hidden; /* for Firefox (issue #5) */
   word-wrap: break-word;
-  min-height: 28px;
+  min-height: 18px;
   max-height: 112px; /* optional, but recommended */
   resize: none;
   width: 100%;
-  height: 28px;
-  font-size: 15px;
-  line-height: 20px;
+  height: 18px;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  text-align: inherit;
   background-color: transparent;
   box-shadow: none;
   box-sizing: border-box;
   border-radius: 3px;
   border: 0;
-  padding: 4px 8px;
+  padding: 0 8px;
   outline: 0;
   ${props => props.border && css`
     &:focus {

stories/EditableBoard.story.js

@@ -71,18 +71,19 @@ storiesOf('Editable Board', module)
     {info: 'Can hide the add card button on specific lanes'}
   )
   .add(
-    'Inline Edit Lane Title',
+    'Inline Edit Lane Title and Cards',
     () => {
       return (
         <Board
           data={smallData}
           editable
           canAddLanes
           editLaneTitle
+          onCardUpdate={ (cardId, data) => debug(`onCardUpdate: ${cardId} -> ${JSON.stringify(data, null, 2)}`)}
           onLaneUpdate={ (laneId, data) => debug(`onLaneUpdate: ${laneId} -> ${data.title}`)}
           onLaneAdd={t => debug('You added a line with title ' + t.title)}
         />
       )
     },
-    {info: 'Allow edit lane title'}
+    {info: 'Allow edit lane title and cards'}
   )