@worksafevictoria/wcl7.5 1.13.0 → 1.14.0-beta.1

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

@@ -25,7 +25,7 @@
       />
     </template>
 
-    <template v-if="filters.taxonomies.length > 0" v-slot:cardGroupPreContent>
+    <template v-if="filters?.taxonomies?.length > 0" v-slot:cardGroupPreContent>
       <directory-filters
         class="wcl-browse-content__filter"
         :filters="filters"
@@ -38,250 +38,245 @@
   </card-group>
 </template>
 
-<script>
-import CardGroup from '../../SubComponents/CardGroup/index.vue'
-import DirectoryFilters from '../../Global/DirectoryFilters/index.vue'
-import Switcher from './switcher.vue'
+<script setup>
+// import { CardGroup, DirectoryFilters, Switcher } from '@worksafevictoria/wcl7.5'
 
-export default {
-  name: 'BrowseContent',
-  components: {
-    CardGroup,
-    DirectoryFilters,
-    Switcher,
+const nuxtApp = useNuxtApp()
+const hasMorePages = ref(false)
+const displayedCards = ref([])
+const loading = ref(false)
+const bundleCache = ref({})
+const displayLimit = ref(0)
+const allCards = ref(undefined)
+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: () => [''],
   },
-  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,
+  },
+  id: {
+    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,
-        },
+const filterKey = computed(() => `filters-${props.id}`)
+const { data: filters } = await useAsyncData(filterKey, async () => {
+  try {
+    const filters = {
+      taxonomies: [],
+      selected: {},
+      availableBundles: [],
+    }
+    if (props.fetchFilters) {
+      await props.fetchFilters().then((taxonomies) => {
+        filters.taxonomies = taxonomies
       })
+    }
+    return filters
+  } 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)
-      }
-
-      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
+const cardsKey = computed(() => `cards-${props.id}`)
+const { data: savedCards } = await useAsyncData(cardsKey, async () => {
+  await loadMoreCards(true)
+  return {
+    cards: JSON.parse(JSON.stringify(allCards.value)),
+    bundle: JSON.parse(JSON.stringify(bundleCache.value)),
+  }
+})
 
-      for (let i = 0; i < bundleWithMostCards; i++) {
-        cardBundles.forEach((bundle) => {
-          if (bundle.results[i]) {
-            shuffled.push(bundle.results[i])
-          }
-        })
-      }
+watch(
+  () => savedCards.value,
+  (newVal, oldVal) => {
+    if (newVal && allCards.value === undefined) {
+      allCards.value = JSON.parse(JSON.stringify(savedCards.value.cards))
+      bundleCache.value = JSON.parse(JSON.stringify(savedCards.value.bundle))
+      displayLimit.value += props.initialDisplyLimit
+      hasMorePages.value = allCards.value.total > allCards.value.cards.length
+      displayedCards.value = allCards.value.cards.slice(0, displayLimit.value)
+    }
+  },
+  { immediate: true },
+)
 
-      const total = cardBundles.reduce((acc, bundle) => {
-        return acc + bundle.numFound
-      }, 0)
+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)
 
-      return { cards: shuffled, total }
-    },
-    loadFilters() {
-      return this.fetchFilters().then((taxonomies) => {
-        this.filters.taxonomies = taxonomies
-        return Promise.resolve(taxonomies)
-      })
+    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 += props.initialDisplyLimit
+  const bundles =
+    filters.value.availableBundles.length > 0
+      ? filters.value.availableBundles
+      : props.bundle
+  allCards.value = await fetchCards(
+    displayedCards.value,
+    allCards.value,
+    props.initialDisplyLimit, //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,
     },
-    onFilter(filters) {
-      this.bundleCache = {}
-      Object.keys(filters).forEach((filter) => {
-        this.filters.selected[filter] = filters[filter].map((obj) => obj.tid)
-      })
-      this.loadMoreCards(true)
+    qs: {
+      start,
     },
-    onSwitcher(switchToBundle) {
-      this.filters.selected = {}
-      this.filters.availableBundles.length = 0
-      if (switchToBundle) {
-        this.filters.availableBundles.push(switchToBundle)
+  })
+  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])
       }
