Feature/pagination

src/App.vue

@@ -11,7 +11,7 @@ const route = useRoute()
 const router = useRouter()
 
 const userDataStore = useUserDataStore()
-const username = userDataStore.username
+const username = computed(() => userDataStore.username)
 
 const configurationStore = useConfigurationStore()
 const loadedConfig = computed(() => configurationStore.isConfigLoaded)
@@ -54,6 +54,7 @@ watch(
   },
   { immediate: true }
 )
+
 </script>
 
 <template>
@@ -80,8 +81,8 @@ watch(
         <router-link class="navbar-item" to="/observe">Observe</router-link>
         <router-link class="navbar-item" to="/datalab">DataLab</router-link>
         <div class="buttons">
-          <router-link class="navbar-item button red-bg" to="/login" v-if="!username">Login</router-link>
           <span class="navbar-item" v-if="username">{{ username }}</span>
+            <router-link class="navbar-item button red-bg" to="/login" v-else-if="!username">Login</router-link>
         </div>
       </div>
     </div>

src/components/Images/MyGallery.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, onMounted } from 'vue'
+import { computed, ref, onMounted, watch } from 'vue'
 import { useObsPortalDataStore } from '../../stores/obsPortalData'
 import { useConfigurationStore } from '../../stores/configuration'
 import { formatDate } from '../../utils/formatTime.js'
@@ -10,10 +10,12 @@ const obsPortalDataStore = useObsPortalDataStore()
 
 const thumbnailsMap = ref({})
 const loading = ref(true)
