Merge pull request #746 from dpc-sdp/feature/R20-950-fv-recc-support

[R20-950] Cleaned up table listing view
dpc-sdp · Aug 7, 2023 · 9eaaa95 · 9eaaa95
2 parents da021c8 + 811988f
commit 9eaaa95
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 52 deletions.
diff --git a/...ges/ripple-tide-search/components/global/TideSearchListing/TideSearchListingTableLink.vue b/...ges/ripple-tide-search/components/global/TideSearchListing/TideSearchListingTableLink.vue
@@ -1,9 +1,20 @@
 <template>
-  <RplTextLink :url="item.url[0]">
-    {{ item.title[0] }}
+  <RplTextLink :url="url">
+    {{ title }}
   </RplTextLink>
 </template>
 
 <script setup lang="ts">
-defineProps(['item'])
+import { useSearchResult } from '#imports'
+
+interface Props {
+  item: {
+    url: string
+    title: string
+  }
+}
+
+const props = defineProps<Props>()
+
+const { title, url } = useSearchResult(props.item)
 </script>
diff --git a/...s/ripple-tide-search/components/global/TideSearchListing/TideSearchListingTableStatus.vue b/...s/ripple-tide-search/components/global/TideSearchListing/TideSearchListingTableStatus.vue
diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import RplDataTableRow from './RplDataTableRow.vue'
+import RplDataTableRow, { tableColumnConfig } from './RplDataTableRow.vue'
 
 interface HeadingType {
   horizontal: boolean
@@ -10,7 +10,7 @@ interface HeadingType {
 interface Props {
   caption?: string
   footer?: string
-  columns: Array<string>
+  columns: tableColumnConfig[] | string[]
   headingType?: HeadingType
   items: Array<Record<string, unknown>[] | string[]>
   offset?: number

diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
@@ -7,14 +7,15 @@ import {
   rplEventPayload
 } from '../../composables/useRippleEvent'
 
-type tableColumnConfig = {
+export type tableColumnConfig = {
+  label: string
   component?: string
   props?: any
 }
 
 interface Props {
   content: any
-  columns: tableColumnConfig[]
+  columns: tableColumnConfig[] | string[]
   items: Array<string>
   verticalHeader?: boolean
   offset: number
@@ -75,15 +76,20 @@ const handleClick = () => {
         :is="i === 0 && verticalHeader ? 'th' : 'td'"
         v-for="(item, i) of items"
         :key="i"
-        :data-label="columns[i]"
+        :data-label="
+          typeof columns[i] === 'string' ? columns[i] : (columns[i] as tableColumnConfig).label
+        "
       >
         <template
           v-if="
             typeof columns[i] === 'object' &&
             columns[i].hasOwnProperty('component')
           "
         >
-          <component :is="columns[i].component" :item="item" />
+          <component
+            :is="(columns[i] as tableColumnConfig).component"
+            :item="item"
+          />
         </template>
         <template v-else>
           {{ item }}