Merge pull request #3213 from NationalSecurityAgency/t#3199/cache_quiz_text_answers

T#3199/cache quiz text answers

Author: sudo-may

dashboard/pom.xml

@@ -130,6 +130,7 @@
                                 <validHeader>${basedir}/../license-add/LICENSE-HEADER_2021.txt</validHeader>
                                 <validHeader>${basedir}/../license-add/LICENSE-HEADER_2022.txt</validHeader>
                                 <validHeader>${basedir}/../license-add/LICENSE-HEADER_2023.txt</validHeader>
+                                <validHeader>${basedir}/../license-add/LICENSE-HEADER_2024.txt</validHeader>
                             </validHeaders>
                             <headerDefinitions>
                                 <headerDefinition>vue-header-style.xml</headerDefinition>

dashboard/src/common-components/utilities/UseCheckIfAnswerChangedForValidation.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2025 SkillTree
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const useCheckIfAnswerChangedForValidation = () => {
+  const cache = new Map()
+  const hasValueChanged = (newValue, testContext) => {
+    const quizAnswers = testContext?.parent.quizAnswers
+    if (quizAnswers && quizAnswers.length === 1 && quizAnswers[0].id) {
+      const answerId = quizAnswers[0].id
+      const cachedValue = cache.get(answerId)
+      if (cachedValue === newValue) {
+        return false
+      }
+      cache.set(answerId, newValue)
+    }
+    return true
+  }
+  const reset = () => {
+    cache.clear()
+  }
+  const removeAnswer = (testContext) => {
+    const quizAnswers = testContext?.parent.quizAnswers
+    if (quizAnswers && quizAnswers.length === 1 && quizAnswers[0].id) {
+      const answerId = quizAnswers[0].id
+      cache.delete(answerId)
+    }
+  }
+  return {
+    hasValueChanged,
+    removeAnswer,
+    reset
+  }
+}

dashboard/src/skills-display/components/quiz/QuizRun.vue

@@ -18,6 +18,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { object, string, number, array } from 'yup';
 import { useSkillsAnnouncer } from '@/common-components/utilities/UseSkillsAnnouncer.js'
 import { useTimeUtils } from '@/common-components/utilities/UseTimeUtils.js'
+import { useCheckIfAnswerChangedForValidation } from '@/common-components/utilities/UseCheckIfAnswerChangedForValidation.js'
 import dayjs from '@/common-components/DayJsCustomizer.js'
 import SkillsSpinner from '@/components/utils/SkillsSpinner.vue';
 
@@ -59,6 +60,7 @@ const announcer = useSkillsAnnouncer()
 const timeUtils = useTimeUtils()
 const appConfig = useAppConfig()
 const numFormat = useNumberFormat()
+const checkIfAnswerChangedForValidation = useCheckIfAnswerChangedForValidation()
 
 const isLoading = ref(true);
 const isCompleting = ref(false);
@@ -96,7 +98,7 @@ const schema = object({
                   then: (sch)  => sch
                       .trim()
                       .required((d) => `Answer to question #${getQuestionNumFromPath(d.path)} is required`)
-                      .customDescriptionValidator(null, false, null, (d) => `Answer to question #${getQuestionNumFromPath(d.path)}`),
+                      .customDescriptionValidator(null, false, null, (d) => `Answer to question #${getQuestionNumFromPath(d.path)}`, true, isSubmitting.value, errors.value),
                 }),
             'answerRating': number()
                 .when('questionType', {
@@ -266,6 +268,7 @@ const initializeFormData = (copy) => {
       answerRating: answerRating ? Number(answerRating.answerOption) : 0,
     }
   })
+  checkIfAnswerChangedForValidation.reset()
   resetForm({ values: { questions: formQuestions }, errors: {} });
 }
 const updateSelectedAnswers = (questionSelectedAnswer) => {

dashboard/src/validators/UseCustomGlobalValidators.js

@@ -18,11 +18,13 @@ import { addMethod, string } from 'yup'
 import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
 import { useDebounceFn } from '@vueuse/core'
 import { useDescriptionValidatorService } from '@/common-components/validators/UseDescriptionValidatorService.js'
+import { useCheckIfAnswerChangedForValidation } from '@/common-components/utilities/UseCheckIfAnswerChangedForValidation.js'
 import { useLog } from '@/components/utils/misc/useLog.js'
 
 export const useCustomGlobalValidators = () => {
 
   const descriptionValidatorService = useDescriptionValidatorService()
+  const checkIfAnswerChangedForValidation = useCheckIfAnswerChangedForValidation()
   const log = useLog()
 
   function customNameValidator(fieldName = '') {
@@ -42,16 +44,21 @@ export const useCustomGlobalValidators = () => {
     return this.test("customNameValidator", null, (value, context) => validateName(value, context));
   }
 
-  function customDescriptionValidator(fieldName = '', enableProjectIdParam = true, useProtectedCommunityValidator = null, fieldNameFunction = null, enableQuizIdParam = true) {
+  function customDescriptionValidator(fieldName = '', enableProjectIdParam = true, useProtectedCommunityValidator = null, fieldNameFunction = null, enableQuizIdParam = true, isSubmitting = false, errors = null) {
     const appConfig = useAppConfig()
-    const validateName = useDebounceFn((value, context) => {
+    const validateDescription = useDebounceFn((value, context) => {
       if (!value || value.trim().length === 0 || !appConfig.paragraphValidationRegex) {
         return true
       }
+      const forceAnswerValidation = isSubmitting || errors?.hasOwnProperty(context.path)
+      if (!forceAnswerValidation && !checkIfAnswerChangedForValidation.hasValueChanged(context.originalValue, context)) {
+        return true
+      }
       return descriptionValidatorService.validateDescription(value, enableProjectIdParam, useProtectedCommunityValidator, enableQuizIdParam).then((result) => {
         if (result.valid) {
           return true
         }
+        checkIfAnswerChangedForValidation.removeAnswer(context)
         let fieldNameToUse = fieldName ? fieldName : '';
         if (!fieldNameToUse && fieldNameFunction) {
           fieldNameToUse = fieldNameFunction(context);
@@ -63,7 +70,7 @@ export const useCustomGlobalValidators = () => {
       })
     }, appConfig.formFieldDebounceInMs)
 
-    return this.test("customDescriptionValidator", null, (value, context) => validateName(value, context));
+    return this.test("customDescriptionValidator", null, (value, context) => validateDescription(value, context));
   }
 
   function nullValueNotAllowed() {