Fixed preview for task duration

invoiceninja · Feb 21, 2025 · 7853a23 · 7853a23
1 parent acff011
commit 7853a23
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git a/src/pages/tasks/common/components/TaskDetails.tsx b/src/pages/tasks/common/components/TaskDetails.tsx
@@ -26,7 +26,7 @@ import { useAccentColor } from '$app/common/hooks/useAccentColor';
 import { useStart } from '../hooks/useStart';
 import { useStop } from '../hooks/useStop';
 import { isTaskRunning } from '../helpers/calculate-entity-state';
-import { TaskClock } from '../../kanban/components/TaskClock';
+import { formatTime, TaskClock } from '../../kanban/components/TaskClock';
 import { calculateTime } from '../helpers/calculate-time';
 import { useHasPermission } from '$app/common/hooks/permissions/useHasPermission';
 import { useEntityAssigned } from '$app/common/hooks/useEntityAssigned';
@@ -81,11 +81,7 @@ export function TaskDetails(props: Props) {
               {!isTaskRunning(task) && (
                 <div className="flex items-center">
                   {!isTaskRunning(task) && calculation && (
-                    <p>
-                      {new Date(Number(calculation) * 1000)
-                        .toISOString()
-                        .slice(11, 19)}
-                    </p>
+                    <p>{formatTime(Number(calculation))}</p>
                   )}
                 </div>
               )}

diff --git a/src/pages/tasks/common/helpers/calculate-time.ts b/src/pages/tasks/common/helpers/calculate-time.ts
@@ -12,6 +12,9 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
 export type TimeLogType = [number, number, string, boolean];
 export type TimeLogsType = TimeLogType[];
 
@@ -52,17 +55,11 @@ export function calculateHours(log: string, includeRunning = false) {
     seconds += Math.max(durationInSeconds, 0);
   }
 
-  const totalHours = Math.floor(seconds / 3600);
-  const totalMinutes = Math.floor((seconds % 3600) / 60);
-  const totalSecondsRemaining = seconds % 60;
-
-  if (totalHours < 24) {
-    return `${totalHours}:${totalMinutes
-      .toString()
-      .padStart(2, '0')}:${totalSecondsRemaining.toString().padStart(2, '0')}`;
+  if (seconds < 86400) {
+    return dayjs.duration(seconds, 'seconds').format('HH:mm:ss');
   }
 
-  return `${totalHours}h`;
+  return dayjs.duration(seconds, 'seconds').format('D[d] H[h] m[m] s[s]');
 }
 
 interface CalculateTimeOptions {
@@ -72,8 +69,6 @@ interface CalculateTimeOptions {
 
 export function calculateTime(log: string, options?: CalculateTimeOptions) {
   const times = parseTimeLog(log);
-  dayjs.extend(duration);
-  dayjs.extend(relativeTime);
 
   let seconds = 0;
 

diff --git a/src/pages/tasks/kanban/components/TaskClock.tsx b/src/pages/tasks/kanban/components/TaskClock.tsx
@@ -11,13 +11,27 @@
 import { Task } from '$app/common/interfaces/task';
 import { isTaskRunning } from '$app/pages/tasks/common/helpers/calculate-entity-state';
 import { calculateTime } from '$app/pages/tasks/common/helpers/calculate-time';
+import dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';
+import duration from 'dayjs/plugin/duration';
+
+dayjs.extend(duration);
 
 interface Props {
   task: Task;
   calculateLastTimeLog?: boolean;
 }
 
+export const formatTime = (seconds: number) => {
+  const ONE_DAY_IN_SECONDS = 86400;
+
+  if (seconds >= ONE_DAY_IN_SECONDS) {
+    return dayjs.duration(seconds, 'seconds').format('D[d] H[h] m[m] s[s]');
+  }
+
+  return dayjs.duration(seconds, 'seconds').format('HH:mm:ss');
+};
+
 export function TaskClock(props: Props) {
   const [seconds, setSeconds] = useState<number>(0);
 
@@ -77,9 +91,5 @@ export function TaskClock(props: Props) {
     };
   }, [props.task.updated_at]);
 
-  return (
-    <p>
-      {isTaskActive && new Date(seconds * 1000).toISOString().slice(11, 19)}
-    </p>
-  );
+  return <p>{isTaskActive && formatTime(seconds)}</p>;
 }