@worksafevictoria/wcl7.5 1.1.0-beta.11 → 1.1.0-beta.111

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

@@ -7,40 +7,44 @@
     class="paragraph--accordion"
     :no-padding-bottom="isStepper"
   >
-    <ol class="accordion-list">
-      <li
-        v-for="(item, index) in accordionList"
-        :key="_uid ? _uid : '' + index"
-        :class="{
-          workwell: isWorkwell,
-          rtl: rtl || item.field_rtl,
-          stepper: isStepper
-        }"
-        class="accordion"
-      >
-        <stepper-item
-          v-if="isStepper"
-          :content="hasContent(item) ? item.field_rich_text.value : ''"
-          :title="item.field_title"
-          class="accordion__item stepper"
-          :rtl="rtl || item.field_rtl"
-          :open="isAccordionOpen(index)"
-          :number="index + 1"
-          :is-work-well="isWorkwell"
-        />
-        <accordion-item
-          v-if="!isStepper"
-          :content="hasContent(item) ? item.field_rich_text.value : ''"
-          :title="item.field_title"
-          class="accordion__item"
-          :rtl="rtl || item.field_rtl"
-          :show-pre-heading="showPreHeading"
-          :pre-heading="item.field_pre_heading || ''"
-          :open="isAccordionOpen(index)"
-          :meta="Array.isArray(item.meta) ? item.meta : []"
-        />
-      </li>
-    </ol>
+    <div>
+      <ol class="accordion-list">
+        <li
+          v-for="(item, index) in accordionList"
+          :key="item.id ? item.id : '' + index"
+          :class="{
+            workwell: isWorkwell,
+            rtl: rtl || item.field_rtl,
+            stepper: isStepper,
+          }"
+          class="accordion"
+        >
+          <stepper-item
+            v-if="isStepper"
+            :itemid="item.id ? item.id : '' + index"
+            :content="hasContent(item) ? item.field_rich_text.value : ''"
+            :title="item.field_title"
+            class="accordion__item stepper"
+            :rtl="rtl || item.field_rtl"
+            :open="isAccordionOpen(index)"
+            :number="index + 1"
+            :is-work-well="isWorkwell"
+          />
+          <accordion-item
+            v-if="!isStepper"
+            :itemid="item.id ? item.id : '' + index"
+            :content="hasContent(item) ? item.field_rich_text.value : ''"
+            :title="item.field_title"
+            class="accordion__item"
+            :rtl="rtl || item.field_rtl"
+            :show-pre-heading="showPreHeading"
+            :pre-heading="item.field_pre_heading || ''"
+            :open="isAccordionOpen(index)"
+            :meta="Array.isArray(item.meta) ? item.meta : []"
+          />
+        </li>
+      </ol>
+    </div>
   </section-group>
 </template>
 
