From ad3958ae8861f0135f8c330eea488fd94abbf47a Mon Sep 17 00:00:00 2001
From: Andrew P Maney <amaney@usc.edu>
Date: Wed, 11 Mar 2020 20:07:33 -0700
Subject: [PATCH] Tasks: adds checkbox to Task list item

---
 src/components/Tasks/TaskList.tsx     |  1 +
 src/components/Tasks/TaskListItem.tsx | 32 ++++++++++++++++++++++-----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/Tasks/TaskList.tsx b/src/components/Tasks/TaskList.tsx
index 5c29a41..1b3e065 100644
--- a/src/components/Tasks/TaskList.tsx
+++ b/src/components/Tasks/TaskList.tsx
@@ -42,6 +42,7 @@ export default React.memo(function TaskList(props: PropsType) {
         key={uid}
         entry={entry}
         onClick={props.onItemClick}
+        onSave={props.onItemSave}
       />
     );
   });
diff --git a/src/components/Tasks/TaskListItem.tsx b/src/components/Tasks/TaskListItem.tsx
index 6655929..4a17a2e 100644
--- a/src/components/Tasks/TaskListItem.tsx
+++ b/src/components/Tasks/TaskListItem.tsx
@@ -3,20 +3,42 @@
 
 import * as React from 'react';
 
-import { TaskType } from '../../pim-types';
+import { TaskType, TaskStatusType, PimType } from '../../pim-types';
 import { ListItem } from '../../widgets/List';
 
-const TaskListItem = React.memo((props: { entry: TaskType, onClick: (entry: TaskType) => void }) => {
+import Checkbox from '@material-ui/core/Checkbox';
+
+interface PropsType {
+  entry: TaskType;
+  onClick: (task: TaskType) => void;
+  onSave: (item: PimType, journalUid: string, originalItem?: PimType) => Promise<void>;
+}
+
+const TaskListItem = React.memo((props: PropsType) => {
   const {
-    entry,
+    entry: task,
     onClick,
+    onSave: save,
   } = props;
-  const title = entry.title;
+  const title = task.title;
+
+  function toggleComplete(_e: React.ChangeEvent<HTMLInputElement>, checked: boolean) {
+    const clonedTask = task.clone();
+    clonedTask.status = checked ? TaskStatusType.Completed : TaskStatusType.NeedsAction;
+    save(clonedTask, (task as any).journalUid, task);
+  }
 
   return (
     <ListItem
       primaryText={title}
-      onClick={() => onClick(entry)}
+      onClick={() => onClick(task)}
+      leftIcon={
+        <Checkbox
+          onClick={(e) => e.stopPropagation()}
+          onChange={toggleComplete}
+          checked={task.finished}
+        />
+      }
     />
   );
 });