From 8d3f315388e39c6f4dd6eb1a4a7a47955ac10012 Mon Sep 17 00:00:00 2001 From: Carolina Capetillo Date: Tue, 5 Nov 2024 11:05:16 -0800 Subject: [PATCH 1/8] adds pagination logic and fixes issue to filter out sessions without thumbnail urls --- src/components/Images/MyGallery.vue | 84 ++++++++++++++++++++++------- 1 file changed, 65 insertions(+), 19 deletions(-) diff --git a/src/components/Images/MyGallery.vue b/src/components/Images/MyGallery.vue index 6626ca9..161bc22 100644 --- a/src/components/Images/MyGallery.vue +++ b/src/components/Images/MyGallery.vue @@ -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,57 @@ 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=large`, 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 loadSessionsForPage = 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 + loadSessionsForPage(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 +88,10 @@ function openDatalab (observationId, startDate, proposalId) { window.open(datalabQueryUrl, 'datalabWindow') } +onMounted(() => { + loadSessionsForPage(currentPage.value) +}) + - - From 662a3bfa393cec087573b53606686921f65ce13e Mon Sep 17 00:00:00 2001 From: Carolina Capetillo Date: Tue, 5 Nov 2024 11:18:47 -0800 Subject: [PATCH 2/8] fixes mygallery test --- src/tests/integration/components/myGallery.test.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/tests/integration/components/myGallery.test.js b/src/tests/integration/components/myGallery.test.js index 7d63fe3..8c2df5f 100644 --- a/src/tests/integration/components/myGallery.test.js +++ b/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,9 +52,8 @@ 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) @@ -85,7 +83,7 @@ describe('MyGallery.vue', () => { }) const wrapper = createComponent() - await wrapper.vm.$nextTick() + await flushPromises() expect(wrapper.find('.loading').exists()).toBe(false) From 6667d57e205c08af9a44a1023dd3bcda51d0c427 Mon Sep 17 00:00:00 2001 From: Carolina Capetillo Date: Tue, 5 Nov 2024 13:32:57 -0800 Subject: [PATCH 3/8] fixes url --- src/stores/obsPortalData.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/obsPortalData.js b/src/stores/obsPortalData.js index 4c01e4a..d6ffc86 100644 --- a/src/stores/obsPortalData.js +++ b/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 From 29a8060b2431f92f79b169a2407bdbf9df93bf51 Mon Sep 17 00:00:00 2001 From: Carolina Capetillo Date: Tue, 5 Nov 2024 13:33:31 -0800 Subject: [PATCH 4/8] turns username into computed property so that after user logs in, it immediately shows username --- src/App.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/App.vue b/src/App.vue index 3d56384..b78afe8 100644 --- a/src/App.vue +++ b/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 } ) +