103 lines
3.6 KiB
JavaScript
103 lines
3.6 KiB
JavaScript
import React from 'react';
|
|
import Li from './Li.js';
|
|
import AddTodoForm from './AddtodoForm.js';
|
|
import 'bootstrap/dist/css/bootstrap.css';
|
|
import dotoJson from '../server/data/todolist.js';
|
|
|
|
class TodoList extends React.Component {
|
|
constructor(props){
|
|
super(props)
|
|
this.state = {
|
|
todoList : dotoJson,
|
|
nextTodoValue: '',
|
|
isCheckAll: false,
|
|
checkAllToggleName: 'checkAll'
|
|
}
|
|
}
|
|
|
|
|
|
addToList = () => {
|
|
let todo = this.state.nextTodoValue;
|
|
if (todo !== '') {
|
|
let tmp_state = this.state;
|
|
tmp_state.todoList.push({id: 12900,todo:todo, at:'This year' , isDone: false})
|
|
tmp_state.nextTodoValue = "";
|
|
this.setState({tmp_state})
|
|
}
|
|
}
|
|
|
|
changeNextTodoValue = (event) => {
|
|
let newNextTodoValue = event.target.value
|
|
this.setState({
|
|
nextTodoValue : newNextTodoValue
|
|
});
|
|
}
|
|
|
|
changeMark = (id) => {
|
|
let tmp_state = this.state.todoList.map((ele) => {
|
|
if(id === ele.id) ele.isDone = !ele.isDone; ;
|
|
return ele
|
|
});
|
|
this.setState({todoList:tmp_state});
|
|
}
|
|
closeMark = (id) => {
|
|
let tmp_state = this.state.todoList.filter((ele, index) => (
|
|
ele.id !== id
|
|
)
|
|
)
|
|
this.setState({todoList:tmp_state})
|
|
}
|
|
checkAllToggle = () => {
|
|
let tmp_state = this.state.todoList.map((element) => {
|
|
element.isDone = !this.state.checkAllToggle
|
|
return (element)
|
|
}
|
|
)
|
|
this.setState({todoList:tmp_state,checkAllToggle:!this.state.checkAllToggle,isCheckAll: !this.state.isCheckAll})
|
|
}
|
|
|
|
render(){
|
|
return (
|
|
<div className="page-content page-container" id="page-content">
|
|
<div className="padding">
|
|
<div className="row container d-flex justify-content-center">
|
|
<div className="col-lg-12">
|
|
<div className="card px-3">
|
|
<div className="card-body">
|
|
<h4 className="card-title">Awesome Todo list</h4>
|
|
<AddTodoForm
|
|
checkAllToggleName={this.state.checkAllToggleName}
|
|
checkAllToggle={this.checkAllToggle}
|
|
isCheckAll={this.state.isCheckAll}
|
|
formValue={this.state.nextTodoValue}
|
|
addToList={this.addToList}
|
|
changeNextTodoValue={this.changeNextTodoValue}
|
|
/>
|
|
<div className="list-wrapper">
|
|
<ul className="d-flex flex-column-reverse todo-list">
|
|
{
|
|
this.state.todoList.map( (element) => (
|
|
<Li
|
|
close={this.closeMark}
|
|
changeMark={this.changeMark}
|
|
isDone={element.isDone}
|
|
key={element.id}
|
|
id={element.id}
|
|
todo={element.todo}
|
|
at={element.at}
|
|
/>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
export default TodoList
|