Merge branch 'main' into issue/378-Naming_UUID_or_ID

# Conflicts:
#	tasks/components/RoomBedDropDown.tsx
#	tasks/components/RoomOverview.tsx
#	tasks/components/layout/PatientDetails.tsx
#	tasks/mutations/patient_mutations.ts
#	tasks/pages/ward/[id].tsx

lib/components/Card.tsx

@@ -1,6 +1,7 @@
 import { tx } from '../twind'
 import type { MouseEventHandler, PropsWithChildren } from 'react'
 import type { Class } from '@twind/core'
+import { noop } from '../util/noop'
 
 export type CardProps = {
   isSelected?: boolean,
@@ -14,12 +15,15 @@ export type CardProps = {
 export const Card = ({
   children,
   isSelected = false,
-  onTileClick = () => undefined,
+  onTileClick = noop,
   className = '',
 }: PropsWithChildren<CardProps>) => {
   return (
     <div onClick={onTileClick}
-         className={tx('cursor-pointer rounded-md py-2 px-4 border border-2 hover:border-hw-primary-700 w-full', { 'border-hw-primary-700': isSelected }, className)}>
+         className={tx('rounded-md py-2 px-4 border border-2 w-full bg-white hover:border-hw-primary-800 cursor-pointer', {
+           'border-hw-primary-700': isSelected,
+         }, className)}
+    >
       {children}
     </div>
   )

lib/components/user_input/Select.tsx

@@ -16,7 +16,8 @@ type SelectProps<T> = {
   isHidingCurrentValue?: boolean,
   hintText?: string,
   showDisabledOptions?: boolean,
-  className?: string
+  className?: string,
+  isDisabled?: boolean
 };
 
 /**
@@ -32,6 +33,7 @@ export const Select = <T, >({
   isHidingCurrentValue = true,
   hintText = '',
   showDisabledOptions = true,
+  isDisabled,
   className
 }: SelectProps<T>) => {
   // Notice: for more complex types this check here might need an additional compare method
@@ -51,6 +53,7 @@ export const Select = <T, >({
           <>
             <Menu.Button
               className={tx('inline-flex w-full justify-between items-center rounded-t-lg border-2 px-4 py-2 hover:bg-gray-100 font-medium', { 'rounded-b-lg': !open })}
+              disabled={isDisabled}
             >
               <span>{options.find(option => option.value === value)?.label ?? hintText}</span>
               {open ? <ChevronUp/> : <ChevronDown/>}

tasks/components/AddPatientModal.tsx

@@ -0,0 +1,100 @@
+import { tw, tx } from '@helpwave/common/twind'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+import type { PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import type { ConfirmDialogProps } from '@helpwave/common/components/modals/ConfirmDialog'
+import { ConfirmDialog } from '@helpwave/common/components/modals/ConfirmDialog'
+import type { RoomBedDropDownIDs } from './RoomBedDropDown'
+import { RoomBedDropDown } from './RoomBedDropDown'
+import React, { useState } from 'react'
+import { Span } from '@helpwave/common/components/Span'
+import { Input } from '@helpwave/common/components/user_input/Input'
+import { noop } from '@helpwave/common/util/noop'
+import { emptyPatient, useAssignBedMutation, usePatientCreateMutation } from '../mutations/patient_mutations'
+
+type AddPatientModalTranslation = {
+  addPatient: string,
+  name: string,
+  minimumLength: (characters: number) => string,
+  noBedSelected: string
+}
+
+const defaultAddPatientModalTranslation: Record<Languages, AddPatientModalTranslation> = {
+  en: {
+    addPatient: 'Add Patient',
+    name: 'Name',
+    minimumLength: (characters: number) => `The Name must be at least ${characters} characters long`,
+    noBedSelected: 'No bed selected, the patient won\'t be assigned directly'
+  },
+  de: {
+    addPatient: 'Patient Hinzufügen',
+    name: 'Name',
+    minimumLength: (characters: number) => `Der Name muss mindestens ${characters} characters lang sein`,
+    noBedSelected: 'Kein Bett ausgewählt, der Patient wird nicht direkt zugeordnet'
+  }
+}
+
+export type AddPatientModalProps = ConfirmDialogProps & {
+  wardID: string
+}
+
+/**
+ * A Modal for adding a Patient
+ */
+export const AddPatientModal = ({
+  language,
+  wardID,
+  title,
+  onConfirm = noop,
+  ...modalProps
+}: PropsWithLanguage<AddPatientModalTranslation, AddPatientModalProps>) => {
+  const translation = useTranslation(language, defaultAddPatientModalTranslation)
+  const [dropdownID, setDropdownID] = useState<RoomBedDropDownIDs>({})
+  const [patientName, setPatientName] = useState<string>('')
+  const [touched, setTouched] = useState<boolean>(false)
+  const assignBedMutation = useAssignBedMutation()
+  const createPatientMutation = usePatientCreateMutation(patient => {
+    if (dropdownID.bedID) {
+      assignBedMutation.mutate({ id: dropdownID.bedID, patientID: patient.id })
+    }
+  })
+
+  const minimumNameLength = 4
+  const trimmedPatientName = patientName.trim()
+  const validPatientName = trimmedPatientName.length >= minimumNameLength
+  const validRoomAndBed = dropdownID.roomID && dropdownID.bedID
+  const isShowingError = touched && !validPatientName
+
+  return (
+    <ConfirmDialog
+      title={title ?? translation.addPatient}
+      onConfirm={() => {
+        onConfirm()
+        createPatientMutation.mutate({ ...emptyPatient, name: trimmedPatientName })
+      }}
+      buttonOverwrites={[{}, {}, { disabled: !validPatientName }]}
+      {...modalProps}
+    >
+      <div className={tw('flex flex-col gap-y-4 min-w-[300px]')}>
+        <div className={tw('flex flex-col gap-y-1')}>
+          <Span type="labelMedium">{translation.name}</Span>
+          <Input
+            value={patientName}
+            onChange={text => {
+              setTouched(true)
+              setPatientName(text)
+            }}
+          />
+          {isShowingError && <Span type="formError">{translation.minimumLength(minimumNameLength)}</Span>}
+        </div>
+        <RoomBedDropDown
+          initialRoomAndBed={dropdownID}
+          wardID={wardID}
+          onChange={roomBedDropDownIDs => setDropdownID(roomBedDropDownIDs)}
+          isClearable={true}
+        />
+        <Span className={tx({ 'text-hw-warn-400': !validRoomAndBed, 'text-transparent': validRoomAndBed })}>{translation.noBedSelected}</Span>
+      </div>
+    </ConfirmDialog>
+  )
+}

tasks/components/KanbanColumn.tsx

@@ -5,7 +5,7 @@ import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import type { PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import { useDroppable } from '@dnd-kit/core'
-import { Sortable } from './Sortable'
+import { Sortable } from './dnd-kit/Sortable'
 import {
   SortableContext,
   verticalListSortingStrategy