Merge pull request #858 from dpc-sdp/feature/R20-1175-sort-options

feat(@dpc-sdp/ripple-tide-search): added sort dropdown to custom collection
dpc-sdp · Sep 19, 2023 · cb7d630 · cb7d630
2 parents 0429649 + bc8dc3b
commit cb7d630
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 52 deletions.
diff --git 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"
                 }
               ]
             }

diff --git a/packages/ripple-tide-search/components/TideSearchAboveResults.vue 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
@@ -353,8 +353,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"
@@ -365,37 +367,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
@@ -407,6 +412,7 @@ watch(
           :totalResults="totalResults"
         >
           <TideSearchPagination
+            v-if="!searchError"
             :currentPage="page"
             :totalPages="totalPages"
             @paginate="handlePageChange"
@@ -450,12 +456,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/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/TideSearchResultsLoadingState.vue 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
@@ -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
@@ -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,52 @@ 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"
+        :scrollToSelector="`[data-component-id='${id}']`"
         @paginate="handlePageChange"
-      ></TideSearchPagination>
+      />
     </RplPageComponent>
   </div>
 </template>
diff --git 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 {

diff --git a/...ages/ripple-tide-search/mapping/components/custom-collection/custom-collection-mapping.ts b/...ages/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
     }
   }