90 lines
1.8 KiB
JavaScript
90 lines
1.8 KiB
JavaScript
|
<todo>
|
||
|
|
<h3>{ props.title }</h3>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li each={ item in state.items }>
|
||
|
|
<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 id='clearDone' 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>
|
||
|
|
</ul>
|
||
|
|
</form>
|
||
|
|
<script>
|
||
|
|
export default function todos(){
|
||
|
|
return {
|
||
|
|
onBeforeMount(props, state) {
|
||
|
|
// initial state
|
||
|
|
this.state = {
|
||
|
|
items: props.items,
|
||
|
|
text: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
edit(e) {
|
||
|
|
// update only the text state
|
||
|
|
this.update({
|
||
|
|
text: e.target.value
|
||
|
|
})
|
||
|
|
},
|
||
|
|
clear(e) {
|
||
|
|
// COMPLETEZ
|
||
|
|
this.state.items = this.state.items.filter(item => !item.done);
|
||
|
|
this.update({
|
||
|
|
items: this.state.items
|
||
|
|
});
|
||
|
|
this.griseButtonDone();
|
||
|
|
},
|
||
|
|
add(e) {
|
||
|
|
// COMPLETEZ
|
||
|
|
e.preventDefault()
|
||
|
|
if (this.state.text) {
|
||
|
|
const newItem = {
|
||
|
|
title: this.state.text,
|
||
|
|
done: false
|
||
|
|
};
|
||
|
|
this.state.items.push(newItem);
|
||
|
|
this.update({
|
||
|
|
items: this.state.items
|
||
|
|
});
|
||
|
|
this.$("form input").value = '';
|
||
|
|
this.griseButtonDone();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
toggle(item) {
|
||
|
|
item.done = !item.done
|
||
|
|
// trigger a component update
|
||
|
|
this.update()
|
||
|
|
this.griseButtonDone();
|
||
|
|
},
|
||
|
|
griseButtonDone(){
|
||
|
|
let i, flag=false;
|
||
|
|
let itemDone = this.state.items.filter(item => item.done);
|
||
|
|
console.log(itemDone.length);
|
||
|
|
if (itemDone.length > 0){
|
||
|
|
this.$("#clearDone").disabled = false;
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
this.$("#clearDone").disabled = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</todo>
|