Add quick due date preset buttons to task creation

web/components/tasks/DueDateQuickSelect.tsx

@@ -0,0 +1,69 @@
+import { Button } from '@helpwave/hightide'
+import { useTasksTranslation } from '@/i18n/useTasksTranslation'
+import { DueDateUtils } from '@/utils/dueDate'
+
+const HOUR_OFFSETS = [1, 3, 6, 12, 24]
+const DAY_OFFSETS = [2, 4]
+
+interface DueDateQuickSelectProps {
+  onSelect: (dueDate: Date) => void,
+}
+
+export const DueDateQuickSelect = ({ onSelect }: DueDateQuickSelectProps) => {
+  const translation = useTasksTranslation()
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex flex-wrap gap-1.5">
+        <Button
+          size="xs"
+          color="neutral"
+          coloringStyle="outline"
+          onClick={() => onSelect(DueDateUtils.dateTimeInHours(0))}
+        >
+          {translation('dueDateNow')}
+        </Button>
+        {HOUR_OFFSETS.map((hours) => (
+          <Button
+            key={hours}
+            size="xs"
+            color="neutral"
+            coloringStyle="outline"
+            onClick={() => onSelect(DueDateUtils.dateTimeInHours(hours))}
+          >
+            {translation('dueDateInHours', { hours })}
+          </Button>
+        ))}
+      </div>
+      <div className="flex flex-wrap gap-1.5">
+        <Button
+          size="xs"
+          color="neutral"
+          coloringStyle="outline"
+          onClick={() => onSelect(DueDateUtils.dateOnlyInDays(0))}
+        >
+          {translation('dueDateToday')}
+        </Button>
+        <Button
+          size="xs"
+          color="neutral"
+          coloringStyle="outline"
+          onClick={() => onSelect(DueDateUtils.dateOnlyInDays(1))}
+        >
+          {translation('dueDateTomorrow')}
+        </Button>
+        {DAY_OFFSETS.map((days) => (
+          <Button
+            key={days}
+            size="xs"
+            color="neutral"
+            coloringStyle="outline"
+            onClick={() => onSelect(DueDateUtils.dateOnlyInDays(days))}
+          >
+            {translation('dueDateInDays', { days })}
+          </Button>
+        ))}
+      </div>
+    </div>
+  )
+}

web/components/tasks/TaskDataEditor.tsx

@@ -30,6 +30,7 @@ import { DateDisplay } from '@/components/Date/DateDisplay'
 import { AssigneeSelect } from './AssigneeSelect'
 import { UserInfoPopup } from '@/components/UserInfoPopup'
 import { DueDateUtils, getTaskDueDateFlexibleInputProps } from '@/utils/dueDate'
+import { DueDateQuickSelect } from './DueDateQuickSelect'
 import { PatientDetailView } from '@/components/patients/PatientDetailView'
 import { ErrorDialog } from '@/components/ErrorDialog'
 import { useCreateDraftDirty } from '@/hooks/useCreateDraftDirty'
