matestack-ui-core 0.7.2.1 → 1.0.0.rc.1

data/app/concepts/matestack/ui/core/dfn/dfn.rb

@@ -0,0 +1,6 @@
+module Matestack::Ui::Core::Dfn
+  class Dfn < Matestack::Ui::Core::Component::Static
+    
+  end
+end
+    

data/app/concepts/matestack/ui/core/dialog/dialog.haml

@@ -0,0 +1,5 @@
+%dialog{@tag_attributes}
+  - if options[:text].blank? && block_given?
+    = yield
+  - else
+    = options[:text]

data/app/concepts/matestack/ui/core/dialog/dialog.rb

@@ -0,0 +1,9 @@
+module Matestack::Ui::Core::Dialog
+  class Dialog < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        "open": options[:open] ||= nil
+      })
+    end
+  end
+end

data/app/concepts/matestack/ui/core/dl/dl.haml

@@ -0,0 +1,5 @@
+%dl{@tag_attributes}
+  - if options[:text].nil? && block_given?
+    = yield
+  - else
+    = options[:text]

data/app/concepts/matestack/ui/core/dl/dl.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Dl
+  class Dl < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/dt/dt.haml

@@ -0,0 +1,5 @@
+%dt{@tag_attributes}
+  - if options[:text].nil? && block_given?
+    = yield
+  - else
+    = options[:text]

data/app/concepts/matestack/ui/core/dt/dt.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Dt
+  class Dt < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/em/em.haml

@@ -0,0 +1,5 @@
+%em{@tag_attributes}
+  - if options[:text].nil? && block_given?
+    = yield
+  - else
+    = options[:text]

data/app/concepts/matestack/ui/core/em/em.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Em
+  class Em < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/fieldset/fieldset.haml

@@ -0,0 +1,5 @@
+%fieldset{@tag_attributes}
+  -if options[:text].nil? && block_given?
+    = yield
+  - else 
+    = options[:text]

data/app/concepts/matestack/ui/core/fieldset/fieldset.rb

@@ -0,0 +1,9 @@
+module Matestack::Ui::Core::Fieldset
+  class Fieldset < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        disabled: options[:disabled]
+      })
+    end
+  end
+end

data/app/concepts/matestack/ui/core/figure/figure.haml

@@ -0,0 +1,3 @@
+%figure{@tag_attributes}
+  - if block_given?
+    = yield

data/app/concepts/matestack/ui/core/figure/figure.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Figure
+  class Figure < Matestack::Ui::Core::Component::Static
+
+  end
+end

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

