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

<todo>
<h3>{ props.title }</h3>

<ul>
	<li each={ item in state.items.filter(e => e.done == state.search || state.search === undefined ) }>
		<label class={ item.done ? 'completed' : null }>
			<input
	   type="checkbox"
	checked={ item.done }
	onclick={ () => toggle(item) } />
	{ item.title } 
		</label>
	</li>
</ul>

<form onsubmit={ add }>
	<input oninput={ edit } />
	<button disabled={ !state.text }>
		Add #{ state.items.length + 1 }
	</button>
	<button disabled={this.state.items.filter(e => e["done"]).length == 0} onclick={ clear }>Clear done</button>
	<ul class="filters">
		<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>
		export default {
			onBeforeMount(props, state) {
				// initial state
				this.state = {
					items: props.items,
					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
				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>
</todo>