add remove column button

src/index.js

@@ -20,11 +20,6 @@ class App extends React.Component {
         this.setState(this.model.getdata())
     }
 
-    editCardName = (name, colId, cardId) => {
-        this.model.editCardName(name, colId, cardId);
-        this.setState(this.model.getdata())
-    }
-
     createColumn = (name) => {
         this.model.createColumn(name);
         this.setState(this.model.getdata())
@@ -40,6 +35,11 @@ class App extends React.Component {
         this.setState(this.model.getdata())
     }
 
+    removeColumn = (columnId) => {
+        this.model.removeColumn(columnId)
+        this.setState(this.model.getdata())
+    }
+
     render() {
         return [
             e(Toolbar, {key: 'toolbar', name:"Randomize", action: ()=>{
@@ -48,12 +48,11 @@ class App extends React.Component {
                 }}),
             e(Kanban, {key: 'kanban', state: this.state, moveCard: this.moveCard,
                 createColumn: this.createColumn,
-                createCard: this.createCard, 
-                removeCardFromColumn: this.removeCardFromColumn,
-                editCardName: this.editCardName})
+                createCard: this.createCard, removeCardFromColumn: this.removeCardFromColumn,
+                removeColumn: this.removeColumn})
         ]
     }
 }
 
 const domContainer = document.querySelector('.kanban');
-ReactDOM.render(e(App), domContainer);
+ReactDOM.render(e(App), domContainer);

src/model.js

@@ -11,7 +11,12 @@ export class Model {
         return state.columns.find(c => c.id === id)
     }
     removeCardFromColumn(cardId) {
-        state.columns.forEach(col => {col.cards = col.cards.filter(c => c.id !== cardId)})
+        state.columns.forEach(col => {
+            col.cards = col.cards.filter(c => c.id !== cardId)
+        })
+    }
+    removeColumn(columnId) {
+        state.columns = state.columns.filter(column => column.id !== columnId)
     }
     addCardToColumn(colId, card, index) {
         let col = this.getColumnById(colId)
@@ -24,10 +29,7 @@ export class Model {
         let col = this.getColumnById(id)
         col.cards.push({id: uuidv4(), text: name})
     }
-    editCardName(name, colId, cardId) {
-        let col = this.getColumnById(colId)
-        col.cards.find(c => c.id === cardId).text = name
-    }
+
 }
 
 function uuidv4() {
@@ -67,4 +69,4 @@ var state = {
             cards: [{id: 'card6', text: 'tex6'}, {id: 'card7', text: 'tex7'}, {id: 'card8', text: 'tex8'}]
         }
     ]
-}
+}

src/view.js

@@ -2,64 +2,38 @@ import React from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 
 class KanbanCard extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = {editMode: false}
-    }
-
-    beginEditMode = () => { this.setState({name: this.props.card.text, editMode: true}); }
-    endEditMode = () => { this.setState({editMode: false}); }
-
-    onAccept = () => {
-        this.props.editCardName(this.state.name, this.props.column.id, this.props.card.id);
-        this.endEditMode();
-    }
-
-    handleNameChange = (event) => {
-        this.setState({name: event.target.value});
-    }
-
     render () {
-        if (this.state.editMode)
-            return <Draggable draggableId={this.props.card.id} index={this.props.index}>
-                {
-                    (provided) => <div className='card' ref={provided.innerRef}
-                                    {...provided.dragHandleProps} {...provided.draggableProps}>
-                        <input type='text' value={this.state.name} onChange={this.handleNameChange}/>
-                        <input type='button' value='OK' onClick={this.onAccept} />
-                        <input type='button' value='Cancel' onClick={this.endEditMode} />
+        return <Draggable draggableId={this.props.card.id} index={this.props.index}>
+            {
+                (provided) => <div className='card' ref={provided.innerRef}
+                         {...provided.dragHandleProps} {...provided.draggableProps}>
+                        {this.props.card.text}
+                        {provided.placeholder}
+                        <RemoveCardButton removeCard={this.props.removeCardFromColumn} card={this.props.card.id}/>
+                        {/*column={this.props.column.id}/>*/}
                     </div>
-                }
-            </Draggable>
-        else
-            return <Draggable draggableId={this.props.card.id} index={this.props.index}>
-                {
-                    (provided) => <div className='card' onClick={this.beginEditMode} ref={provided.innerRef}
-                            {...provided.dragHandleProps} {...provided.draggableProps}>
-                            {this.props.card.text}
-                            {provided.placeholder}
-                            <RemoveCardButton removeCard={this.props.removeCardFromColumn} card={this.props.card.id}/>
-                            {/*column={this.props.column.id}/>*/}
-                        </div>
-                }
-            </Draggable>
+            }
+        </Draggable>
     }
 }
 
 class KanbanColumn extends React.Component {
     render () {
         return <div className='col'>
-            <div className='col-header'>{this.props.column.name}</div>
+            <div className='col-header'>{this.props.column.name}
+                <RemoveColumnButton removeColumn={this.props.removeColumn} column={this.props.column.id}/>
+            </div>
             <Droppable droppableId={this.props.column.id}>
                 {
                     (provided) => <div>
                         <div ref={provided.innerRef} {...provided.droppableProps} {...provided.droppablePlaceholder}>
                             {
-                                this.props.column.cards.map((c, i) => <KanbanCard key={c.id} index={i} card={c} removeCardFromColumn={this.props.removeCardFromColumn} column={this.props.column} editCardName={this.props.editCardName}/>)
+                                this.props.column.cards.map((c, i) => <KanbanCard key={c.id} index={i} card={c} removeCardFromColumn={this.props.removeCardFromColumn}/>)
                             }
                         </div>
-                        {provided.placeholder}
                         <AddCardButton addCard={this.props.createCard} column={this.props.column.id}/>
+                        {/*removeCard={this.props.removeCardFromColumn} card={this.props.card.id}*/}
+
                     </div>
                 }
             </Droppable>
@@ -106,6 +80,7 @@ export class AddColumnButton extends React.Component {
     }
 }
 
+
 export class AddCardButton extends React.Component
 {
     constructor(props) {
@@ -166,6 +141,25 @@ export class RemoveCardButton extends React.Component
     }
 }
 
+export class RemoveColumnButton extends React.Component
+{
+    constructor(props) {
+        super(props)
+    }
+    remove = () => {
+        this.props.removeColumn(this.props.column)
+    }
+
+    render() {
+        return (
+            <button className="rm_column_button" style={{ float: "right" }} onClick={this.remove}>
+                X
+            </button>
+
+        );
+    }
+}
+
 
 export class Kanban extends React.Component {
     constructor(props) {
@@ -182,7 +176,7 @@ export class Kanban extends React.Component {
             {
                 this.props.state.columns.map((c) => <KanbanColumn key={c.id} column={c} createCard={this.props.createCard}
                                                                   removeCardFromColumn={this.props.removeCardFromColumn}
-                                                                  editCardName={this.props.editCardName}/>)
+                                                                  removeColumn={this.props.removeColumn}/>)
             }
             <AddColumnButton createColumn={this.props.createColumn}/>
         </DragDropContext>
@@ -194,4 +188,4 @@ export class Toolbar extends React.Component {
         return <input type='button' value={this.props.name} onClick={this.props.action}/>
     }
 }
-
+