Features 1.0.8

.vscode/settings.json

@@ -34,5 +34,5 @@
     "*.{css,sass,scss}.d.ts": true
   },
 
-  "cSpell.words": ["Popconfirm"]
+  "cSpell.words": ["Popconfirm", "Sider"]
 }

src/components/ProgressBar.tsx

@@ -53,27 +53,30 @@ function ProgressBar() {
     timeItems,
   ]);
 
-  const { estimatedWorkingTimeEnd, progress } = TaskTimeService.getDayProgress(
+  const {
+    estimatedWorkingTimeEnd,
+    progress,
+    realProgress,
+  } = TaskTimeService.getDayProgress(
     timeRangeItems,
     workingTimeStart,
     workingHoursMs
   );
 
-  const progressRound = Math.round(progress);
   const marks: Record<number, string> = {
     0: toTimeFormat(workingTimeStart),
     100: toTimeFormat(estimatedWorkingTimeEnd),
   };
-  if (progressRound > 10 && progressRound < 90) {
-    marks[progressRound] = `${progressRound}%`;
+  if (progress > 10 && progress < 90) {
+    marks[progress] = `${realProgress}%`;
   }
 
   const tipFormatter = useMemo(() => {
-    if (progressRound <= 10 || progressRound >= 90) {
-      return (value?: number) => `${value}%`;
+    if (progress <= 10 || progress >= 90) {
+      return () => `${realProgress}%`;
     }
     return null;
-  }, [progressRound]);
+  }, [progress, realProgress]);
 
   return (
     <Slider

src/helpers/ArrayHelper.ts

@@ -48,3 +48,7 @@ export function mapCurrentNext<T, Result = any>(
 export function last<T>(arr: T[]): T | undefined {
   return arr[arr.length - 1];
 }
+
+export function first<T>(arr: T[]): T | undefined {
+  return arr[0];
+}

src/package.json

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

src/screens/projects/ProjectsScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Button, Layout, Space } from 'antd';
 import { observer } from 'mobx-react';
 import { Key } from 'rc-tree/lib/interface';
@@ -17,6 +17,7 @@ import TaskNode from './components/TaskNode/TaskNode';
 import DrawerTask from './components/DrawerTask/DrawerTask';
 import ProjectNode from './components/ProjectNode/ProjectNode';
 import EditProjectModal from './components/ProjectModals/EditProjectModal';
+import { first } from '../../helpers/ArrayHelper';
 
 const { Sider } = Layout;
 
@@ -75,8 +76,18 @@ const ProjectList = TreeList<ProjectModel>(
   }
 );
 
-export default observer(function Projects() {
-  const classes = useStyles();
+function handleSelectProject(items: Key[]) {
+  if (items.length > 0) {
+    projectStore.setActiveProject(first(items) as string);
+  }
+}
+
+function clearEditableProject() {
+  projectStore.setEditableProject(undefined);
+}
+
+function Projects() {
+  const style = useStyles();
   const [showProjectModal, setShowProjectModal] = useState<boolean>(false);
   const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
   const [selectedTask, setSelectedTask] = useState<TaskModel | undefined>();
@@ -85,24 +96,26 @@ export default observer(function Projects() {
     setShowProjectModal(true);
   }
 
-  function handleSelectProject(items: Key[]) {
-    if (items.length > 0) {
-      projectStore.setActiveProject(items[0] as string);
-    }
-  }
-
-  function handleSelectTask(items: Key[]) {
+  const handleSelectTask = useCallback((items: Key[]) => {
     if (items.length > 0) {
       setDrawerVisible(true);
-      const task = tasksStore.getTaskByKey(items[0] as string);
+      const task = tasksStore.getTaskByKey(first(items) as string);
       setSelectedTask(task);
     }
-  }
+  }, []);
+
+  const handleCloseDrawer = useCallback(() => {
+    setDrawerVisible(false);
+  }, []);
+
+  const handleHideProjectModal = useCallback(() => {
+    setShowProjectModal(false);
+  }, []);
 
   return (
     <Layout>
-      <Sider width={250} className={classes.sider}>
-        <Layout style={{ padding: '12px' }}>
+      <Sider width={250} className={style.sider}>
+        <Layout className={style.padding}>
           <Space direction="vertical">
             <ProjectList onSelect={handleSelectProject} />
             <Button onClick={handleCreateProject} icon={<PlusOutlined />}>
@@ -111,34 +124,52 @@ export default observer(function Projects() {
           </Space>
         </Layout>
       </Sider>
-      <Layout style={{ padding: '24px' }} className={classes.tasks}>
-        <Space className="root" direction="vertical">
+      <Layout className={style.taskList}>
+        <div className={style.root}>
           <TaskList onSelect={handleSelectTask} />
-          <TaskInput />
-        </Space>
+          <div className={style.stickyTaskInput}>
+            <TaskInput />
+          </div>
+        </div>
       </Layout>
-      {showProjectModal && (
-        <ProjectModal onClose={() => setShowProjectModal(false)} />
-      )}
+      {showProjectModal && <ProjectModal onClose={handleHideProjectModal} />}
       <EditProjectModal
         project={projectStore.editProject}
-        onClose={() => projectStore.setEditableProject(undefined)}
+        onClose={clearEditableProject}
       />
       <DrawerTask
         task={selectedTask}
         visible={drawerVisible}
-        onClose={() => setDrawerVisible(false)}
+        onClose={handleCloseDrawer}
       />
     </Layout>
   );
-});
+}
+
+export default observer(Projects);
 
 const useStyles = createUseStyles({
   sider: {
     backgroundColor: '#f0f2f5',
     borderRight: '1px solid #d9d9d9',
   },
-  tasks: {
+  taskList: {
     overflowY: 'auto',
+    padding: '12px 12px 0 12px',
+  },
+  padding: {
+    padding: 12,
+  },
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    height: '100%',
+  },
+  stickyTaskInput: {
+    position: 'sticky',
+    bottom: 0,
+    padding: '12px 0',
+    backgroundColor: '#f0f2f5',
   },
 });

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Checkbox, Drawer, Input, Space } from 'antd';
 import { observer } from 'mobx-react';
 import { ProjectOutlined } from '@ant-design/icons';
@@ -37,6 +37,22 @@ export default observer(function DrawerTask({
     task,
   ]);
 
+  const handleTitleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const title = e.target.value;
+      task?.setTitle(title);
+    },
+    [task]
+  );
+
+  const handleDetailsChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const details = e.target.value;
+      task?.setDetails(details);
+    },
+    [task]
+  );
+
   return (
     <Drawer
       placement="right"
@@ -62,26 +78,17 @@ export default observer(function DrawerTask({
           </IconTile>
           <span className={classes.projectTitle}>{project?.title}</span>
         </div>
-        <Input
+        <TextArea
           value={task?.title}
+          rows={3}
           placeholder="Task description"
-          onChange={(e) => {
-            const title = e.target.value;
-            if (task) {
-              task.setTitle(title);
-            }
-          }}
+          onChange={handleTitleChange}
         />
         <TextArea
           placeholder="Details"
           rows={4}
           value={task?.details}
-          onChange={(e) => {
-            const details = e.target.value;
-            if (task) {
-              task.setDetails(details);
-            }
-          }}
+          onChange={handleDetailsChange}
         />
 
         <Duration task={task} />

src/screens/projects/components/TaskInput.tsx

@@ -6,7 +6,11 @@ import { v4 as uuid } from 'uuid';
 import rootStore from '../../../modules/RootStore';
 import TaskModel from '../../../modules/tasks/models/TaskModel';
 
-export default observer(function TaskInput() {
+interface Props {
+  className?: string;
+}
+
+export default observer(function TaskInput({ className }: Props) {
   const [text, setText] = useState('');
 
   const handleKeyPress = useCallback(
@@ -39,6 +43,7 @@ export default observer(function TaskInput() {
 
   return (
     <Input
+      className={className}
       placeholder="Create task..."
       onKeyPress={handleKeyPress}
       value={text}

src/services/TaskTimeService.ts

@@ -7,6 +7,7 @@ import { ITimeRangeModel } from '../modules/tasks/models/TaskModel';
 
 export type DayProgress = {
   progress: number;
+  realProgress: number;
   durationMs: number;
   restMs: number;
   estimatedWorkingTimeEnd: Date | undefined;
@@ -21,6 +22,7 @@ const TaskTimeService = {
     if (!workingTimeStart) {
       return {
         progress: 0,
+        realProgress: 0,
         durationMs: 0,
         restMs: 0,
         estimatedWorkingTimeEnd: undefined,
@@ -36,20 +38,28 @@ const TaskTimeService = {
     );
 
     let progress = 0;
+    let realProgress = 0;
     if (estimatedWorkingTimeEnd) {
       const durationWorkDayMs =
         estimatedWorkingTimeEnd.getTime() - workingTimeStart.getTime() || 1;
-      progress = ((durationMs + restMs) * 100) / durationWorkDayMs;
-      progress = Math.min(progress, 100);
+      progress = max100(
+        Math.round(((durationMs + restMs) * 100) / durationWorkDayMs)
+      );
+      realProgress = max100(Math.round((durationMs * 100) / workingHoursMs));
     }
 
     return {
       progress,
+      realProgress,
       durationMs,
       restMs,
       estimatedWorkingTimeEnd,
     };
   },
 };
 
+function max100(num: number) {
+  return Math.min(num, 100);
+}
+
 export default TaskTimeService;