finish implementing the lanes

jvberta · jvberta · commit b3caf5701b4b · 2015-11-20T21:47:36.000-03:00
diff --git a/app/actions/LaneActions.js b/app/actions/LaneActions.js
@@ -1,4 +1,5 @@
 import alt from '../libs/alt';
 
-export default alt.generateActions('create','attachToLane',
-	'detachFromLane');
+export default alt.generateActions(
+	'create','update','delete',
+	'attachToLane','detachFromLane');
diff --git a/app/components/App.jsx b/app/components/App.jsx
@@ -23,4 +23,7 @@ export default class App extends React.Component {
   addItem() {
     LaneActions.create({name: 'New lane'});
   }
+
+  
+
 }
diff --git a/app/components/Editable.jsx b/app/components/Editable.jsx
@@ -35,7 +35,7 @@ export default class Note extends React.Component {
   }
   renderValue() {
     const onDelete = this.props.onDelete;
-
+    
     return (
       <div onClick={this.edit}>
         <span className="value">{this.props.value}</span>
diff --git a/app/components/Lane.jsx b/app/components/Lane.jsx
@@ -15,6 +15,7 @@ export default class Lane extends React.Component {
 		this.addNote = this.addNote.bind(this, id);
 		this.deleteNote = this.deleteNote.bind(this, id);
 		this.editName = this.editName.bind(this,id);
+		//this.deleteLane = this.deleteLane.bind(this,id);
 	}
 	render() {
 		const {lane, ...props} = this.props;
@@ -23,7 +24,8 @@ export default class Lane extends React.Component {
 			<div {...props}>
 				<div className="lane-header">
 					<Editable className="lane-name" value={lane.name}
-					onEdit={this.editName}/> 
+					onEdit={this.editName}
+					/*onDelete={this.deleteLane}*//> 
 					<div className="lane-add-note">
 						<button onClick={this.addNote}>+</button>
 					</div>
@@ -52,6 +54,15 @@ export default class Lane extends React.Component {
 		NoteActions.delete(noteId);
 	}
 	editName(id,name){
-		console.log('edited lane name',id,name);
+		if(name) {
+			LaneActions.update({id, name});
+		}
+		else {
+			LaneActions.delete(id);
+		}
 	}
+
+	/*deleteLane(id){
+		LaneActions.delete(id);
+	}*/
 }
diff --git a/app/components/Lanes.jsx b/app/components/Lanes.jsx
@@ -10,4 +10,6 @@ export default class Lanes extends React.Component {
   renderLane(lane) {
     return <Lane className="lane" key={lane.id} lane={lane} />;
   }
+
+  
 }
diff --git a/app/main.css b/app/main.css
@@ -1,51 +1,87 @@
 body {
   background: #f0f0f0;
+
   font-family: sans-serif;
 }
 
-.add-note{
-	background-color: #fdfdfd;
-	border: 1px solid #ccc;
-}
+.lane {
+  display: inline-block;
+
+  margin: 1em;
 
-.notes{
-	margin: 0.5em;	
-	padding-left:0;
+  background-color: #efefef;
+  border: 1px solid #ccc;
+  border-radius: 0.5em;
 
-	max-width: 10em;
-	list-style: none;
+  min-width: 10em;
+  vertical-align: top;
 }
 
-.note{
-	margin-bottom: 0.5em;
-	padding: 0.5em;
+.lane-header {
+  overflow: auto;
+
+  padding: 1em;
+
+  color: #efefef;
+  background-color: #333;
 
-	background-color: #fdfdfd;
-	box-shadow: 0 0 0.3em 0.03em rgba(0,0,0,0.3);
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
 }
 
-.note:hover{
-	box-shadow: 0 0 0.3em 0.03em rgba(0,0,0,0.7);
-	transition: 0.6s;
+.lane-name {
+  float: left;
 }
 
-.note .value{
-	display: inline-block;
+.lane-add-note {
+  float: right;
+
+  margin-left: 0.5em;
 }
 
-.note .delete{
-	float: right;
+.add-lane, .lane-add-note button {
+  background-color: #fdfdfd;
+  border: 1px solid #ccc;
+}
 
-	padding: 0;
+.notes {
+  margin: 0.5em;
+  padding-left: 0;
 
-	background-color: #fdfdfd;
-	border:none;
+  max-width: 10em;
+  list-style: none;
+}
 
-	cursor: pointer;
+.note {
+  margin-bottom: 0.5em;
+  padding: 0.5em;
 
-	visibility: hidden;
+  background-color: #fdfdfd;
+  box-shadow: 0 0 0.3em .03em rgba(0,0,0,.3);
 }
+.note:hover {
+  box-shadow: 0 0 0.3em .03em rgba(0,0,0,.7);
 
-.note:hover .delete{
-	visibility: visible;
+  transition: .6s;
+}
+
+.note .value {
+  /* force to use inline-block so that it gets minimum height */
+  display: inline-block;
+}
+
+.note .delete {
+  float: right;
+
+  padding: 0;
+
+  background-color: #fdfdfd;
+  border: none;
+
+  cursor: pointer;
+
+  visibility: hidden;
+}
+.note:hover .delete {
+  visibility: visible;
 }
diff --git a/app/stores/LaneStore.js b/app/stores/LaneStore.js
@@ -20,6 +20,34 @@ class LaneStore {
 		});
 	}
 
+	update({id,name}){
+		const lanes = this.lanes;
+		const targetId = this.findLane(id);
+
+		if(targetId < 0) {
+			return;
+		}
+
+		lanes[targetId].name = name;
+
+		this.setState({lanes});
+
+	}
+
+	delete(id){
+		const lanes = this.lanes;
+		const targetId = this.findLane(id);
+
+		if(targetId < 0) {
+			return;
+		}
+
+		this.setState({
+			lanes: lanes.slice(0, targetId).concat(lanes.slice(targetId + 1))
+		});
+
+	}
+
 	attachToLane({laneId,noteId}){
 		if(!noteId){
 			this.waitFor(NoteStore);

Original file line number	Diff line number	Diff line change
`@@ -23,4 +23,7 @@ export default class App extends React.Component {`
`23`	`23`	`addItem() {`
`24`	`24`	`LaneActions.create({name: 'New lane'});`
`25`	`25`	`}`
	`26`	`+`
	`27`	`+`
	`28`	`+`
`26`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export default class Note extends React.Component {`
`35`	`35`	`}`
`36`	`36`	`renderValue() {`
`37`	`37`	`const onDelete = this.props.onDelete;`
`38`		`-`
	`38`	`+`
`39`	`39`	`return (`
`40`	`40`	`<div onClick={this.edit}>`
`41`	`41`	`<span className="value">{this.props.value}</span>`
Original file line number	Diff line number	Diff line change
`@@ -10,4 +10,6 @@ export default class Lanes extends React.Component {`
`10`	`10`	`renderLane(lane) {`
`11`	`11`	`return <Lane className="lane" key={lane.id} lane={lane} />;`
`12`	`12`	`}`
	`13`	`+`
	`14`	`+`
`13`	`15`	`}`