add ui for create、modify、delete for tasks

package.json

@@ -36,6 +36,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-emoji-render": "^1.2.4",
+    "react-hook-form": "^7.20.2",
     "react-i18next": "^11.14.2",
     "react-markdown": "^7.1.0",
     "react-tabs": "^3.2.2"

src/i18n/zh-cn.json

@@ -4,6 +4,11 @@
     "HP": "生命值",
     "LEVEL": "等级",
     "GOLD": "金币",
+    "title": "标题",
+    "notes": "备注",
+    "type": "类型",
+    "Daily": "每日任务",
+    "submit": "添加",
     "No Dailies Present": "目前每日任务为空",
     "No habits present.": "目前习惯为空",
     "No Rewards present.": "目前奖励为空"

src/view/Components/Taskview/Addview/index.tsx

@@ -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);
+}

src/view/Components/Taskview/Dailiesview/DailyItem.tsx

@@ -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>
     )

src/view/Components/Taskview/Dailiesview/index.tsx

@@ -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);
     }

src/view/Components/Taskview/Habitsview/HabitItem.tsx

@@ -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>
     )
 }

src/view/Components/Taskview/Habitsview/index.tsx

@@ -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>
 

src/view/Components/Taskview/Rewardview/RewardItem.tsx

@@ -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>
     )
 }

src/view/Components/Taskview/Rewardview/index.tsx

@@ -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>
 

src/view/Components/Taskview/Todoview/TodoItem.tsx

@@ -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>
     )
 }

src/view/Components/Taskview/Todoview/index.tsx

@@ -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);
     }
 }

src/view/Components/Taskview/index.tsx

@@ -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>

styles.css

@@ -2,6 +2,9 @@
   padding: 0;
 }
 
+.add-task-input {
+  display: flex;
+}
 
 #profile-name {
   font-size: x-large;
@@ -14,8 +17,25 @@
 }
 
 .todo-item {
-  display: flex;
+    display: grid;
-  justify-content: flex-start;
+    grid-template-columns: 1fr 30fr 1fr 1fr;
+    justify-content: left;
+    align-items: flex-start;
+    padding: 0px 0px 0;
+    width: 100%;
+    border-bottom: 1px solid #cecece;
+    font-family: Roboto, sans-serif;
+    font-weight: normal;
+    font-size: 16px;
+}
+
+p {
+    margin: 0;
+}
+
+.reward-item {
+  display: grid;
+  grid-template-columns: 1fr 10fr 1fr 1fr;
   align-items: center;
   padding: 0px 0px 0;
   width: 100%;
@@ -25,16 +45,8 @@
   font-size: 16px;
 }
 
-.reward-item {
+.reward-click {
-  display: flex;
+  padding: 5px 15px;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 0px 0px 0;
-  width: 100%;
-  border-bottom: 1px solid #cecece;
-  font-family: Roboto, sans-serif;
-  font-weight: normal;
-  font-size: 16px;
 }
 
 
@@ -67,8 +79,8 @@
 }
 
 .habit-item {
-  display: flex;
+  display: grid;
-  /* justify-content: center; */
+  grid-template-columns: 2fr 2fr 10fr 2fr 2fr;
   align-content: space-between;
   align-items: center;
   padding: 0px 0px 0;
@@ -82,6 +94,17 @@
 
 input[type=checkbox] {
   margin-right: 10px;
+  align-self: center;
+}
+
+.todo-content {
+  align-self: center;
+}
+
+.submit-button {
+    padding: 5px 15px;
+    font-size: 15px;
+    border: 1px solid #aaa;
 }
 
 input[type=checkbox]:focus {
@@ -105,6 +128,7 @@ input[type=checkbox]:focus {
 
 .substats {
   font-size: medium;
+
 }
 
 /* react-tabs internal file :wink: */
@@ -128,7 +152,7 @@ input[type=checkbox]:focus {
 
 .react-tabs__tab-list {
   border-bottom: 1px solid #aaa;
-  margin: 0 0 10px;
+  margin: 0 0 5px;
   padding: 0;
 }
 
@@ -192,6 +216,7 @@ ul li:not(.task-list-item)::before {
 body > div.app-container.is-left-sidedock-collapsed.is-right-sidedock-collapsed > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div.workspace-tabs > div.workspace-leaf > div > div.view-content > div > div.cron > button {
   margin: auto;
   margin-bottom: 5px;
+  white-space: nowrap
 }
 .cron {
   display: inline-grid;