-      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
-    },
-  },
+    })
+  }
+
+  const total = cardBundles.reduce((acc, bundle) => {
+    return acc + bundle.numFound
+  }, 0)
+
+  return { cards: shuffled, total }
+}
+const onFilter = (fltrs) => {
+  bundleCache.value = {}
+  Object.keys(fltrs).forEach((filter) => {
+    filters.value.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/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.stories.js

@@ -3,17 +3,17 @@ import arRecord from './index.vue'
 const arData = 
     {
         title: 'Ventia Utility Services Pty Limited',
-        fullAddress: 'MITCHAM VIC 3132',
-        workPhone: '0438531164',
+        fullAddress: 'MITCHAM 3132',
+        // workPhone: '0438531164',
         mobilePhone: '0438531164',
         email: 'daniel.dehaan@ventia.com',
         website: 'http://www.ventia.com.au',
         contact1: 'Daniel DeHaan',
-        phone1: '0438531164',
-        email1: 'daniel.dehaan@ventia.com',
-        mobile1: '0438531164',
-        serviceCategory: 'Class B - Restricted - Asbestos Removalists',
-        services: 'Bituminous coal tar coatings,Non-friable Asbestos Cement Water Pipes and Associated Fittings ONLY,Non-friable Asbetos Containing Bituminous Coating on Mild Steel Pipes',
+        // phone1: '0438531164',
+        // email1: 'daniel.dehaan@ventia.com',
+        // mobile1: '0438531164',
+        serviceCategory: 'Class B - Non-friable',
+        // services: 'Bituminous coal tar coatings,Non-friable Asbestos Cement Water Pipes and Associated Fittings ONLY,Non-friable Asbetos Containing Bituminous Coating on Mild Steel Pipes',
     }
 
 

package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.vue

@@ -14,26 +14,23 @@
             {{ item.title }}
           </a>
         </column>
-        <column md="2" sm="12" class="address">
+        <column md="3" sm="12" class="address">
           <div class="label">Location</div>
           <a v-if="item.fullAddress" target="_blank" :href="gMapLink"
             ><span class="sr-only visually-hidden">Address</span>
             {{ item.fullAddress }}
           </a>
         </column>
-        <column md="2" sm="12" class="coldata longstring">
+        <column md="3" sm="12" class="coldata longstring">
           <div class="label">Email</div>
           <a v-if="item.email" target="_blank" :href="`mailto:${item.email}`"
             ><span class="sr-only visually-hidden">Email address</span>
             {{ item.email }}
           </a>
         </column>
-        <column md="3" sm="12" class="coldata longstring">
-          <div class="label">Website</div>
-          <a v-if="item.website" target="_blank" :href="`${item.website}`"
-            ><span class="sr-only visually-hidden">Website address</span>
-            {{ item.website }}
-          </a>
+        <column md="2" sm="12" class="coldata">
+          <div class="label">Contact</div>
+          {{ item.contact1 }}
         </column>
         <column md="2" sm="12" class="coldata">
           <div class="label">Phone</div>
@@ -61,33 +58,34 @@
         <div style="padding-top: 20px">
           <hr />
         </div>
-        <!-- Contacts, if any -->
-        <div v-if="validContacts">
+        <!-- Website, if any -->
+          
+        <div v-if="item.website">
           <row>
             <column>
-              <h4>Contact Information</h4>
+              <h4>Website</h4>
             </column>
           </row>
-          <row v-if="item.contact1 !== ''">
-            <column sm="2" class="label"> Contact </column>
-            <column sm="4" class="dir-additional-records">
-              {{ item.contact1 }}
-            </column>
+          <row v-if="item.website !== ''">
+            <a v-if="item.website" target="_blank" :href="`${item.website}`"
+              ><span class="sr-only visually-hidden">Website address</span>
+              {{ item.website }}
+            </a>
           </row>
-          <row v-if="item.phone1 !== ''">
+          <!-- <row v-if="item.phone1 !== ''">
             <column sm="2" class="label"> Phone </column>
             <column sm="4" class="dir-additional-records">
               {{ item.phone1 }}
             </column>
-          </row>
-          <row v-if="item.mobile1 !== ''">
+          </row> -->
+          <row v-if="item.mobile1">
             <column sm="2" class="label"> Mobile </column>
             <column sm="4" class="dir-additional-records">
               {{ item.mobile1 }}
             </column>
           </row>
-          <row v-if="item.email1 !== ''">
-            <column sm="2" class="label"> Email </column>
+          <row v-if="item.email1">
+            <column sm="2" class="label" > Email </column>
             <column sm="4" class="dir-additional-records">
               {{ item.email1 }}
             </column>
@@ -99,7 +97,7 @@
               <h4>{{ item.serviceCategory }}</h4>
             </column>
           </row>
-          <row class="dir-additional-records">
+          <!-- <row class="dir-additional-records">
             <column>
               <ul>
                 <li v-for="serv in item.services.split(',')" :key="serv.id">
@@ -107,7 +105,7 @@
                 </li>
               </ul>
             </column>
-          </row>
+          </row> -->
         </div>
       </div>
     </container>