Chore: Refactor submission handling in Results.vue

src/components/Results/ResultsSummary.vue

@@ -32,7 +32,7 @@
 				<meter
 					:id="`option-${option.questionId}-${option.id}`"
 					min="0"
-					:max="submissions?.length"
+					:max="submissions.length"
 					:value="option.count" />
 			</li>
 		</ol>
@@ -113,7 +113,7 @@ export default {
 			})
 
 			// Go through submissions to check which options have how many responses
-			this.submissions?.forEach((submission) => {
+			this.submissions.forEach((submission) => {
 				const answers = submission.answers.filter(
 					(answer) => answer.questionId === this.question.id,
 				)
@@ -151,7 +151,7 @@ export default {
 			questionOptionsStats.forEach((questionOptionsStat) => {
 				// Fill percentage values
 				questionOptionsStat.percentage = Math.round(
-					(100 * questionOptionsStat.count) / this.submissions?.length,
+					(100 * questionOptionsStat.count) / this.submissions.length,
 				)
 				// Mark all best results. First one is best for sure due to sorting
 				questionOptionsStat.best =
@@ -169,7 +169,7 @@ export default {
 			let noResponseCount = 0
 
 			// Go through submissions to check which options have how many responses
-			this.submissions?.forEach((submission) => {
+			this.submissions.forEach((submission) => {
 				const answers = submission.answers.filter(
 					(answer) => answer.questionId === this.question.id,
 				)
@@ -199,7 +199,7 @@ export default {
 
 			// Calculate no response percentage
 			const noResponsePercentage = Math.round(
-				(100 * noResponseCount) / this.submissions?.length,
+				(100 * noResponseCount) / this.submissions.length,
 			)
 			answersModels.unshift({
 				id: 0,

src/views/Results.vue

@@ -43,7 +43,7 @@
 				<p>
 					{{
 						t('forms', '{amount} responses', {
-							amount: form.submissions?.length ?? 0,
+							amount: submissions.length ?? 0,
 						})
 					}}
 				</p>
@@ -193,19 +193,19 @@
 			<!-- Summary view for visualization -->
 			<section v-else-if="activeResponseView.id === 'summary'">
 				<ResultsSummary
-					v-for="question in form.questions"
+					v-for="question in questions"
 					:key="question.id"
 					:question="question"
-					:submissions="form.submissions" />
+					:submissions="submissions" />
 			</section>
 
 			<!-- Responses view for individual responses -->
 			<section v-else>
 				<Submission
-					v-for="submission in form.submissions"
+					v-for="submission in submissions"
 					:key="submission.id"
 					:submission="submission"
-					:questions="form.questions"
+					:questions="questions"
 					:can-delete-submission="canDeleteSubmissions"
 					@delete="deleteSubmission(submission.id)" />
 			</section>
@@ -339,6 +339,9 @@ export default {
 		return {
 			activeResponseView: responseViews[0],
 
+			questions: [],
+			submissions: [],
+
 			isDownloadActionOpened: false,
 			loadingResults: true,
 
@@ -404,7 +407,7 @@ export default {
 		},
 
 		noSubmissions() {
-			return this.form.submissions?.length === 0
+			return this.submissions.length === 0
 		},
 
 		/**
@@ -486,8 +489,8 @@ export default {
 				)
 
 				// Append questions & submissions
-				this.$set(this.form, 'submissions', loadedSubmissions)
-				this.$set(this.form, 'questions', loadedQuestions)
+				this.submissions = loadedSubmissions
+				this.questions = loadedQuestions
 			} catch (error) {
 				logger.error('Error while loading results', { error })
 				showError(t('forms', 'There was an error while loading the results'))
@@ -639,10 +642,10 @@ export default {
 					),
 				)
 				showSuccess(t('forms', 'Submission deleted'))
-				const index = this.form.submissions.findIndex(
+				const index = this.submissions.findIndex(
 					(search) => search.id === id,
 				)
-				this.form.submissions.splice(index, 1)
+				this.submissions.splice(index, 1)
 				emit('forms:last-updated:set', this.form.id)
 			} catch (error) {
 				logger.error(`Error while removing response ${id}`, { error })
@@ -667,7 +670,7 @@ export default {
 						id: this.form.id,
 					}),
 				)
-				this.form.submissions = []
+				this.submissions = []
 				emit('forms:last-updated:set', this.form.id)
 			} catch (error) {
 				logger.error('Error while removing responses', { error })