Merge pull request #1316 from FahidLatheef/fix/quiz-maximum-attempts

fix: fixed bug in which user can submit quiz over the maximum limit allowed

frontend/src/components/Quiz.vue

@@ -207,7 +207,7 @@
 						</Button>
 						<Button
 							v-else-if="activeQuestion != questions.length"
-							@click="nextQuetion()"
+							@click="nextQuestion()"
 						>
 							<span>
 								{{ __('Next') }}
@@ -258,14 +258,22 @@
 			</Button>
 		</div>
 		<div
-			v-if="quiz.data.show_submission_history && attempts?.data"
+			v-if="
+				quiz.data.show_submission_history &&
+				attempts?.data &&
+				attempts.data.length > 0
+			"
 			class="mt-10"
 		>
 			<ListView
 				:columns="getSubmissionColumns()"
 				:rows="attempts?.data"
 				row-key="name"
-				:options="{ selectable: false, showTooltip: false }"
+				:options="{
+					selectable: false,
+					showTooltip: false,
+					emptyState: { title: __('No Quiz submissions found') },
+				}"
 			>
 			</ListView>
 		</div>
@@ -282,7 +290,7 @@ import {
 	FormControl,
 } from 'frappe-ui'
 import { ref, watch, reactive, inject, computed } from 'vue'
-import { createToast } from '@/utils/'
+import { createToast, showToast } from '@/utils/'
 import { CheckCircle, XCircle, MinusCircle } from 'lucide-vue-next'
 import { timeAgo } from '@/utils'
 import { useRouter } from 'vue-router'
@@ -536,7 +544,7 @@ const addToLocalStorage = () => {
 	localStorage.setItem(quiz.data.title, JSON.stringify(quizData))
 }
 
-const nextQuetion = () => {
+const nextQuestion = () => {
 	if (!quiz.data.show_answers && questionDetails.data?.type != 'Open Ended') {
 		checkAnswer()
 	} else {
@@ -574,6 +582,16 @@ const createSubmission = () => {
 				if (quiz.data && quiz.data.max_attempts) attempts.reload()
 				if (quiz.data.duration) clearInterval(timerInterval)
 			},
+			onError(err) {
+				const errorTitle = err?.message || ''
+				if (errorTitle.includes('MaximumAttemptsExceededError')) {
+					const errorMessage = err.messages?.[0] || err
+					showToast(__('Error'), __(errorMessage), 'x')
+					setTimeout(() => {
+						window.location.reload()
+					}, 3000)
+				}
+			},
 		}
 	)
 }

frontend/src/pages/QuizForm.vue

@@ -55,7 +55,7 @@
 					<FormControl
 						type="number"
 						v-model="quiz.max_attempts"
-						:label="__('Maximun Attempts')"
+						:label="__('Maximum Attempts')"
 					/>
 					<FormControl
 						type="number"

frontend/src/router.js

@@ -219,7 +219,7 @@ let router = createRouter({
 
 router.beforeEach(async (to, from, next) => {
 	const { userResource } = usersStore()
-	const { isLoggedIn } = sessionStore()
+	let { isLoggedIn } = sessionStore()
 	const { allowGuestAccess } = useSettings()
 
 	try {

frontend/src/utils/quiz.js

@@ -4,6 +4,7 @@ import { createApp, h } from 'vue'
 import { usersStore } from '../stores/user'
 import translationPlugin from '../translation'
 import { CircleHelp } from 'lucide-vue-next'
+import router from '@/router'
 
 export class Quiz {
 	constructor({ data, api, readOnly }) {
@@ -46,6 +47,7 @@ export class Quiz {
 				quiz: quiz,
 			})
 			app.use(translationPlugin)
+			app.use(router)
 			const { userResource } = usersStore()
 			app.provide('$user', userResource)
 			app.mount(this.wrapper)