fix(exams): prevent double-submit from creating duplicate exams
Deploy banu-front / deploy (push) Successful in 2m3s
Deploy banu-front / deploy (push) Successful in 2m3s
The submit button only disabled after Vue re-rendered on mutation pending state, leaving a window where a fast double-click fired onSubmit twice — creating two exam rows, with the losing request usually failing to attach its questions (an "empty" duplicate exam).
This commit is contained in:
@@ -283,8 +283,11 @@ const addExamMutation = useAddAdminExamMutation()
|
|||||||
const updateExamMutation = useUpdateAdminExamMutation()
|
const updateExamMutation = useUpdateAdminExamMutation()
|
||||||
const addQuestionMutation = useAddAdminExamQuestionMutation()
|
const addQuestionMutation = useAddAdminExamQuestionMutation()
|
||||||
|
|
||||||
|
const isSubmitting = ref(false)
|
||||||
|
|
||||||
const submitting = computed(
|
const submitting = computed(
|
||||||
() =>
|
() =>
|
||||||
|
isSubmitting.value ||
|
||||||
addExamMutation.isPending.value ||
|
addExamMutation.isPending.value ||
|
||||||
updateExamMutation.isPending.value ||
|
updateExamMutation.isPending.value ||
|
||||||
addQuestionMutation.isPending.value
|
addQuestionMutation.isPending.value
|
||||||
@@ -298,6 +301,9 @@ const postQuestionsSequentially = async (id, list) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onSubmit = async () => {
|
const onSubmit = async () => {
|
||||||
|
if (isSubmitting.value) return
|
||||||
|
isSubmitting.value = true
|
||||||
|
try {
|
||||||
const { isValid } = await validate(form.value)
|
const { isValid } = await validate(form.value)
|
||||||
const newQuestions = validateLocalQuestions()
|
const newQuestions = validateLocalQuestions()
|
||||||
if (!isValid || !newQuestions) return
|
if (!isValid || !newQuestions) return
|
||||||
@@ -315,6 +321,9 @@ const onSubmit = async () => {
|
|||||||
}
|
}
|
||||||
await queryClient.invalidateQueries({ queryKey: adminExamsKeys.all, refetchType: 'all' })
|
await queryClient.invalidateQueries({ queryKey: adminExamsKeys.all, refetchType: 'all' })
|
||||||
router.push({ name: 'admin-exams' })
|
router.push({ name: 'admin-exams' })
|
||||||
|
} finally {
|
||||||
|
isSubmitting.value = false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onCancel = () => router.push({ name: 'admin-exams' })
|
const onCancel = () => router.push({ name: 'admin-exams' })
|
||||||
|
|||||||
Reference in New Issue
Block a user