feat(ripple-nuxt-tide): migrate and update solar patch to fix card co…

…llection display (#1245)

Co-authored-by: David Featherston <david.featherstone@dpc.vic.gov.au>

packages/ripple-nuxt-tide/modules/landing-page/components/CardCollection.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="app-card-collection" :class="`app-card-collection--${displayType}`">
-    <h2 v-if="title && (hasResults || noResultsMsg)" ref="title" class="app-card-collection__title">{{ title }}</h2>
+  <div class="app-card-collection" :class="`app-card-collection--${displayType}`" v-if="showComponent">
+    <h2 v-if="title" ref="title" class="app-card-collection__title">{{ title }}</h2>
     <template v-if="hasResults">
       <div class="app-card-collection__carousel" v-if="displayType === 'carousel'">
         <client-only>
@@ -25,14 +25,13 @@
         </div>
       </div>
     </template>
-    <div v-else-if="noResultsMsg" class="app-card-collection__no-results">
+    <div v-else class="app-card-collection__no-results">
       {{noResultsMsg}}
     </div>
   </div>
 </template>
 
 <script>
-import get from 'lodash.get'
 import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
 import { RplCardCarousel, RplCardPromo } from '@dpc-sdp/ripple-card'
 import RplPagination from '@dpc-sdp/ripple-pagination'
@@ -45,6 +44,23 @@ export default {
     config: Object,
     initialResults: Array,
     total: Number,
+    minimum: Number,
+    perPage: {
+      type: Number,
+      default: 9
+    },
+    displayType: {
+      type: String,
+      default: 'grid'
+    },
+    noResultsMessage: {
+      type: String,
+      default: ''
+    },
+    noResultsBehaviour: {
+      type: String,
+      default: 'hide'
+    },
     sidebar: {
       type: Boolean,
       default: false
@@ -86,7 +102,8 @@ export default {
       const response = await this.$tideSearchApi.search('/cards', {
         ...params,
         site: this.$store.state.tideSite.siteId,
-        page: this.page
+        page: this.page,
+        limit: this.perPage
       })
       this.results = response.results
     }
@@ -104,17 +121,6 @@ export default {
     totalSteps () {
       return Math.ceil(Number(this.total) / this.perPage)
     },
-    perPage () {
-      return get(this.config, ['display', 'items'], 9)
-    },
-    displayType () {
-      if (this.config) {
-        return get(this.config, ['display', 'type'], 'grid')
-      }
-    },
-    minResults () {
-      return get(this.config, ['results', 'min'], 1)
-    },
     cards () {
       if (this.results.length > 0) {
         return this.results.map(item => {
@@ -138,13 +144,14 @@ export default {
       }
       return []
     },
+    showComponent () {
+      return this.hasResults || this.noResultsBehaviour !== 'hide'
+    },
     hasResults () {
-      return this.results.length >= this.minResults
+      return this.minimum ? this.results.length >= this.minimum : this.results.length
     },
     noResultsMsg () {
-      if (!this.hasResults && this.config.results.min_not_met === 'no_results_message') {
-        return this.config.results.no_results_message || 'There are currently no results'
-      }
+      return this.noResultsMessage || 'There are currently no results'
     }
   }
 }

packages/ripple-nuxt-tide/modules/landing-page/lib/card-collection-utils.js

@@ -4,46 +4,46 @@
  * @param {Object} settings Settings from card collection
  * @returns {Object} queryParams to pass to pass to tideSearchApi
  */
-export const getQueryParams = (settings) => {
-  if (settings) {
+export const getQueryParams = (data) => {
+  const config = data.hasOwnProperty('config') ? data.config : data
+  if (config) {
     const queryParams = {
-      type: settings.content_type || 'all'
+      type: config.content_type || 'all'
     }
 
-    if (settings.filters) {
-      delete settings.filters.type
-      queryParams.filters = settings.filters
+    if (config.filters) {
+      delete config.filters.type
+      queryParams.filters = config.filters
     }
 
-    if (settings.sort && settings.sort.field !== '') {
-      queryParams.sort = [{ [`${settings.sort.field}`]: settings.sort.direction }]
+    if (config.sort && config.sort.field !== '') {
+      queryParams.sort = [{ [`${config.sort.field}`]: config.sort.direction }]
     }
 
-    if (settings.sort && settings.sort.field) {
-      queryParams.sort = [{ [`${settings.sort.field}`]: settings.sort.direction }]
+    if (config.sort && config.sort.field) {
+      queryParams.sort = [{ [`${config.sort.field}`]: config.sort.direction }]
     }
 
-    if (settings.filter_today && settings.filter_today.status) {
+    if (config.filter_today && config.filter_today.status) {
       queryParams.date_filter = {
-        start_field: settings.filter_today.start_date,
-        end_field: settings.filter_today.end_date,
-        criteria: settings.filter_today.criteria
+        start_field: config.filter_today.start_date,
+        end_field: config.filter_today.end_date,
+        criteria: config.filter_today.criteria
       }
     }
 
     const carouselLimit = 9
 
-    if (settings.display) {
-      if (settings.display.type === 'grid' && settings.display.items_per_page) {
-        queryParams.limit = settings.display.items_per_page
-      } else if (settings.display.items_per_page && settings.display.items_per_page !== 0 && settings.display.items_per_page < carouselLimit) {
-        queryParams.limit = settings.display.items_per_page
-      } else {
-        queryParams.limit = carouselLimit
-      }
+    if (config.field_listing_display_type === 'grid' && config.perPage) {
+      queryParams.limit = config.perPage
+    } else if (data.perPage && data.perPage !== 0 && data.perPage < carouselLimit) {
+      queryParams.limit = data.perPage
+    } else {
+      queryParams.limit = carouselLimit
     }
-    if (settings.page) {
-      queryParams.page = settings.page
+
+    if (config.page) {
+      queryParams.page = config.page
     }
 
     return queryParams

packages/ripple-nuxt-tide/modules/landing-page/tide.config.js

@@ -446,12 +446,12 @@ module.exports = {
         component: 'automated-card-listing',
         props: {
           title: 'field_paragraph_title',
-          cardCtaText: 'field_paragraph_cta_text',
           config: ['field_paragraph_auto_listing'],
-          ctaLink: {
-            field: 'field_paragraph_cta',
-            filters: ['paragraphCta']
-          }
+          perPage: ['field_listings_per_page'],
+          minimum: ['field_listings_minimum'],
+          displayType: ['field_listing_display_type'],
+          noResultsMessage: ['field_no_results_message'],
+          noResultsBehaviour: ['field_no_result_behaviour']
         },
         childCols: cardColsSetting
       },

packages/ripple-nuxt-tide/modules/landing-page/tide.middleware.js

@@ -41,7 +41,7 @@ export default {
             key,
             promise: context.app.$tideSearchApi.search('/cards', {
               site: context.store.state.tideSite.siteId,
-              ...getQueryParams(component.data.config)
+              ...getQueryParams(component.data)
             })
           })
         }
@@ -56,7 +56,6 @@ export default {
           component.data.initialResults = response.results
           component.data.total = response.total
           component.data.sidebar = pageData.tideLayout.sidebar
-          component.data.config.results.min_not_met = 'no_results_message'
         })
       }
     }