@worksafevictoria/wcl7.5 1.5.0 → 1.6.0

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

@@ -5,15 +5,15 @@
       v-if="title"
       class="accordion-stepper"
       :class="{
-        rtl: rtl
+        rtl: rtl,
       }"
     >
       <div>
         <button
-          :id="'accordion' + _uid ? _uid : ''"
+          :id="'accordion' + itemid"
           :aria-expanded="showAccordion ? 'true' : 'false'"
           class="accordion-stepper__title"
-          :aria-controls="'sect' + _uid ? _uid : ''"
+          :aria-controls="'sect' + itemid"
           @click="toggleAccordion"
         >
           <div
@@ -25,13 +25,9 @@
           </div>
 
           <div class="accordion-stepper__titleText">
-            <rich-text
-            :tag="'h3'"
-            :tag-class="'card-title'"
-            :content="title"
-          />
+            <rich-text :tag="'h3'" :tag-class="'card-title'" :content="title" />
           </div>
-          
+
           <div class="stepper-icon__wrapper">
             <icon
               v-show="showAccordion && content"
@@ -54,10 +50,10 @@
         <b-card-body v-if="content">
           <div
             v-show="showAccordion"
-            :id="'sect' + _uid ? _uid : ''"
+            :id="'sect' + itemid"
             class="accordion-stepper__content"
             role="region"
-            :aria-labelledby="'accordion' + _uid ? _uid : ''"
+            :aria-labelledby="'accordion' + itemid"
           >
             <rich-text :content="content" />
           </div>
@@ -80,42 +76,46 @@ export default {
     RichText,
     Icon,
     BCard,
-    BCardBody
+    BCardBody,
   },
   props: {
     title: {
       type: String,
-      default: 'Item'
+      default: 'Item',
     },
     content: {
       type: String,
-      default: null
+      default: null,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     open: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showPreHeading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     number: {
       type: Number,
-      default: null
+      default: null,
     },
     isWorkWell: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
+    itemid: {
+      type: String,
+      default: 'Item',
+    },
   },
   data: () => ({
     showAccordion: false,
     CaretDown,
-    CaretUp
+    CaretUp,
   }),
   mounted() {
     this.$nextTick(() => {
@@ -125,8 +125,8 @@ export default {
   methods: {
     toggleAccordion() {
       this.showAccordion = !this.showAccordion
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -6,25 +6,28 @@ const mockAccordionItems = [
     field_pre_heading: 'preheading text',
     field_rich_text: {
       value:
-        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'
-    }
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
+    },
+    id: 'id-1',
   },
   {
     field_title: 'Item two',
     field_pre_heading: 'preheading text',
     field_rich_text: {
       value:
-        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'
-    }
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
+    },
+    id: 'id-2',
   },
   {
     field_title: 'Item three',
     field_pre_heading: 'preheading text',
     field_rich_text: {
       value:
-        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'
-    }
-  }
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
+    },
+    id: 'id-3',
+  },
 ]
 
 export default {
@@ -34,26 +37,26 @@ export default {
   argTypes: {
     titleTag: {
       control: 'select',
-      options: ['h2', 'h3', 'h4']
+      options: ['h2', 'h3', 'h4'],
     },
     isStepper: {
       control: 'boolean',
-      table: { disable: true }
+      table: { disable: true },
     },
 
     showPreHeading: {
       control: 'boolean',
-      table: { disable: true }
+      table: { disable: true },
     },
     option: {
       control: 'select',
-      options: ['open-all', 'close-all', 'open-first']
+      options: ['open-all', 'close-all', 'open-first'],
     },
     size: {
       control: 'text',
-      table: { disable: true }
-    }
-  }
+      table: { disable: true },
+    },
+  },
 }
 
 export const Standard = {
@@ -66,8 +69,8 @@ export const Standard = {
     rtl: false,
     option: 'open-first',
     accordionList: mockAccordionItems,
-    size: 'content'
-  }
+    size: 'content',
+  },
 }
 
 export const Stepper = {
@@ -80,6 +83,6 @@ export const Stepper = {
     rtl: false,
     option: 'open-first',
     accordionList: mockAccordionItems,
-    size: 'content'
-  }
+    size: 'content',
+  },
 }

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/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
@@ -126,7 +127,6 @@ export default {
       },
     }
   },
-  fetchOnServer: true,
   fetchKey: 'ws-browscontent',
   methods: {
     async loadFiltersAndContent() {

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>