@@ -85,6 +86,7 @@ export const TaskDataEditor = ({
   const [errorDialog, setErrorDialog] = useState<DialogState<{ message?: string }>>({ isOpen: false, data: { message: undefined } })
   const [isShowingPatientDialog, setIsShowingPatientDialog] = useState<boolean>(false)
   const [assigneeUserPopupId, setAssigneeUserPopupId] = useState<string | null>(null)
+  const [dueDateQuickSelectCount, setDueDateQuickSelectCount] = useState(0)
 
   const isEditMode = id !== null
   const taskId = id
@@ -493,15 +495,25 @@ export const TaskDataEditor = ({
                   updateValue(next)
                 }
                 return (
-                  <FlexibleDateTimeInput
-                    key={isEditMode ? `${taskId}-${dueDate?.getTime() ?? 'pending'}` : 'create'}
-                    {...getTaskDueDateFlexibleInputProps()}
-                    {...focusableElementProps}
-                    {...interactionStates}
-                    value={value ?? null}
-                    onValueChange={commitDueDate}
-                    onEditComplete={commitDueDate}
-                  />
+                  <div className="flex flex-col gap-2">
+                    <FlexibleDateTimeInput
+                      key={isEditMode ? `${taskId}-${dueDate?.getTime() ?? 'pending'}` : `create-${dueDateQuickSelectCount}`}
+                      {...getTaskDueDateFlexibleInputProps()}
+                      {...focusableElementProps}
+                      {...interactionStates}
+                      value={value ?? null}
+                      onValueChange={commitDueDate}
+                      onEditComplete={commitDueDate}
+                    />
+                    {!isEditMode && (
+                      <DueDateQuickSelect
+                        onSelect={(nextDueDate) => {
+                          commitDueDate(nextDueDate)
+                          setDueDateQuickSelectCount((count) => count + 1)
+                        }}
+                      />
+                    )}
+                  </div>
                 )
               }}
             </FormField>

web/i18n/translations.ts

@@ -87,6 +87,11 @@ export type TasksTranslationEntries = {
   'diverse': string,
   'done': string,
   'dueDate': string,
+  'dueDateInDays': (values: { days: number }) => string,
+  'dueDateInHours': (values: { hours: number }) => string,
+  'dueDateNow': string,
+  'dueDateToday': string,
+  'dueDateTomorrow': string,
   'duplicate': string,
   'edit': string,
   'editPatient': string,
@@ -426,6 +431,27 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
     'diverse': `Divers`,
     'done': `Fertig`,
     'dueDate': `Fälligkeitsdatum`,
+    'dueDateInDays': ({ days }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(days, {
+        '=1': `${days} Tag`,
+        'other': `${days} Tage`,
+      })
+      return _out
+    },
+    'dueDateInHours': ({ hours }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(hours, {
+        '=1': `${hours} Stunde`,
+        'other': `${hours} Stunden`,
+      })
+      return _out
+    },
+    'dueDateNow': `Jetzt`,
+    'dueDateToday': `Heute`,
+    'dueDateTomorrow': `Morgen`,
     'duplicate': `Duplizieren`,
     'edit': `Bearbeiten`,
     'editPatient': `Patient bearbeiten`,
@@ -872,6 +898,27 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
     'diverse': `Diverse`,
     'done': `Done`,
     'dueDate': `Due Date`,
+    'dueDateInDays': ({ days }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(days, {
+        '=1': `${days} day`,
+        'other': `${days} days`,
+      })
+      return _out
+    },
+    'dueDateInHours': ({ hours }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(hours, {
+        '=1': `${hours} hour`,
+        'other': `${hours} hours`,
+      })
+      return _out
+    },
+    'dueDateNow': `Now`,
+    'dueDateToday': `Today`,
+    'dueDateTomorrow': `Tomorrow`,
     'duplicate': `Duplicate`,
     'edit': `Edit`,
     'editPatient': `Edit Patient`,
@@ -1319,6 +1366,27 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
     'diverse': `Diverso`,
     'done': `Hecho`,
     'dueDate': `Fecha de vencimiento`,
+    'dueDateInDays': ({ days }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(days, {
+        '=1': `${days} día`,
+        'other': `${days} días`,
+      })
+      return _out
+    },
+    'dueDateInHours': ({ hours }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(hours, {
+        '=1': `${hours} hora`,
+        'other': `${hours} horas`,
+      })
+      return _out
+    },
+    'dueDateNow': `Ahora`,
+    'dueDateToday': `Hoy`,
+    'dueDateTomorrow': `Mañana`,
     'duplicate': `Duplicate`,
     'edit': `Editar`,
     'editPatient': `Editar paciente`,
@@ -1765,6 +1833,27 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
     'diverse': `Divers`,
     'done': `Terminé`,
     'dueDate': `Date d'échéance`,
+    'dueDateInDays': ({ days }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(days, {
+        '=1': `${days} jour`,
+        'other': `${days} jours`,
+      })
+      return _out
+    },
+    'dueDateInHours': ({ hours }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(hours, {
+        '=1': `${hours} heure`,
+        'other': `${hours} heures`,
+      })
+      return _out
+    },
+    'dueDateNow': `Maintenant`,
+    'dueDateToday': `Aujourd'hui`,
+    'dueDateTomorrow': `Demain`,
     'duplicate': `Duplicate`,
     'edit': `Modifier`,
     'editPatient': `Modifier le patient`,
@@ -2211,6 +2300,27 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
     'diverse': `Divers`,
     'done': `Klaar`,
     'dueDate': `Vervaldatum`,
+    'dueDateInDays': ({ days }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(days, {
+        '=1': `${days} dag`,
+        'other': `${days} dagen`,
+      })
+      return _out
+    },
+    'dueDateInHours': ({ hours }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(hours, {
+        '=1': `${hours} uur`,
+        'other': `${hours} uur`,
+      })
+      return _out
+    },
+    'dueDateNow': `Nu`,
+    'dueDateToday': `Vandaag`,
+    'dueDateTomorrow': `Morgen`,
     'duplicate': `Duplicate`,
     'edit': `Bewerken`,
     'editPatient': `Patiënt bewerken`,
@@ -2660,6 +2770,27 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
     'diverse': `Diverso`,
     'done': `Concluído`,
     'dueDate': `Data de vencimento`,
+    'dueDateInDays': ({ days }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(days, {
+        '=1': `${days} dia`,
+        'other': `${days} dias`,
+      })
+      return _out
+    },
+    'dueDateInHours': ({ hours }): string => {
+      let _out: string = ''
+      _out += `+`
+      _out += TranslationGen.resolvePlural(hours, {
+        '=1': `${hours} hora`,
+        'other': `${hours} horas`,
+      })
+      return _out
+    },
+    'dueDateNow': `Agora`,
+    'dueDateToday': `Hoje`,
+    'dueDateTomorrow': `Amanhã`,
     'duplicate': `Duplicate`,
     'edit': `Editar`,
     'editPatient': `Editar paciente`,

web/locales/de-DE.arb

@@ -100,6 +100,25 @@
   "diverse": "Divers",
   "done": "Fertig",
   "dueDate": "Fälligkeitsdatum",
+  "dueDateInDays": "+{days, plural, =1{# Tag} other{# Tage}}",
+  "@dueDateInDays": {
+    "placeholders": {
+      "days": {
+        "type": "number"
+      }
+    }
+  },
+  "dueDateInHours": "+{hours, plural, =1{# Stunde} other{# Stunden}}",
+  "@dueDateInHours": {
+    "placeholders": {
+      "hours": {
+        "type": "number"
+      }
+    }
+  },
+  "dueDateNow": "Jetzt",
+  "dueDateToday": "Heute",
+  "dueDateTomorrow": "Morgen",
   "edit": "Bearbeiten",
   "editPatient": "Patient bearbeiten",
   "editTask": "Aufgabe bearbeiten",

web/locales/en-US.arb

@@ -100,6 +100,25 @@
   "duplicate": "Duplicate",
   "done": "Done",
   "dueDate": "Due Date",
+  "dueDateInDays": "+{days, plural, =1{# day} other{# days}}",
+  "@dueDateInDays": {
+    "placeholders": {
+      "days": {
+        "type": "number"
+      }
+    }
+  },
+  "dueDateInHours": "+{hours, plural, =1{# hour} other{# hours}}",
+  "@dueDateInHours": {
+    "placeholders": {
+      "hours": {
+        "type": "number"
+      }
+    }
+  },
+  "dueDateNow": "Now",
+  "dueDateToday": "Today",
+  "dueDateTomorrow": "Tomorrow",
   "edit": "Edit",
   "editPatient": "Edit Patient",
   "editTask": "Edit Task",

web/locales/es-ES.arb

@@ -60,6 +60,25 @@
   "duplicate": "Duplicate",
   "done": "Hecho",
   "dueDate": "Fecha de vencimiento",
+  "dueDateInDays": "+{days, plural, =1{# día} other{# días}}",
+  "@dueDateInDays": {
+    "placeholders": {
+      "days": {
+        "type": "number"
+      }
+    }
+  },
+  "dueDateInHours": "+{hours, plural, =1{# hora} other{# horas}}",
+  "@dueDateInHours": {
+    "placeholders": {
+      "hours": {
+        "type": "number"
+      }
+    }
+  },
+  "dueDateNow": "Ahora",
+  "dueDateToday": "Hoy",
+  "dueDateTomorrow": "Mañana",
   "edit": "Editar",
   "editPatient": "Editar paciente",
   "editTask": "Editar tarea",