Show Answers in current order

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>

src/components/Results/Answer.vue

@@ -23,9 +23,9 @@
 <template>
 	<div class="answer">
 		<h4 class="question-text">
-			{{ question.text }}
+			{{ questionText }}
 		</h4>
-		<p>{{ answer.text }}</p>
+		<p>{{ answerText }}</p>
 	</div>
 </template>
 
@@ -34,12 +34,12 @@ export default {
 	name: 'Answer',
 
 	props: {
-		answer: {
-			type: Object,
+		answerText: {
+			type: String,
 			required: true,
 		},
-		question: {
-			type: Object,
+		questionText: {
+			type: String,
 			required: true,
 		},
 	},

src/components/Results/Submission.vue

@@ -35,10 +35,10 @@
 		</p>
 
 		<Answer
-			v-for="answer in squashedAnswers"
-			:key="answer.questionId"
-			:answer="answer"
-			:question="questionToAnswer(answer.questionId)" />
+			v-for="question in answeredQuestions"
+			:key="question.id"
+			:answer-text="question.squashedAnswers"
+			:question-text="question.text" />
 	</div>
 </template>
 
@@ -70,30 +70,37 @@ export default {
 	},
 
 	computed: {
+		// Format submission-timestamp to DateTime
 		submissionDateTime() {
 			return moment(this.submission.timestamp, 'X').format('LLLL')
 		},
-		squashedAnswers() {
-			const squashedArray = []
 
-			this.submission.answers.forEach(answer => {
-				const index = squashedArray.findIndex(ansSq => ansSq.questionId === answer.questionId)
-				if (index > -1) {
-					squashedArray[index].text = squashedArray[index].text.concat('; ' + answer.text)
-				} else {
-					squashedArray.push(answer)
+		/**
+		 * Join answered Questions with corresponding answers.
+		 * Multiple answers to a question are squashed into one string.
+		 * @returns {Array}
+		 */
+		answeredQuestions() {
+			const answeredQuestionsArray = []
+
+			this.questions.forEach(question => {
+				const answers = this.submission.answers.filter(answer => answer.questionId === question.id)
+				if (!answers.length) {
+					return // no answers, go to next question
 				}
-			})
+				const squashedAnswers = answers.map(answer => answer.text).join('; ')
 
-			return squashedArray
+				answeredQuestionsArray.push({
+					'id': question.id,
+					'text': question.text,
+					'squashedAnswers': squashedAnswers,
+				})
+			})
+			return answeredQuestionsArray
 		},
 	},
 
 	methods: {
-		questionToAnswer(questionId) {
-			return this.questions.find(question => question.id === questionId)
-		},
-
 		onDelete() {
 			this.$emit('delete')
 		},

src/views/Results.vue

@@ -232,13 +232,14 @@ export default {
 					timestamp: moment(submission.timestamp, 'X').format('L LT'),
 				}
 
-				submission.answers.forEach(answer => {
-					const questionText = this.form.questions.find(question => question.id === answer.questionId).text
-					if (questionText in formattedSubmission) {
-						formattedSubmission[questionText] = formattedSubmission[questionText].concat('; ').concat(answer.text)
-					} else {
-						formattedSubmission[questionText] = answer.text
+				this.form.questions.forEach(question => {
+					const questionText = question.text
+					const answers = submission.answers.filter(answer => answer.questionId === question.id)
+					if (!answers.length) {
+						return // no answers, go to next question
 					}
+					const squashedAnswers = answers.map(answer => answer.text).join('; ')
+					formattedSubmission[questionText] = squashedAnswers
 				})
 				formattedSubmissions.push(formattedSubmission)
 			})