Added time gaps between working hours items

Author: Yadro

src/helpers/IterateLastCurrent.ts

@@ -0,0 +1,33 @@
+type CallbackPrev<T, R> = (prev: T | undefined, cur: T, index: number) => R;
+
+export function mapPrevCurrent<T, R = any>(
+  items: T[],
+  callback: CallbackPrev<T, R>
+): R[] {
+  const result: R[] = [];
+  for (let i = 0; i < items.length; i++) {
+    if (i === 0) {
+      result.push(callback(undefined, items[i], i));
+    } else {
+      result.push(callback(items[i - 1], items[i], i));
+    }
+  }
+  return result;
+}
+
+type CallbackNext<T, R> = (cur: T, next: T | undefined, index: number) => R;
+
+export function mapCurrentNext<T, R = any>(
+  items: T[],
+  callback: CallbackNext<T, R>
+): R[] {
+  const result: R[] = [];
+  for (let i = 0; i < items.length; i++) {
+    if (i === items.length - 1) {
+      result.push(callback(items[i], undefined, i));
+    } else {
+      result.push(callback(items[i], items[i + 1], i));
+    }
+  }
+  return result;
+}

src/helpers/MapPrevCurrent.ts

@@ -11,9 +11,23 @@ import TaskTimeItemModel from '../../models/TaskTimeItemModel';
 import { Undefined } from '../../types/CommonTypes';
 import TotalHours from './components/TotalHours/TotalHours';
 import { createUseStyles } from 'react-jss';
+import { mapCurrentNext } from '../../helpers/MapPrevCurrent';
+import { ITimeRangeModel } from '../../models/TaskModel';
+import { msToTime } from '../../helpers/DateTime';
 
 const { tasksStore } = rootStore;
 
+function getDiff(
+  prev: ITimeRangeModel | undefined,
+  next: ITimeRangeModel | undefined
+) {
+  if (prev?.end && next?.start) {
+    return msToTime(next.start.getTime() - prev.end.getTime());
+  }
+
+  return '';
+}
+
 export default observer(function HoursView() {
   const classes = useStyles();
   const [date, setDate] = useState<Date>(new Date());
@@ -29,13 +43,20 @@ export default observer(function HoursView() {
       <Space direction="vertical">
         <SelectDate date={date} onChange={setDate} />
         <TotalHours timeItems={timeItems} />
-        {timeItems.map((taskTime, index) => (
-          <HoursCard
-            key={index}
-            taskTime={taskTime}
-            onClick={(taskTime) => setCurrentTaskTime(taskTime)}
-          />
-        ))}
+        <div className={classes.cards}>
+          {mapCurrentNext(timeItems, (item, next, index) => (
+            <div>
+              <HoursCard
+                key={index}
+                taskTime={item}
+                onClick={(taskTime) => setCurrentTaskTime(taskTime)}
+              />
+              <div className={classes.breakTime}>
+                {getDiff(item.time, next?.time)}
+              </div>
+            </div>
+          ))}
+        </div>
       </Space>
       <TimeRangeModal
         visible={!!currentTaskTime}
@@ -60,4 +81,14 @@ const useStyles = createUseStyles({
       padding: 8,
     },
   },
+  cards: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  breakTime: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    margin: '0 13px',
+    fontSize: 11,
+  },
 });

src/screens/hours/HoursView.tsx

@@ -62,6 +62,7 @@ export default observer(function HoursCard({
 const useStyle = createUseStyles({
   root: {
     width: 300,
+    margin: 4,
 
     '& .ant-card-body': {
       display: 'flex',

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

@@ -7,7 +7,7 @@ import { observer } from 'mobx-react';
 import { createUseStyles } from 'react-jss';
 
 import TaskModel, { ITimeRangeModel } from '../../../../models/TaskModel';
-import { mapPrevCurrent } from '../../../../helpers/IterateLastCurrent';
+import { mapPrevCurrent } from '../../../../helpers/MapPrevCurrent';
 import HoursItem from './components/HoursItem';
 import IconTile from '../../../../components/IconTile/IconTile';
 import { calcDuration, msToTime } from '../../../../helpers/DateTime';