DrawerTask

Author: Dmitry Yadrikhinsky

src/models/TaskModel.ts

@@ -11,6 +11,7 @@ interface IJsonTaskModel extends ITreeItem<IJsonTaskModel> {
   time: string[][];
   datesInProgress: string[];
   children: IJsonTaskModel[];
+  details: string[];
 }
 
 export default class TaskModel extends AbstractModel {
@@ -22,6 +23,7 @@ export default class TaskModel extends AbstractModel {
   active: boolean = false;
   time: Date[][] = [];
   datesInProgress: Date[] = [];
+  details: string = '';
 
   constructor(props: IJsonTaskModel) {
     super();
@@ -40,8 +42,10 @@ export default class TaskModel extends AbstractModel {
       active: observable,
       time: observable,
       datesInProgress: observable,
+      details: observable,
       duration: computed,
       setTitle: action,
+      setDetails: action,
       start: action,
       end: action,
     });
@@ -63,6 +67,14 @@ export default class TaskModel extends AbstractModel {
     this.title = title;
   }
 
+  setDetails(details: string) {
+    this.details = details;
+  }
+
+  setChecked(checked: boolean) {
+    this.checked = checked;
+  }
+
   start() {
     this.active = true;
     this.addDateWhenWasInProgress(new Date());

src/screens/projects/components/DrawerTask/DrawerTask.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
-import { Drawer, Input } from 'antd';
+import React, { useMemo } from 'react';
+import { Checkbox, Drawer, Input, Space } from 'antd';
 import { observer } from 'mobx-react';
 
 import TaskModel from '../../../../models/TaskModel';
+import rootStore from '../../../../services/RootStore';
+import { useTaskDuration } from '../../../../hooks/TaskHooks';
+
+const { projectStore } = rootStore;
 
 interface DrawerTaskProps {
   task: TaskModel | undefined;
@@ -15,26 +19,52 @@ export default observer(function DrawerTask({
   visible,
   onClose,
 }: DrawerTaskProps) {
+  const project = useMemo(() => projectStore.get(task?.projectId || ''), [
+    task,
+  ]);
+  const duration = useTaskDuration(task);
+
   return (
     <Drawer
       placement="right"
       closable={false}
       onClose={onClose}
       visible={visible}
     >
-      <Input
-        value={task?.title}
-        onChange={(e) => {
-          const title = e.target.value;
-          if (task) {
-            task.setTitle(title);
-          }
-        }}
-      />
-      <p>Some contents...</p>
-      <p>Some contents...</p>
-      <p>Some contents...</p>
-      <p>Some contents...</p>
+      <Space direction="vertical">
+        <Checkbox
+          onChange={(e) => {
+            const { checked } = e.target;
+            if (task) {
+              task.setChecked(checked);
+            }
+          }}
+          checked={task?.checked}
+        >
+          Mark as done
+        </Checkbox>
+        <div>Project: {project?.title}</div>
+        <Input
+          value={task?.title}
+          onChange={(e) => {
+            const title = e.target.value;
+            if (task) {
+              task.setTitle(title);
+            }
+          }}
+        />
+        <Input
+          value={task?.details}
+          placeholder="Details"
+          onChange={(e) => {
+            const details = e.target.value;
+            if (task) {
+              task.setDetails(details);
+            }
+          }}
+        />
+        <div>Duration: {duration}</div>
+      </Space>
     </Drawer>
   );
 });