From a43a2e1083c8fac2c6e35fde95c1aeb7db84ca71 Mon Sep 17 00:00:00 2001
From: Felix <67233923+DasProffi@users.noreply.github.com>
Date: Mon, 14 Aug 2023 04:41:12 +0200
Subject: [PATCH] feat: reenable duedate field

---
 pnpm-lock.yaml                             |   7 ++
 tasks/components/layout/TaskDetailView.tsx |  71 ++++++++---
 tasks/mutations/task_mutations.ts          | 138 +++++++++++++--------
 tasks/package.json                         |   1 +
 tasks/utils/timeConversion.ts              |  19 +++
 5 files changed, 167 insertions(+), 69 deletions(-)
 create mode 100644 tasks/utils/timeConversion.ts

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c4bc9b64..99a8c1ce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -231,6 +231,9 @@ importers:
       '@twind/preset-typography':
         specifier: 1.0.7
         version: 1.0.7(@twind/core@1.1.3)(typescript@5.1.6)
+      '@types/google-protobuf':
+        specifier: ^3.15.6
+        version: 3.15.6
       cookies-next:
         specifier: 2.1.2
         version: 2.1.2
@@ -4710,6 +4713,10 @@ packages:
     resolution: {integrity: sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==}
     dev: true
 
+  /@types/google-protobuf@3.15.6:
+    resolution: {integrity: sha512-pYVNNJ+winC4aek+lZp93sIKxnXt5qMkuKmaqS3WGuTq0Bw1ZDYNBgzG5kkdtwcv+GmYJGo3yEg6z2cKKAiEdw==}
+    dev: false
+
   /@types/graceful-fs@4.1.6:
     resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==}
     dependencies:
