PolyPaw/habitica-sync
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add ui for create、modify、delete for tasks

Browse source
This commit is contained in:
kkzzhizhou 2021-11-22 17:12:08 +08:00
parent 1b468b8454
commit f350875d90
14 changed files with 138 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/view/Components/Taskview/Addview/index.tsx Normal file
View file

@ -0,0 +1,27 @@
import * as React from "react";
import { useForm } from "react-hook-form";
import { Trans,useTranslation } from 'react-i18next'
export default function Index(props: any) {
const display = <div id="addDisplay">
<form>
<label><Trans>type</Trans>
<select>
<option value="Daily">Daily</option>
<option value="Habit">Habit</option>
<option value="Todo">Todo</option>
<option value="Reward">Reward</option>
</select>
</label>
<label><Trans>title</Trans>
<input type="text" />
</label>
<label><Trans>notes</Trans>
<input type="text" />
</label>
</form>
</div>
return (display);
}

9
src/view/Components/Taskview/Dailiesview/DailyItem.tsx
View file

@ -6,10 +6,17 @@ function DailyItem(props: any) {
return (
<div className="todo-item" id={props.id}>
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
<div>
<div className="todo-content">
<p><Emoji text={props.daily_text}></Emoji></p>
<ReactMarkdown children={props.daily_notes} />
</div>
<button className="modify-todo" id={props.id}>
<span className="material-icons md-24">create</span>
</button>
<button className="delete-todo" id={props.id}>
<span className="material-icons md-24">clear</span>
</button>
</div>
)

6
src/view/Components/Taskview/Dailiesview/index.tsx
View file

@ -22,6 +22,11 @@ export default function Index(props: any){
<Tab><Trans>Active</Trans></Tab>
<Tab><Trans>Completed</Trans></Tab>
</TabList>
<div className="add-task-input">
<input type="text">
</input>
<button className="submit-button"><Trans>submit</Trans></button>
</div>
<TabPanel>
<ul>{incompleteDailies}</ul>
</TabPanel>
@ -29,6 +34,7 @@ export default function Index(props: any){
<ul>{completedDailies}</ul>
</TabPanel>
</Tabs>
</div>
return(display);
}

6
src/view/Components/Taskview/Habitsview/HabitItem.tsx
View file

@ -15,6 +15,12 @@ function HabitItem(props: any) {
<p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
<ReactMarkdown children={props.habit_notes} />
</div>
<button className="modify-habit" id={props.id}>
<span className="material-icons md-24">create</span>
</button>
<button className="delete-habit" id={props.id}>
<span className="material-icons md-24">clear</span>
</button>
</div>
)
}

5
src/view/Components/Taskview/Habitsview/index.tsx
View file

@ -13,6 +13,11 @@ export default function Index(props: any){
return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} habit_notes={habit.notes} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
})
const display = <div id="classDisplay">
<div className="add-task-input">
<input type="text">
</input>
<button className="submit-button"><Trans>submit</Trans></button>
</div>
<ul>{allHabits}</ul>
</div>

7
src/view/Components/Taskview/Rewardview/RewardItem.tsx
View file

@ -9,7 +9,12 @@ function RewardItem(props: any) {
<p className="reward-text"><Emoji text={props.reward_text}></Emoji></p>
<ReactMarkdown children={props.reward_notes} />
</div>
<button className="modify-reward" id={props.id}>
<span className="material-icons md-24">create</span>
</button>
<button className="delete-reward" id={props.id}>
<span className="material-icons md-24">clear</span>
</button>
</div>
)
}

5
src/view/Components/Taskview/Rewardview/index.tsx
View file

@ -13,6 +13,11 @@ export default function Index(props: any){
return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_notes={reward.notes} reward_value={reward.value} onChange={props.onChange}/>
})
const display = <div id="classDisplay">
<div className="add-task-input">
<input type="text">
</input>
<button className="submit-button"><Trans>submit</Trans></button>
</div>
<ul>{allRewards}</ul>
</div>

6
src/view/Components/Taskview/Todoview/TodoItem.tsx
View file

@ -10,6 +10,12 @@ function TodoItem(props: any) {
<p><Emoji text={props.todo_text}></Emoji></p>
<ReactMarkdown children={props.todo_notes} />
</div>
<button className="modify-todo" id={props.id}>
<span className="material-icons md-24">create</span>
</button>
<button className="delete-todo" id={props.id}>
<span className="material-icons md-24">clear</span>
</button>
</div>
)
}

7
src/view/Components/Taskview/Todoview/index.tsx
View file

@ -22,6 +22,11 @@ export default function Index(props: any){
<Tab><Trans>Active</Trans></Tab>
<Tab><Trans>Completed</Trans></Tab>
</TabList>
<div className="add-task-input">
<input type="text">
</input>
<button className="submit-button"><Trans>submit</Trans></button>
</div>
<TabPanel>
<ul>{incompleteTodos}</ul>
</TabPanel>
@ -30,8 +35,6 @@ export default function Index(props: any){
</TabPanel>
</Tabs>
</div>
return(display);
}
}

3
src/view/Components/Taskview/index.tsx
View file

@ -3,13 +3,14 @@ import Dailiesview from "./Dailiesview"
import Habitsview from "./Habitsview"
import Todoview from "./Todoview"
import Rewardview from "./Rewardview"
import Addview from "./Addview"
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import { useTranslation, Trans, Translation } from 'react-i18next'
export default function Index(props: any){
const display = <div className="task-view">
<Tabs>
<TabList>
<Tab>
<span className="material-icons md-24">today</span>
</Tab>