From cbbf716a5df05253422be89d2a892cb40e079e9d Mon Sep 17 00:00:00 2001 From: Jeffrey Dowdle Date: Thu, 14 Sep 2023 15:10:56 +1000 Subject: [PATCH] feat(@dpc-sdp/ripple-tide-landing-page): updated data table component mapping and tests --- .../test/fixtures/landingpage/home.json | 44 +++++++++----- .../data-table/data-table-mapping.test.ts | 60 ++++++++++++++++--- .../data-table/data-table-mapping.ts | 55 ++++++++++++++--- .../components/data-table/RplDataTable.vue | 2 +- 4 files changed, 127 insertions(+), 34 deletions(-) diff --git a/examples/nuxt-app/test/fixtures/landingpage/home.json b/examples/nuxt-app/test/fixtures/landingpage/home.json index 2dafa23663..9948ed5760 100644 --- 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 index b96cfa05bd..a274c49f5c 100644 --- 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 = { + 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 index 4a48ba282b..9e36148cb1 100644 --- 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 - items: Array> + columns: Array<{ + label?: string + objectKey: string + }> + items: Array> +} + +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 => { 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 index 01e3798699..820912ca3f 100644 --- 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(), { caption }} - +