78 lines
1.7 KiB
Plaintext
78 lines
1.7 KiB
Plaintext
<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>
|