Start/end date

Author: Dmitry Yadrikhinsky

src/models/TaskModel.ts

@@ -4,11 +4,23 @@ import isSameDay from 'date-fns/isSameDay';
 import AbstractModel from '../base/AbstractModel';
 import { ITreeItem } from '../types/ITreeItem';
 
+export interface IJsonTimeRangeModel {
+  start: string;
+  end?: string;
+  description?: string;
+}
+
+export interface ITimeRangeModel {
+  start: Date;
+  end?: Date;
+  description?: string;
+}
+
 interface IJsonTaskModel extends ITreeItem<IJsonTaskModel> {
   projectId: string;
   checked: boolean;
   active: boolean;
-  time: string[][];
+  time: string[][] | IJsonTimeRangeModel[];
   datesInProgress: string[];
   children: IJsonTaskModel[];
   details: string[];
@@ -21,7 +33,7 @@ export default class TaskModel extends AbstractModel {
   projectId: string = '';
   checked: boolean = false;
   active: boolean = false;
-  time: Date[][] = [];
+  time: ITimeRangeModel[] = [];
   datesInProgress: Date[] = [];
   details: string = '';
   deleted: boolean = false;
@@ -30,7 +42,24 @@ export default class TaskModel extends AbstractModel {
     super();
     this.load(props);
     this.children = props.children?.map((json) => new TaskModel(json)) || [];
-    this.time = props.time?.map((range) => range.map((t) => new Date(t))) || [];
+    this.time =
+      props.time?.map<ITimeRangeModel>(
+        (range: string[] | IJsonTimeRangeModel) => {
+          if (Array.isArray(range)) {
+            return {
+              start: new Date(range[0]),
+              end: range[1] ? new Date(range[1]) : undefined,
+              description: undefined,
+            };
+          } else {
+            return {
+              start: new Date(range.start),
+              end: range.end ? new Date(range.end) : undefined,
+              description: undefined,
+            };
+          }
+        }
+      ) || [];
     this.datesInProgress =
       props.datesInProgress?.map((date) => new Date(date)) || [];
 
@@ -53,14 +82,10 @@ export default class TaskModel extends AbstractModel {
   }
 
   get duration() {
-    return this.time.reduce((prev: number, range: Date[]) => {
-      if (range.length > 0) {
-        const duration =
-          (range.length === 2 ? range[1].getTime() : Date.now()) -
-          range[0].getTime();
-        return prev + duration;
-      }
-      return prev;
+    return this.time.reduce((prev: number, range: ITimeRangeModel) => {
+      const { start, end } = range;
+      const duration = (end ? end.getTime() : Date.now()) - start.getTime();
+      return prev + duration;
     }, 0);
   }
 
@@ -83,19 +108,18 @@ export default class TaskModel extends AbstractModel {
   start() {
     this.active = true;
     this.addDateWhenWasInProgress(new Date());
-    this.time.forEach((range) => {
-      if (range.length === 1) {
-        range.push(new Date());
-      }
+    this.time.push({
+      start: new Date(),
+      end: undefined,
+      description: undefined,
     });
-    this.time.push([new Date()]);
   }
 
   end() {
     if (this.active) {
       this.active = false;
       const range = this.time[this.time.length - 1];
-      range.push(new Date());
+      range.end = new Date();
     }
   }
 

src/models/TaskTimeModel.ts

@@ -1,10 +1,10 @@
-import TaskModel from './TaskModel';
+import TaskModel, { ITimeRangeModel } from './TaskModel';
 
 export default class TaskTimeModel {
   task: TaskModel;
-  time: Date[];
+  time: ITimeRangeModel;
 
-  constructor(task: TaskModel, time: Date[]) {
+  constructor(task: TaskModel, time: ITimeRangeModel) {
     this.task = task;
     this.time = time;
   }

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

@@ -27,7 +27,7 @@ export default observer(function HoursCard({ taskTime }: HoursCardProps) {
     <Card className="hours-card">
       <div className="hours-card__info">
         <div>{task.title}</div>
-        <div>{`${timeFormat(time[0])} - ${timeFormat(time[1])}`}</div>
+        <div>{`${timeFormat(time.start)} - ${timeFormat(time.end)}`}</div>
       </div>
       <PlayStopButton task={task} />
     </Card>

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

@@ -28,10 +28,10 @@ export default function HoursByTask({ task }: HoursByTaskProps) {
         </IconTile>
         {task?.time.length === 0 && <div>No billed hours</div>}
         {mapLastCurrent(task?.time || [], (last, range, index) => {
-          if (!last || !isSameDay(last[0], range[0])) {
+          if (!last || !isSameDay(last.start, range.start)) {
             return (
               <div key={index}>
-                <div className="date">{dateFormat(range[0])}</div>
+                <div className="date">{dateFormat(range.start)}</div>
                 <HoursItem range={range} />
               </div>
             );

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

@@ -2,27 +2,28 @@ import React from 'react';
 import { Card } from 'antd';
 import format from 'date-fns/format';
 import { msToTime } from '../../../../helpers/DateTime';
+import { ITimeRangeModel } from '../../../../models/TaskModel';
 
 function hoursFormat(date: Date) {
   return format(date, 'HH:mm');
 }
 
-function hoursRangeFormat(date: Date[]) {
-  if (date.length === 2) {
-    return `${hoursFormat(date[0])} - ${hoursFormat(date[1])}`;
+function hoursRangeFormat(range: ITimeRangeModel) {
+  if (range.end) {
+    return `${hoursFormat(range.start)} - ${hoursFormat(range.end)}`;
   }
-  return `${hoursFormat(date[0])} -`;
+  return `${hoursFormat(range.start)} -`;
 }
 
-function getDuration(date: Date[]): string {
-  if (date.length === 2) {
-    return msToTime(date[1].getTime() - date[0].getTime(), false);
+function getDuration(range: ITimeRangeModel): string {
+  if (range.end) {
+    return msToTime(range.end.getTime() - range.start.getTime(), false);
   }
   return '';
 }
 
 interface HoursItemProps {
-  range: Date[];
+  range: ITimeRangeModel;
 }
 
 export default function HoursItem({ range }: HoursItemProps) {

src/services/TaskTimeItem.ts

@@ -12,13 +12,13 @@ export default function getTimeItems(
   tasks.forEach((task) => {
     const timeItems = task.time.filter(
       (range) =>
-        isSameDay(range[0], date) ||
-        (range.length >= 1 && isSameDay(range[1], date))
+        isSameDay(range.start, date) ||
+        (range.end && isSameDay(range.end, date))
     );
     taskTime = taskTime.concat(
       timeItems.map((time) => new TaskTimeModel(task, time))
     );
   });
-  taskTime = taskTime.sort((a, b) => compareAsc(a.time[0], b.time[0]));
+  taskTime = taskTime.sort((a, b) => compareAsc(a.time.start, b.time.start));
   return taskTime;
 }