Merge pull request #855 from Tampere/fix/sap-wbs-id

Fix/sap wbs

.gitignore

@@ -7,4 +7,5 @@ node_modules
 .temp
 .vscode
 .env.test-db
+temp
 

frontend/src/components/forms/SapProjectIdField.tsx

@@ -1,16 +1,21 @@
 import { TextFieldProps } from '@mui/material';
+import { forwardRef } from 'react';
 
 import { trpc } from '@frontend/client';
 import { useTranslations } from '@frontend/stores/lang';
 
 import { TextFieldWithStatus } from './TextFieldWithStatus';
 
-export function SapProjectIdField(props: TextFieldProps & { value: string }) {
+export const SapProjectIdField = forwardRef(function SapProjectIdField(
+  props: TextFieldProps & { value: string },
+  ref: React.ForwardedRef<HTMLDivElement | null>
+) {
   const { sap } = trpc.useContext();
   const tr = useTranslations();
 
   return (
     <TextFieldWithStatus
+      ref={ref}
       {...props}
       validate={async (value) => {
         return await sap.doesSapProjectIdExist.fetch({ projectId: value });
@@ -23,4 +28,4 @@ export function SapProjectIdField(props: TextFieldProps & { value: string }) {
       }}
     />
   );
-}
+});

frontend/src/components/forms/TextFieldWithStatus.tsx

@@ -1,6 +1,6 @@
 import { Check, Error, Warning } from '@mui/icons-material';
 import { CircularProgress, TextField, TextFieldProps, Tooltip } from '@mui/material';
-import { useEffect, useMemo, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 
 import { useDebounce } from '@frontend/utils/useDebounce';
 
@@ -14,7 +14,10 @@ type Props = TextFieldProps & {
   debounceDelayMs?: number;
 };
 
-export function TextFieldWithStatus(props: Props) {
+export const TextFieldWithStatus = forwardRef(function TextFieldWithStatus(
+  props: Props,
+  ref: React.ForwardedRef<HTMLDivElement | null>
+) {
   const {
     validate,
     onStatusChange,
@@ -88,11 +91,12 @@ export function TextFieldWithStatus(props: Props) {
 
   return (
     <TextField
+      ref={ref}
       {...TextFieldProps}
       InputProps={{
         ...TextFieldProps.InputProps,
         endAdornment: statusIcon,
       }}
     />
   );
-}
+});

frontend/src/views/ProjectObject/ProjectObject.tsx

@@ -22,7 +22,6 @@ import { TranslationKey } from '@shared/language';
 import { DeleteProjectObjectDialog } from './DeleteProjectObjectDialog';
 import { ProjectObjectFinances } from './ProjectObjectFinances';
 import { ProjectObjectForm } from './ProjectObjectForm';
-import { ProjectObjectOperativeForm } from './ProjectObjectOperativeForm';
 
 type TabView = 'default' | 'talous' | 'tehtavat';
 

frontend/src/views/ProjectObject/ProjectObjectForm.tsx

@@ -204,10 +204,6 @@ export function ProjectObjectForm(props: Props) {
 
   const formProjectId = form.watch('projectId');
 
-  useEffect(() => {
-    form.setValue('sapWBSId', null);
-  }, [formProjectId]);
-
   const projectObjectUpsert = trpc.projectObject.upsert.useMutation({
     onSuccess: (data) => {
       if (!props.projectObject && data.id) {
@@ -318,6 +314,7 @@ export function ProjectObjectForm(props: Props) {
                   onChange={(value) => {
                     props.setProjectId?.(value ?? '');
                     field.onChange(value);
+                    form.setValue('sapWBSId', null);
                   }}
                 />
               );

frontend/src/views/ProjectObject/SapWBSSelect.tsx

@@ -32,7 +32,7 @@ export function SapWBSSelect(props: Props) {
       autoHighlight
       size="small"
       ref={props.field.ref}
-      value={props.field.value}
+      value={props.field.value ?? null}
       onChange={(_, value) => props.field.onChange(value)}
       options={options ?? []}
       noOptionsText={tr('sapWBSSelect.noOptions')}