matestack-ui-vuejs 3.0.0.rc1

data/lib/matestack/ui/vue_js/components/form/checkbox.rb

@@ -0,0 +1,109 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Checkbox < Matestack::Ui::VueJs::Components::Form::Base
+            vue_name 'matestack-ui-core-form-checkbox'
+
+            def response
+              div class: 'matestack-ui-core-form-checkbox' do
+                render_options
+                render_errors
+              end
+            end
+
+            def render_options
+              if checkbox_options
+                render_checkbox_options
+              else
+                render_true_false_checkbox
+              end
+            end
+
+            def component_id
+              "checkbox-component-for-#{key}"
+            end
+
+            def vue_props
+              {
+                init_value: init_value,
+                key: key,
+              }
+            end
+
+            # checkbox rendering
+
+            def render_checkbox_options
+              checkbox_options.to_a.each do |item|
+                input checkbox_attributes(item)
+                label item_label(item), ":for": item_id(item)
+              end
+            end
+
+            def checkbox_attributes(item)
+              {
+                ":id": item_id(item),
+                type: :checkbox,
+                name: item_label(item),
+                "#{value_key(item)}": item_value(item),
+                "matestack-ui-core-ref": scoped_ref("select.multiple.#{key}"),
+                'v-on:change': change_event,
+                'init-value': (init_value || []).to_json,
+                'v-bind:class': "{ '#{error_class}': #{error_key} }",
+                'value-type': value_type(item),
+                "#{v_model_type(item)}": input_key,
+              }.merge(self.options)
+            end
+
+            def render_true_false_checkbox
+              input true_false_checkbox_attributes.merge(type: :hidden, ":id": nil)
+              input true_false_checkbox_attributes.merge(type: :checkbox, ":id": item_id(1))
+              label input_label, ":for": item_id(1) if input_label
+            end
+
+            def true_false_checkbox_attributes
+              attributes.merge({
+                'init-value': init_value_for_single_input,
+              })
+            end
+
+            def init_value_for_single_input
+              if init_value == true || init_value == 1
+                return "true"
+              end
+              if init_value == false || init_value == 0
+                return "false"
+              end
+            end
+
+            # checkbox options
+
+            def checkbox_options
+              @checkbox_options ||= options.delete(:options)
+            end
+
+            # calculated attributes
+
+            def item_value(item)
+              item.is_a?(Array) ? item.last : item
+            end
+
+            def item_label(item)
+              item.is_a?(Array) ? item.first : item
+            end
+
+            def item_id(item)
+              "#{id}+'_#{item_value(item).to_s.gsub(" ", '_')}'"
+            end
+
+            def value_key(value)
+              value.is_a?(Numeric) ? ':value' : 'value'
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/form/checkbox_mixin.js

@@ -0,0 +1,90 @@
+const formCheckboxMixin = {
+  inject: [
+    'parentFormUid',
+    'parentFormData',
+    'parentFormErrors',
+    'parentFormLoading',
+    'parentFormIsNestedForm',
+    'parentFormResetErrors',
+    'parentNestedFormRuntimeId'
+  ],
+  methods: {
+    initialize: function(){
+      const self = this
+      let data = {};
+
+      for (let key in self.getRefs()) {
+        let initValue;
+        let valueType;
+
+        if (key.startsWith("select.") || key.startsWith("input.")) {
+          initValue = self.getRefs()[key]["attributes"]["init-value"];
+          valueType = self.getRefs()[key]["attributes"]["value-type"];
+        }
+
+        if (key.startsWith("select.")) {
+          if (key.startsWith("select.multiple.")) {
+            self.parentFormData[key.replace("select.multiple.", "")] = null
+            if (initValue) {
+              self.setValue(JSON.parse(initValue["value"]));
+              self.afterInitialize(JSON.parse(initValue["value"]))
+            } else {
+              self.setValue([]);
+              self.afterInitialize([]);
+            }
+          } else {
+            self.parentFormData[key.replace("select.", "")] = null
+            if (initValue) {
+              if (valueType && valueType["value"] == "Integer") {
+                self.setValue(parseInt(initValue["value"]));
+                self.afterInitialize(parseInt(initValue["value"]))
+              } else {
+                self.setValue(initValue["value"]);
+                self.afterInitialize(initValue["value"])
+              }
+            } else {
+              self.setValue(null);
+              self.afterInitialize(null)
+            }
+          }
+        } else {
+          self.parentFormData[key.replace("input.", "")] = null
+          if (initValue) {
+            if(initValue["value"] === "true"){
+              self.setValue(true);
+              self.afterInitialize(true)
+            }
+            if(initValue["value"] === "false"){
+              self.setValue(false);
+              self.afterInitialize(false)
+            }
+          } else {
+            self.setValue(null);
+            self.afterInitialize(null)
+          }
+        }
+      }
+    },
+    inputChanged: function (key) {
+      if (this.parentFormIsNestedForm){
+        this.parentFormData["_destroy"] = false;
+      }
+      this.parentFormResetErrors(key);
+    },
+    afterInitialize: function(value){
+      // can be used in the main component for further initialization steps
+    },
+    setValue: function (value){
+      this.parentFormData[this.props["key"]] = value
+    }
+  },
+  mounted: function(){
+    this.registerScopedEvent("init", this.initialize, this.parentFormUid)
+  },
+  beforeUnmount: function(){
+    this.removeScopedEvent("init", this.initialize, this.parentFormUid)
+  }
+
+}
+
+export default formCheckboxMixin

