TimeRangeModal

Author: Dmitry Yadrikhinsky

src/components/TimeRangeModal/TimeRangeModal.less

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { DatePicker, Modal } from 'antd';
+import { Moment } from 'moment/moment';
+import moment from 'moment';
+import { RangeValue } from 'rc-picker/lib/interface';
+
+import './TimeRangeModal.less';
+
+import rootStore from '../../services/RootStore';
+import TaskTimeModel from '../../models/TaskTimeModel';
+import { ITimeRangeModel } from '../../models/TaskModel';
+import { Undefined } from '../../types/CommonTypes';
+
+const { RangePicker } = DatePicker;
+
+interface TimeRangeModalProps {
+  taskTime?: TaskTimeModel;
+  visible: boolean;
+  onClose: () => void;
+}
+
+export default function TimeRangeModal({
+  taskTime,
+  visible,
+  onClose,
+}: TimeRangeModalProps) {
+  const [taskTimeItem, setTaskTimeItem] = useState(taskTime);
+  const [timeRange, setTimeRange] = useState<Undefined<ITimeRangeModel>>();
+
+  useEffect(() => {
+    if (taskTime) {
+      setTaskTimeItem(taskTime);
+      setTimeRange({ ...taskTime.time });
+    }
+  }, [taskTime]);
+
+  function handleOk() {
+    if (taskTime?.task && timeRange) {
+      const { task, index } = taskTime;
+      task.time[index] = timeRange;
+    }
+    onClose();
+  }
+
+  function handleCancel() {
+    onClose();
+  }
+
+  function onChange(dates: RangeValue<Moment>) {
+    setTimeRange({
+      start: dates?.[0]?.toDate() || new Date(),
+      end: dates?.[1]?.toDate(),
+      description: '',
+    });
+  }
+
+  return (
+    <Modal
+      title="Edit time range"
+      visible={visible}
+      onOk={handleOk}
+      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}
+      />
+    </Modal>
+  );
+}

src/components/TimeRangeModal/TimeRangeModal.tsx

@@ -1,11 +1,9 @@
 import TaskModel, { ITimeRangeModel } from './TaskModel';
 
 export default class TaskTimeModel {
-  task: TaskModel;
-  time: ITimeRangeModel;
-
-  constructor(task: TaskModel, time: ITimeRangeModel) {
-    this.task = task;
-    this.time = time;
-  }
+  constructor(
+    public task: TaskModel,
+    public time: ITimeRangeModel,
+    public index: number
+  ) {}
 }

src/models/TaskTimeModel.ts

@@ -8,11 +8,18 @@ import rootStore from '../../services/RootStore';
 import HoursCard from './components/HoursCard/HoursCard';
 import getTimeItems from '../../services/TaskTimeItem';
 import SelectDate from './components/SelectDate/SelectDate';
+import TimeRangeModal from '../../components/TimeRangeModal/TimeRangeModal';
+import TaskTimeModel from '../../models/TaskTimeModel';
+import { Undefined } from '../../types/CommonTypes';
 
 const { tasksStore } = rootStore;
 
 export default observer(function HoursView() {
   const [date, setDate] = useState<Date>(new Date());
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [currentTaskTime, setCurrentTaskTime] = useState<
+    Undefined<TaskTimeModel>
+  >();
 
   const tasks = tasksStore.getTasksByDate(date);
   const timeItems = getTimeItems(tasks, date);
@@ -22,9 +29,21 @@ export default observer(function HoursView() {
       <Space direction="vertical">
         <SelectDate date={date} onChange={setDate} />
         {timeItems.map((taskTime, index) => (
-          <HoursCard key={index} taskTime={taskTime} />
+          <HoursCard
+            key={index}
+            taskTime={taskTime}
+            onClick={(taskTime) => {
+              setCurrentTaskTime(taskTime);
+              setShowModal(true);
+            }}
+          />
         ))}
       </Space>
+      <TimeRangeModal
+        visible={showModal}
+        onClose={() => setShowModal(false)}
+        taskTime={currentTaskTime}
+      />
     </Layout>
   );
 });

src/screens/hours/HoursView.tsx

@@ -18,13 +18,17 @@ function timeFormat(date: Date | undefined) {
 
 interface HoursCardProps {
   taskTime: TaskTimeModel;
+  onClick: (taskTime: TaskTimeModel) => void;
 }
 
-export default observer(function HoursCard({ taskTime }: HoursCardProps) {
+export default observer(function HoursCard({
+  taskTime,
+  onClick,
+}: HoursCardProps) {
   const { task, time } = taskTime;
 
   return (
-    <Card className="hours-card">
+    <Card className="hours-card" onClick={() => onClick(taskTime)}>
       <div className="hours-card__info">
         <div>{task.title}</div>
         <div>{`${timeFormat(time.start)} - ${timeFormat(time.end)}`}</div>

src/screens/hours/components/HoursCard/HoursCard.tsx

@@ -10,14 +10,17 @@ export default function getTimeItems(
 ): TaskTimeModel[] {
   let taskTime: TaskTimeModel[] = [];
   tasks.forEach((task) => {
-    const timeItems = task.time.filter(
-      (range) =>
+    const taskTimeItems: TaskTimeModel[] = [];
+    for (let i = 0; i < task.time.length; i++) {
+      const range = task.time[i];
+      if (
         isSameDay(range.start, date) ||
         (range.end && isSameDay(range.end, date))
-    );
-    taskTime = taskTime.concat(
-      timeItems.map((time) => new TaskTimeModel(task, time))
-    );
+      ) {
+        taskTimeItems.push(new TaskTimeModel(task, range, i));
+      }
+    }
+    taskTime = taskTime.concat(taskTimeItems);
   });
   taskTime = taskTime.sort((a, b) => compareAsc(a.time.start, b.time.start));
   return taskTime;

src/services/TaskTimeItem.ts

@@ -1,7 +1,7 @@
 import { makeAutoObservable } from 'mobx';
 
 import TaskService from './TaskService';
-import TaskModel from '../../models/TaskModel';
+import TaskModel, { ITimeRangeModel } from '../../models/TaskModel';
 import TasksByProject from '../../models/TasksByProject';
 import TreeModelStoreHelper from '../../base/TreeModelStoreHelper';
 
@@ -19,6 +19,11 @@ export default class TaskStore {
     this.tasksService.save(this.tasks);
   }
 
+  setTime(task: TaskModel, timeIndex: number, timeRange: ITimeRangeModel) {
+    task.time[timeIndex] = timeRange;
+    this.tasksService.save(this.tasks);
+  }
+
   getTasks(projectId: string): TaskModel[] {
     return this.tasks[projectId] || [];
   }