@worksafevictoria/wcl7.5 1.9.0-beta.18 → 1.9.0-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.9.0-beta.18",
+  "version": "1.9.0-beta.19",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

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

@@ -14,7 +14,10 @@
       :background-variant="background"
       @selected="selectedCard"
     >
-      <template v-if="enableBundleFilter && bundle.length > 1" v-slot:gridHeaderRight>
+      <template
+        v-if="enableBundleFilter && bundle.length > 1"
+        v-slot:gridHeaderRight
+      >
         <switcher
           v-if="enableBundleFilter"
           :options="bundle"
@@ -45,7 +48,8 @@
           :class="{
             [`card_group__card--${card.colour}`]: card.pillText,
             [`card_group__card--none`]: !card.pillText,
-            [`card_group__card--${cardResourseType}`]: 'card_group__card--resourse-group',
+            [`card_group__card--${cardResourseType}`]:
+              'card_group__card--resourse-group',
           }"
           :card-header-title="card.title"
           :caret="getCaret(card)"
@@ -71,7 +75,10 @@
           </template>
 
           <!-- footer - download button -->
-          <template v-if="cardResourseType === 'resource-group'" v-slot:cardFooter>
+          <template
+            v-if="cardResourseType === 'resource-group'"
+            v-slot:cardFooter
+          >
             <card-footer :card="card" :resource-type="cardResourseType" />
           </template>
         </card-grid-item>
@@ -113,20 +120,24 @@
 </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";
+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",
+  name: 'ResourceGroup',
   components: {
     Column,
     CardGrid,
@@ -142,15 +153,15 @@ export default {
   props: {
     background: {
       type: String,
-      default: "white",
+      default: 'white',
     },
     title: {
       type: String,
-      default: "",
+      default: '',
     },
     titleTag: {
       type: String,
-      default: "h2",
+      default: 'h2',
     },
     rtl: {
       type: Boolean,
@@ -158,7 +169,7 @@ export default {
     },
     bundle: {
       type: Array,
-      default: () => [""],
+      default: () => [''],
     },
     columns: {
       type: Number,
@@ -191,7 +202,7 @@ export default {
     },
     resourceType: {
       type: String,
-      default: "resource-group",
+      default: 'resource-group',
     },
     showLoadMore: {
       type: Boolean,
@@ -199,7 +210,7 @@ export default {
     },
     emptyCardsText: {
       type: String,
-      default: "No results returned",
+      default: 'No results returned',
     },
     loading: {
       type: Boolean,
@@ -209,11 +220,11 @@ export default {
   // Temp use of mounted to replace fetch
   async mounted() {
     if (this.displayedCards.length === 0) {
-      console.log(
-        "🚀 ~ mounted ~ this.displayedCards.length:",
-        this.displayedCards.length
-      );
-      await this.loadFiltersAndContent();
+      // console.log(
+      //   "🚀 ~ mounted ~ this.displayedCards.length:",
+      //   this.displayedCards.length
+      // );
+      await this.loadFiltersAndContent()
     }
   },
   // TODO useAsyncData <script setup>
@@ -237,92 +248,97 @@ export default {
         selected: {},
         availableBundles: [],
       },
-    };
+    }
   },
   computed: {
     allCardsRTL() {
       if (this.displayedCards.length === 0) {
-        return this.rtl;
+        return this.rtl
       }
-      return this.displayedCards.every((card) => this.rtl || card.rtl);
+      return this.displayedCards.every((card) => this.rtl || card.rtl)
     },
   },
   fetchOnServer: true,
-  fetchKey: "wcl-card-group",
+  fetchKey: 'wcl-card-group',
   methods: {
     async loadFiltersAndContent() {
       await Promise.all([
         this.fetchFilters ? this.loadFilters() : Promise.resolve(),
         this.loadMoreCards(true),
-      ]);
-      console.log("🚀 ~ loadFiltersAndContent ~ this.fetchFilters:", this.fetchFilters);
+      ])
+      console.log(
+        '🚀 ~ loadFiltersAndContent ~ this.fetchFilters:',
+        this.fetchFilters,
+      )
     },
     init() {
       this.allCards = {
         total: 0,
         cards: [],
-      };
-      this.displayLimit = 0;
-      this.hasMorePages = false;
-      this.displayedCards = [];
-      this.bundleCache = {};
+      }
+      this.displayLimit = 0
+      this.hasMorePages = false
+      this.displayedCards = []
+      this.bundleCache = {}
     },
     async fetchCards(currentDisplayedCards, allCards, addMoreBy, bundles) {
       const shouldMakeNewFetchCall =
-        currentDisplayedCards.length + addMoreBy > allCards.cards.length;
+        currentDisplayedCards.length + addMoreBy > allCards.cards.length
 
       if (shouldMakeNewFetchCall) {
         const cardBundles = await Promise.all(
-          bundles.map((bundle, index) => this.getBundle(bundle, addMoreBy, index))
-        );
+          bundles.map((bundle, index) =>
+            this.getBundle(bundle, addMoreBy, index),
+          ),
+        )
 
-        allCards = this.getShuffledCards(cardBundles);
+        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"
+          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);
-          allCards.cards = allCards.cards;
+          allCards.cards = allCards.cards
         }
       }
-      return allCards;
+      return allCards
     },
     async loadMoreCards(init) {
       const attrs = {
         group: this.$pageStore?.content?.title,
         //group: this.$store?.state?.page?.content?.title,
-      };
+      }
       if (this.$gtm && !init) {
-        this.$gtm.push({ event: "custom.interaction.showmore.click", ...attrs });
+        this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
       }
       if (init) {
-        this.init();
+        this.init()
       }
