56 lines
1.9 KiB
JavaScript
56 lines
1.9 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 Won't work;
|
|
@State() 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 }
|
|
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);
|
|
let updated = {...this.todos[indexOf], checked};
|
|
this.todos = [...this.todos.slice(0,indexOf), updated, ...this.todos.slice(indexOf+1)];
|
|
};
|
|
handleRemove = (e,id)=>{
|
|
let indexOf = this.todos.findIndex(t=>t.id===id);
|
|
this.todos = [...this.todos.slice(0,indexOf), ...this.todos.slice(indexOf+1)];
|
|
}
|
|
} |