[DrawerTask/Hours] Show modal

Author: Dmitry Yadrikhinsky

src/screens/hours/HoursView.tsx

@@ -17,7 +17,6 @@ const { tasksStore } = rootStore;
 
 export default observer(function HoursView() {
   const [date, setDate] = useState<Date>(new Date());
-  const [showModal, setShowModal] = useState<boolean>(false);
   const [currentTaskTime, setCurrentTaskTime] = useState<
     Undefined<TaskTimeModel>
   >();
@@ -34,16 +33,13 @@ export default observer(function HoursView() {
           <HoursCard
             key={index}
             taskTime={taskTime}
-            onClick={(taskTime) => {
-              setCurrentTaskTime(taskTime);
-              setShowModal(true);
-            }}
+            onClick={(taskTime) => setCurrentTaskTime(taskTime)}
           />
         ))}
       </Space>
       <TimeRangeModal
-        visible={showModal}
-        onClose={() => setShowModal(false)}
+        visible={!!currentTaskTime}
+        onClose={() => setCurrentTaskTime(undefined)}
         taskTime={currentTaskTime}
       />
     </Layout>

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Checkbox, Drawer, Input, Space } from 'antd';
 import { observer } from 'mobx-react';
 import { ProjectOutlined } from '@ant-design/icons';
@@ -10,6 +10,9 @@ import rootStore from '../../../../services/RootStore';
 import HoursByTask from '../HoursByTask/HoursByTask';
 import IconTile from '../../../../components/IconTile/IconTile';
 import Duration from './components/Duration';
+import TimeRangeModal from '../../../../components/TimeRangeModal/TimeRangeModal';
+import { Undefined } from '../../../../types/CommonTypes';
+import TaskTimeModel from '../../../../models/TaskTimeModel';
 
 const { projectStore } = rootStore;
 
@@ -24,9 +27,14 @@ export default observer(function DrawerTask({
   visible,
   onClose,
 }: DrawerTaskProps) {
+  const [currentTaskTime, setCurrentTaskTime] = useState<
+    Undefined<TaskTimeModel>
+  >();
+
   const project = useMemo(() => projectStore.get(task?.projectId || ''), [
     task,
   ]);
+
   return (
     <Drawer
       placement="right"
@@ -75,8 +83,16 @@ export default observer(function DrawerTask({
 
         <Duration task={task} />
 
-        <HoursByTask task={task} />
+        <HoursByTask
+          task={task}
+          onClick={(taskItem) => setCurrentTaskTime(taskItem)}
+        />
       </Space>
+      <TimeRangeModal
+        visible={!!currentTaskTime}
+        onClose={() => setCurrentTaskTime(undefined)}
+        taskTime={currentTaskTime}
+      />
     </Drawer>
   );
 });

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

@@ -9,9 +9,10 @@ import './HoursByTask.less';
 
 import TaskModel, { ITimeRangeModel } from '../../../../models/TaskModel';
 import { mapLastCurrent } from '../../../../helpers/IterateLastCurrent';
-import HoursItem from './HoursItem';
+import HoursItem from './components/HoursItem';
 import IconTile from '../../../../components/IconTile/IconTile';
 import { calcDuration, msToTime } from '../../../../helpers/DateTime';
+import TaskTimeModel from '../../../../models/TaskTimeModel';
 
 function dateFormat(date: Date) {
   return format(date, 'dd.MM.yyyy');
@@ -24,9 +25,13 @@ function getDurationPerDay(timeItems: ITimeRangeModel[], date: Date) {
 
 interface HoursByTaskProps {
   task?: TaskModel;
+  onClick: (task: TaskTimeModel) => void;
 }
 
-export default observer(function HoursByTask({ task }: HoursByTaskProps) {
+export default observer(function HoursByTask({
+  task,
+  onClick,
+}: HoursByTaskProps) {
   return (
     <Card className="hours-by-task-container">
       <Space direction="vertical" className="hours-by-task">
@@ -35,6 +40,15 @@ export default observer(function HoursByTask({ task }: HoursByTaskProps) {
         </IconTile>
         {task?.time.length === 0 && <div>No billed hours</div>}
         {mapLastCurrent(task?.time || [], (last, range, index) => {
+          const hoursItem = (
+            <HoursItem
+              range={range}
+              onClick={() => {
+                console.log(task);
+                task && onClick(new TaskTimeModel(task, range, index));
+              }}
+            />
+          );
           if (!last || !isSameDay(last.start, range.start)) {
             const duration = getDurationPerDay(task?.time || [], range.start);
             return (
@@ -43,11 +57,11 @@ export default observer(function HoursByTask({ task }: HoursByTaskProps) {
                   <div className="date">{dateFormat(range.start)}</div>
                   <div className="duration-date">{duration}</div>
                 </div>
-                <HoursItem range={range} />
+                {hoursItem}
               </div>
             );
           }
-          return <HoursItem key={index} range={range} />;
+          return hoursItem;
         })}
       </Space>
     </Card>

…ts/components/HoursByTask/HoursItem.less …ts/HoursByTask/components/HoursItem.lesssrc/screens/projects/components/HoursByTask/HoursItem.less renamed to src/screens/projects/components/HoursByTask/components/HoursItem.less src/screens/projects/components/HoursByTask/HoursItem.less renamed to src/screens/projects/components/HoursByTask/components/HoursItem.less

@@ -1,4 +1,6 @@
 .hours-item {
+  cursor: pointer;
+
   .description {
     font-size: 11px;
   }

…cts/components/HoursByTask/HoursItem.tsx …nts/HoursByTask/components/HoursItem.tsxsrc/screens/projects/components/HoursByTask/HoursItem.tsx renamed to src/screens/projects/components/HoursByTask/components/HoursItem.tsx src/screens/projects/components/HoursByTask/HoursItem.tsx renamed to src/screens/projects/components/HoursByTask/components/HoursItem.tsx

@@ -5,8 +5,8 @@ import { observer } from 'mobx-react';
 
 import './HoursItem.less';
 
-import { msToTime } from '../../../../helpers/DateTime';
-import { ITimeRangeModel } from '../../../../models/TaskModel';
+import { msToTime } from '../../../../../helpers/DateTime';
+import { ITimeRangeModel } from '../../../../../models/TaskModel';
 
 function hoursFormat(date: Date) {
   return format(date, 'HH:mm');
@@ -28,11 +28,12 @@ function getDuration(range: ITimeRangeModel): string {
 
 interface HoursItemProps {
   range: ITimeRangeModel;
+  onClick: () => void;
 }
 
-export default observer(function HoursItem({ range }: HoursItemProps) {
+export default observer(function HoursItem({ range, onClick }: HoursItemProps) {
   return (
-    <Card className="hours-item">
+    <Card className="hours-item" onClick={onClick}>
       <div className="description">{range.description}</div>
       <div className="bottom">
         <div className="hours-range">{hoursRangeFormat(range)}</div>