TimePicker + description

Author: Dmitry Yadrikhinsky

src/components/TimeRangeModal/TimeRangeModal.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { DatePicker, Modal } from 'antd';
+import { Col, Form, Input, Modal, Row, Space, TimePicker } from 'antd';
 import { Moment } from 'moment/moment';
 import moment from 'moment';
-import { RangeValue } from 'rc-picker/lib/interface';
 
 import './TimeRangeModal.less';
 
@@ -11,7 +10,12 @@ import TaskTimeModel from '../../models/TaskTimeModel';
 import { ITimeRangeModel } from '../../models/TaskModel';
 import { Undefined } from '../../types/CommonTypes';
 
-const { RangePicker } = DatePicker;
+const { tasksStore } = rootStore;
+
+enum RangeField {
+  start = 'start',
+  end = 'end',
+}
 
 interface TimeRangeModalProps {
   taskTime?: TaskTimeModel;
@@ -24,20 +28,24 @@ export default function TimeRangeModal({
   visible,
   onClose,
 }: TimeRangeModalProps) {
-  const [taskTimeItem, setTaskTimeItem] = useState(taskTime);
+  const [description, setDescription] = useState<string>('');
   const [timeRange, setTimeRange] = useState<Undefined<ITimeRangeModel>>();
+  const timeInProgress = !taskTime?.time.end;
 
   useEffect(() => {
     if (taskTime) {
-      setTaskTimeItem(taskTime);
       setTimeRange({ ...taskTime.time });
+      setDescription(taskTime.time.description || '');
     }
   }, [taskTime]);
 
   function handleOk() {
     if (taskTime?.task && timeRange) {
       const { task, index } = taskTime;
-      task.time[index] = timeRange;
+      if (description) {
+        timeRange.description = description;
+      }
+      tasksStore.setTime(task, index, timeRange);
     }
     onClose();
   }
@@ -46,12 +54,14 @@ export default function TimeRangeModal({
     onClose();
   }
 
-  function onChange(dates: RangeValue<Moment>) {
-    setTimeRange({
-      start: dates?.[0]?.toDate() || new Date(),
-      end: dates?.[1]?.toDate(),
-      description: '',
-    });
+  function onChange(field: RangeField) {
+    return (value: Moment | null) => {
+      const newTimeRange = {
+        ...timeRange,
+        [field]: value?.toDate() || undefined,
+      };
+      setTimeRange(newTimeRange as ITimeRangeModel);
+    };
   }
 
   return (
@@ -62,18 +72,39 @@ export default function TimeRangeModal({
       onCancel={handleCancel}
       okText="Save"
     >
-      <div>Task: {taskTime?.task.title}</div>
-
-      <RangePicker
-        showTime={{ format: 'HH:mm' }}
-        format="DD-MM-YYYY HH:mm"
-        value={[
-          moment(timeRange?.start),
-          timeRange?.end ? moment(timeRange?.end) : undefined,
-        ]}
-        onOk={onChange}
-        onChange={onChange}
-      />
+      <Form colon>
+        <Form.Item label="Task">
+          <div>{taskTime?.task.title}</div>
+        </Form.Item>
+        <Form.Item label="Description">
+          <Input
+            placeholder="Type description..."
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+        </Form.Item>
+        <Row>
+          <Col span={12}>
+            <Form.Item label="Start" labelCol={{ span: 24 }}>
+              <TimePicker
+                format="HH:mm"
+                value={moment(timeRange?.start)}
+                onChange={onChange(RangeField.start)}
+              />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item label="End" labelCol={{ span: 24 }}>
+              <TimePicker
+                format="HH:mm"
+                value={timeRange?.end && moment(timeRange?.end)}
+                onChange={onChange(RangeField.end)}
+                disabled={timeInProgress}
+              />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
     </Modal>
   );
 }