Implement subtasks view and settings option,

clean up CSS
This commit is contained in:
ransurf 2022-01-13 12:47:36 -08:00
parent 0ac05ef6d3
commit 916236db5d
13 changed files with 257 additions and 90 deletions

View file

@ -1,6 +1,7 @@
import Emoji from "react-emoji-render";
import * as React from "react";
import ReactMarkdown from "react-markdown";
import TodoSubTasks from "./TodoSubTasks";
function TodoItem(props: any) {
return (
@ -9,7 +10,8 @@ function TodoItem(props: any) {
{/* <p><Emoji text ={props.todo_text}></Emoji></p> */}
<div>
<p><Emoji text={props.todo_text}></Emoji></p>
<ReactMarkdown children={props.todo_notes} />
<ReactMarkdown className="description" children={props.todo_notes} />
<TodoSubTasks subtasks={props.todo_subtasks} onChange={props.onChange}></TodoSubTasks>
</div>
</div>
)

View file

@ -0,0 +1,20 @@
import Emoji from "react-emoji-render";
import * as React from "react";
function TodoSubTasks(props: any) {
if (props.subtasks) {
const subtasks = props.subtasks.map((subtask: any) => {
return (
<div className="subtask" id={subtask.id}>
<input type="checkbox" className="checkbox" onChange={props.onChange} checked={subtask.completed} />
<p id={subtask.id}><Emoji text={subtask.text}></Emoji></p>
</div>
)
});
return subtasks
}
else {
return <div></div>
}
}
export default TodoSubTasks

View file

@ -8,12 +8,20 @@ export default function Index(props: any){
}
else {
const incompleteTodos = props.todos.map((todo: any) => {
if(!todo.completed) {
let todo_notes = '';
let todo_subtasks = '';
if (props.settings.showTaskDescription) {
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed}/>
} else {
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
todo_notes = todo.notes;
}
if (props.settings.showSubTasks) {
todo_subtasks = todo.checklist;
}
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text}
todo_notes={todo_subtasks} todo_subtasks={todo_subtasks}
onChange={props.onChange} completed={todo.completed}/>
}
})