Fix(T33788): display only unique fields in the error message (#634)

* Fix(T33788): This PR fixes the issue with incorrect field names in the error message: [object Set] JavaScript Set was used for storing a collection of unique fields. However it does not work correctly after installing a new version of demosplan-ui in demosplan core.. use filter() function to display only unique fields --------- Co-authored-by: salisdemos <40487461+salisdemos@users.noreply.github.com>
demos-europe · Nov 9, 2023 · 67a604b · 67a604b
1 parent a2c934c
commit 67a604b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,9 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 ## UNRELEASED
 
+### Changed
+- ([#634](https://github.com/demos-europe/demosplan-ui/pull/634)) Use filter() function to show unique fields in the error messages instead of using Javascript Set ([@sakutademos](https://github.com/sakutademos))
+
 ## v0.3 - 2023-11-08
 
 ### Removed

diff --git a/src/lib/validation/utils/assignHandlerForTrigger.js b/src/lib/validation/utils/assignHandlerForTrigger.js
@@ -45,17 +45,17 @@ export default function assignHandlerForTrigger (triggerButton, form) {
       invalidCustomErrorFields.forEach(field => {
         dplan.notify.notify('error', Translator.trans(field.validationMessage))
       })
-      const nonEmptyFieldNames = [...new Set(
-        validatedForm.invalidFields
+
+      if (invalidCustomErrorFields.length === 0 || invalidCustomErrorFields.length < validatedForm.invalidFields) {
+        const nonEmptyUniqueFieldNames = validatedForm.invalidFields
           .map(field => field.getAttribute('data-dp-validate-error-fieldname'))
           .filter(Boolean)
-      )]
+          .filter((field, idx, arr) => arr.indexOf(field) === idx)
 
-      if (invalidCustomErrorFields.length === 0 || invalidCustomErrorFields.length < validatedForm.invalidFields) {
-        const fieldsString = nonEmptyFieldNames ? nonEmptyFieldNames.join(', ') : ' '
+        const fieldsString = nonEmptyUniqueFieldNames ? nonEmptyUniqueFieldNames.join(', ') : ' '
         const errorMandatoryFields = de.error.mandatoryFields.intro + fieldsString + de.error.mandatoryFields.outro
 
-        nonEmptyFieldNames.length ? dplan.notify.notify('error', errorMandatoryFields) : dplan.notify.notify('error', de.error.mandatoryFields.default)
+        nonEmptyUniqueFieldNames.length ? dplan.notify.notify('error', errorMandatoryFields) : dplan.notify.notify('error', de.error.mandatoryFields.default)
       }
 
       scrollToVisibleElement(validatedForm.invalidFields[0])

diff --git a/src/mixins/dpValidateMixin.js b/src/mixins/dpValidateMixin.js
@@ -45,14 +45,13 @@ export default {
         customErrors.forEach(error => dplan.notify.notify('error', Translator.trans(error)))
 
         if (customErrors.length === 0) {
-          const nonEmptyFieldNames = [...new Set(
-            invalidFields
-              .map(field => field.getAttribute('data-dp-validate-error-fieldname'))
-              .filter(Boolean)
-          )]
+          const nonEmptyUniqueFieldNames = invalidFields
+            .map(field => field.getAttribute('data-dp-validate-error-fieldname'))
+            .filter(Boolean)
+            .filter((field, idx, arr) => arr.indexOf(field) === idx)
 
-          if (nonEmptyFieldNames.length) {
-            const fieldsString = nonEmptyFieldNames ? nonEmptyFieldNames.join(', ') : ' '
+          if (nonEmptyUniqueFieldNames.length) {
+            const fieldsString = nonEmptyUniqueFieldNames ? nonEmptyUniqueFieldNames.join(', ') : ' '
             const errorMandatoryFields = de.error.mandatoryFields.intro + fieldsString + de.error.mandatoryFields.outro
             dplan.notify.notify('error', errorMandatoryFields)
           } else {