add menu items to overview (#108)

Author: dkhalife

src/views/Modals/Inputs/DateModal.tsx

@@ -4,7 +4,6 @@ import moment from 'moment'
 import React from 'react'
 
 interface DateModalProps {
-  current: Date | null
   title: string
 
   onClose: (newDate: Date | null) => void
@@ -21,13 +20,14 @@ export class DateModal extends React.Component<DateModalProps, DateModalState> {
     super(props)
 
     this.state = {
-      date: props.current,
+      date: null,
       isOpen: false,
     }
   }
 
-  public open = async (): Promise<void> => {
+  public open = async (current: Date | null): Promise<void> => {
     await this.setState({
+      date: current,
       isOpen: true,
     })
 
@@ -53,7 +53,7 @@ export class DateModal extends React.Component<DateModalProps, DateModalState> {
   public render(): React.ReactNode {
     const { title } = this.props
     const { isOpen } = this.state
-    const date = moment(this.state.date).format('yyyy-MM-DD')
+    const date = moment(this.state.date).format('yyyy-MM-DD[T]HH:mm')
 
     return (
       <Modal
@@ -64,7 +64,7 @@ export class DateModal extends React.Component<DateModalProps, DateModalState> {
           <Typography>{title}</Typography>
           <Input
             sx={{ mt: 3 }}
-            type='date'
+            type='datetime-local'
             value={date}
             onChange={this.onDateChange}
             ref={this.inputRef}

src/views/Tasks/TaskCard.tsx

@@ -134,7 +134,7 @@ export class TaskCard extends React.Component<TaskCardProps, TaskCardState> {
 
   private onChangeDueDate = () => {
     this.dismissMoreMenu()
-    this.dateModalRef.current?.open()
+    this.dateModalRef.current?.open(this.props.task.next_due_date)
   }
 
   private hasAnyNotificationsActive = () => {
@@ -362,7 +362,6 @@ export class TaskCard extends React.Component<TaskCardProps, TaskCardState> {
           <DateModal
             key={'changeDueDate' + task.id}
             ref={this.dateModalRef}
-            current={task.next_due_date}
             title={`Change due date`}
             onClose={this.handleChangeDueDate}
           />

src/views/Tasks/TasksOverview.tsx

@@ -1,11 +1,13 @@
-import { GetTasks, MarkTaskComplete, UpdateDueDate } from '@/api/tasks'
+import { DeleteTask, GetTasks, MarkTaskComplete, UpdateDueDate } from '@/api/tasks'
 import { Task, getDueDateChipColor, getDueDateChipText } from '@/models/task'
 import {
   CancelRounded,
   SearchRounded,
   CheckBox,
   Edit,
   History,
+  CalendarMonth,
+  Delete,
 } from '@mui/icons-material'
 import {
   Container,
@@ -25,6 +27,7 @@ import { setTitle } from '@/utils/dom'
 import { getTextColorFromBackgroundColor } from '@/utils/colors'
 import { sortTasksByDueDate } from '@/utils/tasks'
 import { Loading } from '@/Loading'
+import { ConfirmationModal } from '../Modals/Inputs/ConfirmationModal'
 
 type TasksOverviewProps = object & WithNavigate
 
@@ -41,6 +44,8 @@ export class TasksOverview extends React.Component<
   TasksOverviewState
 > {
   private dateModalRef = React.createRef<DateModal>()
+  private confirmationModalRef = React.createRef<ConfirmationModal>()
+  private taskBeingDeleted: Task | null = null
 
   constructor(props: TasksOverviewProps) {
     super(props)
@@ -139,7 +144,39 @@ export class TasksOverview extends React.Component<
     await this.setState({
       taskId: task.id,
     })
-    this.dateModalRef.current?.open()
+    this.dateModalRef.current?.open(task.next_due_date)
+  }
+
+  private onViewHistory = (task: Task) => {
+    const { navigate } = this.props
+    navigate(NavigationPaths.TaskHistory(task.id))
+  }
+
+  private onDeleteTask = async (task: Task) => {
+    this.taskBeingDeleted = task
+    this.confirmationModalRef.current?.open()
+  }
+
+  private onDeleteConfirm = async (isConfirmed: boolean) => {
+    const task = this.taskBeingDeleted
+    this.taskBeingDeleted = null
+
+    if (!isConfirmed) {
+      return
+    }
+
+    const { tasks } = this.state
+    if (!task) {
+      throw new Error('Task to delete is not set')
+    }
+
+    await DeleteTask(task.id)
+    const newTasks = tasks.filter(t => t.id !== task.id)
+
+    this.setState({
+      tasks: newTasks,
+      filteredTasks: newTasks,
+    })
   }
 
   render(): React.ReactNode {
@@ -204,9 +241,9 @@ export class TasksOverview extends React.Component<
           <thead>
             <tr>
               <th>Due</th>
-              <th>Task</th>
+              <th>Title</th>
               <th>Labels</th>
-              <th>Action</th>
+              <th>Actions</th>
             </tr>
           </thead>
           <tbody>
@@ -261,6 +298,14 @@ export class TasksOverview extends React.Component<
                       size='sm'
                       onClick={() => this.onReschedule(task)}
                       aria-setsize={2}
+                    >
+                      <CalendarMonth />
+                    </IconButton>
+                    <IconButton
+                      variant='outlined'
+                      size='sm'
+                      onClick={() => this.onViewHistory(task)}
+                      aria-setsize={2}
                     >
                       <History />
                     </IconButton>
@@ -271,6 +316,14 @@ export class TasksOverview extends React.Component<
                     >
                       <Edit />
                     </IconButton>
+                    <IconButton
+                      variant='outlined'
+                      size='sm'
+                      onClick={() => this.onDeleteTask(task)}
+                      aria-setsize={2}
+                    >
+                      <Delete />
+                    </IconButton>
                   </ButtonGroup>
                 </td>
               </tr>
@@ -280,10 +333,17 @@ export class TasksOverview extends React.Component<
         <DateModal
           ref={this.dateModalRef}
           key={taskId}
-          current={null}
           title={`Change due date`}
           onClose={this.handleChangeDueDate}
         />
+        <ConfirmationModal
+            ref={this.confirmationModalRef}
+            title='Delete Task'
+            confirmText='Delete'
+            cancelText='Cancel'
+            message='Are you sure you want to delete this task?'
+            onClose={this.onDeleteConfirm}
+          />
       </Container>
     )
   }