diff --git a/components/EpisodesAlgolia.vue b/components/EpisodesAlgolia.vue index 20ddb4f..7562266 100644 --- a/components/EpisodesAlgolia.vue +++ b/components/EpisodesAlgolia.vue @@ -8,7 +8,7 @@ import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/compone const route = useRoute() -const props = defineProps({ +const props = defineProps( { header: { type: String, default: null, @@ -49,75 +49,72 @@ const props = defineProps({ type: Object, default: null, }, -}) +} ) -const emit = defineEmits(['searchPageEvent']) +const emit = defineEmits( [ 'searchPageEvent' ] ) -const dataLoaded = ref(false) -const episodes = ref([]) -const totalCount = ref(null) -const startPageNumber = ref(props.startPage) -const cardsPerRow = ref(3) // based on grid col-4 on (>= lg breakpoint) +const dataLoaded = ref( false ) +const episodes = ref( [] ) +const totalCount = ref( null ) +const startPageNumber = ref( props.startPage ) +const cardsPerRow = ref( 3 ) // based on grid col-4 on (>= lg breakpoint) const rowsPerAdArr = [] -onMounted(() => { +onMounted( () => { let currentCardsPerRow = cardsPerRow.value // when less than breakpoint.lg, we are showing 2 cards per row, update currentCardsPerRow var - if (window.innerWidth <= breakpoint.lg) { + if ( window.innerWidth <= breakpoint.lg ) { currentCardsPerRow = 2 } // get the total number of ads that will show in the current layout const numOfAds = cardCountCalc.value / props.rowsPerAd / currentCardsPerRow + - (props.showLastAd ? 1 : 0) + ( props.showLastAd ? 1 : 0 ) // loop through the number of ads and push number where the add will populate to the rowsPerAdArr - for (let i = 1; i < numOfAds; i++) { + for ( let i = 1; i < numOfAds; i++ ) { const adPoint = i * props.rowsPerAd * currentCardsPerRow - rowsPerAdArr.push(adPoint) + rowsPerAdArr.push( adPoint ) } // temp data loaded dataLoaded.value = true -}) +} ) // checks if the index is where we should populate an ad -const insertAD = (index) => { - return rowsPerAdArr.includes(index) +const insertAD = ( index ) => { + return rowsPerAdArr.includes( index ) } /* func to determin how many cards to show */ -const cardCountCalc = computed(() => { +const cardCountCalc = computed( () => { return props.startCount ? props.startCount + props.rowCount * cardsPerRow.value : props.rowCount * cardsPerRow.value // (3 cards per ) -}) +} ) -// handle the episodes array based on startCount and buckeltlimit props -const getEpisodes = computed(() => {}) - -onBeforeMount(async () => { +onBeforeMount( () => { // if the url query page has a value, set the startPageNumber to that value - if (route.query.page) { + if ( route.query.page ) { startPageNumber.value = route.query.page } -}) +} ) // a watcher to update the route page query when startPageNumber changes -watch(startPageNumber, (page, prev) => { - navigateTo({ +watch( startPageNumber, ( page ) => { + navigateTo( { query: { page: page }, - }) -}) + } ) +} ) -async function onPage(event) { +async function onPage ( event ) { //event.page: New page number //event.first: Index of first record //event.rows: Number of rows to display in new page //event.pageCount: Total number of pages - emit('searchPageEvent', event) + emit( 'searchPageEvent', event ) //dataLoaded.value = false } @@ -155,9 +152,11 @@ async function onPage(event) {