@worksafevictoria/wcl7.5 1.0.0

package/src/components/Paragraphs/BrowseContent/index.stories.js

@@ -0,0 +1,220 @@
+import BrowseContent from './index.vue'
+
+const bundleContent = ['news', 'page']
+
+export default {
+  title: 'Paragraphs/BrowseContent',
+  component: { BrowseContent },
+  argTypes: {
+    background: {
+      control: 'select',
+      options: ['grey', 'white', 'yellow'],
+      defaultValue: 'grey'
+    },
+    title: {
+      control: 'text',
+      defaultValue: 'Card Group Auto title'
+    },
+    titleTag: {
+      control: 'select',
+      options: ['h2', 'h3'],
+      defaultValue: 'h2'
+    },
+    bundle: {
+      control: 'object',
+      defaultValue: bundleContent
+    },
+    columns: {
+      control: 'select',
+      options: [4, 3, 2, 1],
+      defaultValue: 3
+    },
+    initialDisplyLimit: {
+      control: 'number',
+      defaultValue: 3
+    },
+    fetchContent: {
+      control: 'function',
+      defaultValue: null,
+      table: { disable: true }
+    },
+    enableBundleFilter: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    showMore: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    type: {
+      control: 'text',
+      defaultValue: 'auto',
+      table: { disable: true }
+    },
+    showFilter: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    rows: {
+      control: 'select',
+      options: [3, 2, 1],
+      defaultValue: 3
+    },
+    hasPreselectedFilters: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    totalResults: {
+      control: 'number',
+      defaultValue: 10
+    },
+    filterResults: {
+      control: 'number',
+      defaultValue: 1
+    }
+  }
+}
+
+const DefaultContent = (args, { argTypes }) => ({
+  components: { BrowseContent },
+  props: Object.keys(argTypes),
+  mounted() {
+    this.reset()
+  },
+  computed: {
+    searchResults() {
+      return {
+        results: Array(this.totalResults).fill({
+          title: 'News Kitchen Sink 11',
+          imageSrc: '',
+          imageAlt: '',
+          description: 'test',
+          link: '/news/2021-08/news-kitchen-sink-11',
+          pillText: 'News',
+          colour: 'blue',
+          date: '',
+          location: '',
+          rtl: false
+        }),
+        numFound: this.totalResults
+      }
+    }
+  },
+  data() {
+    return {
+      rerenderKey: 0
+    }
+  },
+  methods: {
+    reset() {
+      this.rerenderKey += 1
+      setTimeout(() => {
+        this.$refs.bc.loadFiltersAndContent()
+      })
+    },
+    fetchCards(qs, filters, bundleIndex) {
+      const hasFilters = Object.values(filters).some(
+        (filter) => filter.filter((item) => !item.preselected).length > 0
+      )
+      const data = JSON.parse(JSON.stringify(this.searchResults))
+      data.results.forEach((item, index) => {
+        item.pillText = qs.bundle
+        item.colour = ['blue', 'pink'][bundleIndex]
+        item.title = `${qs.bundle} ` + (index + 1)
+        return item
+      })
+
+      data.results = hasFilters
+        ? data.results.slice(0, this.filterResults)
+        : data.results.slice(qs.start, qs.start + qs.rows)
+      data.numFound = hasFilters ? this.filterResults : data.numFound
+
+      return Promise.resolve(data)
+    },
+    fetchFilters() {
+      return Promise.resolve(
+        this.showFilter
+          ? [
+              {
+                name: 'industry',
+                terms: [
+                  {
+                    tid: '421',
+                    name: 'Locked Industry',
+                    preselected: true
+                  },
+                  {
+                    tid: '401',
+                    name: 'Aged care'
+                  }
+                ].filter((item) =>
+                  this.hasPreselectedFilters ? true : !item.preselected
+                ),
+                record_id: 'industry'
+              },
+              {
+                name: 'topic',
+                terms: [
+                  {
+                    tid: '411',
+                    name: 'Asbestos'
+                  },
+                  {
+                    tid: '4121',
+                    name: 'Locked Industry',
+                    preselected: true
+                  }
+                ].filter((item) =>
+                  this.hasPreselectedFilters ? true : !item.preselected
+                ),
+                record_id: 'topic'
+              }
+            ]
+          : []
+      )
+    },
+    getBundleAlias(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1)
+    }
+  },
+  watch: {
+    showFilter: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    rows: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    totalResults: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    filterResults: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    hasPreselectedFilters: {
+      handler: function() {
+        this.reset()
+      }
+    }
+  },
+  template: `
+  <browse-content
+    v-bind="$props"
+    ref="bc"
+    :key="rerenderKey"
+    :initial-disply-limit="rows * 3"
+    :fetch-content="fetchCards"
+    :get-bundle-alias="getBundleAlias"
+    :fetch-filters="fetchFilters"
+  />
+  `
+})
+
+export const Default = DefaultContent.bind({})

