Merge remote-tracking branch 'origin/main' into issue/481-crud-task-t…

…emplates

lib/components/Button.tsx

@@ -5,7 +5,7 @@ import { tx } from '../twind'
 // TODO: add more variants
 // TODO: this could be matched to some kind of tailwind/twind custom colors
 // TODO: what about a "link color" and a "black/gray" color?
-const colors = ['accent', 'accent-secondary', 'positive', 'negative', 'neutral', 'none'] as const // TODO: this should be named differently, for example: "accent", "good"/"positive", "average"/"neutral", "bad"/"negative"
+const colors = ['accent', 'accent-secondary', 'positive', 'negative', 'neutral', 'warn', 'none'] as const // TODO: this should be named differently, for example: "accent", "good"/"positive", "average"/"neutral", "bad"/"negative"
 const variants = ['primary', 'secondary', 'tertiary', 'textButton'] as const
 
 export type ButtonProps = PropsWithChildren<{
@@ -62,27 +62,31 @@ const Button = ({
       'text-white bg-hw-positive-400    hover:bg-hw-positive-500    focus:ring-hw-positive-400': variant === 'primary' && color === 'positive' && !disabled,
       'text-white bg-hw-negative-400    hover:bg-hw-negative-500    focus:ring-hw-negative-400': variant === 'primary' && color === 'negative' && !disabled,
       'text-white bg-gray-400    hover:bg-gray-500    focus:ring-gray-400': variant === 'primary' && color === 'neutral' && !disabled, // TODO: maybe blue or yellow?
+      'text-white bg-hw-warn-400    hover:bg-hw-warn-500    focus:ring-hw-warn-400': variant === 'primary' && color === 'warn' && !disabled,
 
       // secondary & {accent, accent-secondary, positive, negative, neutral}
       'text-hw-primary-400 bg-hw-primary-100 hover:bg-hw-primary-200 focus:ring-hw-primary-100': variant === 'secondary' && color === 'accent' && !disabled,
       'text-AAA-500 bg-AAA-200       hover:bg-AAA-300    focus:ring-AAA-200': variant === 'secondary' && color === 'accent-secondary' && !disabled, // TODO: what could this be?
       'text-hw-positive-400 bg-hw-positive-100   hover:bg-hw-positive-200  focus:ring-hw-positive-100': variant === 'secondary' && color === 'positive' && !disabled,
       'text-hw-negative-400 bg-hw-negative-100   hover:bg-hw-negative-200  focus:ring-hw-negative-100': variant === 'secondary' && color === 'negative' && !disabled,
       'text-gray-500 bg-gray-200       hover:bg-gray-300    focus:ring-gray-200': variant === 'secondary' && color === 'neutral' && !disabled, // TODO: maybe blue or yellow?
+      'text-hw-warn-400 bg-hw-warn-200   hover:bg-hw-warn-300  focus:ring-hw-warn-200': variant === 'secondary' && color === 'warn' && !disabled,
 
       // tertiary & {accent, accent-secondary, positive, negative, neutral}
       'text-hw-primary-400 hover:underline focus:ring-hw-primary-100': variant === 'tertiary' && color === 'accent' && !disabled,
       'text-AAA-500    hover:underline focus:ring-AAA-200': variant === 'tertiary' && color === 'accent-secondary' && !disabled, // TODO: what could this be?
       'text-hw-positive-400  hover:underline focus:ring-hw-positive-200': variant === 'tertiary' && color === 'positive' && !disabled,
       'text-hw-negative-400  hover:underline focus:ring-hw-negative-200': variant === 'tertiary' && color === 'negative' && !disabled,
       'text-gray-500    hover:underline focus:ring-gray-300': variant === 'tertiary' && color === 'neutral' && !disabled, // TODO: maybe blue or yellow?
+      'text-hw-warn-400  hover:underline focus:ring-hw-warn-200': variant === 'tertiary' && color === 'warn' && !disabled,
 
       // text button & {accent, accent-secondary, positive, negative, neutral}
       'text-hw-primary-400 hover:text-hw-primary-500 focus:ring-0': variant === 'textButton' && color === 'accent' && !disabled,
       'text-AAA-500 hover:text-AAA-500 focus:ring-0': variant === 'textButton' && color === 'accent-secondary' && !disabled, // TODO: what could this be?
       'text-hw-positive-400 hover:text-hw-positive-500 focus:ring-0': variant === 'textButton' && color === 'positive' && !disabled,
       'text-hw-negative-500 hover:text-hw-negative-600 focus:ring-0': variant === 'textButton' && color === 'negative' && !disabled,
       'text-gray-500 hover:text-gray-500 focus:ring-0': variant === 'textButton' && color === 'neutral' && !disabled, // TODO: maybe blue or yellow?
+      'text-hw-warn-400 hover:text-hw-warn-500 focus:ring-0': variant === 'textButton' && color === 'warn' && !disabled,
 
       // {small, medium, large}
       'TODO1': size === 'small', // TODO: add styles for small buttons

lib/components/Card.tsx

@@ -1,10 +1,10 @@
 import { tx } from '../twind'
-import type { PropsWithChildren } from 'react'
+import type { MouseEventHandler, PropsWithChildren } from 'react'
 import type { Class } from '@twind/core'
 
 export type CardProps = {
   isSelected?: boolean,
-  onTileClick?: () => void,
+  onTileClick?: MouseEventHandler<HTMLDivElement> | undefined,
   className?: Class[] | string
 }
 

lib/components/Table.tsx

@@ -52,14 +52,14 @@ export const isDataObjectSelected = <T, >(tableState: TableState, dataObject: T,
 
 export const pageForItem = <T, >(data: T[], item: T, entriesPerPage: number, identifierMapping: IdentifierMapping<T>) => {
   const index = data.findIndex(value => identifierMapping(value) === identifierMapping(item))
-  if (index) {
+  if (index !== -1) {
     return Math.floor(index / entriesPerPage)
   }
-  console.error("item doesn't exist on data", item)
+  console.warn("item doesn't exist on data", item)
   return 0
 }
 
-export const addElementTableStateUpdate = <T, >(tableState: TableState, data: T[], dataObject: T, identifierMapping: IdentifierMapping<T>) => {
+export const addElementToTable = <T, >(tableState: TableState, data: T[], dataObject: T, identifierMapping: IdentifierMapping<T>) => {
   return {
     ...tableState,
     pagination: tableState.pagination ? { ...tableState.pagination, currentPage: pageForItem(data, dataObject, tableState.pagination.entriesPerPage, identifierMapping) } : undefined,
@@ -206,8 +206,8 @@ export const Table = <T, >({
     entriesPerPage = Math.max(1, tableState.pagination.entriesPerPage)
     pageCount = Math.ceil(sortedData.length / entriesPerPage)
 
-    if (tableState.pagination.currentPage < 0 || tableState.pagination.currentPage >= pageCount) {
-      console.error('tableState.pagination.currentPage < 0 || tableState.pagination.currentPage >= pageCount must be fullfilled',
+    if (tableState.pagination.currentPage < 0 || (tableState.pagination.currentPage >= pageCount && pageCount !== 0)) {
+      console.error('tableState.pagination.currentPage < 0 || (tableState.pagination.currentPage >= pageCount && pageCount !== 0) must be fullfilled',
         [`pageCount: ${pageCount}`, `tableState.pagination.currentPage: ${tableState.pagination.currentPage}`])
     } else {
       currentPage = tableState.pagination.currentPage

lib/components/examples/TableExample.tsx

@@ -1,6 +1,6 @@
 import type { TableProps, TableSortingFunctionType, TableSortingType, TableState } from '../Table'
 import {
-  addElementTableStateUpdate,
+  addElementToTable,
   defaultTableStatePagination,
   defaultTableStateSelection,
   removeFromTableSelection,
@@ -136,7 +136,7 @@ const TableExample = ({ data: initialData }: Pick<TableProps<DataType>, 'data'>)
             const withNewData = [...data, newData]
             const sorted = sortingKey ? withNewData.sort(sortingFunctions[sortingKey][ascending]) : withNewData
             setData(sorted)
-            setTableState(addElementTableStateUpdate(tableState, sorted, newData, idMapping))
+            setTableState(addElementToTable(tableState, sorted, newData, idMapping))
           }}
         >
           {'Add Data'}

lib/components/user_input/Input.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import type { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'
 import { tw, tx } from '../../twind'
 import { Span } from '../Span'
+import useSaveDelay from '../../hooks/useSaveDelay'
 
 const noop = () => { /* noop */ }
 
@@ -23,7 +24,8 @@ type InputProps = {
    * @default noop
    */
   onChange?: (text: string) => void,
-  className?: string
+  className?: string,
+  onEditCompleted?: (text: string) => void
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>
 
 /**
@@ -38,8 +40,12 @@ const ControlledInput = ({
   label,
   onChange = noop,
   className = '',
+  onEditCompleted,
+  onBlur,
   ...restProps
 }: InputProps) => {
+  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000)
+
   return (
     <div className={tw('w-full')}>
       {label && <label htmlFor={id} className={tw('mb-1')}><Span type="labelSmall">{label}</Span></label>}
@@ -48,7 +54,24 @@ const ControlledInput = ({
         id={id}
         type={type}
         className={tx('block rounded-md w-full border-gray-300 shadow-sm focus:outline-none focus:border-indigo-500 focus:ring-indigo-500', className)}
-        onChange={e => onChange(e.target.value)}
+        onBlur={event => {
+          if (onBlur) {
+            onBlur(event)
+          }
+          if (onEditCompleted) {
+            onEditCompleted(event.target.value)
+          }
+        }}
+        onChange={e => {
+          const value = e.target.value
+          if (onEditCompleted) {
+            restartTimer(() => {
+              onEditCompleted(value)
+              clearUpdateTimer()
+            })
+          }
+          onChange(value)
+        }}
         {...restProps}
       />
     </div>

lib/twind/config.ts

@@ -71,6 +71,16 @@ const negative = {
   800: '#804D4D',
 } as const
 
+const warn = {
+  200: '#FEEACB',
+  300: '#FAB060',
+  400: '#EA9E40',
+  500: '#D77E30',
+  600: '#C48435',
+  700: '#AD6915',
+  800: '#996628',
+} as const
+
 export const config = defineConfig({
   theme: {
     extend: {
@@ -79,6 +89,7 @@ export const config = defineConfig({
         'hw-secondary': secondary,
         'hw-positive': positive,
         'hw-negative': negative,
+        'hw-warn': warn,
         'hw-neutral': {
           // TODO: 300 is still missing, see figma
           400: '#FF9933'
@@ -137,11 +148,11 @@ export const config = defineConfig({
         mobile: { max: '1350px' },
       },
       animation: {
-        fade: 'fadeOut 3s ease-in-out',
-        "wave-big-left-up": 'bigLeftUp 1.7s ease-in 0s infinite normal',
-        "wave-big-right-down": 'bigRightDown 1.7s ease-in 0s infinite reverse',
-        "wave-small-left-up": 'smallLeftUp 1.7s ease-in 0s infinite normal',
-        "wave-small-right-down": 'smallRightDown 1.7s ease-in 0s infinite reverse',
+        'fade': 'fadeOut 3s ease-in-out',
+        'wave-big-left-up': 'bigLeftUp 1.7s ease-in 0s infinite normal',
+        'wave-big-right-down': 'bigRightDown 1.7s ease-in 0s infinite reverse',
+        'wave-small-left-up': 'smallLeftUp 1.7s ease-in 0s infinite normal',
+        'wave-small-right-down': 'smallRightDown 1.7s ease-in 0s infinite reverse',
       },
       keyframes: {
         fadeOut: {

tasks/components/KanbanColumn.tsx

@@ -10,7 +10,8 @@ import {
   SortableContext,
   verticalListSortingStrategy
 } from '@dnd-kit/sortable'
-import type { TaskDTO, TaskStatus } from '../mutations/room_mutations'
+import type { TaskDTO } from '../mutations/task_mutations'
+import type { TaskStatus } from '@helpwave/proto-ts/proto/services/task_svc/v1/task_svc_pb'
 import { Plus } from 'lucide-react'
 
 type KanbanColumnsTranslation = {
@@ -51,16 +52,14 @@ export const KanbanColumn = ({
     id: type,
   })
 
-  const taskState = { unscheduled: TaskState.unscheduled, inProgress: TaskState.inProgress, done: TaskState.done }
-
   return (
     <div
       className={tx({ 'border-hw-primary-400': isDraggedOver, 'border-transparent': !isDraggedOver },
         'flex flex-col gap-y-4 border-2 border-dashed rounded-lg p-2')}
     >
-      <PillLabel count={tasks.length} state={taskState[type]}/>
+      <PillLabel count={tasks.length} state={TaskState[type]}/>
       <SortableContext
-        id={type}
+        id={type.toString()}
         items={tasks}
         strategy={verticalListSortingStrategy}
       >