Duration by date in TaskDrawer

Author: Dmitry Yadrikhinsky

src/helpers/DateTime.ts

@@ -1,3 +1,5 @@
+import { ITimeRangeModel } from '../models/TaskModel';
+
 function timePad(time: number): string {
   return String(time).padStart(2, '0');
 }
@@ -28,3 +30,12 @@ export function msToTime(s: number, showSeconds: boolean = true) {
   }
   return `${timePad(hrs)}:${timePad(mins)}`;
 }
+
+export function calcDuration(taskTime: ITimeRangeModel[]) {
+  return taskTime.reduce((prev, timeRange) => {
+    if (timeRange.end) {
+      return prev + timeRange.end.getTime() - timeRange.start.getTime();
+    }
+    return prev + new Date().getTime() - timeRange.start.getTime();
+  }, 0);
+}

src/hooks/TaskHooks.ts

@@ -1,6 +1,7 @@
-import { msToTime } from '../helpers/DateTime';
-import TaskModel from '../models/TaskModel';
 import { useEffect, useRef, useState } from 'react';
+
+import { calcDuration, msToTime } from '../helpers/DateTime';
+import TaskModel from '../models/TaskModel';
 import TaskTimeModel from '../models/TaskTimeModel';
 
 export function useTaskDuration(model: TaskModel | undefined) {
@@ -32,25 +33,16 @@ export function useTaskDuration(model: TaskModel | undefined) {
   return duration;
 }
 
-function calcDuration(taskTime: TaskTimeModel[]) {
-  return taskTime.reduce((prev, curr) => {
-    if (curr.time.end) {
-      return prev + curr.time.end.getTime() - curr.time.start.getTime();
-    }
-    return prev + new Date().getTime() - curr.time.start.getTime();
-  }, 0);
-}
-
 export function useTimeItemsDuration(taskTime: TaskTimeModel[]) {
   const [duration, setDuration] = useState<string>('');
   const intervalRef = useRef<NodeJS.Timeout>();
 
   useEffect(() => {
     const haveActiveTime = taskTime.some((t) => !t.time.end);
-    setDuration(msToTime(calcDuration(taskTime), false));
+    setDuration(msToTime(calcDuration(taskTime.map((t) => t.time)), false));
     if (haveActiveTime) {
       intervalRef.current = setInterval(() => {
-        setDuration(msToTime(calcDuration(taskTime), false));
+        setDuration(msToTime(calcDuration(taskTime.map((t) => t.time)), false));
       }, 1000);
     }
     return () => {

src/screens/projects/components/HoursByTask/HoursByTask.less

@@ -15,15 +15,12 @@
     margin-left: 8px;
   }
 
+
   .hours-item .ant-card-body {
     padding: 8px;
   }
 
-  .description {
-    font-size: 11px;
-  }
-
-  .bottom {
+  .header-date {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -35,11 +32,8 @@
     font-weight: bold;
   }
 
-  .hours-range {
-    font-size: 10px;
-  }
-
-  .duration {
+  .duration-date {
+    margin-right: 8px;
     font-size: 11px;
     font-weight: bold;
   }

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

@@ -6,15 +6,21 @@ import format from 'date-fns/format';
 
 import './HoursByTask.less';
 
-import TaskModel from '../../../../models/TaskModel';
+import TaskModel, { ITimeRangeModel } from '../../../../models/TaskModel';
 import { mapLastCurrent } from '../../../../helpers/IterateLastCurrent';
 import HoursItem from './HoursItem';
 import IconTile from '../../../../components/IconTile/IconTile';
+import { calcDuration, msToTime } from '../../../../helpers/DateTime';
 
 function dateFormat(date: Date) {
   return format(date, 'dd.MM.yyyy');
 }
 
+function getDurationPerDay(timeItems: ITimeRangeModel[], date: Date) {
+  const filteredTimeItems = timeItems.filter((t) => isSameDay(t.start, date));
+  return msToTime(calcDuration(filteredTimeItems), false);
+}
+
 interface HoursByTaskProps {
   task: TaskModel | undefined;
 }
@@ -29,9 +35,13 @@ export default function HoursByTask({ task }: HoursByTaskProps) {
         {task?.time.length === 0 && <div>No billed hours</div>}
         {mapLastCurrent(task?.time || [], (last, range, index) => {
           if (!last || !isSameDay(last.start, range.start)) {
+            const duration = getDurationPerDay(task?.time || [], range.start);
             return (
               <div key={index}>
-                <div className="date">{dateFormat(range.start)}</div>
+                <div className="header-date">
+                  <div className="date">{dateFormat(range.start)}</div>
+                  <div className="duration-date">{duration}</div>
+                </div>
                 <HoursItem range={range} />
               </div>
             );

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

@@ -0,0 +1,20 @@
+.hours-item {
+  .description {
+    font-size: 11px;
+  }
+
+  .bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .hours-range {
+    font-size: 10px;
+  }
+
+  .duration {
+    font-size: 11px;
+    font-weight: bold;
+  }
+}

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Card } from 'antd';
 import format from 'date-fns/format';
+
+import './HoursItem.less';
+
 import { msToTime } from '../../../../helpers/DateTime';
 import { ITimeRangeModel } from '../../../../models/TaskModel';