Delete time items

Author: Dmitry Yadrikhinsky

src/components/CircleButton/CircleButton.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { SyntheticEvent } from 'react';
 
 import './CircleButton.less';
 
 import cn from '../../helpers/ClassNameHelper';
 
 interface CircleButtonProps {
   className?: string;
-  onClick: () => void;
+  onClick: (e: SyntheticEvent) => void;
   children: React.ReactNode;
 }
 

src/components/PlayStopButton/PlayStopButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { SyntheticEvent } from 'react';
 import { CaretRightFilled, PauseOutlined } from '@ant-design/icons';
 
 import './PlayStopButton.less';
@@ -14,7 +14,8 @@ interface PlayStopButtonProps {
 }
 
 export default function PlayStopButton({ task }: PlayStopButtonProps) {
-  function handleClick() {
+  function handleClick(e: SyntheticEvent) {
+    e.stopPropagation();
     if (task) {
       if (!task?.active) {
         tasksStore.startTimer(task);

src/components/TimeRangeModal/TimeRangeModal.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Col, Form, Input, Modal, Row, Space, TimePicker } from 'antd';
+import { Button, Col, Form, Input, Modal, Row, TimePicker } from 'antd';
 import { Moment } from 'moment/moment';
 import moment from 'moment';
+import { DeleteFilled } from '@ant-design/icons';
 
 import './TimeRangeModal.less';
 
@@ -50,6 +51,13 @@ export default function TimeRangeModal({
     onClose();
   }
 
+  function handleDelete() {
+    if (taskTime) {
+      tasksStore.deleteTime(taskTime.task, taskTime.index);
+    }
+    onClose();
+  }
+
   function handleCancel() {
     onClose();
   }
@@ -104,6 +112,9 @@ export default function TimeRangeModal({
             </Form.Item>
           </Col>
         </Row>
+        <Button icon={<DeleteFilled />} onClick={handleDelete}>
+          Remove
+        </Button>
       </Form>
     </Modal>
   );

src/services/tasks/TaskStore.ts

@@ -24,6 +24,14 @@ export default class TaskStore {
     this.tasksService.save(this.tasks);
   }
 
+  deleteTime(task: TaskModel, timeIndex: number) {
+    if (!task.time[timeIndex].end) {
+      task.end();
+    }
+    task.time.splice(timeIndex, 1);
+    this.tasksService.save(this.tasks);
+  }
+
   getTasks(projectId: string): TaskModel[] {
     return this.tasks[projectId] || [];
   }