Init DrawerTask

Author: Dmitry Yadrikhinsky

src/models/TaskModel.ts

@@ -40,6 +40,7 @@ export default class TaskModel extends AbstractModel {
       time: observable,
       datesInProgress: observable,
       duration: computed,
+      setTitle: action,
       start: action,
       end: action,
     });
@@ -57,6 +58,10 @@ export default class TaskModel extends AbstractModel {
     }, 0);
   }
 
+  setTitle(title: string) {
+    this.title = title;
+  }
+
   start() {
     this.active = true;
     this.addDateWhenWasInProgress(new Date());

src/screens/projects/Projects.tsx

@@ -12,6 +12,7 @@ import TaskModel from '../../models/TaskModel';
 import ProjectModel from '../../models/ProjectModel';
 import ProjectModal from './components/ProjectModal';
 import TaskNode from './components/TaskNode/TaskNode';
+import DrawerTask from './components/DrawerTask/DrawerTask';
 
 const { Sider } = Layout;
 
@@ -44,8 +45,9 @@ const ProjectList = TreeList(
 );
 
 export default observer(function Projects() {
-  const [createNewProject, setCreateNewProject] = useState<boolean>();
   const [showProjectModal, setShowProjectModal] = useState<boolean>();
+  const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
+  const [selectedTask, setSelectedTask] = useState<TaskModel | undefined>();
 
   function handleCreateProject() {
     setShowProjectModal(true);
@@ -57,6 +59,14 @@ export default observer(function Projects() {
     }
   }
 
+  function handleSelectTask(items: Key[]) {
+    if (items.length > 0) {
+      setDrawerVisible(true);
+      const task = tasksStore.getTaskByKey(items[0] as string);
+      setSelectedTask(task);
+    }
+  }
+
   return (
     <Layout>
       <Sider width={250} className="site-layout-background">
@@ -67,16 +77,18 @@ export default observer(function Projects() {
       </Sider>
       <Layout style={{ padding: '24px' }}>
         <Space className="root" direction="vertical">
-          <TaskList />
+          <TaskList onSelect={handleSelectTask} />
           <TaskInput />
         </Space>
       </Layout>
       {showProjectModal && (
-        <ProjectModal
-          onClose={() => setShowProjectModal(false)}
-          createNew={createNewProject}
-        />
+        <ProjectModal onClose={() => setShowProjectModal(false)} />
       )}
+      <DrawerTask
+        task={selectedTask}
+        visible={drawerVisible}
+        onClose={() => setDrawerVisible(false)}
+      />
     </Layout>
   );
 });

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Drawer, Input } from 'antd';
+import { observer } from 'mobx-react';
+
+import TaskModel from '../../../../models/TaskModel';
+
+interface DrawerTaskProps {
+  task: TaskModel | undefined;
+  visible: boolean;
+  onClose: () => void;
+}
+
+export default observer(function DrawerTask({
+  task,
+  visible,
+  onClose,
+}: DrawerTaskProps) {
+  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>
+    </Drawer>
+  );
+});

src/screens/projects/components/TreeList.tsx

@@ -99,8 +99,8 @@ export default function TreeList<T extends ITreeItem>(
         draggable
         selectable={options?.selectable}
         blockNode
-        onDrop={onDrop}
         treeData={data}
+        onDrop={onDrop}
         onSelect={onSelect}
         onCheck={options?.checkable ? options?.onCheck : undefined}
         titleRender={options?.titleRender}

src/types/CommonTypes.ts

@@ -0,0 +1,2 @@
+export type Nullable<T> = T | null;
+export type Undefined<T> = T | undefined;