Choose color

Author: Dmitry Yadrikhinsky

package.json

@@ -233,6 +233,7 @@
     "yarn-deduplicate": "^3.1.0"
   },
   "dependencies": {
+    "@ant-design/colors": "6.0.0",
     "@ant-design/icons": "4.6.2",
     "antd": "4.15.0",
     "date-fns": "2.20.1",

…/components/TaskControl/TaskControl.less …/components/TaskControl/TaskControl.lesssrc/screens/projects/components/TaskControl/TaskControl.less renamed to src/components/TaskControl/TaskControl.less src/screens/projects/components/TaskControl/TaskControl.less renamed to src/components/TaskControl/TaskControl.less

@@ -1,4 +1,4 @@
-@import '../../../../App.global';
+@import '../../App.global';
 
 .task-control {
   display: inline-flex;

…s/components/TaskControl/TaskControl.tsx …c/components/TaskControl/TaskControl.tsxsrc/screens/projects/components/TaskControl/TaskControl.tsx renamed to src/components/TaskControl/TaskControl.tsx src/screens/projects/components/TaskControl/TaskControl.tsx renamed to src/components/TaskControl/TaskControl.tsx

@@ -4,9 +4,9 @@ import { PauseOutlined } from '@ant-design/icons';
 
 import './TaskControl.less';
 
-import rootStore from '../../../../services/RootStore';
-import { useTaskDuration } from '../../../../hooks/TaskHooks';
-import CircleButton from '../../../../components/CircleButton/CircleButton';
+import rootStore from '../../services/RootStore';
+import { useTaskDuration } from '../../hooks/TaskHooks';
+import CircleButton from '../CircleButton/CircleButton';
 
 const { tasksStore, projectStore } = rootStore;
 

src/models/ProjectModel.ts

@@ -1,17 +1,22 @@
 import AbstractModel from '../base/AbstractModel';
 import { ITreeItem } from '../types/ITreeItem';
 
-interface IProjectItem extends ITreeItem<IProjectItem> {
-  children?: IProjectItem[];
+interface IJsonProjectItem extends ITreeItem<IJsonProjectItem> {
+  color: string;
+}
+
+interface IProjectModel extends ITreeItem<IProjectModel> {
+  color: string;
 }
 
 export default class ProjectModel extends AbstractModel
-  implements IProjectItem {
+  implements IProjectModel {
   key: string = '';
   title: string = '';
+  color: string = '';
   children?: ProjectModel[] = [];
 
-  constructor(props: IProjectItem) {
+  constructor(props: IJsonProjectItem) {
     super();
     this.load(props);
     this.children = props.children?.map((json) => new ProjectModel(json)) || [];

src/screens/Main.tsx

@@ -6,7 +6,7 @@ import { observer } from 'mobx-react';
 import './Main.less';
 
 import Projects from './projects/Projects';
-import TaskControl from './projects/components/TaskControl/TaskControl';
+import TaskControl from '../components/TaskControl/TaskControl';
 import HeaderMenu from '../components/HeaderMenu/HeaderMenu';
 import HoursView from './hours/HoursView';
 

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

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 
 import ProjectModel from '../../../../models/ProjectModel';
 import rootStore from '../../../../services/RootStore';
+import ChooseColor from './components/ChooseColor';
 
 const { projectStore } = rootStore;
 
@@ -17,11 +18,13 @@ export default observer(function EditProjectModal({
   project,
 }: EditProjectModalProps) {
   const [title, setTitle] = useState<string>('');
+  const [color, setColor] = useState<string>('');
 
   useEffect(() => {
     const editProject = projectStore.editProject;
     if (editProject) {
       setTitle(editProject.title);
+      setColor(editProject.color);
     }
   }, [projectStore.editProject]);
 
@@ -31,7 +34,7 @@ export default observer(function EditProjectModal({
 
   function handleOk() {
     if (project) {
-      projectStore.setTitle(project, title);
+      projectStore.setProjectProps(project, title, color);
     }
     onClose();
   }
@@ -65,6 +68,10 @@ export default observer(function EditProjectModal({
           value={title}
           onChange={(e) => setTitle(e.target.value)}
         />
+        <ChooseColor
+          activeColor={color}
+          onChoose={(color) => setColor(color)}
+        />
         <Button icon={<DeleteFilled />} onClick={handleDelete}>
           Delete
         </Button>

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

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
-import { Button, Input, Modal, Space } from 'antd';
+import { Input, Modal, Space } from 'antd';
 
 import rootStore from '../../../../services/RootStore';
 import ProjectModel from '../../../../models/ProjectModel';
+import ChooseColor from './components/ChooseColor';
 
 const { projectStore } = rootStore;
 
@@ -17,6 +18,7 @@ export default observer(function ProjectModal({
   onClose,
 }: ProjectModalProps) {
   const [projectName, setProjectName] = useState<string>('');
+  const [color, setColor] = useState<string | undefined>();
 
   useEffect(() => {
     setProjectName(project?.title || '');
@@ -27,6 +29,7 @@ export default observer(function ProjectModal({
       new ProjectModel({
         key: String(Date.now()),
         title: projectName,
+        color: color || '',
       })
     );
     onClose();
@@ -44,11 +47,17 @@ export default observer(function ProjectModal({
       onCancel={handleCancel}
       okText="Create"
     >
-      <Input
-        placeholder="Project name..."
-        value={projectName}
-        onChange={(e) => setProjectName(e.target.value)}
-      />
+      <Space direction="vertical">
+        <Input
+          placeholder="Project name..."
+          value={projectName}
+          onChange={(e) => setProjectName(e.target.value)}
+        />
+        <ChooseColor
+          activeColor={color}
+          onChoose={(color) => setColor(color)}
+        />
+      </Space>
     </Modal>
   );
 });

src/screens/projects/components/ProjectModals/components/ChooseColor.less

@@ -0,0 +1,20 @@
+.choose-color {
+  display: flex;
+  flex-direction: row;
+
+  .color {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    height: 20px;
+    width: 20px;
+    margin-right: 8px;
+    border-radius: 3px;
+  }
+
+  .color.active,
+  .color:hover {
+    transform: scale(1.1);
+  }
+}

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  red,
+  volcano,
+  blue,
+  cyan,
+  geekblue,
+  gold,
+  green,
+  grey,
+  lime,
+  magenta,
+  orange,
+  purple,
+  yellow,
+} from '@ant-design/colors';
+import { CheckOutlined } from '@ant-design/icons';
+
+import './ChooseColor.less';
+import cn from '../../../../../helpers/ClassNameHelper';
+
+const colors = [
+  red,
+  volcano,
+  orange,
+  gold,
+  yellow,
+  lime,
+  green,
+  cyan,
+  blue,
+  geekblue,
+  purple,
+  magenta,
+  grey,
+].map((color) => color.primary);
+
+interface ChooseColorProps {
+  activeColor: string | undefined;
+  onChoose: (color: string) => void;
+}
+
+export default function ChooseColor({
+  activeColor,
+  onChoose,
+}: ChooseColorProps) {
+  return (
+    <div className="choose-color">
+      {colors.map((color, index) => (
+        <div
+          key={index}
+          className={cn('color', activeColor === color && 'active')}
+          style={{ backgroundColor: color }}
+          onClick={() => {
+            if (color) {
+              onChoose(color);
+            }
+          }}
+        >
+          {activeColor === color && (
+            <CheckOutlined style={{ color: 'white' }} />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

src/services/projects/ProjectStore.ts

@@ -29,8 +29,13 @@ export default class ProjectStore {
     this.activeProject = projectId;
   }
 
-  setTitle(project: ProjectModel, title: string) {
+  setProjectProps(
+    project: ProjectModel,
+    title: string,
+    color: string | undefined
+  ) {
     project.title = title;
+    project.color = color || '';
     this.projectService.save(this.projects);
   }