-      this.loader = true;
-      const addMoreBy = this.initialDisplyLimit;
-      this.displayLimit += addMoreBy;
+      this.loader = true
+      const addMoreBy = this.initialDisplyLimit
+      this.displayLimit += addMoreBy
       const bundles =
         this.filters.availableBundles.length > 0
           ? this.filters.availableBundles
-          : this.bundle;
+          : this.bundle
       this.allCards = await this.fetchCards(
         this.displayedCards,
         this.allCards,
         addMoreBy,
-        bundles
-      );
+        bundles,
+      )
 
-      this.hasMorePages = this.allCards.total > this.allCards.cards.length;
-      this.displayedCards = this.allCards.cards.slice(0, this.displayLimit);
+      this.hasMorePages = this.allCards.total > this.allCards.cards.length
+      this.displayedCards = this.allCards.cards.slice(0, this.displayLimit)
 
-      this.loader = false;
+      this.loader = false
     },
     getBundle(bundle, addMoreBy, index) {
-      let start;
-      const rows = addMoreBy;
+      let start
+      const rows = addMoreBy
       const cache = (this.bundleCache[bundle] = this.bundleCache[bundle] || {
         response: {
           results: [],
@@ -331,166 +347,177 @@ export default {
         qs: {
           start,
         },
-      });
+      })
 
       if (cache.qs.start === undefined) {
-        start = 0;
+        start = 0
       } else if (cache.response.numFound > cache.response.results.length) {
-        start = cache.response.results.length;
+        start = cache.response.results.length
       } else {
-        return Promise.resolve(cache.response);
+        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;
-      });
+      }
+      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 shuffled = []
       const bundleWithMostCards = cardBundles.reduce(
         (a, b) => (a.results.length > b.results.length ? a : b),
-        { results: [] }
-      ).results.length;
+        { results: [] },
+      ).results.length
 
       for (let i = 0; i < bundleWithMostCards; i++) {
         cardBundles.forEach((bundle) => {
           if (bundle.results[i]) {
-            shuffled.push(bundle.results[i]);
+            shuffled.push(bundle.results[i])
           }
-        });
+        })
       }
 
       const total = cardBundles.reduce((acc, bundle) => {
-        return acc + bundle.numFound;
-      }, 0);
+        return acc + bundle.numFound
+      }, 0)
 
