[TimeRangeModal] Rename to TaskTimeItemModel, add duration

Author: Dmitry Yadrikhinsky

src/components/TimeRangeModal/TimeRangeModal.tsx

@@ -8,9 +8,10 @@ import { observer } from 'mobx-react';
 import './TimeRangeModal.less';
 
 import rootStore from '../../services/RootStore';
-import TaskTimeModel from '../../models/TaskTimeModel';
+import TaskTimeItemModel from '../../models/TaskTimeItemModel';
 import { ITimeRangeModel } from '../../models/TaskModel';
 import { Undefined } from '../../types/CommonTypes';
+import TimeRangeDuration from './components/TimeRangeDuration';
 
 const { tasksStore } = rootStore;
 
@@ -20,7 +21,7 @@ enum RangeField {
 }
 
 interface TimeRangeModalProps {
-  taskTime?: TaskTimeModel;
+  taskTime?: TaskTimeItemModel;
   visible: boolean;
   onClose: () => void;
 }
@@ -93,7 +94,7 @@ export default observer(function TimeRangeModal({
           />
         </Form.Item>
         <Row>
-          <Col span={12}>
+          <Col span={8}>
             <Form.Item label="Start" labelCol={{ span: 24 }}>
               <TimePicker
                 format="HH:mm"
@@ -102,7 +103,7 @@ export default observer(function TimeRangeModal({
               />
             </Form.Item>
           </Col>
-          <Col span={12}>
+          <Col span={8}>
             <Form.Item label="End" labelCol={{ span: 24 }}>
               <TimePicker
                 format="HH:mm"
@@ -112,6 +113,11 @@ export default observer(function TimeRangeModal({
               />
             </Form.Item>
           </Col>
+          <Col span={8}>
+            <Form.Item label="Duration" labelCol={{ span: 24 }}>
+              <TimeRangeDuration taskTimeItem={taskTime} />
+            </Form.Item>
+          </Col>
         </Row>
         <Button icon={<DeleteFilled />} onClick={handleDelete}>
           Remove

src/components/TimeRangeModal/components/TimeRangeDuration.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { useTimeItemsDuration } from '../../../hooks/TaskHooks';
+import TaskTimeItemModel from '../../../models/TaskTimeItemModel';
+
+interface TimeRangeDurationProps {
+  taskTimeItem?: TaskTimeItemModel;
+}
+
+export default function TimeRangeDuration({
+  taskTimeItem,
+}: TimeRangeDurationProps) {
+  const duration = useTimeItemsDuration(
+    taskTimeItem ? [taskTimeItem] : [],
+    true
+  );
+
+  return <div>{duration}</div>;
+}

src/hooks/TaskHooks.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 
 import { calcDuration, msToTime } from '../helpers/DateTime';
 import TaskModel from '../models/TaskModel';
-import TaskTimeModel from '../models/TaskTimeModel';
+import TaskTimeItemModel from '../models/TaskTimeItemModel';
 
 export function useTaskDuration(model: TaskModel | undefined) {
   model = model || ({} as TaskModel);
@@ -33,16 +33,23 @@ export function useTaskDuration(model: TaskModel | undefined) {
   return duration;
 }
 
-export function useTimeItemsDuration(taskTime: TaskTimeModel[]) {
+export function useTimeItemsDuration(
+  taskTime: TaskTimeItemModel[],
+  showSeconds: boolean = false
+) {
   const [duration, setDuration] = useState<string>('');
   const intervalRef = useRef<NodeJS.Timeout>();
 
   useEffect(() => {
     const haveActiveTime = taskTime.some((t) => !t.time.end);
-    setDuration(msToTime(calcDuration(taskTime.map((t) => t.time)), false));
+    setDuration(
+      msToTime(calcDuration(taskTime.map((t) => t.time)), showSeconds)
+    );
     if (haveActiveTime) {
       intervalRef.current = setInterval(() => {
-        setDuration(msToTime(calcDuration(taskTime.map((t) => t.time)), false));
+        setDuration(
+          msToTime(calcDuration(taskTime.map((t) => t.time)), showSeconds)
+        );
       }, 1000);
     }
     return () => {

src/models/TaskTimeModel.ts src/models/TaskTimeItemModel.tssrc/models/TaskTimeModel.ts renamed to src/models/TaskTimeItemModel.ts

@@ -1,6 +1,6 @@
 import TaskModel, { ITimeRangeModel } from './TaskModel';
 
-export default class TaskTimeModel {
+export default class TaskTimeItemModel {
   constructor(
     public task: TaskModel,
     public time: ITimeRangeModel,

src/screens/hours/HoursView.tsx

@@ -9,7 +9,7 @@ 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 TaskTimeItemModel from '../../models/TaskTimeItemModel';
 import { Undefined } from '../../types/CommonTypes';
 import TotalHours from './components/TotalHours/TotalHours';
 
@@ -18,7 +18,7 @@ const { tasksStore } = rootStore;
 export default observer(function HoursView() {
   const [date, setDate] = useState<Date>(new Date());
   const [currentTaskTime, setCurrentTaskTime] = useState<
-    Undefined<TaskTimeModel>
+    Undefined<TaskTimeItemModel>
   >();
 
   const tasks = useMemo(() => tasksStore.getTasksByDate(date), [date]);

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

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
 
 import './HoursCard.less';
 
-import TaskTimeModel from '../../../../models/TaskTimeModel';
+import TaskTimeItemModel from '../../../../models/TaskTimeItemModel';
 import PlayStopButton from '../../../../components/PlayStopButton/PlayStopButton';
 import rootStore from '../../../../services/RootStore';
 import { msToTime } from '../../../../helpers/DateTime';
@@ -21,8 +21,8 @@ function timeFormat(date: Date | undefined) {
 }
 
 interface HoursCardProps {
-  taskTime: TaskTimeModel;
-  onClick: (taskTime: TaskTimeModel) => void;
+  taskTime: TaskTimeItemModel;
+  onClick: (taskTime: TaskTimeItemModel) => void;
 }
 
 export default observer(function HoursCard({

src/screens/hours/components/TotalHours/TotalHours.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { observer } from 'mobx-react';
 
 import { useTimeItemsDuration } from '../../../../hooks/TaskHooks';
-import TaskTimeModel from '../../../../models/TaskTimeModel';
+import TaskTimeItemModel from '../../../../models/TaskTimeItemModel';
 
 interface TotalHoursProps {
-  timeItems: TaskTimeModel[];
+  timeItems: TaskTimeItemModel[];
 }
 
 export default observer(function TotalHours({ timeItems }: TotalHoursProps) {

src/screens/projects/components/DrawerTask/DrawerTask.tsx

@@ -12,7 +12,7 @@ import IconTile from '../../../../components/IconTile/IconTile';
 import Duration from './components/Duration';
 import TimeRangeModal from '../../../../components/TimeRangeModal/TimeRangeModal';
 import { Undefined } from '../../../../types/CommonTypes';
-import TaskTimeModel from '../../../../models/TaskTimeModel';
+import TaskTimeItemModel from '../../../../models/TaskTimeItemModel';
 
 const { projectStore } = rootStore;
 
@@ -28,7 +28,7 @@ export default observer(function DrawerTask({
   onClose,
 }: DrawerTaskProps) {
   const [currentTaskTime, setCurrentTaskTime] = useState<
-    Undefined<TaskTimeModel>
+    Undefined<TaskTimeItemModel>
   >();
 
   const project = useMemo(() => projectStore.get(task?.projectId || ''), [

src/screens/projects/components/HoursByTask/HoursByTask.tsx

@@ -12,7 +12,7 @@ import { mapLastCurrent } from '../../../../helpers/IterateLastCurrent';
 import HoursItem from './components/HoursItem';
 import IconTile from '../../../../components/IconTile/IconTile';
 import { calcDuration, msToTime } from '../../../../helpers/DateTime';
-import TaskTimeModel from '../../../../models/TaskTimeModel';
+import TaskTimeItemModel from '../../../../models/TaskTimeItemModel';
 
 function dateFormat(date: Date) {
   return format(date, 'dd.MM.yyyy');
@@ -25,7 +25,7 @@ function getDurationPerDay(timeItems: ITimeRangeModel[], date: Date) {
 
 interface HoursByTaskProps {
   task?: TaskModel;
-  onClick: (task: TaskTimeModel) => void;
+  onClick: (task: TaskTimeItemModel) => void;
 }
 
 export default observer(function HoursByTask({
@@ -45,7 +45,7 @@ export default observer(function HoursByTask({
               range={range}
               onClick={() => {
                 console.log(task);
-                task && onClick(new TaskTimeModel(task, range, index));
+                task && onClick(new TaskTimeItemModel(task, range, index));
               }}
             />
           );

src/services/TaskTimeItem.ts

@@ -1,23 +1,23 @@
 import isSameDay from 'date-fns/isSameDay';
 
 import TaskModel from '../models/TaskModel';
-import TaskTimeModel from '../models/TaskTimeModel';
+import TaskTimeItemModel from '../models/TaskTimeItemModel';
 import compareAsc from 'date-fns/compareAsc';
 
 export default function getTimeItems(
   tasks: TaskModel[],
   date: Date
-): TaskTimeModel[] {
-  let taskTime: TaskTimeModel[] = [];
+): TaskTimeItemModel[] {
+  let taskTime: TaskTimeItemModel[] = [];
   tasks.forEach((task) => {
-    const taskTimeItems: TaskTimeModel[] = [];
+    const taskTimeItems: TaskTimeItemModel[] = [];
     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))
       ) {
-        taskTimeItems.push(new TaskTimeModel(task, range, i));
+        taskTimeItems.push(new TaskTimeItemModel(task, range, i));
       }
     }
     taskTime = taskTime.concat(taskTimeItems);