(feat) Add ability to track deleted fields in repeat component

openmrs · Jan 8, 2025 · 43a6257 · 43a6257
1 parent 266dfe4
commit 43a6257
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 3 deletions.
diff --git a/src/adapters/obs-adapter.test.ts b/src/adapters/obs-adapter.test.ts
@@ -28,6 +28,7 @@ const formContext = {
   formFieldAdapters: null,
   formFieldValidators: null,
   customDependencies: null,
+  deletedFields: [],
   getFormField: jest.fn(),
   addFormField: jest.fn(),
   updateFormField: jest.fn(),
@@ -36,6 +37,7 @@ const formContext = {
   removeInvalidField: jest.fn(),
   setInvalidFields: jest.fn(),
   setForm: jest.fn(),
+  setDeletedFields: jest.fn(),
 } as FormContextProps;
 
 describe('ObsAdapter - transformFieldValue', () => {

diff --git a/src/adapters/program-state-adapter.test.ts b/src/adapters/program-state-adapter.test.ts
@@ -30,6 +30,7 @@ const formContext = {
   customDependencies: {
     patientPrograms: [],
   },
+  deletedFields: [],
   getFormField: jest.fn(),
   addFormField: jest.fn(),
   updateFormField: jest.fn(),
@@ -38,6 +39,7 @@ const formContext = {
   removeInvalidField: jest.fn(),
   setInvalidFields: jest.fn(),
   setForm: jest.fn(),
+  setDeletedFields: jest.fn(),
 } as FormContextProps;
 
 const field = {

diff --git a/src/components/renderer/form/form-renderer.component.tsx b/src/components/renderer/form/form-renderer.component.tsx
@@ -37,7 +37,7 @@ export const FormRenderer = ({
     formState: { isDirty },
   } = methods;
 
-  const [{ formFields, invalidFields, formJson }, dispatch] = useReducer(formStateReducer, {
+  const [{ formFields, invalidFields, formJson, deletedFields }, dispatch] = useReducer(formStateReducer, {
     ...initialState,
     formFields: evaluatedFields,
     formJson: evaluatedFormJson,
@@ -52,6 +52,7 @@ export const FormRenderer = ({
     addInvalidField,
     removeInvalidField,
     setForm,
+    setDeletedFields,
   } = useFormStateHelpers(dispatch, formFields);
 
   useEffect(() => {
@@ -75,6 +76,7 @@ export const FormRenderer = ({
       formFields,
       formJson,
       invalidFields,
+      deletedFields,
       addFormField,
       updateFormField,
       getFormField,
@@ -83,8 +85,9 @@ export const FormRenderer = ({
       addInvalidField,
       removeInvalidField,
       setForm,
+      setDeletedFields,
     };
-  }, [processorContext, workspaceLayout, methods, formFields, formJson, invalidFields]);
+  }, [processorContext, workspaceLayout, methods, formFields, formJson, invalidFields, deletedFields]);
 
   useEffect(() => {
     registerForm(formJson.name, isSubForm, context);

diff --git a/src/components/renderer/form/state.ts b/src/components/renderer/form/state.ts
@@ -4,6 +4,7 @@ type FormState = {
   formFields: FormField[];
   invalidFields: FormField[];
   formJson: FormSchema;
+  deletedFields: FormField[];
 };
 
 type Action =
@@ -15,12 +16,14 @@ type Action =
   | { type: 'ADD_INVALID_FIELD'; value: FormField }
   | { type: 'REMOVE_INVALID_FIELD'; value: string }
   | { type: 'CLEAR_INVALID_FIELDS' }
-  | { type: 'SET_FORM_JSON'; value: any };
+  | { type: 'SET_FORM_JSON'; value: any }
+  | { type: 'SET_DELETED_FIELDS'; value: FormField[] };
 
 const initialState: FormState = {
   formFields: [],
   invalidFields: [],
   formJson: null,
+  deletedFields: [],
 };
 
 const formStateReducer = (state: FormState, action: Action): FormState => {
@@ -46,6 +49,8 @@ const formStateReducer = (state: FormState, action: Action): FormState => {
       return { ...state, invalidFields: [] };
     case 'SET_FORM_JSON':
       return { ...state, formJson: action.value };
+    case 'SET_DELETED_FIELDS':
+      return { ...state, deletedFields: action.value };
     default:
       return state;
   }

diff --git a/src/components/repeat/repeat.component.tsx b/src/components/repeat/repeat.component.tsx
@@ -32,6 +32,8 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
     methods: { getValues, setValue },
     addFormField,
     removeFormField,
+    deletedFields,
+    setDeletedFields,
   } = context;
 
   useEffect(() => {
@@ -113,6 +115,7 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
       clearSubmission(field);
     }
     setRows(rows.filter((q) => q.id !== field.id));
+    setDeletedFields([...deletedFields, field]);
     removeFormField(field.id);
   };
 

diff --git a/src/hooks/useFormStateHelpers.ts b/src/hooks/useFormStateHelpers.ts
@@ -54,6 +54,10 @@ export function useFormStateHelpers(dispatch: Dispatch<Action>, formFields: Form
     dispatch({ type: 'SET_FORM_JSON', value: updateFormSectionReferences(formJson) });
   }, []);
 
+  const setDeletedFields = useCallback((fields: FormField[]) => {
+    dispatch({ type: 'SET_DELETED_FIELDS', value: fields });
+  }, []);
+
   return {
     addFormField,
     updateFormField,
@@ -63,5 +67,6 @@ export function useFormStateHelpers(dispatch: Dispatch<Action>, formFields: Form
     addInvalidField,
     removeInvalidField,
     setForm,
+    setDeletedFields,
   };
 }
diff --git a/src/provider/form-provider.tsx b/src/provider/form-provider.tsx
@@ -7,6 +7,7 @@ export interface FormContextProps extends FormProcessorContextProps {
   methods: UseFormReturn<any>;
   workspaceLayout: 'minimized' | 'maximized';
   isSubmitting?: boolean;
+  deletedFields: FormField[];
   getFormField?: (field: string) => FormField;
   addFormField?: (field: FormField) => void;
   updateFormField?: (field: FormField) => void;
@@ -15,6 +16,7 @@ export interface FormContextProps extends FormProcessorContextProps {
   removeInvalidField?: (fieldId: string) => void;
   setInvalidFields?: (fields: FormField[]) => void;
   setForm?: (formJson: FormSchema) => void;
+  setDeletedFields?: (fields: FormField[]) => void;
 }
 
 export interface FormProviderProps extends FormContextProps {