Dashboard

Author: Yadro

…urs/components/SelectDate/SelectDate.tsx src/components/SelectDate/SelectDate.tsxsrc/screens/hours/components/SelectDate/SelectDate.tsx renamed to src/components/SelectDate/SelectDate.tsx src/screens/hours/components/SelectDate/SelectDate.tsx renamed to src/components/SelectDate/SelectDate.tsx

@@ -3,8 +3,21 @@ import isSameDay from 'date-fns/isSameDay';
 import TaskModel from '../models/TaskModel';
 import TaskTimeItemModel from '../models/TaskTimeItemModel';
 import compareAsc from 'date-fns/compareAsc';
+import TaskWithDurationModel from '../models/TaskWithDurationModel';
 
-export default function getTimeItems(
+/**
+ * Returns TaskTimeItemModel contains time range
+ * return {
+ *   task,
+ *   time: {
+ *     start: Date,
+ *     end: Date,
+ *     description
+ *   },
+ *   index,
+ * }
+ */
+export function getTimeItems(
   tasks: TaskModel[],
   date: Date
 ): TaskTimeItemModel[] {
@@ -25,3 +38,17 @@ export default function getTimeItems(
   taskTime = taskTime.sort((a, b) => compareAsc(a.time.start, b.time.start));
   return taskTime;
 }
+
+/**
+ * Return tasks with total time for selected day
+ * @param tasks
+ * @param date
+ */
+export function getTasksWithTotalTimeForDay(
+  tasks: TaskModel[],
+  date: Date
+): TaskWithDurationModel[] {
+  return tasks.map(
+    (task) => new TaskWithDurationModel(task, task.getDurationByDate(date))
+  );
+}

src/services/TaskTimeItem.ts src/helpers/TaskHelper.tssrc/services/TaskTimeItem.ts renamed to src/helpers/TaskHelper.ts

@@ -3,6 +3,7 @@ import isSameDay from 'date-fns/isSameDay';
 
 import AbstractModel from '../base/AbstractModel';
 import { ITreeItem } from '../types/ITreeItem';
+import { startOfDay } from 'date-fns';
 
 export interface IJsonTimeRangeModel {
   start: string;
@@ -11,7 +12,7 @@ export interface IJsonTimeRangeModel {
 }
 
 export interface ITimeRangeModel {
-  start?: Date;
+  start: Date;
   end?: Date;
   description?: string;
 }
@@ -36,7 +37,6 @@ export default class TaskModel extends AbstractModel {
   time: ITimeRangeModel[] = [];
   datesInProgress: Date[] = [];
   details: string = '';
-  deleted: boolean = false;
 
   constructor(props: IJsonTaskModel) {
     super();
@@ -82,10 +82,21 @@ export default class TaskModel extends AbstractModel {
   }
 
   get duration() {
-    return this.time.reduce((prev: number, range: ITimeRangeModel) => {
+    return this.time.reduce((acc: number, range: ITimeRangeModel) => {
       const { start, end } = range;
       const duration = (end ? end.getTime() : Date.now()) - start.getTime();
-      return prev + duration;
+      return acc + duration;
+    }, 0);
+  }
+
+  getDurationByDate(date: Date) {
+    return this.time.reduce((acc: number, range: ITimeRangeModel) => {
+      const { start, end } = range;
+      let duration = 0;
+      if (isSameDay(start, date)) {
+        duration = (end ? end.getTime() : Date.now()) - start.getTime();
+      }
+      return acc + duration;
     }, 0);
   }
 
@@ -101,10 +112,6 @@ export default class TaskModel extends AbstractModel {
     this.checked = checked;
   }
 
-  setDeleted() {
-    this.deleted = true;
-  }
-
   start() {
     this.active = true;
     this.addDateWhenWasInProgress(new Date());
@@ -128,9 +135,10 @@ export default class TaskModel extends AbstractModel {
   }
 
   private addDateWhenWasInProgress(date: Date) {
-    const found = this.datesInProgress.find((d) => isSameDay(d, date));
+    const normalDate = startOfDay(date);
+    const found = this.datesInProgress.find((d) => isSameDay(d, normalDate));
     if (!found) {
-      this.datesInProgress.push(date);
+      this.datesInProgress.push(normalDate);
     }
   }
 }

src/models/TaskModel.ts

@@ -0,0 +1,8 @@
+import TaskModel from './TaskModel';
+
+export default class TaskWithDurationModel {
+  constructor(
+    public task: TaskModel,
+    public duration: number // milliseconds
+  ) {}
+}

src/models/TaskWithDurationModel.ts

@@ -7,6 +7,7 @@ import Projects from './projects/Projects';
 import TaskControl from '../components/TaskControl/TaskControl';
 import HeaderMenu from '../components/HeaderMenu/HeaderMenu';
 import HoursView from './hours/HoursView';
+import Dashboard from './dashboard/Dashboard';
 
 const { Header } = Layout;
 
@@ -20,6 +21,9 @@ export default observer(function Main() {
         <HeaderMenu>
           <Link to="/projects">Projects</Link>
         </HeaderMenu>
+        <HeaderMenu>
+          <Link to="/dashboard">Dashboard</Link>
+        </HeaderMenu>
         <span className="flex-1" />
         <TaskControl />
       </Header>
@@ -33,6 +37,9 @@ export default observer(function Main() {
         <Route path="/projects">
           <Projects />
         </Route>
+        <Route path="/dashboard">
+          <Dashboard />
+        </Route>
       </Switch>
     </Layout>
   );

src/screens/Main.tsx

@@ -0,0 +1,54 @@
+import React, { useMemo, useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import { Layout, Space } from 'antd';
+import { observer } from 'mobx-react';
+
+import SelectDate from '../../components/SelectDate/SelectDate';
+import rootStore from '../../services/RootStore';
+import { getTasksWithTotalTimeForDay } from '../../helpers/TaskHelper';
+import HoursWithDuration from './components/HoursWithDuration';
+
+const { tasksStore } = rootStore;
+
+const Dashboard: React.FC = observer(() => {
+  const classes = useStyles();
+
+  const [date, setDate] = useState<Date>(new Date());
+  const tasks = useMemo(() => tasksStore.getTasksByDate(date), [date]);
+  const tasksWithDuration = useMemo(
+    () => getTasksWithTotalTimeForDay(tasks, date),
+    [tasks, date]
+  );
+
+  return (
+    <Layout className={classes.root}>
+      <Space direction="vertical">
+        <div className={classes.selectDate}>
+          <SelectDate date={date} onChange={setDate} />
+        </div>
+        {tasksWithDuration.map((tasksWithDuration) => (
+          <HoursWithDuration
+            key={tasksWithDuration.task.key}
+            taskWithDuration={tasksWithDuration}
+          />
+        ))}
+      </Space>
+    </Layout>
+  );
+});
+
+const useStyles = createUseStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    overflowY: 'auto',
+    padding: 12,
+  },
+  selectDate: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+});
+
+export default Dashboard;

src/screens/dashboard/Dashboard.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Card } from 'antd';
+import { createUseStyles } from 'react-jss';
+
+import TaskWithDurationModel from '../../../models/TaskWithDurationModel';
+import { msToTime } from '../../../helpers/DateTime';
+
+interface IHoursWithDurationProps {
+  taskWithDuration: TaskWithDurationModel;
+}
+
+const HoursWithDuration: React.FC<IHoursWithDurationProps> = ({
+  taskWithDuration,
+}: IHoursWithDurationProps) => {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.root}>
+      <div>{taskWithDuration.task.title}</div>
+      <div>{msToTime(taskWithDuration.duration)}</div>
+    </Card>
+  );
+};
+
+const useStyles = createUseStyles({
+  root: {
+    width: 300,
+    '& .ant-card-body': {
+      padding: 8,
+    },
+  },
+});
+
+export default HoursWithDuration;

src/screens/dashboard/components/HoursWithDuration.tsx

@@ -4,8 +4,8 @@ import { observer } from 'mobx-react';
 
 import rootStore from '../../services/RootStore';
 import HoursCard from './components/HoursCard/HoursCard';
-import getTimeItems from '../../services/TaskTimeItem';
-import SelectDate from './components/SelectDate/SelectDate';
+import { getTimeItems } from '../../helpers/TaskHelper';
+import SelectDate from '../../components/SelectDate/SelectDate';
 import TimeRangeModal from '../../components/TimeRangeModal/TimeRangeModal';
 import TaskTimeItemModel from '../../models/TaskTimeItemModel';
 import { Undefined } from '../../types/CommonTypes';