-      return { cards: shuffled, total };
+      return { cards: shuffled, total }
     },
     loadFilters() {
       return this.fetchFilters().then((taxonomies) => {
-        console.log("🚀 ~ returnthis.fetchFilters ~ taxonomies:", taxonomies);
-        this.filters.taxonomies = taxonomies;
-        return Promise.resolve(taxonomies);
-      });
+        console.log('🚀 ~ returnthis.fetchFilters ~ taxonomies:', taxonomies)
+        this.filters.taxonomies = taxonomies
+        return Promise.resolve(taxonomies)
+      })
     },
     onFilter(filters) {
-      this.bundleCache = {};
+      this.bundleCache = {}
       Object.keys(filters).forEach((filter) => {
-        this.filters.selected[filter] = filters[filter].map((obj) => obj.tid);
-      });
-      this.loadMoreCards(true);
+        this.filters.selected[filter] = filters[filter].map((obj) => obj.tid)
+      })
+      this.loadMoreCards(true)
     },
     onSwitcher(switchToBundle) {
-      this.filters.selected = {};
-      this.filters.availableBundles.length = 0;
+      this.filters.selected = {}
+      this.filters.availableBundles.length = 0
       if (switchToBundle) {
-        this.filters.availableBundles.push(switchToBundle);
+        this.filters.availableBundles.push(switchToBundle)
       }
-      this.loadMoreCards(true);
+      this.loadMoreCards(true)
     },
     async reset() {
-      this.bundleCache = {};
-      this.filters.selected = {};
-      this.filters.availableBundles.length = 0;
-      await this.loadMoreCards(true);
+      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;
+        return new Date(b.dateSort) - new Date(a.dateSort)
+      })
+      return sorted
     },
     handleLoadMore() {
-      this.loadMoreCards(false);
+      this.loadMoreCards(false)
     },
 
     getCaret(card) {
       if (card.link && isAbsoluteUrl(card.link)) {
-        return "external";
+        return 'external'
       } else {
-        return undefined;
+        return undefined
       }
     },
     selectedCard(card) {
       // Some custom logic for gov caretaker logic
       if (
-        (this.$config ? this.$config.public.caretaker : process.env.CARETAKER) === "true"
+        (this.$config
+          ? this.$config.public.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)
           if (this.$pageStore) {
-            this.$pageStore.caretaker.referrer = "list-group";
+            this.$pageStore.caretaker.referrer = 'list-group'
           }
           if (this.$bus) {
-            this.$bus.$emit("caretaker-open", card?.selectedCard?.link);
+            this.$bus.$emit('caretaker-open', card?.selectedCard?.link)
           }
         } else {
           navigateToPath.call(
             this,
             card?.selectedCard?.link,
-            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
-          );
+            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
+          )
         }
       } else {
         navigateToPath.call(
           this,
           card?.selectedCard?.link,
-          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
-        );
+          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");
+      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"
-        );
+        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();
+          thePrevLGItem[0].focus()
         } else {
-          selectedCard[0].focus();
+          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"
-        );
+        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();
+          theNextLGItem[0].focus()
         } else if (nextTabbedCard) {
-          nextTabbedCard[0].focus();
+          nextTabbedCard[0].focus()
         } else {
-          let nextFocus = this.focusNextElement();
+          let nextFocus = this.focusNextElement()
           if (this.$bus) {
-            this.$bus.$emit("last-focus-out");
+            this.$bus.$emit('last-focus-out')
           }
-          nextFocus.focus();
+          nextFocus.focus()
         }
       } else {
-        return true;
+        return true
       }
     },
     focusNextElement(reverse, activeElem) {
       /*check if an element is defined or use activeElement*/
       activeElem =
-        activeElem instanceof HTMLElement ? activeElem : document.activeElement;
+        activeElem instanceof HTMLElement ? activeElem : document.activeElement
 
       let queryString = [
           'a:not([disabled]):not([tabindex="-1"])',
@@ -499,19 +526,23 @@ export default {
           'select:not([disabled]):not([tabindex="-1"])',
           '[tabindex]:not([disabled]):not([tabindex="-1"])',
           /* add custom queries here */
-        ].join(","),
+        ].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;
-          }
+            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;
+            return elem.tabIndex == 0 || elem.tabIndex == -1 ? false : true
           })
           .sort((a, b) => {
             /* sort the array by index from smallest to largest */
@@ -519,33 +550,34 @@ export default {
               ? a.tabIndex < b.tabIndex
                 ? -1
                 : b.tabIndex < a.tabIndex
-                ? 1
-                : 0
+                  ? 1
+                  : 0
               : a.tabIndex != 0
-              ? -1
-              : b.tabIndex != 0
-              ? 1
-              : 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;
-          })
-        );
+            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];
+        ? 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";
+@import '../../../includes/scss/all';
 $cardTextPadding: 16px;
 $borderRadius: 8px;