feat(@dpc-sdp/ripple-tide-search): added sort dropdown to custom coll…

…ection

also added loading state and tidied up error display

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>

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>

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>

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>

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>