@worksafevictoria/wcl7.5 1.0.0

package/src/components/SubComponents/ResourceGroup/index.vue

@@ -0,0 +1,575 @@
+<template>
+  <card-grid
+    :title="title"
+    :title-tag="titleTag"
+    :cards="displayedCards"
+    :rtl="rtl"
+    :force-lg-columns-per-row="columns"
+    :force-md-columns-per-row="columns"
+    :force-sm-columns-per-row="columns"
+    :is-selectable="false"
+    :row-spacing="'large'"
+    :class="[`card_group--${background}`, `card_group--${cardResourseType}`]"
+    :background-variant="background"
+    @selected="selectedCard"
+  >
+    <template
+      v-if="enableBundleFilter && bundle.length > 1"
+      v-slot:gridHeaderRight
+    >
+      <switcher
+        v-if="enableBundleFilter"
+        :options="bundle"
+        class="card_group__switcher"
+        :get-option-alias="getBundleAlias"
+        @switched="onSwitcher"
+        @reset="onSwitcher"
+      />
+    </template>
+
+    <template v-if="filters.taxonomies.length > 0" v-slot:gridPreContent>
+      <directory-filters
+        class="card_group__filter"
+        :filters="filters"
+        :results="allCards.total"
+        :is-filtering="loader"
+        @onFilter="onFilter"
+        @onReset="reset"
+      />
+    </template>
+
+    <template v-slot:cardItem="{ card }">
+      <card-grid-item
+        v-if="card"
+        :show-divider="false"
+        :header-size="'large'"
+        class="card_group__card"
+        :class="{
+          [`card_group__card--${card.colour}`]: card.pillText,
+          [`card_group__card--none`]: !card.pillText,
+          [`card_group__card--${cardResourseType}`]: 'card_group__card--resourse-group'
+        }"
+        :card-header-title="card.title"
+        :caret="getCaret(card)"
+        :description="card.description"
+        :card-padding="'none'"
+        :caret-position="'bottom'"
+        :rtl="card.rtl"
+        :border-type="background === 'white' ? 'thick' : 'none'"
+        :pill-text="card.pillText"
+        :link="card.link ? card.link : false"
+        :taxonomies="{
+          industry: card.industry,
+          topic: card.topic,
+          language: card.language
+        }"
+      >
+        <template v-slot:cardTop>
+          <card-top :card="card" :resource-type="cardResourseType" />
+        </template>
+
+        <template v-slot:cardDescription>
+          <card-body :card="card" :resource-type="cardResourseType" />
+        </template>
+
+        <!-- footer - download button -->
+        <template
+          v-if="cardResourseType === 'resource-group'"
+          v-slot:cardFooter
+        >
+          <card-footer :card="card" :resource-type="cardResourseType" />
+        </template>
+      </card-grid-item>
+    </template>
+
+    <template
+      v-if="
+        loader ||
+          (displayedCards.length === 0 && !loader) ||
+          $slots.cardGroupFooter ||
+          (!loader && showLoadMore && hasMorePages)
+      "
+      v-slot:cardGridFooter
+    >
+      <column v-if="loader" sm="12">
+        <strong>Loading... </strong>
+        <b-spinner class="float-right"></b-spinner>
+      </column>
+      <column v-if="displayedCards.length === 0 && !loading" sm="12">
+        <strong>{{ emptyCardsText }}</strong>
+      </column>
+      <column v-if="$slots.cardGroupFooter" sm="12">
+        <slot name="cardGroupFooter"></slot>
+      </column>
+      <column v-if="!loader && showLoadMore" sm="12" class="text-center">
+        <cta-button
+          type="dark"
+          :focus-outline="'light'"
+          :text-only="true"
+          :is-centred="true"
+          :class="'card_group__loadmore mb-0'"
+          @clicked="handleLoadMore"
+          >Load more</cta-button
+        >
+      </column>
+    </template>
+  </card-grid>
+</template>
+
+<script>
+import Column from './../../Containers/Column/index.vue'
+import CardGrid from './../../Common/CardGrid/index.vue'
+import CardGridItem from './../../Common/CardGridItem/index.vue'
+import CardTop from './cardtop.vue'
+import CardBody from './cardbody.vue'
+import CardFooter from './cardfooter.vue'
+import CtaButton from './../CtaButton/index.vue'
+import DirectoryFilters from './../../Global/DirectoryFilters/index.vue'
+import Switcher from './switcher.vue'
+import {
+  isAbsoluteUrl,
+  navigateToPath,
+  isGovSite
+} from './../../../../lib/utility'
+import { BSpinner } from 'bootstrap-vue-next'
+
+export default {
+  name: 'ResourceGroup',
+  components: {
+    Column,
+    CardGrid,
+    CardGridItem,
+    CardTop,
+    CardBody,
+    CardFooter,
+    CtaButton,
+    DirectoryFilters,
+    Switcher,
+    BSpinner
+  },
+  props: {
+    background: {
+      type: String,
+      default: 'white'
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    titleTag: {
+      type: String,
+      default: 'h2'
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    bundle: {
+      type: Array,
+      default: () => ['']
+    },
+    columns: {
+      type: Number,
+      default: 3
+    },
+    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
+    },
+    type: {
+      type: String,
+      required: true
+    },
+    resourceType: {
+      type: String,
+      default: 'resource-group'
+    },
+    showLoadMore: {
+      type: Boolean,
+      default: false
+    },
+    emptyCardsText: {
+      type: String,
+      default: 'No results returned'
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  async fetch() {
+    if (this.displayedCards.length === 0) {
+      await this.loadFiltersAndContent()
+    }
+  },
+  data() {
+    return {
+      loader: this.loading,
+      cardResourseType: this.resourceType,
+      hasMorePages: false,
+      displayedCards: [],
+      bundleCache: {},
+      displayLimit: 0,
+      allCards: undefined,
+      filters: {
+        taxonomies: [],
+        selected: {},
+        availableBundles: []
+      }
+    }
+  },
+  computed: {
+    allCardsRTL() {
+      if (this.displayedCards.length === 0) {
+        return this.rtl
+      }
+      return this.displayedCards.every((card) => this.rtl || card.rtl)
+    }
+  },
+  fetchOnServer: true,
+  fetchKey: 'wcl-card-group',
+  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' ||
+          this.type === 'paragraph--resource_group' ||
+          this.type === 'paragraph--resource_list'
+        ) {
+          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.loader = 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.loader = 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
+    },
+    handleLoadMore() {
+      this.loadMoreCards(false)
+    },
+
+    getCaret(card) {
+      if (card.link && isAbsoluteUrl(card.link)) {
+        return 'external'
+      } else {
+        return undefined
+      }
+    },
+    selectedCard(card) {
+      // Some custom logic for gov caretaker logic
+      if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
+        if (!isGovSite(card?.selectedCard?.link)) {
+          this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
+          this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+        } else {
+          navigateToPath.call(
+            this,
+            card?.selectedCard?.link,
+            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+          )
+        }
+      } else {
+        navigateToPath.call(
+          this,
+          card?.selectedCard?.link,
+          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+        )
+      }
+    },
+    focussed(ev) {
+      const path = ev.path || (ev.composedPath && ev.composedPath())
+      const theTabbedCards = path.find(
+        (el) => el['_prevClass'] === 'tabbed-cards'
+      )
+      if (ev.shiftKey && theTabbedCards) {
+        ev.preventDefault()
+        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
+          'isSelected'
+        )
+        let selectedCard = selectedTabbedCards[0].getElementsByTagName('button')
+        let thePrevLGItem = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
+          'button'
+        )
+        if (thePrevLGItem) {
+          thePrevLGItem[0].focus()
+        } else {
+          selectedCard[0].focus()
+        }
+      } else if (!ev.shiftKey && theTabbedCards) {
+        ev.preventDefault()
+        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
+          'isSelected'
+        )
+        let nextTabbedCard = selectedTabbedCards[0]?.parentElement?.nextSibling?.getElementsByTagName(
+          'button'
+        )
+        let theNextLGItem = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
+          'button'
+        )
+        if (theNextLGItem) {
+          theNextLGItem[0].focus()
+        } else if (nextTabbedCard) {
+          nextTabbedCard[0].focus()
+        } else {
+          let nextFocus = this.focusNextElement()
+          this.$root.$emit('last-focus-out')
+          nextFocus.focus()
+        }
+      } else {
+        return true
+      }
+    },
+    focusNextElement(reverse, activeElem) {
+      /*check if an element is defined or use activeElement*/
+      activeElem =
+        activeElem instanceof HTMLElement ? activeElem : document.activeElement
+
+      let queryString = [
+          'a:not([disabled]):not([tabindex="-1"])',
+          'button:not([disabled]):not([tabindex="-1"])',
+          'input:not([disabled]):not([tabindex="-1"])',
+          'select:not([disabled]):not([tabindex="-1"])',
+          '[tabindex]:not([disabled]):not([tabindex="-1"])'
+          /* add custom queries here */
+        ].join(','),
+        queryResult = Array.prototype.filter.call(
+          document.querySelectorAll(queryString),
+          (elem) => {
+            /*check for visibility while always include the current activeElement*/
+            return (
+              elem.offsetWidth > 0 ||
+              elem.offsetHeight > 0 ||
+              elem === activeElem
+            )
+          }
+        ),
+        indexedList = queryResult
+          .slice()
+          .filter((elem) => {
+            /* filter out all indexes not greater than 0 */
+            return elem.tabIndex == 0 || elem.tabIndex == -1 ? false : true
+          })
+          .sort((a, b) => {
+            /* sort the array by index from smallest to largest */
+            return a.tabIndex != 0 && b.tabIndex != 0
+              ? a.tabIndex < b.tabIndex
+                ? -1
+                : b.tabIndex < a.tabIndex
+                ? 1
+                : 0
+              : a.tabIndex != 0
+              ? -1
+              : b.tabIndex != 0
+              ? 1
+              : 0
+          }),
+        focusable = [].concat(
+          indexedList,
+          queryResult.filter((elem) => {
+            /* filter out all indexes above 0 */
+            return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false
+          })
+        )
+
+      /* if reverse is true return the previous focusable element
+     if reverse is false return the next focusable element */
+      return reverse
+        ? focusable[focusable.indexOf(activeElem) - 1] ||
+            focusable[focusable.length - 1]
+        : focusable[focusable.indexOf(activeElem) + 1] || focusable[0]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+$cardTextPadding: 16px;
+$borderRadius: 8px;
+
+.ws-paragraphs-layout__fullwidth {
+  .card_group {
+    &--resource-list {
+      :deep(.section-group__content) {
+        display: flex;
+        > .row {
+          flex: 0 0 70%;
+        }
+      }
+    }
+  }
+}
+.card_group {
+  &--resource-list {
+    :deep(.card-body) {
+      padding-left: $cardTextPadding !important;
+      padding-right: $cardTextPadding !important;
+    }
+  }
+}
+.card_group__card--resource-group {
+  :deep(.card-body) {
+    padding-left: $cardTextPadding !important;
+    padding-right: $cardTextPadding !important;
+  }
+}
+</style>