diff --git a/tasks/components/layout/TaskDetailView.tsx b/tasks/components/layout/TaskDetailView.tsx
index 931f4439..8794c7e4 100644
--- a/tasks/components/layout/TaskDetailView.tsx
+++ b/tasks/components/layout/TaskDetailView.tsx
@@ -1,6 +1,6 @@
 import type { PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
-import { tw } from '@helpwave/common/twind'
+import { tw, tx } from '@helpwave/common/twind'
 import { ToggleableInput } from '@helpwave/common/components/user_input/ToggleableInput'
 import { Textarea } from '@helpwave/common/components/user_input/Textarea'
 import { Select } from '@helpwave/common/components/user_input/Select'
@@ -14,23 +14,25 @@ import { TaskTemplateListColumn } from '../TaskTemplateListColumn'
 import { Input } from '@helpwave/common/components/user_input/Input'
 import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import type { TaskTemplateDTO } from '../../mutations/task_template_mutations'
-import {
-  usePersonalTaskTemplateQuery,
-  useWardTaskTemplateQuery
-} from '../../mutations/task_template_mutations'
+import { usePersonalTaskTemplateQuery, useWardTaskTemplateQuery } from '../../mutations/task_template_mutations'
 import { useAuth } from '../../hooks/useAuth'
 import { useRouter } from 'next/router'
 import type { TaskDTO } from '../../mutations/task_mutations'
 import {
   emptyTask,
   useSubTaskAddMutation,
-  useTaskCreateMutation, useTaskDeleteMutation,
+  useTaskCreateMutation,
+  useTaskDeleteMutation,
   useTaskQuery,
+  useTaskToDoneMutation,
+  useTaskToInProgressMutation,
+  useTaskToToDoMutation,
   useTaskUpdateMutation
 } from '../../mutations/task_mutations'
 import { useEffect, useState } from 'react'
 import { LoadingAnimation } from '@helpwave/common/components/LoadingAnimation'
-import { tx } from '@twind/core'
+import { GetPatientDetailsResponse } from '@helpwave/proto-ts/proto/services/task_svc/v1/patient_svc_pb'
+import TaskStatus = GetPatientDetailsResponse.TaskStatus
 import { LoadingAndErrorComponent } from '@helpwave/common/components/LoadingAndErrorComponent'
 
 type TaskDetailViewTranslation = {
@@ -121,6 +123,9 @@ export const TaskDetailView = ({
 
   const updateTaskMutation = useTaskUpdateMutation()
   const deleteTaskMutation = useTaskDeleteMutation(onClose)
+  const toToDoMutation = useTaskToToDoMutation()
+  const toInProgressMutation = useTaskToInProgressMutation()
+  const toDoneMutation = useTaskToDoneMutation()
 
   useEffect(() => {
     if (data && taskID) {
@@ -179,8 +184,8 @@ export const TaskDetailView = ({
         </div>
         { /* TODO create a new component for this */}
         <div className={tw('flex flex-col justify-between min-w-[250px]')}>
-          <div className={tw('flex flex-col gap-y-4 hidden')}>
-            <div>
+          <div className={tw('flex flex-col gap-y-4')}>
+            <div className={tw('hidden')} /* TODO enable later */ >
               <label><Span type="labelMedium">{translation.assignee}</Span></label>
               <Select
                 value={task.assignee}
@@ -197,20 +202,48 @@ export const TaskDetailView = ({
             </div>
             <div>
               <label><Span type="labelMedium">{translation.dueDate}</Span></label>
-              <Input
-                value={formatDate(task.dueDate)}
-                type="datetime-local"
-                onChange={value => {
-                  const dueDate = new Date(value)
-                  setTask({ ...task, dueDate })
-                }}
-              />
+              <div className={tw('flex flex-row items-center gap-x-2')}>
+                <Input
+                  value={task.dueDate ? formatDate(task.dueDate) : ''}
+                  type="datetime-local"
+                  onChange={value => {
+                    const dueDate = new Date(value)
+                    setTask({ ...task, dueDate })
+                    // Maybe add some auto save here after a validation
+                  }}
+                />
+                { /* TODO reenable when backend has implemented a remove duedate
+                  <Button
+                    onClick={() => setTask({ ...task, dueDate: undefined })}
+                    variant="textButton"
+                    color="negative"
+                    disabled={!task.dueDate}
+                  >
+                    <X size={24}/>
+                  </Button>
+                  */ }
+              </div>
             </div>
             <div>
               <label><Span type="labelMedium">{translation.status}</Span></label>
-              <TaskStatusSelect value={task.status} onChange={status => setTask({ ...task, status })}/>
+              <TaskStatusSelect value={task.status} onChange={status => {
+                switch (status) {
+                  case TaskStatus.TASK_STATUS_TODO:
+                    toToDoMutation.mutate(task.id)
+                    break
+                  case TaskStatus.TASK_STATUS_IN_PROGRESS:
+                    toInProgressMutation.mutate(task.id)
+                    break
+                  case TaskStatus.TASK_STATUS_DONE:
+                    toDoneMutation.mutate(task.id)
+                    break
+                  default:
+                    break
+                }
+                setTask({ ...task, status })
+              }}/>
             </div>
-            <div>
+            <div className={tw('hidden')} /* TODO enable later */>
               <label><Span type="labelMedium">{translation.visibility}</Span></label>
               <Select
                 value={task.isPublicVisible}
diff --git a/tasks/mutations/task_mutations.ts b/tasks/mutations/task_mutations.ts
index 4069cd2c..f9020a57 100644
--- a/tasks/mutations/task_mutations.ts
+++ b/tasks/mutations/task_mutations.ts
@@ -20,6 +20,7 @@ import type { GetTasksByPatientSortedByStatusResponse } from '@helpwave/proto-ts
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { noop } from '@helpwave/common/components/user_input/Input'
 import { roomOverviewsQueryKey, roomsQueryKey } from './room_mutations'
+import { dateToTimestamp, timestampToDate } from '../utils/timeConversion'
 
 export type SubTaskDTO = {
   id: string,
@@ -38,7 +39,7 @@ export type TaskDTO = {
   notes: string,
   status: TaskStatus,
   subtasks: SubTaskDTO[],
-  dueDate: Date,
+  dueDate?: Date,
   creationDate?: Date,
   isPublicVisible: boolean
 }
@@ -92,6 +93,7 @@ export const useTaskQuery = (taskID: string | undefined) => {
         console.error('TasksByPatient query failed')
       }
 
+      const dueAt = res.getDueAt()
       const task: TaskDTO = {
         id: res.getId(),
         name: res.getName(),
@@ -99,7 +101,7 @@ export const useTaskQuery = (taskID: string | undefined) => {
         notes: res.getDescription(),
         isPublicVisible: res.getPublic(),
         assignee: res.getAssignedUserId(),
-        dueDate: new Date(), // TODO replace later
+        dueDate: dueAt ? timestampToDate(dueAt) : undefined,
         subtasks: res.getSubtasksList().map(subtask => ({
           id: subtask.getId(),
           name: subtask.getName(),
@@ -128,27 +130,29 @@ export const useTasksByPatientQuery = (patientID: string | undefined) => {
       const res = await taskService.getTasksByPatient(req, getAuthenticatedGrpcMetadata())
 
       if (!res.getTasksList()) {
-        // TODO some check whether request was successful
         console.error('TasksByPatient query failed')
       }
 
-      const tasks: TaskDTO[] = res.getTasksList().map(task => ({
-        id: task.getId(),
-        name: task.getName(),
-        status: task.getStatus(),
-        notes: task.getDescription(),
-        isPublicVisible: task.getPublic(),
-        assignee: task.getAssignedUserId(),
-        dueDate: new Date(), // TODO replace later
-        subtasks: task.getSubtasksList().map(subtask => ({
-          id: subtask.getId(),
-          name: subtask.getName(),
-          isDone: subtask.getDone()
-        }))
-      }))
+      const tasks: TaskDTO[] = res.getTasksList().map(task => {
+        const dueAt = task.getDueAt()
+        return {
+          id: task.getId(),
+          name: task.getName(),
+          status: task.getStatus(),
+          notes: task.getDescription(),
+          isPublicVisible: task.getPublic(),
+          assignee: task.getAssignedUserId(),
+          dueDate: dueAt ? timestampToDate(dueAt) : undefined,
+          subtasks: task.getSubtasksList().map(subtask => ({
+            id: subtask.getId(),
+            name: subtask.getName(),
+            isDone: subtask.getDone()
+          }))
+        }
+      })
 
       return tasks
-    },
+    }
   })
 }
 
@@ -168,24 +172,26 @@ export const useTasksByPatientSortedByStatusQuery = (patientID: string | undefin
       const res = await taskService.getTasksByPatientSortedByStatus(req, getAuthenticatedGrpcMetadata())
 
       if (!res.toObject()) {
-        // TODO some check whether request was successful
         console.error('TasksByPatientSortedByStatus query failed')
       }
 
-      const mapping = (task: GetTasksByPatientSortedByStatusResponse.Task, status: TaskStatus) => ({
-        id: task.getId(),
-        name: task.getName(),
-        status,
-        notes: task.getDescription(),
-        isPublicVisible: task.getPublic(),
-        assignee: task.getAssignedUserId(),
-        dueDate: new Date(), // TODO replace later
-        subtasks: task.getSubtasksList().map(subtask => ({
-          id: subtask.getId(),
-          name: subtask.getName(),
-          isDone: subtask.getDone()
-        }))
-      })
+      const mapping = (task: GetTasksByPatientSortedByStatusResponse.Task, status: TaskStatus) => {
+        const dueAt = task.getDueAt()
+        return {
+          id: task.getId(),
+          name: task.getName(),
+          status,
+          notes: task.getDescription(),
+          isPublicVisible: task.getPublic(),
+          assignee: task.getAssignedUserId(),
+          dueDate: dueAt ? timestampToDate(dueAt) : undefined,
+          subtasks: task.getSubtasksList().map(subtask => ({
+            id: subtask.getId(),
+            name: subtask.getName(),
+            isDone: subtask.getDone()
+          }))
+        }
+      }
 
       const tasks: SortedTasks = {
         [TaskStatus.TASK_STATUS_TODO]: res.getTodoList().map(value => mapping(value, TaskStatus.TASK_STATUS_TODO)),
@@ -211,11 +217,13 @@ export const useTaskCreateMutation = (callback: (task: TaskDTO) => void = noop,
       const res = await taskService.createTask(req, getAuthenticatedGrpcMetadata())
       const newTask = { ...task, id: res.getId() }
 
-      queryClient.refetchQueries([tasksQueryKey]).then()
-      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
       callback(newTask)
       return newTask
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([tasksQueryKey]).then()
+      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
+    }
   })
 }
 
@@ -228,6 +236,8 @@ export const useTaskUpdateMutation = (callback: () => void = noop) => {
       updateTask.setId(task.id)
       updateTask.setDescription(task.notes)
       updateTask.setName(task.name)
+      updateTask.setDueAt(task.dueDate ? dateToTimestamp(task.dueDate) : undefined)
+      updateTask.setPublic(task.isPublicVisible)
 
       const getTask = new GetTaskRequest()
       const removeSubtask = new RemoveSubTaskRequest()
@@ -280,11 +290,13 @@ export const useTaskUpdateMutation = (callback: () => void = noop) => {
 
       await taskService.updateTask(updateTask, getAuthenticatedGrpcMetadata())
 
-      queryClient.refetchQueries([tasksQueryKey]).then()
-      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
       callback()
       return updateTask.toObject()
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([tasksQueryKey]).then()
+      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
+    }
   })
 }
 
@@ -296,11 +308,13 @@ export const useTaskDeleteMutation = (callback: () => void = noop) => {
       req.setId(taskID)
       await taskService.deleteTask(req, getAuthenticatedGrpcMetadata())
 
-      queryClient.refetchQueries([tasksQueryKey, sortedTasksByPatientQueryKey]).then()
-      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
       callback()
       return req.toObject()
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([tasksQueryKey, sortedTasksByPatientQueryKey]).then()
+      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
+    }
   })
 }
 
@@ -311,11 +325,14 @@ export const useTaskToToDoMutation = (callback: () => void = noop) => {
       const req = new TaskToToDoRequest()
       req.setId(taskID)
       await taskService.taskToToDo(req, getAuthenticatedGrpcMetadata())
-      queryClient.refetchQueries([tasksQueryKey]).then()
-      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
+
       callback()
       return req.toObject()
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([tasksQueryKey]).then()
+      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
+    }
   })
 }
 
@@ -326,11 +343,14 @@ export const useTaskToInProgressMutation = (callback: () => void = noop) => {
       const req = new TaskToInProgressRequest()
       req.setId(taskID)
       await taskService.taskToInProgress(req, getAuthenticatedGrpcMetadata())
-      queryClient.refetchQueries([tasksQueryKey]).then()
-      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
+
       callback()
       return req.toObject()
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([tasksQueryKey]).then()
+      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
+    }
   })
 }
 
@@ -341,11 +361,14 @@ export const useTaskToDoneMutation = (callback: () => void = noop) => {
       const req = new TaskToDoneRequest()
       req.setId(taskID)
       await taskService.taskToDone(req, getAuthenticatedGrpcMetadata())
-      queryClient.refetchQueries([tasksQueryKey]).then()
-      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
+
       callback()
       return req.toObject()
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([tasksQueryKey]).then()
+      queryClient.refetchQueries([roomsQueryKey, roomOverviewsQueryKey]).then()
+    }
   })
 }
 
@@ -369,10 +392,13 @@ export const useSubTaskAddMutation = (callback: (subtask: SubTaskDTO) => void =
         name: subtask.name,
         isDone: subtask.isDone,
       }
-      queryClient.refetchQueries([tasksQueryKey]).then()
+
       callback(newSubtask)
       return req.toObject()
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([tasksQueryKey]).then()
+    }
   })
 }
 
@@ -385,10 +411,13 @@ export const useSubTaskUpdateMutation = (callback: (subtask: SubTaskDTO) => void
       req.setName(subtask.name)
       await taskService.updateSubTask(req, getAuthenticatedGrpcMetadata())
       const newSubtask: SubTaskDTO = { ...subtask }
-      queryClient.refetchQueries([tasksQueryKey]).then()
+
       callback(newSubtask)
       return req.toObject()
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([tasksQueryKey]).then()
+    }
   })
 }
 
@@ -399,10 +428,13 @@ export const useSubTaskDeleteMutation = (callback: () => void = noop) => {
       const req = new RemoveSubTaskRequest()
       req.setId(subtaskID)
       await taskService.removeSubTask(req, getAuthenticatedGrpcMetadata())
-      queryClient.refetchQueries([tasksQueryKey]).then()
+
       callback()
       return req.toObject()
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([tasksQueryKey]).then()
+    }
   })
 }
 