@@ -0,0 +1,79 @@
+require_relative '../utils'
+require_relative '../has_input_html_attributes'
+require_relative '../has_errors'
+module Matestack::Ui::Core::Form::Checkbox
+  class Checkbox < Matestack::Ui::Core::Component::Static
+    include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasInputHtmlAttributes
+    include Matestack::Ui::Core::Form::HasErrors
+
+    requires :key
+    optional :value, :false_value, :multiple, :init, for: { as: :input_for }, label: { as: :input_label }, options: { as: :checkbox_options }
+
+    def response
+      # multiple values
+      if checkbox_options
+        checkbox_options.to_a.each do |item|
+          input html_attributes.merge(
+            attributes: vue_attributes,
+            type: :checkbox,
+            id: "#{id_for_item(item_value(item))}",
+            name: item_name(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), 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
+    end
+
+    def vue_attributes
+      (options[:attributes] || {}).merge({
+        "@change": change_event,
+        ref: "select.multiple.#{attr_key}",
+        'init-value': init_value,
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+        'value-type': value_type,
+        "#{v_model_type}": input_key,
+      })
+    end
+
+    def value_type
+      item_value(checkbox_options.first).is_a?(Integer) ? Integer : nil
+    end
+
+    def item_value(item)
+      item.is_a?(Array) ? item.last : item
+    end
+
+    def item_name(item)
+      item.is_a?(Array) ? item.first : item
+    end
+
+    def checked_value
+      value || 1
+    end
+
+    def v_model_type
+      if checkbox_options && checkbox_options.first.is_a?(Integer)
+        'v-model.number'
+      else
+        'v-model'
+      end
+    end
+
+    def change_event
+      "inputChanged('#{attr_key}')"
+    end
+
+    def id_for_item(value)
+      "#{html_attributes[:id]}_#{value}"
+    end
+
+  end
+end

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

@@ -1,136 +1,306 @@
-import Vue from 'vue/dist/vue.esm'
-import Vuex from 'vuex'
-import axios from 'axios'
+import Vue from "vue/dist/vue.esm";
+import Vuex from "vuex";
+import axios from "axios";
 
-import matestackEventHub from 'js/event-hub'
-
-import componentMixin from 'component/component'
+import matestackEventHub from "../js/event-hub";
+import componentMixin from "../component/component";
 
 const componentDef = {
   mixins: [componentMixin],
-  data: function(){
+  data: function () {
     return {
       data: {},
-      showInlineForm: false,
-      errors: {}
-    }
+      errors: {},
+      loading: false
+    };
   },
   methods: {
-    initDataKey: function(key, initValue){
+    initDataKey: function (key, initValue) {
       this.data[key] = initValue;
     },
-    inputChanged: function(key){
-      this.resetErrors(key)
+    inputChanged: function (key) {
+      this.resetErrors(key);
     },
-    updateFormValue: function(key, value){
+    updateFormValue: function (key, value) {
       this.data[key] = value;
     },
-    resetErrors: function(key){
-      if (this.errors[key]){
-        this.errors[key] = null;
+    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;
     },
-    launchInlineForm: function(key, value){
-      this.showInlineForm = true;
-      this.data[key] = value;
-      const self = this;
-      setTimeout(function () {
-        self.$refs.inlineinput.focus();
-      }, 300);
+    resetErrors: function (key) {
+      if (this.errors[key]) {
+        this.errors[key] = null;
+      }
     },
-    closeInlineForm: function(){
-      this.showInlineForm = false;
+    setProps: function (flat, newVal) {
+      for (var i in flat) {
+        if (flat[i] === null){
+          flat[i] = newVal;
+        } else if (flat[i] instanceof File){
+          flat[i] = newVal;
+          this.$refs["input."+i].value = newVal
+        } else if (flat[i] instanceof Array) {
+          if(flat[i][0] instanceof File){
+            flat[i] = newVal
+            this.$refs["input."+i].value = newVal
+          }
+        } else if (typeof flat[i] === "object" && !(flat[i] instanceof Array)) {
+          setProps(flat[i], newVal);
+        } else {
+          flat[i] = newVal;
+        }
+      }
     },
-    setProps: function(flat, newVal){
-       for(var i in flat){
-         if((typeof flat[i] === "object") && !(flat[i] instanceof Array)){
-           setProps(flat[i], newVal);
-           return;
-         } else {
-           flat[i] = newVal;
-         }
+    filesAdded: function (key) {
+      const dataTransfer = event.dataTransfer || event.target;
+      const files = dataTransfer.files;
+      if (event.target.attributes.multiple) {
+        this.data[key] = [];
+        for (let index in files) {
+          if (files[index] instanceof File) {
+            this.data[key].push(files[index]);
+          }
+        }
+      } else {
+        this.data[key] = files[0];
       }
     },
-    initValues: function(){
+    initValues: function () {
       let self = this;
-      let data = {}
+      let data = {};
       for (let key in self.$refs) {
-        let initValue = self.$refs[key]["attributes"]["init-value"]
-        let valueType = self.$refs[key]["attributes"]["value-type"]
+        let initValue = self.$refs[key]["attributes"]["init-value"];
+        let valueType = self.$refs[key]["attributes"]["value-type"];
 
-        if (key.startsWith("input.")){
-          if(initValue){
-            data[key.replace('input.', '')] = initValue["value"]
-          }else{
-            data[key.replace('input.', '')] = null
+        if (key.startsWith("input.")) {
+          if (initValue) {
+            data[key.replace("input.", "")] = initValue["value"];
+          } else {
+            data[key.replace("input.", "")] = null;
           }
         }
-        if (key.startsWith("select.")){
-          if (key.startsWith("select.multiple.")){
-            if(initValue){
-              data[key.replace('select.multiple.', '')] = JSON.parse(initValue["value"])
-            }else{
-              data[key.replace('select.multiple.', '')] = []
+        if (key.startsWith("select.")) {
+          if (key.startsWith("select.multiple.")) {
+            if (initValue) {
+              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
+            } else {
+              data[key.replace("select.multiple.", "")] = [];
             }
-          }else{
-            if(initValue){
-              if(valueType && valueType["value"] == "Integer")
-                data[key.replace('select.', '')] = parseInt(initValue["value"])
-              else{
-                data[key.replace('select.', '')] = initValue["value"]
+          } else {
+            if (initValue) {
+              if (valueType && valueType["value"] == "Integer") data[key.replace("select.", "")] = parseInt(initValue["value"]);
+              else {
+                data[key.replace("select.", "")] = initValue["value"];
               }
-            }else{
-              data[key.replace('select.', '')] = null
+            } else {
+              data[key.replace("select.", "")] = null;
             }
           }
-
         }
       }
       self.data = data;
     },
+    shouldResetFormOnSuccessfulSubmit() {
+      const self = this;
+      if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["reset"] != undefined) {
+        return self.componentConfig["success"]["reset"];
+      } else {
+        return self.shouldResetFormOnSuccessfulSubmitByDefault();
+      }
+    },
+    shouldResetFormOnSuccessfulSubmitByDefault() {
+      const self = this;
+      if (self.componentConfig["method"] == "put") {
+        return false;
+      } else {
+        return true;
+      }
+    },
     perform: function(){
       const self = this
-      let payload = {}
-      payload[self.componentConfig["for"]] = self.data
-      axios({
-        method: self.componentConfig["method"],
-        url: self.componentConfig["submit_path"],
-        data: payload,
-        headers: {
-          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
-        }
-      })
-      .then(function(response){
-        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
-          matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
-        }
-        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["transition"] != undefined && self.$store != undefined) {
-          let path = self.componentConfig["success"]["transition"]["path"]
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
-        }
-        self.setProps(self.data, null);
-        self.initValues()
-        self.showInlineForm = false;
-      })
-      .catch(function(error){
-        if(error.response && error.response.data && error.response.data.errors){
-          self.errors = error.response.data.errors;
+      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"]);
         }
-        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
-          matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
+        if (self.componentConfig["delay"] != undefined) {
+          setTimeout(function () {
+            self.sendRequest()
+          }, parseInt(self.componentConfig["delay"]));
+        } else {
+          self.sendRequest()
         }
-        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
-          let path = self.componentConfig["failure"]["transition"]["path"]
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+      } else {
+        matestackEventHub.$emit('static_form_errors');
+      }
+    },
+    sendRequest: function(){
+      const self = this;
+      let payload = {};
+      payload[self.componentConfig["for"]] = self.data;
+      let axios_config = {};
+      if (self.componentConfig["multipart"] == true ) {
+        let form_data = new FormData();
+        for (let key in self.data) {
+          if (key.endsWith("[]")) {
+            for (let i in self.data[key]) {
+              let file = self.data[key][i];
+              form_data.append(self.componentConfig["for"] + "[" + key.slice(0, -2) + "][]", file);
+            }
+          } else {
+            if (self.data[key] != null){
+              form_data.append(self.componentConfig["for"] + "[" + key + "]", self.data[key]);
+            }
+          }
         }
-      })
-    }
+        axios_config = {
+          method: self.componentConfig["method"],
+          url: self.componentConfig["submit_path"],
+          data: form_data,
+          headers: {
+            "X-CSRF-Token": document.getElementsByName("csrf-token")[0].getAttribute("content"),
+            "Content-Type": "multipart/form-data",
+          },
+        };
+      } else {
+        axios_config = {
+          method: self.componentConfig["method"],
+          url: self.componentConfig["submit_path"],
+          data: payload,
+          headers: {
+            "X-CSRF-Token": document.getElementsByName("csrf-token")[0].getAttribute("content"),
+            "Content-Type": "application/json",
+          },
+        };
+      }
+      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);
+          }
+          // transition handling
+          if (self.componentConfig["success"] != undefined
+            && self.componentConfig["success"]["transition"] != undefined
+            && (
+              self.componentConfig["success"]["transition"]["follow_response"] == undefined
+              ||
+              self.componentConfig["success"]["transition"]["follow_response"] === false
+            )
+            && self.$store != undefined
+          ) {
+            let path = self.componentConfig["success"]["transition"]["path"]
+            self.$store.dispatch('navigateTo', {url: path, backwards: false})
+            return;
+          }
+          if (self.componentConfig["success"] != undefined
+            && self.componentConfig["success"]["transition"] != undefined
+            && self.componentConfig["success"]["transition"]["follow_response"] === true
+            && self.$store != undefined
+          ) {
+            let path = response.data["transition_to"] || response.request.responseURL
+            self.$store.dispatch('navigateTo', {url: path, backwards: false})
+            return;
+          }
+          // redirect handling
+          if (self.componentConfig["success"] != undefined
+            && self.componentConfig["success"]["redirect"] != undefined
+            && (
+              self.componentConfig["success"]["redirect"]["follow_response"] == undefined
+              ||
+              self.componentConfig["success"]["redirect"]["follow_response"] === false
+            )
+            && self.$store != undefined
+          ) {
+            let path = self.componentConfig["success"]["redirect"]["path"]
+            window.location.href = path
+            return;
+          }
+          if (self.componentConfig["success"] != undefined
+            && self.componentConfig["success"]["redirect"] != undefined
+            && self.componentConfig["success"]["redirect"]["follow_response"] === true
+            && self.$store != undefined
+          ) {
+            let path = response.data["redirect_to"] || response.request.responseURL
+            window.location.href = path
+            return;
+          }
+
+          if (self.shouldResetFormOnSuccessfulSubmit())
+          {
+            self.setProps(self.data, null);
+            self.initValues();
+          }
+        })
+        .catch(function (error) {
+          self.loading = false;
+          if (error.response && error.response.data && error.response.data.errors) {
+            self.errors = error.response.data.errors;
+          }
+          if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
+            matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
+          }
+          // transition handling
+          if (self.componentConfig["failure"] != undefined
+            && self.componentConfig["failure"]["transition"] != undefined
+            && (
+              self.componentConfig["failure"]["transition"]["follow_response"] == undefined
+              ||
+              self.componentConfig["failure"]["transition"]["follow_response"] === false
+            )
+            && self.$store != undefined
+          ) {
+            let path = self.componentConfig["failure"]["transition"]["path"]
+            self.$store.dispatch('navigateTo', {url: path, backwards: false})
+            return;
+          }
+          if (self.componentConfig["failure"] != undefined
+            && self.componentConfig["failure"]["transition"] != undefined
+            && self.componentConfig["failure"]["transition"]["follow_response"] === true
+            && self.$store != undefined
+          ) {
+            let path = error.response.data["transition_to"] || response.request.responseURL
+            self.$store.dispatch('navigateTo', {url: path, backwards: false})
+            return;
+          }
+          // redirect handling
+          if (self.componentConfig["failure"] != undefined
+            && self.componentConfig["failure"]["redirect"] != undefined
+            && (
+              self.componentConfig["failure"]["redirect"]["follow_response"] == undefined
+              ||
+              self.componentConfig["failure"]["redirect"]["follow_response"] === false
+            )
+            && self.$store != undefined
+          ) {
+            let path = self.componentConfig["failure"]["redirect"]["path"]
+            window.location.href = path
+            return;
+          }
+          if (self.componentConfig["failure"] != undefined
+            && self.componentConfig["failure"]["redirect"] != undefined
+            && self.componentConfig["failure"]["redirect"]["follow_response"] === true
+            && self.$store != undefined
+          ) {
+            let path = error.response.data["redirect_to"] || response.request.responseURL
+            window.location.href = path
+            return;
+          }
+        });
+    },
+  },
+  mounted: function () {
+    this.initValues();
   },
-  mounted: function(){
-    this.initValues()
-  }
-}
+};
 
-let component = Vue.component('matestack-ui-core-form', componentDef)
+let component = Vue.component("matestack-ui-core-form", componentDef);
 
-export default componentDef
+export default componentDef;