validation framework code working

assets/javascripts/discourse/components/realtime-validation-settings.js.es6

@@ -1,5 +1,17 @@
 import Component from "@ember/component";
 
-Component.extend({
-    
-});
+export default Component.extend({
+    init(){
+        this._super(...arguments);
+        if (!this.validations) return;
+
+        if (!this.field.validations) {
+            const validations = {};
+            this.validations.forEach((validation) => {
+                validations[validation] = {};
+            });
+
+            this.set('field.validations', EmberObject.create(validations));
+        }
+    }
+});

assets/javascripts/discourse/components/wizard-custom-field.js.es6

@@ -31,8 +31,8 @@ export default Component.extend(UndoChanges, {
   validations(type) {
     const applicableToField = [];
     for(let validation in wizardSchema.field.validations) {
-      if (wizardSchema.field.validations[validation].includes(type)) {
-        applicableToField.push(validation);
+      if (wizardSchema.field.validations[validation]["type"] === type) {
+        applicableToField.push(validation)
       }
     }
 

assets/javascripts/discourse/templates/components/realtime-validation-settings.hbs

@@ -1,15 +1,15 @@
 <div>
     <label>{{i18n 'admin.wizard.field.validations.header'}}</label>
 </div>
-
-{{#each validations as |validation|}}
-      <span class="setting-title">
-          {{i18n (concat 'admin.wizard.field.validations.' validation)}} {{input type="checkbox" }}
-      </span>
-      <div>
-        {{input type="radio"}} :before
-      </div> 
-      <div>
-        {{input type="radio"}} :after
-      </div> 
-{{/each}}
+{{#each-in field.validations as |name props|}}
+  <span class="setting-title">
+    {{i18n (concat 'admin.wizard.field.validations.' name)}}
+    {{input type="checkbox" checked=props.status }}
+  </span>
+  <div>
+    {{radio-button name=(concat name field.id) value="above" selection=props.position}} {{i18n 'admin.wizard.field.validations.above'}}
+  </div>
+  <div>
+    {{radio-button name=(concat name field.id) value="below" selection=props.position}} {{i18n 'admin.wizard.field.validations.below'}}
+  </div>
+{{/each-in}}

assets/javascripts/wizard/components/field-validators.js.es6

@@ -3,7 +3,7 @@ import { observes } from "discourse-common/utils/decorators";
 export default Component.extend({
     actions:{
         perform() {
-            this.toggleProperty('performValidation');
+            this.appEvents.trigger('custom-wizard:validate');
         }
-    }
+    },
 });

assets/javascripts/wizard/components/validator.js.es6

@@ -9,8 +9,11 @@ export default Component.extend({
     isValid: null,
     isInvalid: not('isValid'),
     layoutName: 'components/validator', // useful for sharing the template with extending components
-    @observes('perform')
-    performValidation() {
-      this.validate();
+    didInsertElement() {
+      this.appEvents.on('custom-wizard:validate', this, this.validate);
     },
+
+    willDestroyElement() {
+      this.appEvents.off('custom-wizard:validate', this, this.validate);
+    }
 });

assets/javascripts/wizard/templates/components/field-validators.hbs

@@ -1,13 +1,13 @@
 {{#if field.validations}}
-    {{#each field.validations.top as |validation|}}
-        {{validation.component field=field perform=perform}}
-    {{/each}}
+    {{#each-in field.validations.above as |name validation|}}
+        {{component validation.component field=field}}
+    {{/each-in}}
 
-    {{yield (hash perform=(action 'perform')) }}
+    {{yield (hash perform=(action 'perform'))}}
 
-    {{#each field.validations.bottom as |validation|}}
-        {{validation.component field=field perform=perform}}
-    {{/each}}
+    {{#each-in field.validations.below as |name validation|}}
+        {{component validation.component field=field}}
+    {{/each-in}}
 {{else}}
     {{yield}}
 {{/if}}

config/locales/client.en.yml

@@ -179,6 +179,8 @@ en:
           validations:
             header: "Realtime Validation Settings"
             suggested_topics: "Suggested Topics"
+            above: "Above"
+            below: "Below"
           
           type:
             text: "Text"

controllers/custom_wizard/admin/wizard.rb

@@ -64,7 +64,7 @@ class CustomWizard::AdminWizardController < CustomWizard::AdminController
       output: [],
     ]
   end
-  
+
   def save_wizard_params
     params.require(:wizard).permit(
       :id,
@@ -105,7 +105,8 @@ class CustomWizard::AdminWizardController < CustomWizard::AdminController
           :limit,
           :property,
           prefill: mapped_params,
-          content: mapped_params
+          content: mapped_params,
+          validations: {},
         ]
       ],
       actions: [

extensions/wizard_field.rb

@@ -4,6 +4,7 @@ module CustomWizardFieldExtension
               :description,
               :image,
               :key,
+              :validations,
               :min_length,
               :max_length,
               :char_counter,
@@ -20,6 +21,7 @@ module CustomWizardFieldExtension
     @description = attrs[:description]
     @image = attrs[:image]
     @key = attrs[:key]
+    @validations = attrs[:validations]
     @min_length = attrs[:min_length]
     @max_length = attrs[:max_length]
     @char_counter = attrs[:char_counter]

lib/custom_wizard/builder.rb

@@ -158,6 +158,7 @@ class CustomWizard::Builder
     params[:description] = field_template['description'] if field_template['description']
     params[:image] = field_template['image'] if field_template['image']
     params[:key] = field_template['key'] if field_template['key']
+    params[:validations] = field_template['validations'] if field_template['validations']
     params[:min_length] = field_template['min_length'] if field_template['min_length']
     params[:max_length] = field_template['max_length'] if field_template['max_length']
     params[:char_counter] = field_template['char_counter'] if field_template['char_counter']

lib/custom_wizard/field.rb

@@ -5,7 +5,8 @@ class CustomWizard::Field
         min_length: nil,
         max_length: nil,
         prefill: nil,
-        char_counter: nil
+        char_counter: nil,
+        validations: nil
       },
       textarea: {
         min_length: nil,

lib/custom_wizard/realtime_validation.rb

@@ -1,7 +1,7 @@
 class CustomWizard::RealtimeValidation
     cattr_accessor :types
       @@types ||= {
-        suggested_topics: [:text]
+        suggested_topics: {type: :text, component: "alpha-validator"}
       }
   end
   

serializers/custom_wizard/wizard_field_serializer.rb

@@ -8,6 +8,7 @@ class CustomWizard::FieldSerializer < ::WizardFieldSerializer
              :limit,
              :property,
              :content,
+             :validations,
              :max_length,
              :char_counter,
              :number
@@ -58,6 +59,17 @@ class CustomWizard::FieldSerializer < ::WizardFieldSerializer
     object.choices.present?
   end
 
+  def validations
+    validations = {}
+    object.validations&.each do |name, props|
+      next unless props["status"]
+      validations[props["position"]] ||= {}
+      validations[props["position"]][name] = props.merge CustomWizard::RealtimeValidation.types[name.to_sym]
+    end
+
+    validations
+  end
+
   def max_length
     object.max_length
   end