feat: reflect response view in URL

Chartman123 · web-flow · commit dfdcf7aaf890 · 2026-07-09T08:03:48.000Z
Signed-off-by: Christian Hartmann &lt;chris-hartmann@gmx.de&gt;
diff --git a/playwright/e2e/results-view.spec.ts b/playwright/e2e/results-view.spec.ts
@@ -55,7 +55,7 @@ test.describe('Results view', () => {
 		// from submit → results after submission causes a brief redirect loop,
 		// so we use direct navigation instead of clicking the TopBar.
 		await page.goto(page.url().replace(/\/submit.*$/, '/results'))
-		await page.waitForURL(/\/results$/)
+		await page.waitForURL(/\/results(?:\?.*)?$/)
 	})
 
 	test('Summary tab shows submitted data', async ({ resultsView }) => {
@@ -80,20 +80,76 @@ test.describe('Results view', () => {
 		// Should show the individual submission with the answers
 		await expect(resultsView.responsesTab).toBeChecked()
 		await expect(resultsView.responseCount).toBeVisible()
+		await expect(resultsView.page).toHaveURL(/\/results\?responses$/)
 	})
 
-	test('Tab switching between Summary and Responses', async ({ resultsView }) => {
+	test('Tab switching between Summary and Responses updates the URL', async ({
+		resultsView,
+	}) => {
 		// Start on Summary
 		await expect(resultsView.summaryTab).toBeChecked()
+		await expect(resultsView.page).toHaveURL(/\/results\?summary$/)
 
 		// Switch to Responses
 		await resultsView.switchToResponses()
 		await expect(resultsView.responsesTab).toBeChecked()
 		await expect(resultsView.summaryTab).not.toBeChecked()
+		await expect(resultsView.page).toHaveURL(/\/results\?responses$/)
 
 		// Switch back to Summary
 		await resultsView.switchToSummary()
 		await expect(resultsView.summaryTab).toBeChecked()
 		await expect(resultsView.responsesTab).not.toBeChecked()
+		await expect(resultsView.page).toHaveURL(/\/results\?summary$/)
+	})
+
+	test('Explicit query route wins over remembered localStorage view', async ({
+		page,
+		resultsView,
+	}) => {
+		await page.evaluate(() => {
+			const match = window.location.pathname.match(
+				/\/apps\/forms\/([^/]+)\/results$/,
+			)
+			if (!match) {
+				throw new Error('Expected results route before setting localStorage')
+			}
+
+			localStorage.setItem(
+				`nextcloud_forms_${match[1]}_activeResponseView`,
+				'responses',
+			)
+		})
+
+		await page.goto(page.url().replace(/\/results$/, '/results?summary'))
+		await page.waitForURL(/\/results\?summary$/)
+
+		await expect(resultsView.summaryTab).toBeChecked()
+		await expect(resultsView.responsesTab).not.toBeChecked()
+	})
+
+	test('Query-less results route restores the remembered localStorage view', async ({
+		page,
+		resultsView,
+	}) => {
+		await page.evaluate(() => {
+			const match = window.location.pathname.match(
+				/\/apps\/forms\/([^/]+)\/results$/,
+			)
+			if (!match) {
+				throw new Error('Expected results route before setting localStorage')
+			}
+
+			localStorage.setItem(
+				`nextcloud_forms_${match[1]}_activeResponseView`,
+				'responses',
+			)
+		})
+
+		await page.goto(page.url().replace(/\/results\?summary$/, '/results'))
+		await page.waitForURL(/\/results\?responses$/)
+
+		await expect(resultsView.responsesTab).toBeChecked()
+		await expect(resultsView.summaryTab).not.toBeChecked()
 	})
 })
diff --git a/src/views/Results.vue b/src/views/Results.vue
@@ -47,7 +47,7 @@
 					:options="responseViews"
 					:groupLabel="t('forms', 'View mode')"
 					class="response-actions__toggle"
-					@update:active="loadFormResults" />
+					@update:active="onChangeResponseView" />
 
 				<!-- Action menu for cloud export and deletion -->
 				<NcActions
@@ -328,6 +328,7 @@ const responseViews = [
 		id: 'responses',
 	},
 ]
+const responseViewIds = new Set(responseViews.map((view) => view.id))
 
 export default {
 	// eslint-disable-next-line vue/multi-word-component-names
@@ -379,7 +380,7 @@ export default {
 
 	data() {
 		return {
-			activeResponseView: responseViews[0],
+			activeResponseView: {},
 
 			questions: [],
 			submissions: [],
@@ -498,11 +499,16 @@ export default {
 		// Reload results when form changes
 		async hash() {
 			await this.fetchFullForm(this.form.id)
-			this.loadActiveResponseViewFromLocalStorage()
-			this.loadFormResults()
+			await this.syncActiveResponseViewFromRoute()
 			SetWindowTitle(this.formTitle)
 		},
 
+		'$route.query': {
+			handler() {
+				this.syncActiveResponseViewFromRoute()
+			},
+		},
+
 		limit() {
 			this.loadFormResults()
 		},
@@ -525,40 +531,115 @@ export default {
 
 		// Persist active response view to localStorage when it changes
 		activeResponseView(newView) {
-			this.saveActiveResponseViewToLocalStorage(newView.id)
+			if (newView?.id) {
+				this.saveActiveResponseViewToLocalStorage(newView.id)
+			}
 		},
 	},
 
 	async beforeMount() {
 		await this.fetchFullForm(this.form.id)
-		this.loadActiveResponseViewFromLocalStorage()
-		this.loadFormResults()
+		await this.syncActiveResponseViewFromRoute()
 		SetWindowTitle(this.formTitle)
 	},
 
 	methods: {
 		/**
-		 * Load the active response view preference from localStorage for the current form.
-		 * Applies stored value if available and otherwise resets to default (summary)
+		 * Resolve a response view object by its ID.
+		 *
+		 * @param {string} viewId The requested response view ID
+		 * @return {object}
+		 */
+		getResponseViewById(viewId) {
+			return (
+				responseViews.find((view) => view.id === viewId) ?? responseViews[0]
+			)
+		},
+
+		/**
+		 * Read the explicit response view from the current route query.
+		 *
+		 * @return {string|null}
+		 */
+		getRouteResponseViewId() {
+			const matchingView = responseViews.find((view) => {
+				return Object.hasOwn(this.$route.query, view.id)
+			})
+
+			return matchingView?.id ?? null
+		},
+
+		/**
+		 * Load the stored response view preference from localStorage for the current form.
+		 *
+		 * @return {string}
 		 */
-		loadActiveResponseViewFromLocalStorage() {
+		loadStoredActiveResponseViewId() {
 			try {
-				const storedViewId = localStorage.getItem(
-					`nextcloud_forms_${this.form.hash}_activeResponseView`,
-				)
-				if (storedViewId) {
-					const view = responseViews.find((v) => v.id === storedViewId)
-					if (view) {
-						this.activeResponseView = view
-					}
-				} else {
-					this.activeResponseView = responseViews[0]
+				const storageKey = this.getActiveResponseViewStorageKey()
+				if (!storageKey) {
+					return responseViews[0].id
+				}
+
+				const storedViewId = localStorage.getItem(storageKey)
+				if (storedViewId && responseViewIds.has(storedViewId)) {
+					return storedViewId
 				}
+
+				return responseViews[0].id
 			} catch (err) {
 				logger.debug('Error loading activeResponseView from localStorage', {
 					error: err,
 				})
+				return responseViews[0].id
+			}
+		},
+
+		/**
+		 * Resolve the effective response view using route state first and localStorage second.
+		 *
+		 * @return {string}
+		 */
+		resolveActiveResponseViewId() {
+			return (
+				this.getRouteResponseViewId()
+				?? this.loadStoredActiveResponseViewId()
+			)
+		},
+
+		/**
+		 * Apply the effective route/localStorage view and refresh results when needed.
+		 */
+		async syncActiveResponseViewFromRoute() {
+			const routeViewId = this.getRouteResponseViewId()
+			const nextView = this.getResponseViewById(
+				routeViewId ?? this.loadStoredActiveResponseViewId(),
+			)
+			const currentViewId = this.activeResponseView?.id
+
+			if (currentViewId !== nextView.id) {
+				this.activeResponseView = nextView
+			}
+
+			if (!routeViewId) {
+				try {
+					await this.$router.replace({
+						name: 'results',
+						params: {
+							hash: this.form.hash,
+						},
+						query: {
+							...this.$route.query,
+							[nextView.id]: null,
+						},
+					})
+					return
+				} catch (error) {
+					logger.debug('Navigation cancelled', { error })
+				}
 			}
+
+			this.loadFormResults()
 		},
 
 		/**
@@ -568,17 +649,62 @@ export default {
 		 */
 		saveActiveResponseViewToLocalStorage(viewId) {
 			try {
-				localStorage.setItem(
-					`nextcloud_forms_${this.form.hash}_activeResponseView`,
-					viewId,
-				)
+				const storageKey = this.getActiveResponseViewStorageKey()
+				if (!storageKey) {
+					return
+				}
+
+				localStorage.setItem(storageKey, viewId)
 			} catch (err) {
 				logger.debug('Error saving activeResponseView to localStorage', {
 					error: err,
 				})
 			}
 		},
 
+		/**
+		 * Build the localStorage key for the active response view.
+		 *
+		 * @return {string|null}
+		 */
+		getActiveResponseViewStorageKey() {
+			const formHash = this.form?.hash
+			if (!formHash) {
+				return null
+			}
+
+			return `nextcloud_forms_${formHash}_activeResponseView`
+		},
+
+		/**
+		 * Navigate to an explicit route query for the selected response view.
+		 *
+		 * @param {object} view The selected response view object
+		 */
+		async onChangeResponseView(view) {
+			if (!view?.id) {
+				return
+			}
+			if (this.getRouteResponseViewId() === view.id) {
+				this.loadFormResults()
+				return
+			}
+
+			try {
+				await this.$router.push({
+					name: 'results',
+					params: {
+						hash: this.form.hash,
+					},
+					query: {
+						[view.id]: null,
+					},
+				})
+			} catch (error) {
+				logger.debug('Navigation cancelled', { error })
+			}
+		},
+
 		async onUnlinkFile() {
 			await axios.patch(
 				generateOcsUrl('apps/forms/api/v3/forms/{formId}', {
