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

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

@@ -1,284 +0,0 @@
-<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>