Filled form field

CHANGELOG.md

@@ -25,6 +25,7 @@
 - Removed unused `UserEvent` from user.
 - Migrated `User` API endpoints to .NET API.
 - Migrated `Workgroup` API endpoints to .NET API.
+- Use `filled` style for form components.
 
 ### Fixed
 

src/client/src/AppTheme.ts

@@ -129,6 +129,24 @@ export const theme = createTheme({
         },
       },
     },
+    MuiFormControl: {
+      styleOverrides: {
+        root: {
+          "& .MuiFilledInput-root": {
+            backgroundColor: "#F8F9FA",
+          },
+          "& .MuiFilledInput-root:hover:not(.Mui-disabled, .Mui-error):before": {
+            borderColor: "#4FA7BC",
+          },
+          "& .MuiFilledInput-root:not(.Mui-error):before": {
+            borderColor: "#4FA7BC",
+          },
+          "& .MuiFilledInput-root:not(.Mui-error):after": {
+            borderColor: "#4FA7BC",
+          },
+        },
+      },
+    },
     MuiTab: {
       styleOverrides: {
         root: {

src/client/src/appInterfaces.ts

@@ -0,0 +1,6 @@
+export enum Language {
+  DE = "de",
+  EN = "en",
+  FR = "fr",
+  IT = "it",
+}

src/client/src/components/dataCard/dataCards.jsx

@@ -85,8 +85,8 @@ export const DataCards = props => {
         cardLabel = `${cyLabel}-card.${index}.edit`;
       }
       return (
-        <DataCardItem key={item.id}>
-          <DataCard key={item.id} data-cy={cardLabel}>
+        <DataCardItem key={index}>
+          <DataCard key={index} data-cy={cardLabel}>
             {isEditable && isSelected
               ? renderInput({
                   item: item,

src/client/src/components/form/form.ts

@@ -0,0 +1,38 @@
+import { FieldError, FieldErrorsImpl } from "react-hook-form/dist/types/errors";
+import { Merge } from "react-hook-form";
+
+export const getFormFieldError = (
+  fieldName: string | undefined,
+  errors: FieldError | Merge<FieldError, FieldErrorsImpl> | undefined,
+) => {
+  if (!fieldName || !errors) {
+    return false;
+  }
+
+  const fieldNameElements = fieldName ? fieldName.split(".") : [];
+  let currentElement = errors;
+  for (let i = 0; i < fieldNameElements.length; i++) {
+    // @ts-expect-error - we know that currentElement either has a key of fieldNameElements[i] or it doesn't,
+    // which is what we're checking for
+    currentElement = currentElement[fieldNameElements[i]];
+    if (!currentElement) {
+      break;
+    }
+  }
+  return !!currentElement;
+};
+
+export enum FormValueType {
+  Text = "text",
+  Number = "number",
+  Date = "date",
+  DateTime = "datetime-local",
+  Boolean = "boolean",
+  Domain = "domain",
+}
+
+export { FormInput } from "./formInput";
+export { FormSelect } from "./formSelect";
+export { FormMultiSelect } from "./formMultiSelect";
+export { FormCheckbox } from "./formCheckbox";
+export { FormDisplay } from "./formDisplay";

src/client/src/components/form/formCheckbox.jsx → src/client/src/components/form/formCheckbox.tsx

@@ -1,9 +1,17 @@
-import { Checkbox, FormControlLabel } from "@mui/material";
+import { Checkbox, FormControlLabel, SxProps } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
+import { FC } from "react";
 
-export const FormCheckbox = props => {
-  const { fieldName, label, checked, disabled, sx } = props;
+export interface FormCheckboxProps {
+  fieldName: string;
+  label: string;
+  checked: boolean;
+  disabled?: boolean;
+  sx?: SxProps;
+}
+
+export const FormCheckbox: FC<FormCheckboxProps> = ({ fieldName, label, checked, disabled, sx }) => {
   const { t } = useTranslation();
   const { register } = useFormContext();
 

src/client/src/components/form/formDisplay.tsx

@@ -0,0 +1,75 @@
+import { Stack, SxProps, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { FormValueType } from "./form";
+import { FC } from "react";
+import { Codelist } from "../legacyComponents/domain/domainInterface.ts";
+import { Language } from "../../appInterfaces.ts";
+
+export interface FormDisplayProps {
+  prefix?: string;
+  label: string;
+  value: string | string[] | number | number[] | boolean | Codelist | Codelist[];
+  type?: FormValueType;
+  sx?: SxProps;
+}
+
+export const FormDisplay: FC<FormDisplayProps> = ({ prefix, label, value, type, sx }) => {
+  const { t, i18n } = useTranslation();
+
+  const convert = (value: string | number | boolean | Codelist | undefined): string => {
+    if ((value !== 0 && value == undefined) || value === "") {
+      return "-";
+    } else if (type === FormValueType.Date) {
+      const date = new Date(value as string);
+      const dateTimeFormat = new Intl.DateTimeFormat("de-CH", {
+        year: "numeric",
+        month: "short",
+        day: "2-digit",
+      });
+      return dateTimeFormat.format(date);
+    } else if (type === FormValueType.DateTime) {
+      const date = new Date(value as string);
+      const dateTimeFormat = new Intl.DateTimeFormat("de-CH", {
+        year: "numeric",
+        month: "short",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZone: "UTC",
+      });
+      return dateTimeFormat.format(date);
+    } else if (type === FormValueType.Boolean) {
+      return value ? t("yes") : t("no");
+    } else if (type === FormValueType.Domain) {
+      const codelist = value as Codelist;
+      return codelist[i18n.language as Language];
+    } else {
+      return value as string;
+    }
+  };
+
+  const formatValue = (value: string | string[] | number | number[] | boolean | Codelist | Codelist[]): string => {
+    if (Array.isArray(value)) {
+      if (value.length === 0) {
+        return "-";
+      }
+      return value.map(v => convert(v)).join(", ");
+    } else {
+      return convert(value);
+    }
+  };
+
+  return (
+    <Stack
+      direction="column"
+      sx={{
+        flex: "1 1 0",
+        ...sx,
+      }}>
+      <Typography variant="subtitle2">{t(label)}</Typography>
+      <Typography marginBottom={"1em"} variant="subtitle1" data-cy={(prefix || "") + label + "-formDisplay"}>
+        {formatValue(value)}
+      </Typography>
+    </Stack>
+  );
+};

src/client/src/components/form/formField.tsx

@@ -0,0 +1,27 @@
+import { ForwardedRef, forwardRef } from "react";
+import { SxProps, TextField } from "@mui/material";
+
+interface FormFieldProps {
+  sx?: SxProps;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+export const FormField = forwardRef((props: FormFieldProps, ref: ForwardedRef<HTMLDivElement>) => {
+  return (
+    <TextField
+      ref={ref}
+      {...props}
+      size="small"
+      variant="filled"
+      sx={{
+        borderRadius: "4px",
+        flex: "1",
+        marginTop: "10px !important",
+        marginRight: "10px !important",
+        ...props.sx,
+      }}
+    />
+  );
+});