diff --git a/editor.planx.uk/src/@planx/components/List/Public/Context.tsx b/editor.planx.uk/src/@planx/components/List/Public/Context.tsx index e9c22cee1a..3332980039 100644 --- a/editor.planx.uk/src/@planx/components/List/Public/Context.tsx +++ b/editor.planx.uk/src/@planx/components/List/Public/Context.tsx @@ -168,7 +168,7 @@ export const ListProvider: React.FC = (props) => { const defaultPassportData = makeData(props, values.userData)?.["data"]; // flattenedPassportData makes individual list items compatible with Calculate components - const flattenedPassportData = flatten(defaultPassportData); + const flattenedPassportData = flatten(defaultPassportData, { depth: 2 }); // basic example of general summary stats we can add onSubmit: // 1. count of items/responses diff --git a/editor.planx.uk/src/@planx/components/List/schemas/mocks/Zoo.ts b/editor.planx.uk/src/@planx/components/List/schemas/mocks/Zoo.ts index 669d349e70..22ad864627 100644 --- a/editor.planx.uk/src/@planx/components/List/schemas/mocks/Zoo.ts +++ b/editor.planx.uk/src/@planx/components/List/schemas/mocks/Zoo.ts @@ -3,10 +3,6 @@ import { TextInputType } from "@planx/components/TextInput/model"; import { Schema } from "../../model"; import { Props } from "../../Public"; -/** - * Temp simple example to build out UI - * Can be re-used as mock for testing - */ export const Zoo: Schema = { type: "Animal", fields: [ @@ -116,11 +112,13 @@ export const mockZooPayload = { "mockFn.one.email.address": "richard.parker@pi.com", "mockFn.one.name": "Richard Parker", "mockFn.one.size": "Medium", + "mockFn.one.food": ["meat", "leaves", "bamboo"], "mockFn.two.age": 10, "mockFn.two.cuteness.amount": "Very", "mockFn.two.email.address": "richard.parker@pi.com", "mockFn.two.name": "Richard Parker", "mockFn.two.size": "Medium", + "mockFn.two.food": ["meat", "leaves", "bamboo"], "mockFn.total.listItems": 2, }, }; diff --git a/editor.planx.uk/src/@planx/components/List/utils.test.ts b/editor.planx.uk/src/@planx/components/List/utils.test.ts index c34dbf20d8..72e8996e19 100644 --- a/editor.planx.uk/src/@planx/components/List/utils.test.ts +++ b/editor.planx.uk/src/@planx/components/List/utils.test.ts @@ -15,6 +15,7 @@ describe("passport data shape", () => { "email.address": "richard.parker@pi.com", name: "Richard Parker", size: "Medium", + food: ["bamboo", "leaves"], }, { age: 10, @@ -22,21 +23,24 @@ describe("passport data shape", () => { "email.address": "richard.parker@pi.com", name: "Richard Parker", size: "Medium", + food: ["meat", "bamboo", "leaves"], }, ], }; - expect(flatten(defaultPassportData)).toEqual({ + expect(flatten(defaultPassportData, { depth: 2 })).toEqual({ "mockFn.one.age": 10, "mockFn.one.cuteness.amount": "Very", "mockFn.one.email.address": "richard.parker@pi.com", "mockFn.one.name": "Richard Parker", "mockFn.one.size": "Medium", + "mockFn.one.food": ["bamboo", "leaves"], "mockFn.two.age": 10, "mockFn.two.cuteness.amount": "Very", "mockFn.two.email.address": "richard.parker@pi.com", "mockFn.two.name": "Richard Parker", "mockFn.two.size": "Medium", + "mockFn.two.food": ["meat", "bamboo", "leaves"], }); }); diff --git a/editor.planx.uk/src/@planx/components/List/utils.tsx b/editor.planx.uk/src/@planx/components/List/utils.tsx index db3d58b2ba..30c3281c51 100644 --- a/editor.planx.uk/src/@planx/components/List/utils.tsx +++ b/editor.planx.uk/src/@planx/components/List/utils.tsx @@ -95,14 +95,19 @@ export function sumIdenticalUnitsByDevelopmentType( return formattedSums; } +interface FlattenOptions { + depth?: number; + path?: string | null; + separator?: string; +}; + /** * Flattens nested object so we can output passport variables like `{listFn}.{itemIndexAsText}.{fieldFn}` * Adapted from https://gist.github.com/penguinboy/762197 */ export function flatten>( - object: T, - path: string | null = null, - separator = ".", + object: T, + { depth = Infinity, path = null, separator = ".", }: FlattenOptions = {} ): T { return Object.keys(object).reduce((acc: T, key: string): T => { const value = object[key]; @@ -121,8 +126,8 @@ export function flatten>( !(Array.isArray(value) && value.length === 0), ].every(Boolean); - return isObject - ? { ...acc, ...flatten(value, newPath, separator) } + return (isObject && depth > 0) + ? { ...acc, ...flatten(value, { depth: depth - 1, path: newPath, separator }) } : { ...acc, [newPath]: value }; }, {} as T); }