Merge pull request #114 from workfloworchestrator/1954-get-value-in-field

1954 get value in field

Author: DutchBen

frontend/.changeset/witty-showers-give.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Adds getFormFieldValue function

frontend/package-lock.json

@@ -0,0 +1,117 @@
+import type { FieldValues } from 'react-hook-form';
+
+import type { PydanticFormField } from './types';
+import { PydanticFormFieldFormat, PydanticFormFieldType } from './types';
+import { getFormFieldValue, insertItemAtIndex } from './utils';
+
+const getPydanticFormFieldDummy = (
+    props: Partial<PydanticFormField>,
+): PydanticFormField => {
+    return {
+        id: 'dummy',
+        type: PydanticFormFieldType.STRING,
+        format: PydanticFormFieldFormat.LONG,
+        title: 'Dummy Field',
+        required: false,
+        properties: {},
+        options: [],
+        isEnumField: false,
+        columns: 1,
+        schema: {
+            type: PydanticFormFieldType.OBJECT,
+            format: PydanticFormFieldFormat.DEFAULT,
+        },
+        validations: {},
+        attributes: {},
+        ...props,
+    };
+};
+
+describe('insertItemAtIndex', () => {
+    const fieldA = getPydanticFormFieldDummy({ id: 'a' });
+    const fieldB = getPydanticFormFieldDummy({ id: 'b' });
+    const fieldC = getPydanticFormFieldDummy({ id: 'c' });
+    const newField = getPydanticFormFieldDummy({ id: 'new' });
+
+    it('inserts at the beginning when anchorIndex is 0', () => {
+        const result = insertItemAtIndex([fieldA, fieldB], newField, 0);
+        expect(result).toEqual([newField, fieldA, fieldB]);
+    });
+
+    it('inserts at the end when anchorIndex is equal to array length', () => {
+        const result = insertItemAtIndex([fieldA, fieldB], newField, 2);
+        expect(result).toEqual([fieldA, fieldB, newField]);
+    });
+
+    it('inserts in the middle', () => {
+        const result = insertItemAtIndex([fieldA, fieldB, fieldC], newField, 1);
+        expect(result).toEqual([fieldA, newField, fieldB, fieldC]);
+    });
+
+    it('inserts into an empty array', () => {
+        const result = insertItemAtIndex([], newField, 0);
+        expect(result).toEqual([newField]);
+    });
+
+    it('does not mutate the original array', () => {
+        const fields = [fieldA, fieldB];
+        const copy = [...fields];
+        insertItemAtIndex(fields, newField, 1);
+        expect(fields).toEqual(copy);
+    });
+});
+
+describe('getFormFieldValue', () => {
+    const formValues: FieldValues = {
+        name: 'John Doe',
+        age: 30,
+        isActive: true,
+    };
+    it('gets the value by fieldName', () => {
+        const field = getPydanticFormFieldDummy({ id: 'name' });
+        const fieldName = 'name';
+        const value = getFormFieldValue(fieldName, formValues, field);
+        expect(value).toBe('John Doe');
+    });
+
+    it('returns undefined for unknown fields', () => {
+        const field = getPydanticFormFieldDummy({ id: 'name' });
+        const fieldName = 'UNKNOWN_FIELD';
+        const value = getFormFieldValue(fieldName, formValues, field);
+        expect(value).toBe(undefined);
+    });
+
+    it('gets the value at the right level ', () => {
+        const complexValues = {
+            company: {
+                name: 'John Deer',
+                age: 30,
+                contactPersons: [
+                    {
+                        name: 'Jane Smith',
+                        age: 25,
+                        licenses: ['A', 'B'],
+                    },
+                    {
+                        name: 'Alice Johnson',
+                        age: 28,
+                        licenses: ['C'],
+                    },
+                ],
+            },
+        };
+
+        const field = getPydanticFormFieldDummy({
+            id: 'company.contactPersons.0.name',
+        });
+        const value = getFormFieldValue('age', complexValues, field);
+        expect(value).toEqual(25);
+
+        const field2 = getPydanticFormFieldDummy({
+            id: 'company.contactPersons.1.name',
+        });
+
+        const value2 = getFormFieldValue('licenses', complexValues, field2);
+        expect(value2).toEqual(['C']);
+    });
+});

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

@@ -1,3 +1,5 @@
+import type { FieldValues } from 'react-hook-form';
+
 import type { Properties, PydanticFormField } from '@/types';
 import { PydanticFormFieldType } from '@/types';
 
@@ -91,3 +93,31 @@ export const itemizeArrayItem = (
     const itemId = `${item.id}.${arrayIndex}`;
     return itemize(item, itemId);
 };
+
+/**
+ * This functions returns a fields value but taking into account the position
+ * of the field in any tree it might be in. For example when requesting the
+ * 'age' field it will return the sibling field called 'age'. This is relevant
+ * if the field is part of an array or object where there might be more 'age'
+ * fields on other levels
+ * */
+export function getFormFieldValue(
+    fieldName: string,
+    formValues: FieldValues,
+    field: PydanticFormField,
+) {
+    const pathToParent = field.id.split('.').slice(0, -1);
+    let current: FieldValues = { ...formValues };
+
+    for (const segment of pathToParent) {
+        // Convert numeric strings to numbers for array indexing
+        const key = isNaN(Number(segment)) ? segment : Number(segment);
+        if (current && key in current) {
+            current = current[key];
+        } else {
+            return undefined;
+        }
+    }
+
+    return current?.[fieldName];
+}