HoursByTask

Author: Dmitry Yadrikhinsky

src/helpers/DateTime.ts

@@ -2,6 +2,10 @@ function timePad(time: number): string {
   return String(time).padStart(2, '0');
 }
 
+function onlySecs(secs: number) {
+  return `${secs}s`;
+}
+
 export function msToTime(s: number, showSeconds: boolean = true) {
   const ms = s % 1000;
   s = (s - ms) / 1000;
@@ -11,7 +15,13 @@ export function msToTime(s: number, showSeconds: boolean = true) {
   const hrs = (s - mins) / 60;
 
   if (showSeconds) {
+    if (hrs === 0 && mins === 0) {
+      return onlySecs(secs);
+    }
     return `${timePad(hrs)}:${timePad(mins)}:${timePad(secs)}`;
   }
+  if (hrs === 0 && mins === 0) {
+    return onlySecs(secs);
+  }
   return `${timePad(hrs)}:${timePad(mins)}`;
 }

src/helpers/IterateLastCurrent.ts

@@ -0,0 +1,16 @@
+type Callback<T, R> = (last: T | undefined, cur: T) => R;
+
+export function mapLastCurrent<T, R = any>(
+  items: T[],
+  callback: Callback<T, R>
+): R[] {
+  const result: R[] = [];
+  for (let i = 0; i < items.length; i++) {
+    if (i === 0) {
+      result.push(callback(undefined, items[i]));
+    } else {
+      result.push(callback(items[i - 1], items[i]));
+    }
+  }
+  return result;
+}

src/screens/projects/components/DrawerTask/DrawerTask.less

@@ -0,0 +1,3 @@
+.drawer-task {
+  width: 100%;
+}

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

@@ -1,10 +1,14 @@
 import React, { useMemo } from 'react';
 import { Checkbox, Drawer, Input, Space } from 'antd';
 import { observer } from 'mobx-react';
+import { FieldTimeOutlined } from '@ant-design/icons';
+
+import './DrawerTask.less';
 
 import TaskModel from '../../../../models/TaskModel';
 import rootStore from '../../../../services/RootStore';
 import { useTaskDuration } from '../../../../hooks/TaskHooks';
+import HoursByTask from '../HoursByTask/HoursByTask';
 
 const { projectStore } = rootStore;
 
@@ -31,7 +35,7 @@ export default observer(function DrawerTask({
       onClose={onClose}
       visible={visible}
     >
-      <Space direction="vertical">
+      <Space direction="vertical" className="drawer-task">
         <Checkbox
           onChange={(e) => {
             const { checked } = e.target;
@@ -63,7 +67,12 @@ export default observer(function DrawerTask({
             }
           }}
         />
-        <div>Duration: {duration}</div>
+        <div>
+          <FieldTimeOutlined />
+          <span>: {duration}</span>
+        </div>
+
+        <HoursByTask task={task} />
       </Space>
     </Drawer>
   );

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

@@ -0,0 +1,27 @@
+.hours-by-task {
+  width: 100%;
+}
+
+.hours-by-task .label {
+  margin-left: 8px;
+}
+
+.hours-item .ant-card-body {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 8px;
+}
+
+.space {
+  flex: 1;
+}
+
+.hours-range {
+  font-size: 10px;
+}
+
+.duration {
+  font-size: 11px;
+  font-weight: bold;
+}

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Space } from 'antd';
+import { FieldTimeOutlined } from '@ant-design/icons';
+import isSameDay from 'date-fns/isSameDay';
+import format from 'date-fns/format';
+
+import './HoursByTask.less';
+
+import TaskModel from '../../../../models/TaskModel';
+import { mapLastCurrent } from '../../../../helpers/IterateLastCurrent';
+import HoursItem from './HoursItem';
+
+function dateFormat(date: Date) {
+  return format(date, 'dd.MM.yyyy');
+}
+
+interface HoursByTaskProps {
+  task: TaskModel | undefined;
+}
+
+export default function HoursByTask({ task }: HoursByTaskProps) {
+  return (
+    <Space direction="vertical" className="hours-by-task">
+      <div>
+        <FieldTimeOutlined />
+        <span className="label">Hours:</span>
+      </div>
+      {task?.time.length === 0 && <div>No billed hours</div>}
+      {mapLastCurrent(task?.time || [], (last, range) => {
+        if (!last || !isSameDay(last[0], range[0])) {
+          return (
+            <div>
+              <div>{dateFormat(range[0])}</div>
+              <HoursItem range={range} />
+            </div>
+          );
+        }
+        return <HoursItem range={range} />;
+      })}
+    </Space>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Card } from 'antd';
+import format from 'date-fns/format';
+import { msToTime } from '../../../../helpers/DateTime';
+
+function hoursFormat(date: Date) {
+  return format(date, 'HH:mm');
+}
+
+function hoursRangeFormat(date: Date[]) {
+  if (date.length === 2) {
+    return `${hoursFormat(date[0])} - ${hoursFormat(date[1])}`;
+  }
+  return `${hoursFormat(date[0])} -`;
+}
+
+function getDuration(date: Date[]): string {
+  if (date.length === 2) {
+    return msToTime(date[1].getTime() - date[0].getTime(), false);
+  }
+  return '';
+}
+
+interface HoursItemProps {
+  range: Date[];
+}
+
+export default function HoursItem({ range }: HoursItemProps) {
+  return (
+    <Card className="hours-item">
+      <div className="hours-range">{hoursRangeFormat(range)}</div>
+      <div className="space" />
+      <div className="duration">{getDuration(range)}</div>
+    </Card>
+  );
+}