+const currentPage = ref(1)
+const pageSize = 5
 
 const filteredSessions = computed(() => {
   const now = new Date()
-  // choosing 16 minutes because each session is 15 minutes long and this way we can show the last session once it's completed
+  // Choosing 16 minutes because each session is 15 minutes long and this way we can show the last session once it's completed
   const sixteenMinutes = 16 * 60 * 1000
   const cutoffTime = new Date(now.getTime() - sixteenMinutes)
   // Object.values returns an array of all the values of the object
@@ -24,35 +26,56 @@ const filteredSessions = computed(() => {
   return filtered
 })
 
+const totalPages = computed(() => {
+  return Math.ceil(filteredSessions.value.length / pageSize)
+})
+
 const getThumbnails = async (observationId) => {
   await fetchApiCall({
-    url: configurationStore.thumbnailArchiveUrl + `thumbnails/?observation_id=${observationId}&size=large`,
+    url: `${configurationStore.thumbnailArchiveUrl}thumbnails/?observation_id=${observationId}&size=small`,
     method: 'GET',
     successCallback: (data) => {
       if (data.results.length > 0) {
         thumbnailsMap.value[observationId] = data.results.map(result => result.url)
       }
-      loading.value = false
     },
     failCallback: (error) => {
       console.error('Error fetching thumbnails for session:', observationId, error)
-      loading.value = false
     }
   })
 }
 
-onMounted(() => {
-  // Fetch thumbnails for all sessions in filteredSessions
-  filteredSessions.value.forEach(session => {
+const loadThumbnailsForPage = async (page) => {
+  loading.value = true
+  // Calculate the start and end index for the current page
+  const startIndex = (page - 1) * pageSize
+  const endIndex = startIndex + pageSize
+  const sessions = filteredSessions.value.slice(startIndex, endIndex)
+  // Clear the thumbnails map for the current page
+  thumbnailsMap.value = {}
+
+  for (const session of sessions) {
+    // Initialize the thumbnails array for the session
     thumbnailsMap.value[session.id] = []
-    getThumbnails(session.id)
-  })
-})
+    await getThumbnails(session.id)
+  }
+
+  loading.value = false
+}
+
+const changePage = (page) => {
+  currentPage.value = page
+  loadThumbnailsForPage(page)
+}
 
 const sessionsWithThumbnails = computed(() => {
-  if (loading.value) return []
-  const sessions = filteredSessions.value.filter(session => thumbnailsMap.value[session.id] && thumbnailsMap.value[session.id].length > 0)
-  return sessions
+  const startIndex = (currentPage.value - 1) * pageSize
+  const endIndex = startIndex + pageSize
+
+  // Only include sessions that have urls in thumbnailsMap
+  return filteredSessions.value.slice(startIndex, endIndex).filter(
+    session => thumbnailsMap.value[session.id] && thumbnailsMap.value[session.id].length > 0
+  )
 })
 
 function openDatalab (observationId, startDate, proposalId) {
@@ -64,6 +87,17 @@ function openDatalab (observationId, startDate, proposalId) {
   window.open(datalabQueryUrl, 'datalabWindow')
 }
 
+// Without the watcher for filteredSessions, the thumbnails would not be fetched when the number of sessions changes
+watch(filteredSessions, (newSessions, oldSessions) => {
+  if (newSessions.length !== oldSessions.length) {
+    loadThumbnailsForPage(currentPage.value)
+  }
+})
+
+onMounted(() => {
+  loadThumbnailsForPage(currentPage.value)
+})
+
 </script>
 
 <template>
@@ -73,7 +107,6 @@ function openDatalab (observationId, startDate, proposalId) {
   <div class="container">
     <div v-for="obs in sessionsWithThumbnails" :key="obs.id">
       <h3 class="startTime">{{ formatDate(obs.start) }}</h3>
-      <v-btn @click="openDatalab(obs.id, obs.start, obs.proposal)">Open in Datalab</v-btn>
       <div class="columns is-multiline">
         <div
           class="column is-one-quarter-desktop is-half-tablet"
@@ -84,21 +117,40 @@ function openDatalab (observationId, startDate, proposalId) {
           </figure>
         </div>
       </div>
+      <v-btn @click="openDatalab(obs.id, obs.start, obs.proposal)">Open in Datalab</v-btn>
+    </div>
+    <!-- Pagination Controls -->
+    <div class="pagination-controls">
+      <button
+        v-if="currentPage > 1"
+        @click="changePage(currentPage - 1)"
+      >
+        Previous
+      </button>
+      <span>Page {{ currentPage }} of {{ totalPages }}</span>
+      <button
+        v-if="currentPage < totalPages"
+        @click="changePage(currentPage + 1)"
+      >
+        Next
+      </button>
     </div>
   </div>
 </template>
 
-<style scoped>
-.loading-spinner {
-  text-align: center;
-}
-</style>
-
 <style scoped>
 .loading {
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+button {
+  margin: 0 0.5rem;
+}
 </style>

src/stores/obsPortalData.js

@@ -49,7 +49,7 @@ export const useObsPortalDataStore = defineStore('obsPortalData', {
       const userDataStore = useUserDataStore()
       const username = userDataStore.username
       fetchApiCall({
-        url: configurationStore.observationPortalUrl + `requestgroups/?observation_type=NORMAL&state=PENDING&user=${username}created_after=${fifteenDaysAgo}`,
+        url: configurationStore.observationPortalUrl + `requestgroups/?observation_type=NORMAL&state=PENDING&user=${username}&created_after=${fifteenDaysAgo}`,
         method: 'GET',
         successCallback: (response) => {
           this.pendingRequestGroups = response.results

src/tests/integration/components/myGallery.test.js

@@ -32,7 +32,6 @@ function createComponent () {
 
 describe('MyGallery.vue', () => {
   beforeEach(() => {
-    // Reset all mocks before each test
     vi.resetAllMocks()
   })
 
@@ -53,20 +52,19 @@ describe('MyGallery.vue', () => {
         })
       }
     })
-
-    const wrapper = createComponent()
-    await wrapper.vm.$nextTick()
+    createComponent()
+    await flushPromises()
 
     // Two API calls are made - one for each session ID - to fetch images for both sessions
     expect(fetchApiCall).toHaveBeenCalledTimes(2)
     expect(fetchApiCall).toHaveBeenCalledWith(
       expect.objectContaining({
-        url: 'http://mock-api.com/thumbnails/?observation_id=session1&size=large'
+        url: 'http://mock-api.com/thumbnails/?observation_id=session1&size=small'
       })
     )
     expect(fetchApiCall).toHaveBeenCalledWith(
       expect.objectContaining({
-        url: 'http://mock-api.com/thumbnails/?observation_id=session2&size=large'
+        url: 'http://mock-api.com/thumbnails/?observation_id=session2&size=small'
       })
     )
   })
@@ -85,7 +83,7 @@ describe('MyGallery.vue', () => {
     })
 
     const wrapper = createComponent()
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     expect(wrapper.find('.loading').exists()).toBe(false)