data/lib/matestack/ui/vue_js/components/form/context.rb

@@ -0,0 +1,15 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Context < ActiveSupport::CurrentAttributes
+            
+            attribute :form_context
+            
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/form/fields_for_add_item.js

@@ -0,0 +1,50 @@
+import componentMixin from "../mixin";
+import componentHelpers from "../helpers";
+
+const componentDef = {
+  mixins: [componentMixin],
+  template: componentHelpers.inlineTemplate,
+  data: function () {
+    return {};
+  },
+  inject: [
+    'parentNestedFormRuntimeTemplates',
+    'parentNestedFormRuntimeTemplateDomElements',
+    'parentNestedForms'
+  ],
+  methods: {
+    addItem: function(key){
+      var templateString = JSON.parse(this.getElement().querySelector('#prototype-template-for-'+key).dataset[":template"])
+      var tmp_dom_elem = document.createElement('div')
+      tmp_dom_elem.innerHTML = templateString
+      var static_prototype_template_uid = tmp_dom_elem.querySelector('matestack-component-template').id.replace("uid-", "")
+      var dynamic_prototype_template_uid = Math.floor(Math.random() * 1000000000);
+      var templateString = templateString.replaceAll(static_prototype_template_uid, dynamic_prototype_template_uid);
+      if (this.parentNestedFormRuntimeTemplateDomElements[key] == null){
+        var dom_elem = document.createElement('div')
+        dom_elem.innerHTML = templateString
+        var existingItemsCount;
+        if (this.parentNestedForms[key] == undefined){
+          existingItemsCount = 0
+        }else{
+          existingItemsCount = this.parentNestedForms[key].length
+        }
+        dom_elem.querySelector('.matestack-form-fields-for').id = key+"_child_"+existingItemsCount
+        this.parentNestedFormRuntimeTemplateDomElements[key] = dom_elem
+        this.parentNestedFormRuntimeTemplates[key] = this.parentNestedFormRuntimeTemplateDomElements[key].outerHTML
+      }else{
+        var dom_elem = document.createElement('div')
+        dom_elem.innerHTML = templateString
+        var existingItemsCount = this.parentNestedForms[key].length
+        dom_elem.querySelector('.matestack-form-fields-for').id = key+"_child_"+existingItemsCount
+        this.parentNestedFormRuntimeTemplateDomElements[key].insertAdjacentHTML(
+          'beforeend',
+          dom_elem.innerHTML
+        )
+        this.parentNestedFormRuntimeTemplates[key] = this.parentNestedFormRuntimeTemplateDomElements[key].outerHTML
+      }
+    }
+  }
+};
+
+export default componentDef;

data/lib/matestack/ui/vue_js/components/form/fields_for_add_item.rb

