Edit/remove project

Author: Dmitry Yadrikhinsky

src/screens/projects/Projects.tsx

@@ -10,9 +10,11 @@ import rootStore from '../../services/RootStore';
 import TreeList from './components/TreeList';
 import TaskModel from '../../models/TaskModel';
 import ProjectModel from '../../models/ProjectModel';
-import ProjectModal from './components/ProjectModal';
+import ProjectModal from './components/ProjectModals/ProjectModal';
 import TaskNode from './components/TaskNode/TaskNode';
 import DrawerTask from './components/DrawerTask/DrawerTask';
+import ProjectNode from './components/ProjectNode/ProjectNode';
+import EditProjectModal from './components/ProjectModals/EditProjectModal';
 
 const { Sider } = Layout;
 
@@ -41,11 +43,16 @@ const ProjectList = TreeList(
   () => projectStore.projects,
   (list: ProjectModel[]) => {
     projectStore.set(list);
+  },
+  {
+    titleRender(project: ProjectModel) {
+      return <ProjectNode project={project} />;
+    },
   }
 );
 
 export default observer(function Projects() {
-  const [showProjectModal, setShowProjectModal] = useState<boolean>();
+  const [showProjectModal, setShowProjectModal] = useState<boolean>(false);
   const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
   const [selectedTask, setSelectedTask] = useState<TaskModel | undefined>();
 
@@ -84,6 +91,10 @@ export default observer(function Projects() {
       {showProjectModal && (
         <ProjectModal onClose={() => setShowProjectModal(false)} />
       )}
+      <EditProjectModal
+        project={projectStore.editProject}
+        onClose={() => projectStore.setEditableProject(undefined)}
+      />
       <DrawerTask
         task={selectedTask}
         visible={drawerVisible}

src/screens/projects/components/ProjectModals/EditProjectModal.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import ProjectModel from '../../../../models/ProjectModel';
+import { Button, Input, Modal, Space } from 'antd';
+import rootStore from '../../../../services/RootStore';
+import { DeleteFilled } from '@ant-design/icons';
+
+const { projectStore } = rootStore;
+
+interface EditProjectModalProps {
+  project?: ProjectModel;
+  onClose: () => void;
+}
+
+export default function EditProjectModal({ project }: EditProjectModalProps) {
+  const [title, setTitle] = useState<string>('');
+
+  useEffect(() => {
+    const editProject = projectStore.editProject;
+    if (editProject) {
+      setTitle(editProject.title);
+    }
+  }, [projectStore.editProject]);
+
+  useEffect(() => {
+    setTitle(project?.title || '');
+  }, [project]);
+
+  function handleOk() {
+    if (project) {
+      projectStore.setTitle(project, title);
+    }
+    onClose();
+  }
+
+  function handleCancel() {
+    onClose();
+  }
+
+  function handleDelete() {
+    if (project) {
+      rootStore.deleteProject(project);
+    }
+    onClose();
+  }
+
+  function onClose() {
+    projectStore.setEditableProject(undefined);
+  }
+
+  return (
+    <Modal
+      title="Edit project"
+      visible={!!projectStore.editProject}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      okText="Save"
+    >
+      <Space direction="vertical">
+        <Input
+          placeholder="Project name..."
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+        <Button icon={<DeleteFilled />} onClick={handleDelete}>
+          Delete
+        </Button>
+      </Space>
+    </Modal>
+  );
+}

…ens/projects/components/ProjectModal.tsx …omponents/ProjectModals/ProjectModal.tsxsrc/screens/projects/components/ProjectModal.tsx renamed to src/screens/projects/components/ProjectModals/ProjectModal.tsx src/screens/projects/components/ProjectModal.tsx renamed to src/screens/projects/components/ProjectModals/ProjectModal.tsx

@@ -1,18 +1,28 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
-import { Input, Modal } from 'antd';
-import rootStore from '../../../services/RootStore';
-import ProjectModel from '../../../models/ProjectModel';
+import { Button, Input, Modal, Space } from 'antd';
+
+import rootStore from '../../../../services/RootStore';
+import ProjectModel from '../../../../models/ProjectModel';
+
+const { projectStore } = rootStore;
 
 interface ProjectModalProps {
+  project?: ProjectModel;
   onClose: () => void;
 }
 
-export default observer(function ProjectModal({ onClose }: ProjectModalProps) {
+export default observer(function ProjectModal({
+  project,
+  onClose,
+}: ProjectModalProps) {
   const [projectName, setProjectName] = useState<string>('');
 
+  useEffect(() => {
+    setProjectName(project?.title || '');
+  }, [project]);
+
   function handleOk() {
-    const { projectStore } = rootStore;
     projectStore.add(
       new ProjectModel({
         key: String(Date.now()),
@@ -21,13 +31,14 @@ export default observer(function ProjectModal({ onClose }: ProjectModalProps) {
     );
     onClose();
   }
+
   function handleCancel() {
     onClose();
   }
 
   return (
     <Modal
-      title="Basic Modal"
+      title="Create project"
       visible
       onOk={handleOk}
       onCancel={handleCancel}

src/screens/projects/components/ProjectNode/ProjectNode.less

@@ -0,0 +1,14 @@
+.project-node {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  .edit-button {
+    display: none;
+  }
+
+  &:hover .edit-button {
+    display: inline;
+  }
+}

src/screens/projects/components/ProjectNode/ProjectNode.tsx

@@ -0,0 +1,27 @@
+import React, { SyntheticEvent } from 'react';
+import { EditOutlined } from '@ant-design/icons';
+
+import './ProjectNode.less';
+
+import ProjectModel from '../../../../models/ProjectModel';
+import rootStore from '../../../../services/RootStore';
+
+const {projectStore}  = rootStore;
+
+interface ProjectNodeProps {
+  project: ProjectModel;
+}
+
+export default function ProjectNode({ project }: ProjectNodeProps) {
+  function onClick(e: SyntheticEvent) {
+    e.stopPropagation();
+    projectStore.setEditableProject(project);
+  }
+
+  return (
+    <div className="project-node">
+      <div>{project.title}</div>
+      <EditOutlined className="edit-button" onClick={onClick} />
+    </div>
+  );
+};

src/services/RootStore.ts

@@ -1,6 +1,6 @@
 import TaskStore from './tasks/TaskStore';
 import ProjectStore from './projects/ProjectStore';
-import { toJS } from 'mobx';
+import ProjectModel from '../models/ProjectModel';
 
 class RootStore {
   tasksStore = new TaskStore();
@@ -10,6 +10,11 @@ class RootStore {
     this.tasksStore.restore();
     this.projectStore.restore();
   }
+
+  deleteProject(project: ProjectModel) {
+    this.tasksStore.deleteProjectTasks(project.key);
+    this.projectStore.delete(project);
+  }
 }
 
 const rootStore = new RootStore();

src/services/projects/ProjectStore.ts

@@ -3,10 +3,12 @@ import { makeAutoObservable } from 'mobx';
 import ProjectModel from '../../models/ProjectModel';
 import ProjectService from './ProjectService';
 import TreeModelStoreHelper from '../../base/TreeModelStoreHelper';
+import { Undefined } from '../../types/CommonTypes';
 
 export default class ProjectStore {
   projects: ProjectModel[] = [];
   activeProject: string = '';
+  editProject: Undefined<ProjectModel>;
 
   private projectService = new ProjectService();
 
@@ -19,6 +21,19 @@ export default class ProjectStore {
     this.projectService.save(this.projects);
   }
 
+  setEditableProject(project?: ProjectModel) {
+    this.editProject = project;
+  }
+
+  setActiveProject(projectId: string) {
+    this.activeProject = projectId;
+  }
+
+  setTitle(project: ProjectModel, title: string) {
+    project.title = title;
+    this.projectService.save(this.projects);
+  }
+
   get(projectKey: string): ProjectModel | undefined {
     function compare(project: ProjectModel) {
       return project.key === projectKey;
@@ -32,8 +47,13 @@ export default class ProjectStore {
     this.projectService.save(this.projects);
   }
 
-  setActiveProject(projectId: string) {
-    this.activeProject = projectId;
+  delete(project: ProjectModel) {
+    function condition(_project: ProjectModel) {
+      return _project.key === project.key;
+    }
+
+    this.projects = TreeModelStoreHelper.deleteItems(this.projects, condition);
+    // this.projectService.save(this.projects);
   }
 
   restore() {

src/services/tasks/TaskStore.ts

@@ -93,6 +93,11 @@ export default class TaskStore {
     this.tasksService.save(this.tasks);
   }
 
+  deleteProjectTasks(projectKey: string) {
+    delete this.tasks[projectKey];
+    this.tasksService.save(this.tasks);
+  }
+
   startTimer(task: TaskModel) {
     if (this.activeTask) {
       this.stopTimer(this.activeTask);