Path to task

Author: Yadro

src/helpers/DateTime.ts

@@ -95,7 +95,7 @@ export function calcDurationGaps(taskTime: ITimeRangeModel[]): number {
 const TIME_FORMAT = 'HH:mm';
 const NO_TIME = '--:--';
 
-export function getTime(date: Date | undefined) {
+export function toTimeFormat(date: Date | undefined) {
   if (!date) {
     return NO_TIME;
   }

src/helpers/TaskHelper.ts

@@ -3,6 +3,7 @@ import { isSameDay, compareAsc } from 'date-fns';
 import TaskModel from '../modules/tasks/models/TaskModel';
 import TaskTimeItemModel from '../modules/tasks/models/TaskTimeItemModel';
 import TaskWithDurationModel from '../modules/tasks/models/TaskWithDurationModel';
+import TreeModelHelper from './TreeModelHelper';
 
 /**
  * Returns TaskTimeItemModel contains time range
@@ -18,7 +19,7 @@ import TaskWithDurationModel from '../modules/tasks/models/TaskWithDurationModel
  */
 export function getTimeItems(
   tasks: TaskModel[],
-  date: Date,
+  date: Date
 ): TaskTimeItemModel[] {
   let taskTime: TaskTimeItemModel[] = [];
   tasks.forEach((task) => {
@@ -45,9 +46,28 @@ export function getTimeItems(
  */
 export function getTasksWithTotalTimeForDay(
   tasks: TaskModel[],
-  date: Date,
+  date: Date
 ): TaskWithDurationModel[] {
   return tasks.map(
-    (task) => new TaskWithDurationModel(task, task.getDurationByDate(date)),
+    (task) => new TaskWithDurationModel(task, task.getDurationByDate(date))
   );
 }
+
+/**
+ * @example task1 → task2 → task
+ * @param task
+ */
+export function getTaskTitlesPath(task: TaskModel) {
+  const titlePath: string[] = [];
+
+  function processParent(nParent: TaskModel) {
+    titlePath.push(nParent.title);
+  }
+
+  TreeModelHelper.walkToParent(processParent, task);
+  let titlePathStr = titlePath.reverse().join(' → ');
+  if (titlePath.length > 0) {
+    titlePathStr += ' →';
+  }
+  return titlePathStr;
+}

src/helpers/TreeModelHelper.ts

@@ -145,7 +145,7 @@ const TreeModelHelper = {
   },
 
   walkRecursive<T extends ITreeItem<any>>(
-    fn: (t: T, p?: T) => void,
+    fn: (item: T, parent?: T) => void,
     treeItems: T[],
     parent?: T
   ) {
@@ -157,6 +157,16 @@ const TreeModelHelper = {
     });
   },
 
+  walkToParent<T extends ITreeItemWithParent<any>>(
+    fn: (nParent: T) => void,
+    treeItem: T
+  ) {
+    if (treeItem.parent) {
+      fn(treeItem.parent);
+      TreeModelHelper.walkToParent(fn, treeItem.parent);
+    }
+  },
+
   modifyItemsWithIdsRecursive<T extends ITreeItem<any>>(
     treeItems: T[],
     ids: string[],

src/main.dev.ts

@@ -89,7 +89,6 @@ const createWindow = async () => {
     process.env.NODE_ENV === 'development' ||
     process.env.DEBUG_PROD === 'true'
   ) {
-    // Doesnt work
     await installExtensions();
   }
 

src/package.json

@@ -1,7 +1,7 @@
 {
   "name": "time-tracker",
   "productName": "TimeTracker",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Start and stop time, jump between tasks, and add details on how time was spent.",
   "main": "./main.prod.js",
   "author": {

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

@@ -1,24 +1,16 @@
 import React, { useMemo } from 'react';
 import { Card } from 'antd';
-import format from 'date-fns/format';
 import { observer } from 'mobx-react';
 import { createUseStyles } from 'react-jss';
 
 import TaskTimeItemModel from '../../../../modules/tasks/models/TaskTimeItemModel';
 import PlayStopButton from '../../../../components/PlayStopButton/PlayStopButton';
 import rootStore from '../../../../modules/RootStore';
-import { msToTime } from '../../../../helpers/DateTime';
+import { msToTime, toTimeFormat } from '../../../../helpers/DateTime';
+import { getTaskTitlesPath } from '../../../../helpers/TaskHelper';
 
 const { projectStore } = rootStore;
 
-const formatStr = 'HH:mm';
-function timeFormat(date: Date | undefined) {
-  if (date) {
-    return format(date, formatStr);
-  }
-  return '';
-}
-
 interface HoursCardProps {
   taskTime: TaskTimeItemModel;
   onClick: (taskTime: TaskTimeItemModel) => void;
@@ -31,9 +23,11 @@ export default observer(function HoursCard({
   const { task, time } = taskTime;
   const classes = useStyle();
   const project = useMemo(() => projectStore.get(task.projectId), [task]);
-  const duration = time.end
-    ? msToTime(time.end.getTime() - time.start.getTime())
-    : '';
+  const duration = useMemo(
+    () => (time.end ? msToTime(time.end.getTime() - time.start.getTime()) : ''),
+    [time.end, time.start]
+  );
+  const titlePath = useMemo(() => getTaskTitlesPath(task), [task]);
 
   return (
     <Card
@@ -45,12 +39,13 @@ export default observer(function HoursCard({
     >
       <div className={classes.hoursCard}>
         <div className={classes.projectTitle}>{project?.title}</div>
+        <div className={classes.taskTitlePath}>{titlePath}</div>
         <div className={classes.taskTitle}>{task.title}</div>
         <div className={classes.description}>{time.description}</div>
         <div className={classes.timeContainer}>
-          <div className={classes.time}>{`${timeFormat(
-            time.start
-          )} - ${timeFormat(time.end)}`}</div>
+          <div className={classes.time}>
+            {`${toTimeFormat(time.start)} - ${toTimeFormat(time.end)}`}
+          </div>
           <div className={classes.time}>{duration}</div>
         </div>
       </div>
@@ -80,6 +75,9 @@ const useStyle = createUseStyles({
   projectTitle: {
     fontSize: 12,
   },
+  taskTitlePath: {
+    fontSize: 12,
+  },
   taskTitle: {
     fontWeight: 'bold',
     fontSize: 12,

src/screens/hours/components/TotalHours/TotalHours.tsx

@@ -6,7 +6,7 @@ import * as TaskHooks from '../../../../hooks/TaskHooks';
 import TaskTimeItemModel from '../../../../modules/tasks/models/TaskTimeItemModel';
 import {
   estimateWorkingTimeEnd,
-  getTime,
+  toTimeFormat,
   msToTime,
 } from '../../../../helpers/DateTime';
 import LabelWithTooltip, { ILabelWithTooltipProps } from './LabelWithTooltip';
@@ -38,7 +38,7 @@ const TotalHours = observer((props: TotalHoursProps) => {
 
   const items: ILabelWithTooltipProps[] = [
     {
-      label: getTime(startWorkingTime),
+      label: toTimeFormat(startWorkingTime),
       tooltip: 'Start time',
     },
     {
@@ -53,7 +53,7 @@ const TotalHours = observer((props: TotalHoursProps) => {
     },
     {
       icon: 'mi-notifications',
-      label: getTime(estimatedWorkingTimeEnd),
+      label: toTimeFormat(estimatedWorkingTimeEnd),
       tooltip: 'Estimated end time',
     },
     {

src/screens/projects/components/TreeList.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Empty, Tree } from 'antd';
+import { TreeProps } from 'antd/lib/tree/Tree';
 import { observer } from 'mobx-react';
 import { Key } from 'rc-tree/lib/interface';
 
 import { IDragInfo } from '../../../types/IDragInfo';
-import { ITreeItem } from '../../../types/ITreeItem';
-import { TreeProps } from 'antd/lib/tree/Tree';
+import { ITreeItemWithParent } from '../../../types/ITreeItem';
 
 interface TreeListProps {
   onSelect?: (selectedKeys: Key[]) => void;
@@ -19,7 +19,7 @@ interface TreePropsExtended<T>
   isDraggable?: () => boolean;
 }
 
-export default function TreeList<T extends ITreeItem<any>>(
+export default function TreeList<T extends ITreeItemWithParent<any>>(
   getData: () => T[],
   updateData: (items: T[]) => void,
   options: TreePropsExtended<T>
@@ -37,24 +37,24 @@ export default function TreeList<T extends ITreeItem<any>>(
         info.dropPosition - Number(dropPos[dropPos.length - 1]);
 
       const loop = (
-        items: ITreeItem[],
+        items: T[],
         key: string | number,
-        callback: (item: ITreeItem, key: number, items: ITreeItem[]) => void
+        callback: (item: T, key: number, items: T[]) => void
       ) => {
         for (let i = 0; i < items.length; i++) {
           if (items[i].key === key) {
             return callback(items[i], i, items);
           }
           if (items[i].children) {
-            loop(items[i].children as ITreeItem[], key, callback);
+            loop(items[i].children || [], key, callback);
           }
         }
         return undefined;
       };
       const dataCopy = [...data];
 
       // Find dragObject
-      let dragObj: ITreeItem;
+      let dragObj: T;
       loop(dataCopy, dragKey, (item, index, arr) => {
         arr.splice(index, 1);
         dragObj = item;
@@ -64,6 +64,7 @@ export default function TreeList<T extends ITreeItem<any>>(
         // Drop on the content
         loop(dataCopy, dropKey, (item) => {
           item.children = item.children || [];
+          dragObj.parent = item;
           // where to insert
           item.children.unshift(dragObj);
         });
@@ -74,17 +75,19 @@ export default function TreeList<T extends ITreeItem<any>>(
       ) {
         loop(dataCopy, dropKey, (item) => {
           item.children = item.children || [];
+          dragObj.parent = item;
           // where to insert
           item.children.unshift(dragObj);
           // in previous version, we use item.children.push(dragObj) to insert the
           // item to the tail of the children
         });
       } else {
-        let ar: ITreeItem[];
+        let ar: T[];
         let i: number;
         loop(dataCopy, dropKey, (_item, index, arr) => {
           ar = arr;
           i = index;
+          dragObj.parent = undefined;
         });
         if (dropPosition === -1) {
           // @ts-ignore

src/types/ITreeItem.ts

@@ -7,5 +7,5 @@ export interface ITreeItem<T extends ITreeItem<any> = ITreeItem<any>> {
 export interface ITreeItemWithParent<
   T extends ITreeItemWithParent<any> = ITreeItemWithParent<any>
 > extends ITreeItem<T> {
-  parent: T | null;
+  parent: T | undefined;
 }