Merge branch 'main' into APPS-3045_mobile_datefilter

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.35.1](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.35.0...v3.35.1) (2024-11-22)
+
+
+### Bug Fixes
+
+* APPS-3074 add watchers for pagination reactivity ([#658](https://github.com/UCLALibrary/ucla-library-website-components/issues/658)) ([8456d32](https://github.com/UCLALibrary/ucla-library-website-components/commit/8456d321380940c42a23e8f6368e2e015493b236))
+
 # [3.35.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.34.0...v3.35.0) (2024-11-21)
 
 

package.json

@@ -2,7 +2,7 @@
   "name": "ucla-library-website-components",
   "type": "module",
   "private": false,
-  "version": "3.35.0",
+  "version": "3.35.1",
   "main": "./dist/ucla-library-website-components.umd.cjs",
   "module": "./dist/ucla-library-website-components.js",
   "style": "./dist/style.css",

src/lib-components/SectionPagination.vue

@@ -116,6 +116,17 @@ const isNotLastPage = computed(() => {
   return (initialCurrentPage && pages) && currPage?.value !== pages
 })
 
+// WATCHERS - we use watch instead of computed because we are using variables derived from props during render
+// note: this ensures the component will update when props change
+watch(() => pages, () => {
+  // regenerate pages when pages change
+  generateLeftPages()
+}, { immediate: true })
+watch(() => initialCurrentPage, (newVal) => {
+  // set current page when initialCurrentPage changes
+  currPage.value = newVal as number
+}, { immediate: true })
+
 onMounted(() => {
   // legacy implementation does not require any onMounted logic
   if (!initialCurrentPage || !pages)

src/stories/SectionPagination.stories.js

@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import SectionPagination from '@/lib-components/SectionPagination'
 
 /**
@@ -49,6 +49,8 @@ export function WithPagesAndCurrentPage() {
   }
 }
 
+// this story uses an async fetch to get the total number of pages
+// like the FTVA event listing page
 export function FTVA() {
   return {
     components: { SectionPagination },
@@ -57,6 +59,25 @@ export function FTVA() {
         theme: computed(() => 'ftva'),
       }
     },
-    template: '<section-pagination :pages="23" :initialCurrentPage="14" />',
+    setup() {
+      // similar to ftva event listing page logic
+      const totalPages = ref(0)
+
+      // Set totalPages.value asynchronously
+      const fetchTotalPages = async () => {
+        // Mocking an async fetch call
+        const response = await new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(20)
+          }, 1000)
+        })
+        totalPages.value = response
+      }
+
+      fetchTotalPages()
+
+      return { totalPages }
+    },
+    template: '<section-pagination :pages="totalPages" :initialCurrentPage="6" />'
   }
 }