@@ -55,51 +59,51 @@ export default {
   props: {
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     title: {
       type: String,
-      default: null
+      default: null,
     },
     isStepper: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showPreHeading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isWorkwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     accordionList: {
       type: Array,
-      default: null
+      default: null,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     size: {
       type: String,
-      default: 'content'
+      default: 'content',
     },
     option: {
       type: String,
-      default: 'open-first'
-    }
+      default: 'open-first',
+    },
   },
   data: () => ({
     OPEN_ALL: 'open-all',
     CLOSE_ALL: 'close-all',
     OPEN_FIRST: 'open-first',
-    accordionOption: null
+    accordionOption: null,
   }),
   computed: {
     isPDF() {
       return typeof this.$isPDF === 'function' ? this.$isPDF() : false
-    }
+    },
   },
   mounted() {
     if (this.option) {
@@ -121,8 +125,8 @@ export default {
     },
     hasContent(item) {
       return item?.field_rich_text?.value
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -3,6 +3,7 @@ import Breakout from './index.vue'
 export default {
   title: 'Paragraphs/Breakout',
   component: Breakout,
+  tags: ['autodocs'],
   argTypes: {
     headingTag: {
       control: 'select',

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

@@ -5,6 +5,7 @@ const bundleContent = ['news', 'page']
 export default {
   title: 'Paragraphs/BrowseContent',
   component: { BrowseContent },
+  tags: ['autodocs'],
   argTypes: {
     background: {
       control: 'select',

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

@@ -8,6 +8,7 @@
     :columns="columns"
     :show-load-more="showMore && hasMorePages"
     :class="`wcl-browse-content card_group__card--col-${columns}`"
+    :card-browse-content="true"
     @loadMore="() => loadMoreCards(false)"
   >
     <template
@@ -47,63 +48,70 @@ export default {
   components: {
     CardGroup,
     DirectoryFilters,
-    Switcher
+    Switcher,
   },
   props: {
     background: {
       type: String,
-      default: 'grey'
+      default: 'grey',
     },
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     bundle: {
       type: Array,
-      default: () => ['']
+      default: () => [''],
     },
     columns: {
       type: Number,
-      default: 0
+      default: 0,
     },
     initialDisplyLimit: {
       type: Number,
-      default: 0
+      default: 0,
     },
     fetchContent: {
       type: Function,
-      required: true
+      required: true,
     },
     fetchFilters: {
       type: Function,
       required: false,
-      default: null
+      default: null,
     },
     enableBundleFilter: {
-      type: Boolean
+      type: Boolean,
     },
     getBundleAlias: {
       type: Function,
       required: false,
-      default: null
+      default: null,
     },
     showMore: {
-      type: Boolean
+      type: Boolean,
     },
     type: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
-  async fetch() {
+  // Temp use of mounted to replace fetch
+  async mounted() {
     if (this.displayedCards.length === 0) {
       await this.loadFiltersAndContent()
     }
   },
+  // TODO useAsyncData <script setup>
+  // async fetch() {
+  //   if (this.displayedCards.length === 0) {
+  //     await this.loadFiltersAndContent()
+  //   }
+  // },
   data() {
     return {
       hasMorePages: false,
@@ -115,23 +123,22 @@ export default {
       filters: {
         taxonomies: [],
         selected: {},
-        availableBundles: []
-      }
+        availableBundles: [],
+      },
     }
   },
-  fetchOnServer: true,
   fetchKey: 'ws-browscontent',
   methods: {
     async loadFiltersAndContent() {
       await Promise.all([
         this.fetchFilters ? this.loadFilters() : Promise.resolve(),
-        this.loadMoreCards(true)
+        this.loadMoreCards(true),
       ])
     },
     init() {
       this.allCards = {
         total: 0,
-        cards: []
+        cards: [],
       }
       this.displayLimit = 0
       this.hasMorePages = false
@@ -144,8 +151,8 @@ export default {
       if (shouldMakeNewFetchCall) {
         const cardBundles = await Promise.all(
           bundles.map((bundle, index) =>
-            this.getBundle(bundle, addMoreBy, index)
-          )
+            this.getBundle(bundle, addMoreBy, index),
+          ),
         )
         allCards = this.getShuffledCards(cardBundles)
 
@@ -160,7 +167,7 @@ export default {
     },
     async loadMoreCards(init) {
       const attrs = {
-        group: this.$store?.state?.page?.content?.title
+        group: this.$pageStore?.content?.title,
       }
       if (this.$gtm && !init) {
         this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
@@ -179,7 +186,7 @@ export default {
         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)
@@ -191,11 +198,11 @@ export default {
       const cache = (this.bundleCache[bundle] = this.bundleCache[bundle] || {
         response: {
           results: [],
-          numFound: 0
+          numFound: 0,
         },
         qs: {
-          start
-        }
+          start,
+        },
       })
 
       if (cache.qs.start === undefined) {
@@ -209,7 +216,7 @@ export default {
       const qs = {
         bundle,
         rows,
-        start
+        start,
       }
       return this.fetchContent(qs, this.filters.selected, index).then(
         (response) => {
@@ -217,14 +224,14 @@ export default {
           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: [] },
       ).results.length
 
       for (let i = 0; i < bundleWithMostCards; i++) {
@@ -273,8 +280,8 @@ export default {
         return new Date(b.dateSort) - new Date(a.dateSort)
       })
       return sorted
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -283,14 +290,17 @@ export default {
     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;
   }

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

@@ -0,0 +1,284 @@
+<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}`"
+    :card-browse-content="true"
+    @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 setup>
+import CardGroup from '../../SubComponents/CardGroup/index.vue'
+import DirectoryFilters from '../../Global/DirectoryFilters/index.vue'
+import Switcher from './switcher.vue'
+
+const nuxtApp = useNuxtApp()
+
+const hasMorePages = ref(false)
+const displayedCards = ref([])
+const loading = ref(true)
+const bundleCache = ref({})
+const displayLimit = ref(0)
+const allCards = ref(undefined)
+const filters = ref({
+  taxonomies: [],
+  selected: {},
+  availableBundles: [],
+})
+const props = defineProps({
+  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,
+  },
+})
+
+await useAsyncData('fetchData', async () => {
+  try {
+    await Promise.all([
+      props.fetchFilters ? loadFilters() : Promise.resolve(),
+      loadMoreCards(true),
+    ])
+  } catch (err) {
+    console.log('🚀 ~ err:', err)
+  }
+})
+
+function initial() {
+  allCards.value = {
+    total: 0,
+    cards: [],
+  }
+  displayLimit.value = 0
+  hasMorePages.value = false
+  displayedCards.value = []
+  bundleCache.value = {}
+}
+async function fetchCards(currentDisplayedCards, allCards, addMoreBy, bundles) {
+  const shouldMakeNewFetchCall =
+    currentDisplayedCards.length + addMoreBy > allCards.cards.length
+  if (shouldMakeNewFetchCall) {
+    const cardBundles = await Promise.all(
+      bundles.map((bundle, index) => getBundle(bundle, addMoreBy, index)),
+    )
+    allCards = getShuffledCards(cardBundles)
+
+    if (
+      props.type === 'paragraph--cards_group_latest' ||
+      props.type === 'paragraph--browse_content'
+    ) {
+      allCards.cards = sortByDate(allCards.cards)
+    }
+  }
+  return allCards
+}
+
+async function loadMoreCards(init) {
+  const attrs = {
+    group: nuxtApp.$pageStore?.content?.title,
+  }
+  if (nuxtApp.$gtm && !init) {
+    nuxtApp.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
+  }
+  if (init) {
+    initial()
+  }
+  loading.value = true
+  const addMoreBy = props.initialDisplyLimit
+  displayLimit.value += addMoreBy
+  const bundles =
+    filters.value.availableBundles.length > 0
+      ? filters.value.availableBundles
+      : props.bundle
+  allCards.value = await fetchCards(
+    displayedCards.value,
+    allCards.value,
+    addMoreBy,
+    bundles,
+  )
+  hasMorePages.value = allCards.value.total > allCards.value.cards.length
+  displayedCards.value = allCards.value.cards.slice(0, displayLimit.value)
+  loading.value = false
+}
+async function getBundle(bundle, addMoreBy, index) {
+  let start
+  const rows = addMoreBy
+  const cache = (bundleCache.value[bundle] = bundleCache.value[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,
+  }
+  let response = await props.fetchContent(qs, filters.value.selected)
+  cache.qs.start = qs.start
+  cache.response.numFound = response.numFound
+  cache.response.results.push(...response.results)
+  return cache.response
+}
+function 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 }
+}
+function loadFilters() {
+  return props.fetchFilters().then((taxonomies) => {
+    filters.value.taxonomies = taxonomies
+
+    return Promise.resolve(taxonomies)
+  })
+}
+const onFilter = (fltrs) => {
+  bundleCache.value = {}
+  Object.keys(fltrs).forEach((filter) => {
+    filters.values.selected[filter] = fltrs[filter].map((obj) => obj.tid)
+  })
+  loadMoreCards(true)
+}
+const onSwitcher = (switchToBundle) => {
+  filters.value.selected = {}
+  filters.value.availableBundles.length = 0
+  if (switchToBundle) {
+    filters.value.availableBundles.push(switchToBundle)
+  }
+  loadMoreCards(true)
+}
+const reset = async () => {
+  bundleCache.value = {}
+  filters.value.selected = {}
+  filters.value.availableBundles.length = 0
+  await loadMoreCards(true)
+}
+function 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/Calculator/Constants.js

@@ -29,9 +29,9 @@ export const barItems = [
 
 export const cardTitles = {
   weight: {
-    heading: 'Pick a object?',
+    heading: 'Pick an object?',
     subHeading:
-      '<p>Pick a object from the selections or if you know exactly how heavy the object that is being dropped is, enter the weight in input box below</p>',
+      '<p>Pick an object from the selections or if you know exactly how heavy the object that is being dropped is, enter the weight in input box below</p>',
     selectHeading: 'How heavy is the object?',
     selectSubHeading: 'Weight in kilograms, max is 500 kg'
   },

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

@@ -12,6 +12,7 @@ import {
 export default {
   title: 'Paragraphs/Calculator',
   component: Calculator,
+  tags: ['autodocs'],
   args: {
     items: barItems,
     titles: cardTitles,