[HoursCard] Duration, project name, description

Author: Dmitry Yadrikhinsky

src/components/PlayStopButton/PlayStopButton.tsx

@@ -6,14 +6,19 @@ import './PlayStopButton.less';
 import CircleButton from '../CircleButton/CircleButton';
 import rootStore from '../../services/RootStore';
 import TaskModel from '../../models/TaskModel';
+import cn from '../../helpers/ClassNameHelper';
 
 const { tasksStore } = rootStore;
 
 interface PlayStopButtonProps {
   task: TaskModel | undefined;
+  className?: string;
 }
 
-export default function PlayStopButton({ task }: PlayStopButtonProps) {
+export default function PlayStopButton({
+  task,
+  className,
+}: PlayStopButtonProps) {
   function handleClick(e: SyntheticEvent) {
     e.stopPropagation();
     if (task) {
@@ -26,7 +31,10 @@ export default function PlayStopButton({ task }: PlayStopButtonProps) {
   }
 
   return (
-    <CircleButton onClick={handleClick} className="play-stop-button">
+    <CircleButton
+      onClick={handleClick}
+      className={cn('play-stop-button', className)}
+    >
       {!task?.active ? (
         <CaretRightFilled className="play-stop-button__icon" />
       ) : (

src/screens/hours/components/HoursCard/HoursCard.less

@@ -11,21 +11,34 @@
     cursor: pointer;
   }
 
-  .hours-card__title {
-    font-weight: bold;
+  .project-title {
     font-size: 12px;
   }
 
-  .hours-card__description {
+  .task-title {
+    font-weight: bold;
     font-size: 12px;
   }
 
-  .hours-card__time {
+  .description {
+    font-size: 11px;
+  }
+
+  .time-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 8px;
+  }
+
+  .time {
     font-size: 11px;
   }
 
   .play-stop-button {
     display: none;
+    position: absolute;
+    right: 8px;
   }
 
   &:hover .play-stop-button {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Card } from 'antd';
 import format from 'date-fns/format';
 import { observer } from 'mobx-react';
@@ -7,6 +7,10 @@ import './HoursCard.less';
 
 import TaskTimeModel from '../../../../models/TaskTimeModel';
 import PlayStopButton from '../../../../components/PlayStopButton/PlayStopButton';
+import rootStore from '../../../../services/RootStore';
+import { msToTime } from '../../../../helpers/DateTime';
+
+const { projectStore } = rootStore;
 
 const formatStr = 'HH:mm';
 function timeFormat(date: Date | undefined) {
@@ -26,15 +30,23 @@ export default observer(function HoursCard({
   onClick,
 }: HoursCardProps) {
   const { task, time } = taskTime;
+  const project = useMemo(() => projectStore.get(task.projectId), [task]);
+  const duration = time.end
+    ? msToTime(time.end.getTime() - time.start.getTime())
+    : '';
 
   return (
     <Card className="hours-card" onClick={() => onClick(taskTime)}>
       <div className="hours-card__info">
-        <div className="hours-card__title">{task.title}</div>
-        <div className="hours-card__description">{time.description}</div>
-        <div className="hours-card__time">{`${timeFormat(
-          time.start
-        )} - ${timeFormat(time.end)}`}</div>
+        <div className="project-title">{project?.title}</div>
+        <div className="task-title">{task.title}</div>
+        <div className="description">{time.description}</div>
+        <div className="time-container">
+          <div className="time">{`${timeFormat(time.start)} - ${timeFormat(
+            time.end
+          )}`}</div>
+          <div className="time">{duration}</div>
+        </div>
       </div>
       <PlayStopButton task={task} />
     </Card>