Merge pull request #357 from openscript-ch/355-carer-in-entry-form-is-not-required

355 carer in entry form is not required

Author: openscript

.changeset/small-wombats-beg.md

@@ -0,0 +1,5 @@
+---
+"@quassel/frontend": patch
+---
+
+Fix validation if no carer is selected in Entry form

apps/frontend/src/components/EntitySelect.tsx

@@ -1,4 +1,4 @@
-import { Combobox, Group, IconPlus, ScrollArea, TextInput, TextInputProps, useCombobox } from "@quassel/ui";
+import { ActionIcon, Combobox, Group, IconPlus, IconX, ScrollArea, TextInput, TextInputProps, useCombobox } from "@quassel/ui";
 import { useEffect, useState } from "react";
 import { i18n } from "../stores/i18n";
 import { useStore } from "@nanostores/react";
@@ -88,7 +88,28 @@ export function EntitySelect<T extends { id: number }>({ value, onChange, data,
           value={searchValue}
           onChange={({ target: { value } }) => {
             setSearchValue(value);
+
+            if (value === "") {
+              combobox.resetSelectedOption();
+              onChange?.(-1);
+            }
           }}
+          readOnly={value !== -1}
+          rightSection={
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="sm"
+              onClick={() => {
+                combobox.resetSelectedOption();
+                onChange?.(-1);
+
+                setSearchValue("");
+              }}
+            >
+              <IconX />
+            </ActionIcon>
+          }
           onClick={() => combobox.openDropdown()}
           onFocus={() => combobox.openDropdown()}
           onBlur={() => combobox.closeDropdown()}

apps/frontend/src/components/questionnaire/calendar/EntryForm.tsx

@@ -53,14 +53,14 @@ export function EntityForm({ onSave, onDelete, onAddCarer, onAddLanguage, action
     initialValues: {
       startedAt: "",
       endedAt: "",
-      carer: 0,
+      carer: -1,
       weekday: 0,
       entryLanguages: [{ ratio: 100 }],
     },
     validate: {
       startedAt: isNotEmpty(t.validationNotEmpty),
       endedAt: isNotEmpty(t.validationNotEmpty),
-      carer: isNotEmpty(t.validationNotEmpty),
+      carer: (value) => (value === -1 || !value ? t.validationNotEmpty : undefined),
       entryLanguages: {
         ratio: (value) => {
           const fieldError = isInRange({ min: 1, max: 100 }, t.validationRatio)(value);
@@ -69,7 +69,7 @@ export function EntityForm({ onSave, onDelete, onAddCarer, onAddLanguage, action
           const listError = getTotalRatio() !== 100;
           if (listError) return t.validationTotalRatio;
         },
-        language: isNotEmpty(t.validationNotEmpty),
+        language: (value) => (value === -1 || !value ? t.validationNotEmpty : undefined),
       },
     },
   });

libs/ui/src/index.ts

@@ -121,6 +121,7 @@ export {
   IconFilter,
   IconPlus,
   IconReportAnalytics,
+  IconX,
 } from "@tabler/icons-react";
 
 export { uzhColors } from "./theme/uzh";