Implement subtasks view and settings option,
clean up CSS
This commit is contained in:
parent
0ac05ef6d3
commit
916236db5d
13 changed files with 257 additions and 90 deletions
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
20
src/view/Components/Taskview/Todoview/TodoSubTasks.tsx
Normal file
20
src/view/Components/Taskview/Todoview/TodoSubTasks.tsx
Normal 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
|
||||
|
|
@ -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}/>
|
||||
}
|
||||
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue