feat: reenable duedate field

helpwave · Aug 14, 2023 · a43a2e1 · a43a2e1
1 parent d5a36d7
commit a43a2e1
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 69 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git 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}