Merge pull request #143 from workfloworchestrator/2076-add-util-for-watching-fields

2076 add util for watching fields

Author: DutchBen

frontend/.changeset/blue-pots-cross.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Adds util for watching fields

frontend/package-lock.json

@@ -3,6 +3,7 @@ import type { FieldValues } from 'react-hook-form';
 import { getMockPydanticFormField } from './core/helper.spec';
 import { PydanticFormFieldType } from './types';
 import {
+    getFormFieldIdWithPath,
     getFormFieldValue,
     insertItemAtIndex,
     itemizeArrayItem,
@@ -194,6 +195,26 @@ describe('getFormFieldValue', () => {
     });
 });
 
+describe.only('getFormFieldIdWithPath', () => {
+    it('returns fieldname when no path is supplied', () => {
+        expect(getFormFieldIdWithPath('', 'name')).toBe('name');
+    });
+
+    it('returns the full field id from the sybling level', () => {
+        expect(getFormFieldIdWithPath('person.name', 'age')).toBe('person.age');
+    });
+
+    it('works with array', () => {
+        expect(getFormFieldIdWithPath('person.0', '')).toBe('person');
+    });
+
+    it('works with array of objects', () => {
+        expect(getFormFieldIdWithPath('person.0.name', 'age')).toBe(
+            'person.0.age',
+        );
+    });
+});
+
 describe('itemizeArrayItem', () => {
     // Postfixes .{index} to PydanticFormField id
     // When the item being itemized is an object field adds .{index} at correct position in to ids of all properties

frontend/packages/pydantic-forms/src/utils.spec.ts

@@ -107,3 +107,26 @@ export function getFormFieldValue(
 
     return current?.[name];
 }
+
+/**
+ * Returns the full field id from the sibling level. Used to pass into rhfs watch function.
+ * This is relevant if the field is part of an array or object where there might be more
+ *
+ */
+export function getFormFieldIdWithPath(
+    pydanticFormFieldId: PydanticFormField['id'],
+    fieldName: string,
+): string {
+    const pathToParent = pydanticFormFieldId.split('.');
+    pathToParent.pop();
+
+    if (fieldName) {
+        return pathToParent?.length > 0
+            ? [pathToParent.join('.'), fieldName].join('.')
+            : fieldName;
+    } else if (pathToParent?.length > 0) {
+        return pathToParent.join('.'); // Return the full path without the last segment
+    }
+
+    return '';
+}