draft for task lists

api-services/mutations/tasks/task_mutations.ts

@@ -113,6 +113,12 @@ export const useTaskCreateMutation = (callback: (task: TaskDTO) => void = noop,
       req.setPublic(task.isPublicVisible)
       req.setInitialStatus(GRPCConverter.taskStatusToGrpc(task.status))
       req.setDueAt(task.dueDate ? GRPCConverter.dateToTimestamp(task.dueDate) : undefined)
+      req.setSubtasksList(task.subtasks.map(value => {
+        const subtask = new CreateTaskRequest.SubTask()
+        subtask.setName(value.name)
+        subtask.setDone(value.isDone)
+        return subtask
+      }))
 
       const res = await APIServices.task.createTask(req, getAuthenticatedGrpcMetadata())
       const newTask: TaskDTO = {

lib/components/ProgressIndicator.tsx

@@ -1,6 +1,7 @@
+import type { PropsWithChildren } from 'react'
 import { tw } from '../twind'
 
-export type ProgressIndicatorProps = {
+export type ProgressIndicatorProps = PropsWithChildren<{
   /*
     The amount of progress that has been made
     Value form 0 to 1
@@ -15,7 +16,7 @@ export type ProgressIndicatorProps = {
     Given in degree
    */
   rotation?: number
-}
+}>
 
 const sizeMapping = { small: 16, medium: 24, big: 48 }
 
@@ -26,7 +27,14 @@ const sizeMapping = { small: 16, medium: 24, big: 48 }
  *
  * Progress is given from 0 to 1
  */
-export const ProgressIndicator = ({ progress, strokeWidth = 5, size = 'medium', direction = 'counterclockwise', rotation = 0 }: ProgressIndicatorProps) => {
+export const ProgressIndicator = ({
+  progress,
+  strokeWidth = 5,
+  size = 'medium',
+  direction = 'counterclockwise',
+  rotation = 0,
+  children,
+}: ProgressIndicatorProps) => {
   const currentSize = sizeMapping[size]
   const center = currentSize / 2
   const radius = center - strokeWidth / 2
@@ -36,13 +44,16 @@ export const ProgressIndicator = ({ progress, strokeWidth = 5, size = 'medium',
     rotation += 360 * progress
   }
   return (
-    <svg className={tw(`h-[${currentSize}px] w-[${currentSize}px] transform rotate-[${rotation}deg]`)}>
-      <circle cx={center} cy={center} r={radius} fill="transparent" strokeWidth={strokeWidth}
-        className={tw('stroke-hw-primary-400')}
-      />
-      <circle cx={center} cy={center} r={radius} fill="transparent" strokeWidth={strokeWidth}
-        strokeDasharray={arcLength} strokeDashoffset={arcOffset} className={tw('stroke-gray-300')}
-      />
-    </svg>
+    <div className={tw(`min-h-[${currentSize}px] min-w-[${currentSize}px] relative`)}>
+      <svg className={tw(`absolute h-[${currentSize}px] w-[${currentSize}px] transform rotate-[${rotation}deg]`)}>
+        <circle cx={center} cy={center} r={radius} fill="transparent" strokeWidth={strokeWidth}
+                className={tw('stroke-hw-primary-400')}
+        />
+        <circle cx={center} cy={center} r={radius} fill="transparent" strokeWidth={strokeWidth}
+                strokeDasharray={arcLength} strokeDashoffset={arcOffset} className={tw('stroke-gray-300')}
+        />
+      </svg>
+      <div className={tw('absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2')}>{children}</div>
+    </div>
   )
 }

lib/components/date/RelativeDateDisplay.tsx

@@ -0,0 +1,70 @@
+import type { Languages } from '../../hooks/useLanguage'
+import type { PropsForTranslation } from '../../hooks/useTranslation'
+import { useTranslation } from '../../hooks/useTranslation'
+
+export type RelativeDateDisplayTranslation = {
+  today: string,
+  tomorrow: string,
+  yesterday: string,
+  secondsIn: (seconds: number) => string,
+  secondsAgo: (seconds: number) => string,
+  minutesIn: (minutes: number) => string,
+  minutesAgo: (minutes: number) => string,
+  hoursIn: (hours: number) => string,
+  hoursAgo: (hours: number) => string,
+  daysIn: (days: number) => string,
+  daysAgo: (days: number) => string,
+  weeksIn: (weeks: number) => string,
+  weeksAgo: (weeks: number) => string,
+  yearsIn: (years: number) => string,
+  yearsAgo: (years: number) => string
+}
+
+const defaultRelativeDateDisplayTranslation: Record<Languages, RelativeDateDisplayTranslation> = {
+  en: {
+    today: 'Today',
+    tomorrow: 'Tomorrow',
+    yesterday: 'Yesterday',
+    secondsIn: seconds => seconds === 1 ? `In ${seconds} Second` : `In ${seconds} Seconds`,
+    secondsAgo: seconds => seconds === 1 ? `${seconds} Second ago` : `${seconds} Seconds ago`,
+    minutesIn: minutes => minutes === 1 ? `In ${minutes} Minute` : `In ${minutes} Minutes`,
+    minutesAgo: minutes => minutes === 1 ? `${minutes} Minute ago` : `${minutes} Minutes ago`,
+    hoursIn: hours => hours === 1 ? `In ${hours} Hour` : `In ${hours} Hours`,
+    hoursAgo: hours => hours === 1 ? `${hours} Hour ago` : `${hours} Hours ago`,
+    daysIn: days => days === 1 ? `In ${days} Day` : `In ${days} Days`,
+    daysAgo: days => days === 1 ? `${days} Day ago` : `${days} Days ago`,
+    weeksIn: weeks => weeks === 1 ? `In ${weeks} Week` : `In ${weeks} Weeks`,
+    weeksAgo: weeks => weeks === 1 ? `${weeks} Week ago` : `${weeks} Weeks ago`,
+    yearsIn: years => years === 1 ? `In ${years} Year` : `In ${years} Years`,
+    yearsAgo: years => years === 1 ? `${years} Year ago` : `${years} Years ago`
+  },
+  de: {
+    today: 'Heute',
+    tomorrow: 'Morgen',
+    yesterday: 'Gestern',
+    secondsIn: seconds => seconds === 1 ? `In ${seconds} Sekunde` : `In ${seconds} Sekunden`,
+    secondsAgo: seconds => seconds === 1 ? `Vor ${seconds} Sekunde` : `Vor ${seconds} Sekunden`,
+    minutesIn: minutes => minutes === 1 ? `In ${minutes} Minute` : `In ${minutes} Minuten`,
+    minutesAgo: minutes => minutes === 1 ? `Vor ${minutes} Minute` : `Vor ${minutes} Minuten`,
+    hoursIn: hours => hours === 1 ? `In ${hours} Stunde` : `In ${hours} Stunden`,
+    hoursAgo: hours => hours === 1 ? `Vor ${hours} Stunde` : `Vor ${hours} Stunden`,
+    daysIn: days => days === 1 ? `In ${days} Tag` : `In ${days} Tagen`,
+    daysAgo: days => days === 1 ? `Vor ${days} Tag` : `Vor ${days} Tagen`,
+    weeksIn: weeks => weeks === 1 ? `In ${weeks} Woche` : `In ${weeks} Wochen`,
+    weeksAgo: weeks => weeks === 1 ? `Vor ${weeks} Woche` : `Vor ${weeks} Wochen`,
+    yearsIn: years => years === 1 ? `In ${years} Jahr` : `In ${years} Jahren`,
+    yearsAgo: years => years === 1 ? `Vor ${years} Jahr` : `Vor ${years} Jahren`
+  }
+}
+
+export type RelativeDateDisplayProps = {
+  date: string
+}
+
+export const RelativeDateDisplay = ({
+  overwriteTranslation
+}: PropsForTranslation<RelativeDateDisplayTranslation, RelativeDateDisplayProps>) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const translation = useTranslation(defaultRelativeDateDisplayTranslation, overwriteTranslation)
+  // TODO write this component
+}

lib/components/user-input/Checkbox.tsx

@@ -3,6 +3,7 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import type { CheckedState } from '@radix-ui/react-checkbox'
 import { Check, Minus } from 'lucide-react'
 import { tw, tx } from '../../twind'
+import type { AppColor } from '../../twind/config'
 import type { LabelProps } from './Label'
 import { Label } from './Label'
 
@@ -18,7 +19,8 @@ type CheckboxProps = {
   onChange?: (checked: boolean) => void,
   onChangeTristate?: (checked: CheckedState) => void,
   size?: number,
-  className?: string
+  className?: string,
+  color?: AppColor
 }
 
 /**
@@ -34,7 +36,8 @@ const ControlledCheckbox = ({
   onChange,
   onChangeTristate,
   size = 18,
-  className = ''
+  className = '',
+  color = 'hw-primary',
 }: CheckboxProps) => {
   // Make sure there is an appropriate minimum
   const usedSize = Math.max(size, 14)
@@ -54,10 +57,10 @@ const ControlledCheckbox = ({
         checked={checked}
         disabled={disabled}
         id={id}
-        className={tx(`w-[${usedSize}px] h-[${usedSize}px] flex items-center border border-2 border-gray-300 rounded outline-none focus:border-hw-primary-500`, {
+        className={tx(`w-[${usedSize}px] h-[${usedSize}px] flex items-center border border-2 border-gray-300 rounded outline-none focus:border-${color}-500`, {
           'text-gray-400': disabled,
-          'bg-hw-primary-300 border-hw-primary-500 hover:border-hw-primary-700 text-hw-primary-500': checked === true || checked === 'indeterminate',
-          'bg-white hover:border-gray-400 focus:hover:border-hw-primary-700': !checked
+          [`bg-${color}-300 border-${color}-500 hover:border-${color}-700 text-${color}-500`]: checked === true || checked === 'indeterminate',
+          [`bg-white hover:border-gray-400 focus:hover:border-${color}-700`]: !checked
         }, className)}
       >
         <CheckboxPrimitive.Indicator>

lib/components/user-input/Select.tsx

@@ -29,7 +29,8 @@ export type SelectProps<T> = {
    * The items will be at the start of the select and aren't selectable
    */
   additionalItems?: ReactNode[],
-  selectedDisplayOverwrite?: ReactNode
+  selectedDisplayOverwrite?: ReactNode,
+  buttonClassName?: string
 };
 
 /**
@@ -51,6 +52,7 @@ export const Select = <T, >({
   hoverColor = 'hover:bg-gray-100',
   additionalItems,
   selectedDisplayOverwrite,
+  buttonClassName = ''
 }: SelectProps<T>) => {
   // Notice: for more complex types this check here might need an additional compare method
   let filteredOptions = isHidingCurrentValue ? options.filter(option => option.value !== value) : options
@@ -79,7 +81,8 @@ export const Select = <T, >({
                   'rounded-b-lg': !open,
                   [hoverColor]: !isDisabled,
                   'bg-gray-100 cursor-not-allowed text-gray-500': isDisabled
-                }
+                },
+                buttonClassName
               )}
               disabled={isDisabled}
             >

lib/twind/config.ts

@@ -80,6 +80,7 @@ export const colors: Record<AppColor, ShadedColors> = {
     900: '#5D4D80',
   }),
   'hw-secondary': generateShadingColors({
+    100: '#e4e8ef',
     200: '#93a4bf',
     300: '#7290c2',
     400: '#3272DF',