Commit to dev branch includes

- Due date on Todos
- Dailies segragation to not include non-due Dailies
- Checklist-items are now working
- Made a completely new wrapper for markdown+emojis, can render emojis in description as well as task name
This commit is contained in:
SuperChamp234 2022-01-14 17:55:47 +05:30
parent 88fdde519d
commit 22616cbed9
13 changed files with 110 additions and 17 deletions

View file

@ -11,8 +11,8 @@ function DailyItem(props: any) {
<div>
<p><span dangerouslySetInnerHTML={{__html: text_html}}></span></p>
<div className="description" dangerouslySetInnerHTML={{__html: note_html}}></div>
{console.log(props.checklist)}
<DailySubTasks subtasks={props.daily_subtasks} onChange={props.onChange}></DailySubTasks>
{/* {console.log(props.checklist)} */}
<DailySubTasks subtasks={props.daily_subtasks} onChangeChecklistItem={props.onChangeChecklistItem}></DailySubTasks>
</div>
</div>

View file

@ -8,7 +8,7 @@ function DailySubTasks(props: any) {
let subtask_text = renderMarkdown(subtask.text);
return (
<div className="subtask" id={subtask.id}>
<input type="checkbox" className="checkbox" onChange={props.onChange} checked={subtask.completed} />
<input id={subtask.id} type="checkbox" className="checkbox-checklist" onChange={props.onChangeChecklistItem} checked={subtask.completed} />
<p id={subtask.id}><span dangerouslySetInnerHTML={{__html: subtask_text}}></span></p>
</div>
)

View file

@ -7,8 +7,24 @@ export default function Index(props: any){
return <div id="classDisplay">No Dailies Present</div>
}
else {
const notDueDailies = props.dailys.map((daily: any) => {
if (!daily.isDue) {
let daily_notes = '';
let daily_subtasks = '';
if (props.settings.showTaskDescription) {
daily_notes = daily.notes;
}
if (props.settings.showSubTasks) {
daily_subtasks = daily.checklist;
}
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text}
daily_notes={daily_notes} daily_subtasks={daily_subtasks}
onChange={props.onChange} completed={daily.completed} onChangeChecklistItem={props.onChangeChecklistItem}/>
}
})
const incompleteDailies = props.dailys.map((daily: any) => {
if (!daily.completed) {
if (!daily.completed&&daily.isDue) {
let daily_notes = '';
let daily_subtasks = '';
if (props.settings.showTaskDescription) {
@ -20,18 +36,33 @@ export default function Index(props: any){
}
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text}
daily_notes={daily_notes} daily_subtasks={daily_subtasks}
onChange={props.onChange} completed={daily.completed}/>
onChange={props.onChange} completed={daily.completed} onChangeChecklistItem={props.onChangeChecklistItem}/>
}
})
const completedDailies = props.dailys.map((daily: any) => {
if(daily.completed)
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed}/>
// if(daily.completed)
// return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed}/>
if (!daily.completed) {
let daily_notes = '';
let daily_subtasks = '';
if (props.settings.showTaskDescription) {
daily_notes = daily.notes;
}
if (props.settings.showSubTasks) {
daily_subtasks = daily.checklist;
}
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text}
daily_notes={daily_notes} daily_subtasks={daily_subtasks}
onChange={props.onChange} completed={daily.completed} onChangeChecklistItem={props.onChangeChecklistItem}/>
}
})
const display = <div id="classDisplay">
<Tabs>
<TabList>
<Tab>Active</Tab>
<Tab>Completed</Tab>
<Tab>Not Due</Tab>
</TabList>
<TabPanel>
<ul>{incompleteDailies}</ul>
@ -39,6 +70,9 @@ export default function Index(props: any){
<TabPanel>
<ul>{completedDailies}</ul>
</TabPanel>
<TabPanel>
<ul>{notDueDailies}</ul>
</TabPanel>
</Tabs>
</div>
return(display);

View file

@ -1,8 +1,10 @@
import * as React from "react";
import TodoSubTasks from "./TodoSubTasks";
import renderMarkdown from "../markdownRender"
import moment from "moment";
function TodoItem(props: any) {
var dueDate = (props.dueDate==null)?"":("Due Date:"+(moment(props.dueDate).format(props.dueDateFormat)));
var text_html = renderMarkdown(props.todo_text);
var note_html = renderMarkdown(props.todo_notes);
return (
@ -11,7 +13,8 @@ function TodoItem(props: any) {
<div>
<p><span dangerouslySetInnerHTML={{__html: text_html}}></span></p>
<div className="description" dangerouslySetInnerHTML={{__html: note_html}}></div>
<TodoSubTasks subtasks={props.todo_subtasks} onChange={props.onChange}></TodoSubTasks>
<TodoSubTasks todoID={props.id} subtasks={props.todo_subtasks} onChange={props.onChangeChecklistItem}></TodoSubTasks>
<div className="due-date">{dueDate}</div>
</div>
</div>
)

View file

@ -7,7 +7,7 @@ function TodoSubTasks(props: any) {
let subtask_text = renderMarkdown(subtask.text);
return (
<div className="subtask" id={subtask.id}>
<input type="checkbox" className="checkbox" onChange={props.onChange} checked={subtask.completed} />
<input type="checkbox" className="checkbox" onChange={props.onChange} checked={subtask.completed} id={subtask.id}/>
<p id={subtask.id}><span dangerouslySetInnerHTML={{__html: subtask_text}}></span></p>
</div>
)

View file

@ -21,7 +21,7 @@ export default function Index(props: any){
}
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text}
todo_notes={todo_notes} todo_subtasks={todo_subtasks}
onChange={props.onChange} completed={todo.completed}/>
onChange={props.onChange} onChangeChecklistItem={props.onChangeChecklistItem} completed={todo.completed} dueDate={todo.date} dueDateFormat={props.settings.dueDateFormat}/>
}
})

View file

@ -24,13 +24,13 @@ export default function Index(props: any){
</Tab>
</TabList>
<TabPanel>
<Dailiesview dailys={props.data.dailys} settings = {props.settings} onChange={props.handleChangeDailys} />
<Dailiesview dailys={props.data.dailys} settings = {props.settings} onChange={props.handleChangeDailys} onChangeChecklistItem={props.handleChangeChecklistItem}/>
</TabPanel>
<TabPanel>
<Habitsview habits={props.data.habits} settings = {props.settings} onChange={props.handleChangeHabits}/>
</TabPanel>
<TabPanel>
<Todoview todos={props.data.todos} settings = {props.settings} onChange={props.handleChangeTodos} />
<Todoview todos={props.data.todos} settings = {props.settings} onChange={props.handleChangeTodos} onChangeChecklistItem={props.handleChangeChecklistItem}/>
</TabPanel>
<TabPanel>
<Rewardview rewards={props.data.rewards} settings = {props.settings} onChange={props.handleChangeRewards} />