ajout

WIM4.1/tp/tp5/ex1/todo.riot

@@ -2,7 +2,7 @@
 <h3>{ props.title }</h3>
 
 <ul>
-	<li each={ item in state.items }>
+	<li each={ item in state.items.filter(e => e.done == state.search || state.search === undefined ) }>
 		<label class={ item.done ? 'completed' : null }>
 			<input
 	   type="checkbox"
@@ -18,11 +18,11 @@
 	<button disabled={ !state.text }>
 		Add #{ state.items.length + 1 }
 	</button>
-	<button  onclick={ clear }>Clear done</button>
+	<button disabled={this.state.items.filter(e => e["done"]).length == 0} onclick={ clear }>Clear done</button>
 	<ul class="filters">
-		<li>  <a href="#">All</a></li>
-		<li>  <a href="#">Active</a></li>
-		<li>  <a href="#">Done</a></li>
+		<li>  <a onclick={() =>filtre(undefined)} href="#">All</a></li>
+		<li>  <a onclick={() => filtre(false)} href="#">Active</a></li>
+		<li>  <a onclick={() => filtre(true)} href="#">Done</a></li>
 	</ul>
 </form>
 	<script>
@@ -31,27 +31,46 @@
 				// initial state
 				this.state = {
 					items: props.items,
-					text: ''
+					text: '',
+					search: undefined
 				}
 			},
 			edit(e) {
 				// update only the text state
+				e.preventDefault()
 				this.update({
 					text: e.target.value
 				})
 			},
 			clear(e) {
+				e.preventDefault()
+				this.state.items = this.state.items.filter(e => e.done == false)
+
+				this.update()
 				// COMPLETEZ
 			},
 			add(e) {
 				// COMPLETEZ
-				this.idem.push(e)
-				this.update({items:  this.items })
+				e.preventDefault()
+				let tab = new Array()
+				tab["title"] = this.state.text
+				tab["done"] = false
+				this.state.items.push(tab)
+				this.$("form input").value = ""
+				this.state.text = "" 
+				this.update()
+
 			},
 			toggle(item) {
 				item.done = !item.done
 				// trigger a component update
 				this.update()
+			},
+			filtre(type) {
+				console.log(type + " and " + this.state.search)
+				this.update({
+					search: type
+				})
 			}
 		}
 	</script>