added form loading state and form classes, fixed error rendering bug on checkboxes

Author: jonasjabari

app/concepts/matestack/ui/core/form/checkbox/checkbox.rb

@@ -15,18 +15,18 @@ def response
       if checkbox_options
         checkbox_options.to_a.each do |item|
           input html_attributes.merge(
-            attributes: vue_attributes, 
+            attributes: vue_attributes,
             type: :checkbox,
             id: "#{id_for_item(item_value(item))}",
             name: item_name(item),
-            value: item_value(item),
+            value: item_value(item)
           )
           label text: item_name(item), for: id_for_item(item_value(item))
         end
         # checked/unchecked checkbox
-      else 
-        form_input type: :hidden, key: key, value: (false_value || 0)
-        form_input type: :checkbox, key: key, value: checked_value, id: id_for_item(value)
+      else
+        form_input type: :hidden, key: key, value: (false_value || 0), errors: false
+        form_input type: :checkbox, key: key, value: checked_value, id: id_for_item(value), errors: false
         label text: input_label, for: id_for_item(value)
       end
       render_errors

app/concepts/matestack/ui/core/form/form.js

@@ -11,6 +11,7 @@ const componentDef = {
     return {
       data: {},
       errors: {},
+      loading: false
     };
   },
   methods: {
@@ -23,6 +24,15 @@ const componentDef = {
     updateFormValue: function (key, value) {
       this.data[key] = value;
     },
+    hasErrors: function(){
+      //https://stackoverflow.com/a/27709663/13886137
+      for (var key in this.errors) {
+        if (this.errors[key] !== null && this.errors[key] != ""){
+          return true;
+        }
+      }
+      return false;
+    },
     resetErrors: function (key) {
       if (this.errors[key]) {
         this.errors[key] = null;
@@ -116,6 +126,7 @@ const componentDef = {
       const self = this
       var form = self.$el.tagName == 'FORM' ? self.$el : self.$el.querySelector('form');
       if(form.checkValidity()){
+        self.loading = true;
         if (self.componentConfig["emit"] != undefined) {
           matestackEventHub.$emit(self.componentConfig["emit"]);
         }
@@ -171,6 +182,7 @@ const componentDef = {
       }
       axios(axios_config)
         .then(function (response) {
+          self.loading = false;
           if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
             matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
           }
@@ -228,6 +240,7 @@ const componentDef = {
           }
         })
         .catch(function (error) {
+          self.loading = false;
           if (error.response && error.response.data && error.response.data.errors) {
             self.errors = error.response.data.errors;
           }

app/concepts/matestack/ui/core/form/form.rb

@@ -28,7 +28,11 @@ def setup
             @component_config[:failure][:redirect][:path] = redirect_path options[:failure]
           end
         end
-        @tag_attributes.merge!({"@submit.prevent": true})
+        @tag_attributes.merge!({
+          "@submit.prevent": true,
+          "class": "matestack-form #{options[:class]}",
+          "v-bind:class": "{ 'has-errors': hasErrors(), 'loading': loading }"
+        })
       rescue => e
         raise "Form component could not be setted up. Reason: #{e}"
       end

app/concepts/matestack/ui/core/form/submit/submit.rb

@@ -2,7 +2,10 @@ module Matestack::Ui::Core::Form::Submit
   class Submit < Matestack::Ui::Core::Component::Static
 
     def setup
-      @tag_attributes.merge!({ "@click.prevent": "perform" })
+      @tag_attributes.merge!({
+        "@click.prevent": "perform",
+        "v-bind:class": "{ 'loading': loading }"
+        })
     end
 
   end