@@ -413,10 +445,13 @@ export const useSubTaskToToDoMutation = (callback: () => void = noop) => {
       const req = new SubTaskToToDoRequest()
       req.setId(subtaskID)
       await taskService.subTaskToToDo(req, getAuthenticatedGrpcMetadata())
-      queryClient.refetchQueries([tasksQueryKey]).then()
+
       callback()
       return req.toObject()
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([tasksQueryKey]).then()
+    }
   })
 }
 
@@ -427,9 +462,12 @@ export const useSubTaskToDoneMutation = (callback: () => void = noop) => {
       const req = new SubTaskToDoneRequest()
       req.setId(subtaskID)
       await taskService.subTaskToDone(req, getAuthenticatedGrpcMetadata())
-      queryClient.refetchQueries([tasksQueryKey]).then()
+
       callback()
       return req.toObject()
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([tasksQueryKey]).then()
+    }
   })
 }
diff --git a/tasks/package.json b/tasks/package.json
index d587a50c..7e0fde2b 100644
--- a/tasks/package.json
+++ b/tasks/package.json
@@ -22,6 +22,7 @@
     "@twind/preset-tailwind": "1.1.4",
     "@twind/preset-tailwind-forms": "1.1.2",
     "@twind/preset-typography": "1.0.7",
+    "@types/google-protobuf": "^3.15.6",
     "cookies-next": "2.1.2",
     "google-protobuf": "3.21.2",
     "grpc-web": "1.4.2",
diff --git a/tasks/utils/timeConversion.ts b/tasks/utils/timeConversion.ts
new file mode 100644
index 00000000..e7941e22
--- /dev/null
+++ b/tasks/utils/timeConversion.ts
@@ -0,0 +1,19 @@
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb'
+
+export const timestampToDate = (timestamp: Timestamp): Date => {
+  const seconds = timestamp.getSeconds()
+  const nanos = timestamp.getNanos()
+
+  const milliseconds = seconds * 1000 + nanos / 1e6
+
+  return new Date(milliseconds)
+}
+
+export const dateToTimestamp = (date: Date): Timestamp => {
+  const timestamp = new Timestamp()
+
+  timestamp.setSeconds(Math.floor(date.getTime() / 1000)) // Convert to seconds
+  timestamp.setNanos(date.getMilliseconds() * 1e6) // Convert milliseconds to nanoseconds
+
+  return timestamp
+}