@@ -0,0 +1,35 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class FieldsForAddItem < Matestack::Ui::VueJs::Vue
+            vue_name 'matestack-ui-core-form-fields-for-add-item'
+
+            required :key
+            required :prototype
+
+            attr_accessor :prototype_template_json
+
+            def create_children(&block)
+              # first render prototype_template_json
+              self.prototype_template_json = context.prototype.call().to_json
+              # delete from children in order not to render the prototype
+              self.children.shift
+              super
+            end
+
+            def response
+              div id: "prototype-template-for-#{context.key}", "v-pre": true, data: { ":template":  self.prototype_template_json }
+              Matestack::Ui::Core::Base.new('matestack-ui-core-runtime-render', ':template': "vc.parentNestedFormRuntimeTemplates['#{context.key}']", ':vc': 'vc')
+              a class: 'matestack-ui-core-form-fields-for-add-item', "@click.prevent": "vc.addItem('#{context.key}')" do
+                yield if block_given?
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/form/fields_for_remove_item.rb

@@ -0,0 +1,19 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class FieldsForRemoveItem < Matestack::Ui::Component
+
+            def response
+              a class: 'matestack-ui-core-form-fields-for-remove-item', "@click.prevent": "vc.removeItem()" do
+                yield if block_given?
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/form/form.js

