feat(admin): Improve validation/requirements in Tabulator Input

Changed: - When column is required, a red asterisk is appended to the column title. - Column title will be prepended to the row index in the validation feedback message. - Duplicate validation messages will be suppressed to minimize noise.
charcoalphp · Mar 12, 2024 · 13b33d4 · 13b33d4
1 parent 81393f6
commit 13b33d4
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 7 deletions.
diff --git a/packages/admin/assets/dist/scripts/charcoal.admin.js b/packages/admin/assets/dist/scripts/charcoal.admin.js
@@ -12523,6 +12523,13 @@ Charcoal.Admin.Property_Input_Selectize_Tags.prototype.init_clipboard = function
             };
         }
 
+        if (
+            column?.validator === 'required' ||
+            (Array.isArray(column?.validator) && column.validator.includes('required'))
+        ) {
+            column.title += ' <span class="text-danger">*</span>';
+        }
+
         return column;
     };
 
@@ -12835,20 +12842,33 @@ Charcoal.Admin.Property_Input_Selectize_Tags.prototype.init_clipboard = function
 
         const propLabel = document.querySelector('label[for="' + this.input_id.replace(/_[a-z]{2}$/, '') + '"]').textContent;
 
+        const uniqueMessagesPerRow = {};
+
         validity.forEach((cellComponent) => {
             const rowComponent = cellComponent.getRow();
-            const rowIndex     = (rowComponent.getIndex() ?? (rowComponent.getPosition(true) + 1));
+            const colComponent = cellComponent.getColumn();
 
-            const fieldLabel  = `${propLabel || this.tabulator_input.name} #${rowIndex}`;
+            const colTitle = colComponent.getElement().textContent.replace(/\s+\*$/, '').trim();
+            const rowIndex = (rowComponent.getIndex() ?? (rowComponent.getPosition(true) + 1));
+
+            const fieldLabel  = `${propLabel || this.tabulator_input.name} ${colTitle} #${rowIndex}`;
             const constraints = cellComponent._getSelf().modules.validate.invalid ?? [];
 
+            uniqueMessagesPerRow[rowIndex] ??= {};
+
             constraints.forEach((constraint) => {
-                let message = (
+                const message = (
                     constraint.parameters?.validationMessage ??
                     resolveTabulatorValidatorMessage(constraint) ??
                     formWidgetL10n.validation.badInput
                 );
 
+                if (uniqueMessagesPerRow?.[rowIndex]?.[message]) {
+                    return;
+                }
+
+                uniqueMessagesPerRow[rowIndex][message] = true;
+
                 Charcoal.Admin.feedback([ {
                     level:   'error',
                     message: commonL10n.errorTemplate.replaceMap({

diff --git a/packages/admin/assets/dist/scripts/charcoal.admin.min.js b/packages/admin/assets/dist/scripts/charcoal.admin.min.js
diff --git a/packages/admin/assets/src/scripts/charcoal/admin/property/input/tabulator.js b/packages/admin/assets/src/scripts/charcoal/admin/property/input/tabulator.js
@@ -274,6 +274,13 @@
             };
         }
 
+        if (
+            column?.validator === 'required' ||
+            (Array.isArray(column?.validator) && column.validator.includes('required'))
+        ) {
+            column.title += ' <span class="text-danger">*</span>';
+        }
+
         return column;
     };
 
@@ -586,20 +593,33 @@
 
         const propLabel = document.querySelector('label[for="' + this.input_id.replace(/_[a-z]{2}$/, '') + '"]').textContent;
 
+        const uniqueMessagesPerRow = {};
+
         validity.forEach((cellComponent) => {
             const rowComponent = cellComponent.getRow();
-            const rowIndex     = (rowComponent.getIndex() ?? (rowComponent.getPosition(true) + 1));
+            const colComponent = cellComponent.getColumn();
+
+            const colTitle = colComponent.getElement().textContent.replace(/\s+\*$/, '').trim();
+            const rowIndex = (rowComponent.getIndex() ?? (rowComponent.getPosition(true) + 1));
 
-            const fieldLabel  = `${propLabel || this.tabulator_input.name} #${rowIndex}`;
+            const fieldLabel  = `${propLabel || this.tabulator_input.name} ${colTitle} #${rowIndex}`;
             const constraints = cellComponent._getSelf().modules.validate.invalid ?? [];
 
+            uniqueMessagesPerRow[rowIndex] ??= {};
+
             constraints.forEach((constraint) => {
-                let message = (
+                const message = (
                     constraint.parameters?.validationMessage ??
                     resolveTabulatorValidatorMessage(constraint) ??
                     formWidgetL10n.validation.badInput
                 );
 
+                if (uniqueMessagesPerRow?.[rowIndex]?.[message]) {
+                    return;
+                }
+
+                uniqueMessagesPerRow[rowIndex][message] = true;
+
                 Charcoal.Admin.feedback([ {
                     level:   'error',
                     message: commonL10n.errorTemplate.replaceMap({