68 lines
2.3 KiB
JavaScript
68 lines
2.3 KiB
JavaScript
import {defineElement, render, CustomElement, Host, State} from "../../../packages/csx-custom-elements";
|
|
|
|
import style from './my-todo.scss';
|
|
import {TodoInput} from './todo-input';
|
|
import {TodoItem} from './todo-item';
|
|
|
|
@defineElement('my-todo')
|
|
export class MyTodo extends CustomElement{
|
|
uid = 1;
|
|
@State() todos;
|
|
// = [
|
|
// {id: this.uid++, text: "my initial todo", checked: false },
|
|
// {id: this.uid++, text: "Learn about Web Components", checked: false },
|
|
// ];
|
|
|
|
constructor(){
|
|
super();
|
|
this.uid = 1;
|
|
this.todos = [
|
|
{id: this.uid++, text: "my initial todo", checked: false },
|
|
{id: this.uid++, text: "Learn about Web Components", checked: false },
|
|
]
|
|
}
|
|
|
|
render(){
|
|
return (
|
|
<Host>
|
|
<style>{ style }</style>
|
|
<h1>CSX Todo</h1>
|
|
<section>
|
|
<todo-input onSubmit={this.handleSubmit}/>
|
|
<ul id="list-container"
|
|
onCheck={this.handleCheck}
|
|
onRemove={this.handleRemove}
|
|
>
|
|
{this.todos.map(item =>
|
|
<todo-item
|
|
model={ item.id }
|
|
text={item.text}
|
|
checked={ item.checked }
|
|
>
|
|
{ item.text }
|
|
</todo-item>
|
|
)}
|
|
</ul>
|
|
</section>
|
|
</Host>
|
|
);
|
|
}
|
|
|
|
handleSubmit = ({ detail: text }) => {
|
|
if(text) {
|
|
console.log("Submit rcvd: " + text);
|
|
this.todos = [...this.todos, { id: this.uid++, text, checked: false }];
|
|
}
|
|
};
|
|
handleCheck = ({detail: {checked,id}}) => {
|
|
let indexOf = this.todos.findIndex(t=>t.id===id);
|
|
if(indexOf>=0) {
|
|
let updated = { ...this.todos[ indexOf ], checked };
|
|
this.todos = [...this.todos.slice(0, indexOf), updated, ...this.todos.slice(indexOf + 1)];
|
|
}
|
|
};
|
|
handleRemove = ({detail: {id}})=>{
|
|
let indexOf = this.todos.findIndex(t=>t.id===id);
|
|
this.todos = [...this.todos.slice(0,indexOf), ...this.todos.slice(indexOf+1)];
|
|
}
|
|
} |