@@ -0,0 +1,276 @@
+import { inject, computed } from "vue";
+import axios from "axios";
+
+import matestackEventHub from "../../event_hub";
+import componentMixin from "../mixin";
+import componentHelpers from "../helpers";
+
+import transitionHandlingMixin from '../transition_handling_mixin'
+
+const componentDef = {
+  mixins: [componentMixin, transitionHandlingMixin],
+  template: componentHelpers.inlineTemplate,
+  data: function () {
+    return {
+      data: {},
+      errors: {},
+      loading: false,
+      isNestedForm: false,
+      nestedForms: {},
+      nestedFormRuntimeTemplates: {},
+      nestedFormRuntimeTemplateDomElements: {},
+      deletedNestedForms: {}
+    };
+  },
+  setup() {
+    // conditionally inject appNavigateTo
+    // form component has to work in context without wrapping app as well!
+    const appNavigateTo = inject('appNavigateTo', undefined)
+    return {
+      appNavigateTo
+    }
+  },
+  provide: function() {
+    return {
+      parentFormUid: computed(() => this.props["component_uid"]),
+      parentFormData: computed(() => this.data),
+      parentFormErrors: computed(() => this.errors),
+      parentFormLoading: computed(() => this.loading),
+      parentNestedForms: computed(() => this.nestedForms),
+      parentDeletedNestedForms: computed(() => this.deletedNestedForms),
+      parentNestedFormRuntimeTemplates: computed(() => this.nestedFormRuntimeTemplates),
+      parentNestedFormRuntimeTemplateDomElements: computed(() => this.nestedFormRuntimeTemplateDomElements),
+      parentFormMapToNestedForms: this.mapToNestedForms,
+      parentFormSetErrors: this.setErrors,
+      parentFormResetErrors: this.resetErrors,
+      parentFormIsNestedForm: this.isNestedForm, // need to provide this value for input components working both in form and nested form contexts
+      parentNestedFormRuntimeId: null, // need to provide this value for input components working both in form and nested form contexts
+    }
+  },
+  methods: {
+    initDataKey: function (key, initValue) {
+      this.data[key] = initValue;
+    },
+    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]) {
+        delete this.errors[key];
+      }
+    },
+    setErrors: function(errors){
+      this.errors = errors;
+    },
+    setErrorKey: function(key, value){
+      this.errors[key] = value;
+    },
+    flushErrors: function(key, value){
+      this.errors = {};
+    },
+    setNestedFormsError: function(errors){
+      let self = this;
+      Object.keys(errors).forEach(function(errorKey){
+        if (errorKey.includes(".")){
+          let childErrorKey = errorKey.split(".")[1]
+          let childModelName = errorKey.split(".")[0].split("[")[0]
+          let childModelIndex = errorKey.split(".")[0].split("[")[1].split("]")[0]
+          let mappedChildModelIndex = self.mapToNestedForms(parseInt(childModelIndex), childModelName+"_attributes")
+          self.nestedForms[childModelName+"_attributes"][mappedChildModelIndex].setNestedFormServerErrorIndex(parseInt(childModelIndex))
+          self.nestedForms[childModelName+"_attributes"][mappedChildModelIndex].setErrorKey(childErrorKey, errors[errorKey])
+        }
+      })
+    },
+    mapToNestedForms: function(serverIndex, nestedFormKey){
+      var primaryKey;
+      if(this.props["primary_key"] != undefined){
+        primaryKey = this.props["primary_key"];
+      }else{
+        primaryKey = "id";
+      }
+
+      var formIdMap = []
+      var childModelKey = 0;
+      while(this.data[nestedFormKey].length > childModelKey){
+        var ignore = this.data[nestedFormKey][childModelKey]["_destroy"] == true && this.data[nestedFormKey][childModelKey][primaryKey] == null
+        if(!ignore){
+          formIdMap.push(childModelKey)
+        }
+        childModelKey++;
+      }
+
+      return formIdMap[serverIndex];
+    },
+    resetNestedForms: function(){
+      var self = this;
+      Object.keys(self.nestedForms).forEach(function(childModelKey){
+        self.nestedForms[childModelKey].forEach(function(nestedFormInstance){
+          if(nestedFormInstance.data["_destroy"] == true){
+            var destroyed = true;
+          }
+          nestedFormInstance.initValues()
+          if(destroyed){
+            nestedFormInstance.hideNestedForm = true
+            nestedFormInstance.data["_destroy"] = true
+          }
+        })
+      })
+    },
+    initValues: function () {
+      this.emitScopedEvent("init") // received by child input components
+    },
+    shouldResetFormOnSuccessfulSubmit() {
+      const self = this;
+      if (self.props["success"] != undefined && self.props["success"]["reset"] != undefined) {
+        return self.props["success"]["reset"];
+      } else {
+        return self.shouldResetFormOnSuccessfulSubmitByDefault();
+      }
+    },
+    shouldResetFormOnSuccessfulSubmitByDefault() {
+      const self = this;
+      if (self.props["method"] == "put") {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    perform: function(){
+      const self = this
+      if (self.props["fields_for"] != null) {
+        return;
+      }
+
+      var form = this.getRefs()["form"]
+
+      if(form.checkValidity()){
+        self.loading = true;
+        if (self.props["emit"] != undefined) {
+          matestackEventHub.$emit(self.props["emit"]);
+        }
+        if (self.props["delay"] != undefined) {
+          setTimeout(function () {
+            self.sendRequest()
+          }, parseInt(self.props["delay"]));
+        } else {
+          self.sendRequest()
+        }
+      } else {
+        matestackEventHub.$emit('static_form_errors');
+      }
+    },
+    transformToFormData: function (formData, dataNode, parentKey=null) {
+      var self = this;
+      for (let key in dataNode) {
+        if (key.endsWith("[]")) {
+          for (let i in dataNode[key]) {
+            let file = dataNode[key][i];
+            if (parentKey != null) {
+              formData.append(self.props["for"] + parentKey + "[" + key.slice(0, -2) + "][]", file);
+            } else {
+              formData.append(self.props["for"] + "[" + key.slice(0, -2) + "][]", file);
+            }
+          }
+        } else {
+          if (Array.isArray(dataNode[key])){
+            dataNode[key].forEach(function(item, index){
+              if (parentKey != null) {
+                let _key = parentKey + "[" + key + "]" + "[]";
+                formData = self.transformToFormData(formData, item, _key)
+              } else {
+                let _key = "[" + key + "]" + "[]";
+                formData = self.transformToFormData(formData, item, _key)
+              }
+            })
+          } else {
+            if (dataNode[key] != null){
+              if (parentKey != null) {
+                formData.append(self.props["for"] + parentKey + "[" + key + "]", dataNode[key]);
+              } else {
+                formData.append(self.props["for"] + "[" + key + "]", dataNode[key]);
+              }
+            }
+          }
+        }
+      }
+
+      return formData;
+    },
+    sendRequest: function(){
+      const self = this;
+      let payload = {};
+      payload[self.props["for"]] = self.data;
+      let axios_config = {};
+      if (self.props["multipart"] == true ) {
+        let formData = new FormData();
+        formData = this.transformToFormData(formData, this.data)
+        axios_config = {
+          method: self.props["method"],
+          url: self.props["submit_path"],
+          data: formData,
+          headers: {
+            "X-CSRF-Token": self.getXcsrfToken(),
+            "Content-Type": "multipart/form-data",
+          },
+        };
+      } else {
+        axios_config = {
+          method: self.props["method"],
+          url: self.props["submit_path"],
+          data: payload,
+          headers: {
+            "X-CSRF-Token": self.getXcsrfToken(),
+            "Content-Type": "application/json",
+          },
+        };
+      }
+      axios(axios_config)
+        .then(function (response) {
+          self.loading = false;
+
+          if (self.props["success"] != undefined && self.props["success"]["emit"] != undefined) {
+            matestackEventHub.$emit(self.props["success"]["emit"], response.data);
+          }
+
+          self.successTransitionHandling(response)
+          self.flushErrors();
+
+          if (self.shouldResetFormOnSuccessfulSubmit())
+          {
+            self.initValues();
+            self.resetNestedForms();
+          }
+        })
+        .catch(function (error) {
+          self.loading = false;
+
+          if (error.response && error.response.data && error.response.data.errors) {
+            self.errors = error.response.data.errors;
+            self.setErrors(error.response.data.errors);
+            self.setNestedFormsError(error.response.data.errors);
+          }
+
+          if (self.props["failure"] != undefined && self.props["failure"]["emit"] != undefined) {
+            matestackEventHub.$emit(self.props["failure"]["emit"], error.response.data);
+          }
+
+          self.failureTransitionHandling(error)
+        });
+    },
+  },
+  mounted: function () {
+    this.initValues();
+  }
+
+};
+
+export default componentDef;

