feat: basic summary of List component on Review page (#3253)

theopensystemslab · Jun 7, 2024 · c88c769 · c88c769
1 parent 06f4334
commit c88c769
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/editor.planx.uk/src/@planx/components/List/Editor.tsx b/editor.planx.uk/src/@planx/components/List/Editor.tsx
@@ -64,6 +64,7 @@ function ListComponent(props: Props) {
               value={formik.values.title}
               placeholder="Title"
               onChange={formik.handleChange}
+              required
             />
           </InputRow>
           <InputRow>
@@ -81,6 +82,7 @@ function ListComponent(props: Props) {
               value={formik.values.fn}
               placeholder="Data Field"
               onChange={formik.handleChange}
+              required
             />
           </InputRow>
           <InputRow>

diff --git a/editor.planx.uk/src/@planx/components/List/Public/Context.tsx b/editor.planx.uk/src/@planx/components/List/Public/Context.tsx
@@ -138,7 +138,9 @@ export const ListProvider: React.FC<ListProviderProps> = (props) => {
       // flattenedPassportData makes individual list items compatible with Calculate components
       const flattenedPassportData = flatten(defaultPassportData);
 
-      // basic example of general summary stats we can add onSubmit
+      // basic example of general summary stats we can add onSubmit:
+      //   1. count of items/responses
+      //   2. if the schema includes a field that sets fn = "identicalUnits", sum of total units
       let sumIdenticalUnits = 0;
       defaultPassportData[`${props.fn}`].map(
         (item) => (sumIdenticalUnits += parseInt(item?.identicalUnits)),

diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
@@ -181,7 +181,7 @@ const Root = () => {
               sx={{ width: "100%" }}
               data-testid="list-add-button"
             >
-              + Add another {schema.type.toLowerCase()} description
+              + Add another {schema.type.toLowerCase()}
             </Button>
           </ErrorWrapper>
         </>

diff --git a/editor.planx.uk/src/@planx/components/List/model.ts b/editor.planx.uk/src/@planx/components/List/model.ts
@@ -75,7 +75,7 @@ export interface List extends MoreInformation {
 }
 
 export const parseContent = (data: Record<string, any> | undefined): List => ({
-  fn: data?.fn || "",
+  fn: data?.fn,
   title: data?.title,
   description: data?.description,
   schemaName: data?.schemaName || SCHEMAS[0].name,

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -100,7 +100,7 @@ const presentationalComponents: {
   [TYPES.Flow]: undefined,
   [TYPES.InternalPortal]: undefined,
   [TYPES.FileUploadAndLabel]: FileUploadAndLabel,
-  [TYPES.List]: undefined,
+  [TYPES.List]: List,
   [TYPES.Notice]: undefined,
   [TYPES.NextSteps]: undefined,
   [TYPES.NumberInput]: NumberInput,
@@ -337,6 +337,25 @@ interface ComponentProps {
   nodeId: Store.nodeId;
 }
 
+function List(props: ComponentProps) {
+  // `...total.units` is only set when the schema includes a field with fn = `identicalUnits`
+  const totalUnits = props.passport.data?.[`${props.node.data.fn}.total.units`];
+  // `...total.listItems` is always set for any schema
+  const totalListItems =
+    props.passport.data?.[`${props.node.data.fn}.total.listItems`];
+
+  const summary = totalUnits
+    ? `${totalUnits} ${totalUnits > 1 ? `units` : `unit`} total`
+    : `${totalListItems} ${totalListItems > 1 ? `items` : `item`} total`;
+
+  return (
+    <>
+      <Box component="dt">{props.node.data.title}</Box>
+      <Box component="dd">{summary}</Box>
+    </>
+  );
+}
+
 function Question(props: ComponentProps) {
   return (
     <>