@worksafevictoria/wcl7.5 1.1.0-beta.86 → 1.1.0-beta.88

package/package.json

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

package/src/components/Global/AppFooter/index.vue

@@ -438,15 +438,20 @@ export default {
   },
   computed: {
     updateDate() {
-      // https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
-      return format(new Date(this.changedDate), 'dd/MM/yyyy')
+      // Change to remove hydration date
+      return new Date(this.changedDate)
+        .toLocaleString('en-AU', {
+          timeZone: 'Australia/Sydney',
+        })
+        .split(',')[0]
     },
     isMobile() {
       return this.windowWidth < 768
     },
-    processID() {
-      return `${Date.now()}-${Math.floor(Math.random() * 10000)}`
-    },
+    // Why send junk id
+    // processID() {
+    //   return `${Date.now()}-${Math.floor(Math.random() * 10000)}`
+    // },
   },
   watch: {
     $route() {
@@ -524,7 +529,7 @@ export default {
         //title: this.$store?.state?.page?.content?.title,
         title: this.$pageStore?.content?.title,
         label: this.response.was_the_information_on_this_page_helpful_,
-        processID: this.processID,
+        // processID: this.processID, why send GTM junk id
       }
       if (this.$gtm) {
         this.$gtm.push({

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

@@ -10,11 +10,11 @@
       }"
     >
       <a
-        :id="'accordion' + $.uid ? $.uid : ''"
+        :id="'accordion' + itemid"
         role="button"
         :aria-expanded="showAccordion ? 'true' : 'false'"
         class="accordion-item__title"
-        :aria-controls="'sect' + $.uid ? $.uid : ''"
+        :aria-controls="'sect' + itemid"
         tabindex="0"
         @click.prevent="toggleAccordion"
         @keypress.enter="toggleAccordion"
@@ -51,10 +51,10 @@
       <b-card-body v-if="content">
         <div
           v-show="showAccordion"
-          :id="'sect' + $.uid ? $.uid : ''"
+          :id="'sect' + itemid"
           class="accordion-item__content"
           role="region"
-          :aria-labelledby="'accordion' + $.uid ? $.uid : ''"
+          :aria-labelledby="'accordion' + itemid"
         >
           <rich-text :content="content" />
         </div>
@@ -107,6 +107,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    itemid: {
+      type: String,
+      default: 'Item',
+    },
   },
   data: () => ({
     showAccordion: false,

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

@@ -10,10 +10,10 @@
     >
       <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
@@ -50,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>
@@ -107,6 +107,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    itemid: {
+      type: String,
+      default: 'Item',
+    },
   },
   data: () => ({
     showAccordion: false,

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>
 

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

@@ -38,251 +38,226 @@
   </card-group>
 </template>
 
-<script>
+<script setup>
 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,
+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',
   },
-  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,
-    },
+  title: {
+    type: String,
+    default: '',
   },
-  // Temp use of mounted to replace fetch
-  async mounted() {
-    if (this.displayedCards.length === 0) {
-      await this.loadFiltersAndContent()
-    }
+  titleTag: {
+    type: String,
+    default: 'h2',
   },
-  // TODO useAsyncData <script setup>
-  // 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: [],
-      },
-    }
+  bundle: {
+    type: Array,
+    default: () => [''],
   },
-  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)
+  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,
+  },
+})
 
-        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.$pageStore?.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,
-        },
-      })
+await useAsyncData('fetchData', async () => {
+  try {
+    await Promise.all([
+      props.fetchFilters ? loadFilters() : Promise.resolve(),
+      loadMoreCards(true),
+    ])
+  } catch (err) {
+    console.log('🚀 ~ err:', err)
+  }
+})
 
-      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)
-      }
+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)
 
-      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
-        },
-      )
+    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,
     },
-    getShuffledCards(cardBundles) {
-      const shuffled = []
-      const bundleWithMostCards = cardBundles.reduce(
-        (a, b) => (a.results.length > b.results.length ? a : b),
-        { results: [] },
-      ).results.length
+    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])
-          }
-        })
+  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)
+  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
-    },
-  },
+  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>

package/src/index.js

@@ -25,7 +25,7 @@ import RichText from './components/Paragraphs/RichText/index.vue'
 import TextMedia from './components/Paragraphs/TextMedia/index.vue'
 import Accordion from './components/Paragraphs/Accordion/index.vue'
 import TabbedCards from './components/Paragraphs/TabbedCards/index.vue'
-import BrowseContent from './components/Paragraphs/BrowseContent/index.vue'
+// import BrowseContent from './components/Paragraphs/BrowseContent/index.vue'
 import TaskFinder from './components/Paragraphs/TaskFinder/index.vue'
 import ListGroup from './components/Paragraphs/ListGroup/index.vue'
 import ScrollSpy from './components/Paragraphs/ScrollSpy/index.vue'
@@ -80,7 +80,7 @@ export {
   BackToTop,
   GlobalNotice,
   ContrastMode,
-  CarouselComponent
+  CarouselComponent,
 }
 
 // Export Paragraphs
@@ -89,7 +89,7 @@ export {
   TextMedia,
   Accordion,
   TabbedCards,
-  BrowseContent,
+  // BrowseContent, moved to FE
   ListGroup,
   ScrollSpy,
   Directory,
@@ -102,7 +102,7 @@ export {
   MarketingBanner,
   RelatedInformation,
   Calculator,
-  Chart
+  Chart,
 }
 
 // Export Sub Components
@@ -116,5 +116,15 @@ export {
   Breadcrumb,
   Search,
   VideoThumbnail,
-  ResourceGroup
+  ResourceGroup,
+}
+
+// Export for BrowseContent
+import DirectoryFilters from './components/Global/DirectoryFilters/index.vue'
+import Switcher from './components/Paragraphs/BrowseContent/switcher.vue'
+
+export {
+  // CardGroup, already imported
+  DirectoryFilters,
+  Switcher,
 }