feat(@dpc-sdp/ripple-tide-landing-page): updated data table component…

… mapping and tests
dpc-sdp · Sep 14, 2023 · cbbf716 · cbbf716
1 parent 0d6b36b
commit cbbf716
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 34 deletions.
diff --git a/examples/nuxt-app/test/fixtures/landingpage/home.json b/examples/nuxt-app/test/fixtures/landingpage/home.json
@@ -683,17 +683,21 @@
         },
         "orientation": "row",
         "columns": [
-          "Row One Column One",
-          "Row One Column Two",
-          "Row One Column Three"
+          { "label": "Row One Column One", "objectKey": "col0" },
+          { "label": "Row One Column Two", "objectKey": "col1" },
+          { "label": "Row One Column Three", "objectKey": "col2" }
         ],
         "items": [
-          ["Row Two Column One", "Row Two Column Two", "Row Two Column Three"],
-          [
-            "Row Three Column One",
-            "Row Three Column Two",
-            "Row Three Column Three"
-          ]
+          {
+            "col0": "Row Two Column One",
+            "col1": "Row Two Column Two",
+            "col2": "Row Two Column Three"
+          },
+          {
+            "col0": "Row Three Column One",
+            "col1": "Row Three Column Two",
+            "col2": "Row Three Column Three"
+          }
         ]
       }
     },
@@ -707,14 +711,22 @@
           "vertical": false
         },
         "orientation": "row",
-        "columns": [],
+        "columns": [
+          { "objectKey": "col0" },
+          { "objectKey": "col1" },
+          { "objectKey": "col2" }
+        ],
         "items": [
-          ["Row Two Column One", "Row Two Column Two", "Row Two Column Three"],
-          [
-            "Row Three Column One",
-            "Row Three Column Two",
-            "Row Three Column Three"
-          ]
+          {
+            "col0": "Row Two Column One",
+            "col1": "Row Two Column Two",
+            "col2": "Row Two Column Three"
+          },
+          {
+            "col0": "Row Three Column One",
+            "col1": "Row Three Column Two",
+            "col2": "Row Three Column Three"
+          }
         ]
       }
     },

diff --git a/packages/ripple-tide-landing-page/mapping/components/data-table/data-table-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/components/data-table/data-table-mapping.test.ts
@@ -51,21 +51,63 @@ describe('introBannerMapping', () => {
         headingType: { horizontal: true, vertical: false },
         orientation: 'row',
         columns: [
-          'Row One Column One',
-          'Row One Column Two',
-          'Row One Column Three'
+          { label: 'Row One Column One', objectKey: 'col0' },
+          { label: 'Row One Column Two', objectKey: 'col1' },
+          { label: 'Row One Column Three', objectKey: 'col2' }
         ],
         items: [
-          ['Row Two Column One', 'Row Two Column Two', 'Row Two Column Three'],
-          [
-            'Row Three Column One',
-            'Row Three Column Two',
-            'Row Three Column Three'
-          ]
+          {
+            col0: 'Row Two Column One',
+            col1: 'Row Two Column Two',
+            col2: 'Row Two Column Three'
+          },
+          {
+            col0: 'Row Three Column One',
+            col1: 'Row Three Column Two',
+            col2: 'Row Three Column Three'
+          }
         ]
       }
     }
 
     expect(dataTableMapping(rawData)).toEqual(result)
   })
+
+  it('maps a table without a header row', () => {
+    const result: TideDynamicPageComponent<ITideDataTable> = {
+      component: 'TideLandingPageDataTable',
+      id: '1936',
+      props: {
+        caption: '',
+        headingType: { horizontal: false, vertical: false },
+        orientation: 'row',
+        columns: [
+          { objectKey: 'col0' },
+          { objectKey: 'col1' },
+          { objectKey: 'col2' }
+        ],
+        items: [
+          {
+            col0: 'Row One Column One',
+            col1: 'Row One Column Two',
+            col2: 'Row One Column Three'
+          },
+          {
+            col0: 'Row Two Column One',
+            col1: 'Row Two Column Two',
+            col2: 'Row Two Column Three'
+          },
+          {
+            col0: 'Row Three Column One',
+            col1: 'Row Three Column Two',
+            col2: 'Row Three Column Three'
+          }
+        ]
+      }
+    }
+
+    expect(
+      dataTableMapping({ ...rawData, field_first_row_table_header: false })
+    ).toEqual(result)
+  })
 })
diff --git a/packages/ripple-tide-landing-page/mapping/components/data-table/data-table-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/data-table/data-table-mapping.ts
@@ -8,21 +8,60 @@ export interface ITideDataTable {
     horizontal: boolean
     vertical: boolean
   }
-  columns: Array<string>
-  items: Array<Array<string>>
+  columns: Array<{
+    label?: string
+    objectKey: string
+  }>
+  items: Array<Record<string, any>>
+}
+
+const columnKey = (index: number) => `col${index}`
+
+const getColumnsFromEntries = (rows: any, firstRowIsHeader: boolean) => {
+  const firstRow = rows && rows.hasOwnProperty('0') ? rows['0'] : null
+
+  if (!firstRow) {
+    return []
+  }
+
+  return firstRow.map((val: any, index: number) => {
+    return {
+      label: firstRowIsHeader ? val : undefined,
+      objectKey: columnKey(index)
+    }
+  })
 }
 
 export const dataTableMapping = (
   field
 ): TideDynamicPageComponent<ITideDataTable> => {
   const entries = getField(field, 'field_data_table_content.value', {})
+
   const items = Object.keys(entries)
-    .map((entry) => (entry !== 'caption' ? entries[entry] : null))
-    .filter(Boolean)
+    .filter((entryKey) => entryKey !== 'caption')
+    .filter((entryKey, i) => {
+      if (field?.field_first_row_table_header) {
+        // Exclude first row if it is a header
+        return entryKey !== '0'
+      }
 
-  if (field?.field_first_row_table_header && entries?.[0]) {
-    items.shift()
-  }
+      return true
+    })
+    .map((entryKey) => {
+      const entry = entries[entryKey]
+
+      return entry.reduce((itemObj, val, index) => {
+        return {
+          ...itemObj,
+          [columnKey(index)]: val
+        }
+      }, {})
+    })
+
+  const columns = getColumnsFromEntries(
+    entries,
+    field?.field_first_row_table_header || false
+  )
 
   return {
     component: 'TideLandingPageDataTable',
@@ -34,7 +73,7 @@ export const dataTableMapping = (
         vertical: field?.field_first_column_table_header
       },
       orientation: field?.field_table_orientation ? 'row' : 'column',
-      columns: field?.field_first_row_table_header ? entries?.[0] : [],
+      columns,
       items
     }
   }

diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue
@@ -42,7 +42,7 @@ withDefaults(defineProps<Props>(), {
             caption
           }}
         </caption>
-        <thead v-if="columns.length > 0">
+        <thead v-if="headingType.horizontal && columns.length > 0">
           <tr>
             <th
               v-for="(column, index) in columns"