package/src/components/Paragraphs/BrowseContent/index.vue

@@ -0,0 +1,298 @@
+<template>
+  <card-group
+    :title="title"
+    :title-tag="titleTag"
+    :background="background"
+    :cards="displayedCards"
+    :loading="loading"
+    :columns="columns"
+    :show-load-more="showMore && hasMorePages"
+    :class="`wcl-browse-content card_group__card--col-${columns}`"
+    @loadMore="() => loadMoreCards(false)"
+  >
+    <template
+      v-if="enableBundleFilter && bundle.length > 1"
+      v-slot:cardGroupFilter
+    >
+      <switcher
+        v-if="enableBundleFilter"
+        :options="bundle"
+        class="wcl-browse-content__switcher"
+        :get-option-alias="getBundleAlias"
+        @switched="onSwitcher"
+        @reset="onSwitcher"
+      />
+    </template>
+
+    <template v-if="filters.taxonomies.length > 0" v-slot:cardGroupPreContent>
+      <directory-filters
+        class="wcl-browse-content__filter"
+        :filters="filters"
+        :results="allCards.total"
+        :is-filtering="loading"
+        @onFilter="onFilter"
+        @onReset="reset"
+      />
+    </template>
+  </card-group>
+</template>
+
+<script>
+import CardGroup from '../../SubComponents/CardGroup/index.vue'
+import DirectoryFilters from '../../Global/DirectoryFilters/index.vue'
+import Switcher from './switcher.vue'
+
+export default {
+  name: 'BrowseContent',
+  components: {
+    CardGroup,
+    DirectoryFilters,
+    Switcher
+  },
+  props: {
+    background: {
+      type: String,
+      default: 'grey'
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    titleTag: {
+      type: String,
+      default: 'h2'
+    },
+    bundle: {
+      type: Array,
+      default: () => ['']
+    },
+    columns: {
+      type: Number,
+      default: 0
+    },
+    initialDisplyLimit: {
+      type: Number,
+      default: 0
+    },
+    fetchContent: {
+      type: Function,
+      required: true
+    },
+    fetchFilters: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    enableBundleFilter: {
+      type: Boolean
+    },
+    getBundleAlias: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    showMore: {
+      type: Boolean
+    },
+    type: {
+      type: String,
+      required: true
+    }
+  },
+  async fetch() {
+    if (this.displayedCards.length === 0) {
+      await this.loadFiltersAndContent()
+    }
+  },
+  data() {
+    return {
+      hasMorePages: false,
+      displayedCards: [],
+      loading: true,
+      bundleCache: {},
+      displayLimit: 0,
+      allCards: undefined,
+      filters: {
+        taxonomies: [],
+        selected: {},
+        availableBundles: []
+      }
+    }
+  },
+  fetchOnServer: true,
+  fetchKey: 'ws-browscontent',
+  methods: {
+    async loadFiltersAndContent() {
+      await Promise.all([
+        this.fetchFilters ? this.loadFilters() : Promise.resolve(),
+        this.loadMoreCards(true)
+      ])
+    },
+    init() {
+      this.allCards = {
+        total: 0,
+        cards: []
+      }
+      this.displayLimit = 0
+      this.hasMorePages = false
+      this.displayedCards = []
+      this.bundleCache = {}
+    },
+    async fetchCards(currentDisplayedCards, allCards, addMoreBy, bundles) {
+      const shouldMakeNewFetchCall =
+        currentDisplayedCards.length + addMoreBy > allCards.cards.length
+      if (shouldMakeNewFetchCall) {
+        const cardBundles = await Promise.all(
+          bundles.map((bundle, index) =>
+            this.getBundle(bundle, addMoreBy, index)
+          )
+        )
+        allCards = this.getShuffledCards(cardBundles)
+
+        if (
+          this.type === 'paragraph--cards_group_latest' ||
+          this.type === 'paragraph--browse_content'
+        ) {
+          allCards.cards = this.sortByDate(allCards.cards)
+        }
+      }
+      return allCards
+    },
+    async loadMoreCards(init) {
+      const attrs = {
+        group: this.$store?.state?.page?.content?.title
+      }
+      if (this.$gtm && !init) {
+        this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
+      }
+      if (init) {
+        this.init()
+      }
+      this.loading = true
+      const addMoreBy = this.initialDisplyLimit
+      this.displayLimit += addMoreBy
+      const bundles =
+        this.filters.availableBundles.length > 0
+          ? this.filters.availableBundles
+          : this.bundle
+      this.allCards = await this.fetchCards(
+        this.displayedCards,
+        this.allCards,
+        addMoreBy,
+        bundles
+      )
+      this.hasMorePages = this.allCards.total > this.allCards.cards.length
+      this.displayedCards = this.allCards.cards.slice(0, this.displayLimit)
+      this.loading = false
+    },
+    getBundle(bundle, addMoreBy, index) {
+      let start
+      const rows = addMoreBy
+      const cache = (this.bundleCache[bundle] = this.bundleCache[bundle] || {
+        response: {
+          results: [],
+          numFound: 0
+        },
+        qs: {
+          start
+        }
+      })
+
+      if (cache.qs.start === undefined) {
+        start = 0
+      } else if (cache.response.numFound > cache.response.results.length) {
+        start = cache.response.results.length
+      } else {
+        return Promise.resolve(cache.response)
+      }
+
+      const qs = {
+        bundle,
+        rows,
+        start
+      }
+      return this.fetchContent(qs, this.filters.selected, index).then(
+        (response) => {
+          cache.qs.start = qs.start
+          cache.response.numFound = response.numFound
+          cache.response.results.push(...response.results)
+          return cache.response
+        }
+      )
+    },
+    getShuffledCards(cardBundles) {
+      const shuffled = []
+      const bundleWithMostCards = cardBundles.reduce(
+        (a, b) => (a.results.length > b.results.length ? a : b),
+        { results: [] }
+      ).results.length
+
+      for (let i = 0; i < bundleWithMostCards; i++) {
+        cardBundles.forEach((bundle) => {
+          if (bundle.results[i]) {
+            shuffled.push(bundle.results[i])
+          }
+        })
+      }
+
+      const total = cardBundles.reduce((acc, bundle) => {
+        return acc + bundle.numFound
+      }, 0)
+
+      return { cards: shuffled, total }
+    },
+    loadFilters() {
+      return this.fetchFilters().then((taxonomies) => {
+        this.filters.taxonomies = taxonomies
+        return Promise.resolve(taxonomies)
+      })
+    },
+    onFilter(filters) {
+      this.bundleCache = {}
+      Object.keys(filters).forEach((filter) => {
+        this.filters.selected[filter] = filters[filter].map((obj) => obj.tid)
+      })
+      this.loadMoreCards(true)
+    },
+    onSwitcher(switchToBundle) {
+      this.filters.selected = {}
+      this.filters.availableBundles.length = 0
+      if (switchToBundle) {
+        this.filters.availableBundles.push(switchToBundle)
+      }
+      this.loadMoreCards(true)
+    },
+    async reset() {
+      this.bundleCache = {}
+      this.filters.selected = {}
+      this.filters.availableBundles.length = 0
+      await this.loadMoreCards(true)
+    },
+    sortByDate(cards) {
+      const sorted = cards.sort((a, b) => {
+        return new Date(b.dateSort) - new Date(a.dateSort)
+      })
+      return sorted
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.wcl-browse-content {
+  &__filter {
+    align-items: flex-end;
+    place-content: flex-end;
+  }
+  &.card_group__card--col-4 {
+    :deep(.card-grid__column .card-grid-item__description) {
+      display: none;
+    }
+  }
+  :deep(.card_group__card--blue .card_item__desc p) {
+    margin-top: 12px;
+  }
+  :deep(.card_group__card--red .card_item__desc p) {
+    margin-top: 12px;
+  }
+}
+</style>

package/src/components/Paragraphs/BrowseContent/switcher.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="switcher">
+    <div v-for="(o, i) in options" :key="i" class="switcher__item">
+      <filter-button
+        :selected="selected === o"
+        :is-reset="false"
+        @clicked="$emit('switched', o), (selected = o), (switched = true)"
+      >
+        <span>{{ getOptionAlias ? getOptionAlias(o) : o }}</span>
+        <span class="visually-hidden"> filters content below</span>
+      </filter-button>
+    </div>
+    <div v-if="switched" class="switcher__item">
+      <filter-button
+        :is-reset="true"
+        @clicked="$emit('reset'), (selected = null), (switched = false)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import FilterButton from '../../Common/FilterButton/index.vue'
+
+export default {
+  components: {
+    FilterButton
+  },
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+    getOptionAlias: {
+      type: Function,
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    return {
+      switched: false,
+      selected: null
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.switcher {
+  &__item {
+    display: inline-block;
+    padding-right: 16px;
+    line-height: 3;
+    @include mq('xs') {
+      padding-right: 8px;
+    }
+    &:last-child {
+      padding-right: 0px;
+    }
+  }
+}
+</style>