From 5ed78686cef18fac8391bf0ca6a9e01f58b291d8 Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Tue, 19 Sep 2023 10:33:13 +1000
Subject: [PATCH 1/4] feat(@dpc-sdp/ripple-tide-search): added sort dropdown to
 custom collection

also added loading state and tidied up error display
---
 .../components/TideSearchAboveResults.vue     | 61 ++++++++++++++++
 .../components/TideSearchListingPage.vue      | 28 ++++----
 .../TideSearchResultsLoadingState.vue         | 22 ++++++
 .../components/TideSearchSortOptions.vue      |  5 --
 .../global/TideCustomCollection.vue           | 71 +++++++++++++------
 5 files changed, 146 insertions(+), 41 deletions(-)
 create mode 100644 packages/ripple-tide-search/components/TideSearchAboveResults.vue
 create mode 100644 packages/ripple-tide-search/components/TideSearchResultsLoadingState.vue

diff --git a/packages/ripple-tide-search/components/TideSearchAboveResults.vue b/packages/ripple-tide-search/components/TideSearchAboveResults.vue
new file mode 100644
index 0000000000..8b7463009f
--- /dev/null
+++ b/packages/ripple-tide-search/components/TideSearchAboveResults.vue
@@ -0,0 +1,61 @@
+<template>
+  <RplPageComponent>
+    <div
+      :class="{
+        'tide-search-listing-above-result': true,
+        'tide-search-listing-above-result--compact': hasSidebar
+      }"
+    >
+      <slot name="left">
+        <div />
+      </slot>
+
+      <div class="tide-search-listing-above-result__right">
+        <slot name="right">
+          <div />
+        </slot>
+      </div>
+    </div>
+  </RplPageComponent>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  hasSidebar?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  hasSidebar: false
+})
+</script>
+
+<style>
+@import '@dpc-sdp/ripple-ui-core/style/breakpoints';
+
+.tide-search-listing-above-result {
+  @media (--rpl-bp-m) {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+}
+
+.tide-search-listing-above-result__right {
+  @media (--rpl-bp-m) {
+    width: 360px;
+  }
+}
+
+.tide-search-listing-above-result.tide-search-listing-above-result--compact {
+  @media (--rpl-bp-m) {
+    display: block;
+  }
+}
+
+.tide-search-listing-above-result--compact
+  .tide-search-listing-above-result__right {
+  @media (--rpl-bp-m) {
+    width: auto;
+  }
+}
+</style>
diff --git a/packages/ripple-tide-search/components/TideSearchListingPage.vue b/packages/ripple-tide-search/components/TideSearchListingPage.vue
index 54fef6d34f..25582c3794 100644
--- a/packages/ripple-tide-search/components/TideSearchListingPage.vue
+++ b/packages/ripple-tide-search/components/TideSearchListingPage.vue
@@ -351,8 +351,10 @@ watch(
       </RplHeroHeader>
     </template>
     <template #body>
-      <RplPageComponent v-if="results?.length">
-        <div class="tide-search-listing-above-result">
+      <TideSearchAboveResults
+        v-if="results?.length || (sortOptions && sortOptions.length)"
+      >
+        <template #left>
           <slot
             name="resultsCount"
             :results="results"
@@ -363,37 +365,40 @@ watch(
           >
             <div data-component-type="search-listing-result-count">
               <TideSearchResultsCount
+                v-if="!searchError && results?.length"
                 :pagingStart="pagingStart + 1"
                 :pagingEnd="pagingEnd + 1"
                 :totalResults="totalResults"
               />
             </div>
           </slot>
+        </template>
 
+        <template #right>
           <TideSearchSortOptions
             v-if="sortOptions && sortOptions.length"
             :currentValue="userSelectedSort"
             :sortOptions="sortOptions"
             @change="handleSortChange"
           />
-        </div>
-      </RplPageComponent>
+        </template>
+      </TideSearchAboveResults>
 
       <RplPageComponent>
-        <div :class="{ 'tide-search-results--loading': isBusy }">
+        <TideSearchResultsLoadingState :isActive="isBusy">
           <TideSearchError v-if="searchError" />
           <TideSearchNoResults v-else-if="!isBusy && !results?.length" />
 
           <slot name="results" :results="results">
             <component
               :is="resultsLayout.component"
-              v-if="results && results.length > 0"
+              v-if="!searchError && results && results.length > 0"
               :key="`TideSearchListingResultsLayout${resultsLayout.component}`"
               v-bind="resultsLayout.props"
               :results="results"
             />
           </slot>
-        </div>
+        </TideSearchResultsLoadingState>
       </RplPageComponent>
       <RplPageComponent>
         <slot
@@ -405,6 +410,7 @@ watch(
           :totalResults="totalResults"
         >
           <TideSearchPagination
+            v-if="!searchError"
             :currentPage="page"
             :totalPages="totalPages"
             @paginate="handlePageChange"
@@ -448,12 +454,4 @@ watch(
   opacity: 0.5;
   pointer-events: none;
 }
-
-.tide-search-listing-above-result {
-  @media (--rpl-bp-m) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
 </style>
diff --git a/packages/ripple-tide-search/components/TideSearchResultsLoadingState.vue b/packages/ripple-tide-search/components/TideSearchResultsLoadingState.vue
new file mode 100644
index 0000000000..ad9e77bc1f
--- /dev/null
+++ b/packages/ripple-tide-search/components/TideSearchResultsLoadingState.vue
@@ -0,0 +1,22 @@
+<template>
+  <div :class="{ 'tide-search-results--loading': isActive }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  isActive?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  isActive: false
+})
+</script>
+
+<style>
+.tide-search-results--loading {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/ripple-tide-search/components/TideSearchSortOptions.vue b/packages/ripple-tide-search/components/TideSearchSortOptions.vue
index 9265d2135b..d5347937ef 100644
--- a/packages/ripple-tide-search/components/TideSearchSortOptions.vue
+++ b/packages/ripple-tide-search/components/TideSearchSortOptions.vue
@@ -61,10 +61,5 @@ const handleChange = (value) => {
 
 .tide-search-sort-options .rpl-form__inner {
   flex-grow: 1;
-
-  @media (--rpl-bp-m) {
-    flex-grow: 0;
-    width: 300px;
-  }
 }
 </style>
diff --git a/packages/ripple-tide-search/components/global/TideCustomCollection.vue b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
index 131c6a9dcc..c0a260da00 100644
--- a/packages/ripple-tide-search/components/global/TideCustomCollection.vue
+++ b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
@@ -5,7 +5,8 @@ import useTideSearch from './../../composables/useTideSearch'
 import type {
   TideSearchListingPage,
   TideSearchListingResultLayout,
-  TideSearchListingResultItem
+  TideSearchListingResultItem,
+  TideSearchListingSortOption
 } from './../../types'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
@@ -24,6 +25,7 @@ interface Props {
     item?: Record<string, { component: string }>
   }
   index: string
+  sortOptions?: TideSearchListingSortOption[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -58,7 +60,8 @@ const props = withDefaults(defineProps<Props>(), {
     layout: {
       component: 'TideSearchResultsList'
     }
-  })
+  }),
+  sortOptions: () => []
 })
 
 const emit = defineEmits<{
@@ -114,6 +117,8 @@ const {
   submitSearch,
   goToPage,
   page,
+  userSelectedSort,
+  changeSortOrder,
   totalResults,
   totalPages,
   pagingStart,
@@ -124,7 +129,8 @@ const {
   props.userFilters,
   props.globalFilters,
   searchResultsMappingFn,
-  props.searchListingConfig
+  props.searchListingConfig,
+  props.sortOptions
 )
 
 const cachedSubmitEvent = ref({})
@@ -202,6 +208,10 @@ const handlePageChange = (event) => {
     { global: true }
   )
 }
+
+const handleSortChange = (sortId) => {
+  changeSortOrder(sortId)
+}
 </script>
 
 <template>
@@ -226,32 +236,51 @@ const handlePageChange = (event) => {
       @submit="handleFilterSubmit"
     />
 
-    <TideSearchResultsCount
-      v-if="results?.length"
-      :pagingStart="pagingStart + 1"
-      :pagingEnd="pagingEnd + 1"
-      :totalResults="totalResults"
-    />
+    <TideSearchAboveResults
+      v-if="results?.length || (sortOptions && sortOptions.length)"
+      :hasSidebar="true"
+    >
+      <template #left>
+        <TideSearchResultsCount
+          v-if="!searchError && results?.length"
+          :pagingStart="pagingStart + 1"
+          :pagingEnd="pagingEnd + 1"
+          :totalResults="totalResults"
+        />
+      </template>
 
-    <div class="rpl-u-margin-t-8">
-      <TideSearchError v-if="searchError" />
-      <TideSearchNoResults v-else-if="!isBusy && !results?.length" />
-    </div>
+      <template #right>
+        <TideSearchSortOptions
+          v-if="sortOptions && sortOptions.length"
+          :currentValue="userSelectedSort"
+          :sortOptions="sortOptions"
+          @change="handleSortChange"
+        />
+      </template>
+    </TideSearchAboveResults>
 
-    <component
-      :is="resultsConfig.layout?.component"
-      v-if="results && results.length > 0"
-      :key="`TideSearchListingResultsLayout${resultsConfig.layout?.component}`"
-      v-bind="resultsConfig.layout?.props"
-      :results="results"
-    />
+    <TideSearchResultsLoadingState :isActive="isBusy">
+      <div class="rpl-u-margin-t-8">
+        <TideSearchError v-if="searchError" />
+        <TideSearchNoResults v-else-if="!isBusy && !results?.length" />
+      </div>
+
+      <component
+        :is="resultsConfig.layout?.component"
+        v-if="!searchError && results && results.length > 0"
+        :key="`TideSearchListingResultsLayout${resultsConfig.layout?.component}`"
+        v-bind="resultsConfig.layout?.props"
+        :results="results"
+      />
+    </TideSearchResultsLoadingState>
 
     <RplPageComponent>
       <TideSearchPagination
+        v-if="!searchError"
         :currentPage="page"
         :totalPages="totalPages"
         @paginate="handlePageChange"
-      ></TideSearchPagination>
+      />
     </RplPageComponent>
   </div>
 </template>

From 53011c9a0e8244ebf3f11108a1d4c396dcb07b51 Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Tue, 19 Sep 2023 10:51:40 +1000
Subject: [PATCH 2/4] fix(@dpc-sdp/ripple-tide-search): fix custom collection
 scroll issue

R20-1321
---
 .../components/TideSearchPagination.vue               | 11 +++++++----
 .../components/global/TideCustomCollection.vue        |  1 +
 .../custom-collection/custom-collection-mapping.ts    |  1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/ripple-tide-search/components/TideSearchPagination.vue b/packages/ripple-tide-search/components/TideSearchPagination.vue
index 67b63f3585..e04a4a8cc8 100644
--- a/packages/ripple-tide-search/components/TideSearchPagination.vue
+++ b/packages/ripple-tide-search/components/TideSearchPagination.vue
@@ -20,9 +20,12 @@ interface Props {
   currentPage: number
   totalPages: number
   emitSearchEvent: Function
+  scrollToSelector: string
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  scrollToSelector: '.rpl-layout__body-wrap'
+})
 
 function scrollToElementTopWithOffset(element, offset) {
   const elementTop = element.getBoundingClientRect().top + window.scrollY
@@ -36,10 +39,10 @@ function scrollToElementTopWithOffset(element, offset) {
 
 const handlePageChange = (event) => {
   const navHeight = 92
-  const layoutBody = document.querySelector('.rpl-layout__body-wrap')
+  const scrollToElement = document.querySelector(props.scrollToSelector)
 
-  if (layoutBody) {
-    scrollToElementTopWithOffset(layoutBody, navHeight)
+  if (scrollToElement) {
+    scrollToElementTopWithOffset(scrollToElement, navHeight)
   }
   emit('paginate', event)
 }
diff --git a/packages/ripple-tide-search/components/global/TideCustomCollection.vue b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
index c0a260da00..b79d80ce5f 100644
--- a/packages/ripple-tide-search/components/global/TideCustomCollection.vue
+++ b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
@@ -279,6 +279,7 @@ const handleSortChange = (sortId) => {
         v-if="!searchError"
         :currentPage="page"
         :totalPages="totalPages"
+        :scrollToSelector="`[data-component-id='${id}']`"
         @paginate="handlePageChange"
       />
     </RplPageComponent>
diff --git a/packages/ripple-tide-search/mapping/components/custom-collection/custom-collection-mapping.ts b/packages/ripple-tide-search/mapping/components/custom-collection/custom-collection-mapping.ts
index 44cb29a7bb..3d9b61210f 100644
--- a/packages/ripple-tide-search/mapping/components/custom-collection/custom-collection-mapping.ts
+++ b/packages/ripple-tide-search/mapping/components/custom-collection/custom-collection-mapping.ts
@@ -7,6 +7,7 @@ export const customCollectionMapping = (
     component: 'TideCustomCollection',
     id: field.drupal_internal__id.toString(),
     props: {
+      id: field.drupal_internal__id.toString(),
       ...field.field_content_collection_config
     }
   }

From 6bd90b2c925dc3c81e3793c993905555ff182fa2 Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Tue, 19 Sep 2023 10:53:30 +1000
Subject: [PATCH 3/4] fix(@dpc-sdp/ripple-tide-search): fixed 'undefined' class
 name for results table

---
 .../components/global/TideSearchResultsTable.vue             | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ripple-tide-search/components/global/TideSearchResultsTable.vue b/packages/ripple-tide-search/components/global/TideSearchResultsTable.vue
index c501762dab..1103b74f0d 100644
--- a/packages/ripple-tide-search/components/global/TideSearchResultsTable.vue
+++ b/packages/ripple-tide-search/components/global/TideSearchResultsTable.vue
@@ -38,7 +38,10 @@ const items = computed(() => {
 
 const processedColumns = computed(() => {
   return props.columns.map((column) => {
-    const classes = [`tide-search-listing-table-cols__${column.cols}`]
+    const classes =
+      typeof column.cols === 'number'
+        ? [`tide-search-listing-table-cols__${column.cols}`]
+        : []
 
     if (column.component) {
       return {

From bc8dc3b5e7c600260fe965c52a6302ee463a4f90 Mon Sep 17 00:00:00 2001
From: Jeffrey Dowdle <jeffrey.dowdle@dpc.vic.gov.au>
Date: Tue, 19 Sep 2023 16:10:23 +1000
Subject: [PATCH 4/4] test(@dpc-sdp/ripple-tide-search): fixed up custom
 collection test table results

---
 .../test/fixtures/landingpage/custom-collection.json     | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/examples/nuxt-app/test/fixtures/landingpage/custom-collection.json b/examples/nuxt-app/test/fixtures/landingpage/custom-collection.json
index 7d519c759d..69693b8f43 100644
--- a/examples/nuxt-app/test/fixtures/landingpage/custom-collection.json
+++ b/examples/nuxt-app/test/fixtures/landingpage/custom-collection.json
@@ -130,18 +130,15 @@
               "columns": [
                 {
                   "label": "Suburb",
-                  "key": "suburb",
-                  "isArray": false
+                  "objectKey": "suburb"
                 },
                 {
                   "label": "Location",
-                  "key": "street",
-                  "isArray": false
+                  "objectKey": "street"
                 },
                 {
                   "label": "Last annual test",
-                  "key": "last_annual_test",
-                  "isArray": false
+                  "objectKey": "last_annual_test"
                 }
               ]
             }