data/lib/matestack/ui/vue_js/components/form/form.rb

@@ -0,0 +1,77 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Form < Matestack::Ui::VueJs::Vue
+            vue_name 'matestack-ui-core-form'
+
+            optional :for, :path, :success, :failure, :multipart, :emit, :delay, :errors
+
+            # setup form context to allow child components like inputs to access the form configuration
+            def initialize(html_tag = nil, text = nil, options = {}, &block)
+              previous_form_context = Matestack::Ui::VueJs::Components::Form::Context.form_context
+              Matestack::Ui::VueJs::Components::Form::Context.form_context = self
+              super(html_tag, text, options, &block)
+              Matestack::Ui::VueJs::Components::Form::Context.form_context = previous_form_context
+            end
+
+            def response
+              form attributes do
+                yield
+              end
+            end
+
+            def attributes
+              {
+                class: 'matestack-form',
+                "matestack-ui-core-ref": scoped_ref('form'),
+                'v-bind:class': "{ 'has-errors': vc.hasErrors(), loading: vc.loading }",
+                'v-on:submit.prevent': 'vc.perform',
+              }
+            end
+
+            def vue_props
+              {
+                for: for_attribute,
+                submit_path: ctx.path,
+                method: form_method,
+                success: ctx.success,
+                failure: ctx.failure,
+                multipart: !!ctx.multipart,
+                emit: ctx.emit,
+                delay: ctx.delay
+              }
+            end
+
+            def for_attribute
+              return for_option.model_name.singular if for_option.respond_to?(:model_name)
+              for_option
+            end
+
+            def for_option
+              @for_option ||= ctx.for
+            end
+
+            def multipart_option
+              @multipart_option ||= ctx.multipart
+            end
+
+            def for_object_primary_key
+              context.for&.class&.primary_key rescue nil
+            end
+
+            def form_method
+              @form_method ||= options.delete(:method)
+            end
+
+            def is_nested_form?
+              false
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/form/input.js

@@ -0,0 +1,13 @@
+import formInputMixin from "./input_mixin";
+import componentMixin from "../mixin";
+import componentHelpers from "../helpers";
+
+const componentDef = {
+  mixins: [componentMixin, formInputMixin],
+  template: componentHelpers.inlineTemplate,
+  data() {
+    return {};
+  }
+}
+
+export default componentDef;