matestack-ui-vuejs 3.0.0.rc1

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

@@ -0,0 +1,54 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Input < Matestack::Ui::VueJs::Components::Form::Base
+            vue_name 'matestack-ui-core-form-input'
+
+            def initialize(*)
+              super
+              if ctx.type.to_s == "file"
+                if !form_context.is_nested_form? && form_context.multipart_option != true
+                  raise "File Upload requires `multipart: true` in Form Config"
+                end
+                if form_context.is_nested_form? && form_context.parent_form_context.multipart_option != true
+                  raise "File Upload requires `multipart: true` in Form Config"
+                end
+              end
+            end
+
+            def response
+              div class: 'matestack-ui-core-form-input' do
+                label input_label, ":for": id if input_label
+                input input_attributes
+                render_errors
+              end
+            end
+
+            def component_id
+              "input-component-for-#{attribute_key}"
+            end
+
+            def input_attributes
+              attributes
+            end
+
+            def init_value
+              return nil if ctx.type.to_s == "file"
+              super
+            end
+
+            def vue_props
+              {
+                init_value: init_value,
+                key: key,
+              }
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,79 @@
+import matestackEventHub from '../../event_hub'
+
+const formInputMixin = {
+  inject: [
+    'parentFormUid',
+    'parentFormData',
+    'parentFormErrors',
+    'parentFormLoading',
+    'parentFormIsNestedForm',
+    'parentFormResetErrors',
+    'parentNestedFormRuntimeId'
+  ],
+  methods: {
+    initialize: function(){
+      const self = this
+      let data = {};
+
+      for (let key in self.getRefs()) {
+        if (key.startsWith("input.")) {
+          let initValue = self.getRefs()[key]["attributes"]["init-value"];
+
+          self.parentFormData[key.replace("input.", "")] = null
+
+          if (initValue) {
+            self.setValue(initValue["value"])
+            self.afterInitialize(initValue["value"])
+          } else {
+            self.setValue(null)
+            self.afterInitialize(null)
+          }
+        }
+      }
+
+    },
+    filesAdded: function (key) {
+      const dataTransfer = event.dataTransfer || event.target;
+      const files = dataTransfer.files;
+      if (event.target.attributes.multiple) {
+        this.parentFormData[key] = [];
+        for (let index in files) {
+          if (files[index] instanceof File) {
+            this.parentFormData[key].push(files[index]);
+          }
+        }
+      } else {
+        this.parentFormData[key] = files[0];
+      }
+    },
+    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){
+      if(this.getRefs()["input."+this.props["key"]]){
+        this.getRefs()["input."+this.props["key"]].value = value;  // reset file upload inputs properly
+      }
+      if(this.getRefs()["input."+this.props["key"]+"[]"]){
+        this.getRefs()["input."+this.props["key"]+"[]"].value = value;  // reset multiple file upload inputs properly
+      }
+      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 formInputMixin

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

@@ -0,0 +1,153 @@
+import { computed } from "vue";
+import axios from "axios";
+
+import matestackEventHub from "../../event_hub";
+import componentMixin from "../mixin";
+import componentHelpers from "../helpers";
+
+const componentDef = {
+  mixins: [componentMixin],
+  template: componentHelpers.inlineTemplate,
+  data: function () {
+    return {
+      data: {},
+      errors: {},
+      isNestedForm: true,
+      hideNestedForm: false,
+      nestedFormRuntimeId: "",
+      nestedFormServerErrorIndex: "",
+    };
+  },
+  provide: function() {
+    return {
+      parentFormUid: computed(() => this.props["component_uid"]),
+      parentFormData: computed(() => this.data),
+      parentFormErrors: computed(() => this.errors),
+      parentNestedFormRuntimeId: computed(() => this.nestedFormRuntimeId),
+      parentFormMapToNestedForms: this.mapToNestedForms,
+      parentFormSetErrors: this.setErrors,
+      parentFormResetErrors: this.resetErrors,
+    }
+  },
+  inject: [
+    'parentFormData',
+    'parentFormErrors',
+    'parentNestedForms',
+    'parentDeletedNestedForms',
+    'parentFormMapToNestedForms'
+  ],
+  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];
+      }
+      var serverErrorKey = this.props["fields_for"].replace("_attributes", "")+"["+this.nestedFormServerErrorIndex+"]."+key
+      if (this.parentFormErrors[serverErrorKey]) {
+        delete this.parentFormErrors[serverErrorKey];
+      }
+    },
+    setErrors: function(errors){
+      this.errors = errors;
+    },
+    setNestedFormServerErrorIndex: function(value){
+      this.nestedFormServerErrorIndex = value;
+    },
+    setErrorKey: function(key, value){
+      this.errors[key] = value;
+    },
+    flushErrors: function(key, value){
+      this.errors = {};
+    },
+    removeItem: function(){
+      this.data["_destroy"] = true
+      this.hideNestedForm = true;
+      var id = parseInt(this.nestedFormRuntimeId.replace("_"+this.props["fields_for"]+"_child_", ""));
+      this.parentDeletedNestedForms[this.props["fields_for"]].push(id);
+      var serverErrorKey = this.props["fields_for"].replace("_attributes", "")+"["+this.nestedFormServerErrorIndex+"]."
+      var self = this;
+      Object.keys(self.parentFormErrors).forEach(function(errorKey){
+        if (errorKey.lastIndexOf(serverErrorKey, 0) == 0) {
+          delete self.parentFormErrors[errorKey];
+        }
+      });
+    },
+    initValues: function () {
+      this.emitScopedEvent("init") // received by child input components
+    }
+  },
+  mounted: function () {
+    var self = this;
+
+    this.data = { "_destroy": false };
+
+    //initialize nestedForm data in parent form if required
+    if(this.parentFormData[this.props["fields_for"]] == undefined){
+      this.parentFormData[this.props["fields_for"]] = [];
+    }
+    if(this.parentNestedForms[this.props["fields_for"]] == undefined){
+      this.parentNestedForms[this.props["fields_for"]] = [];
+    }
+    if(this.parentDeletedNestedForms[this.props["fields_for"]] == undefined){
+      this.parentDeletedNestedForms[this.props["fields_for"]] = [];
+    }
+
+    var id = parseInt(self.getElement().querySelector('.matestack-form-fields-for').id.replace(this.props["fields_for"]+"_child_", ""))
+
+    //setup data binding for serverside rendered nested forms
+    if (isNaN(id)){
+      id = this.parentNestedForms[this.props["fields_for"]].length
+      this.nestedFormRuntimeId = "_"+this.props["fields_for"]+"_child_"+id
+      this.getElement().id = this.props["fields_for"]+"_child_"+id
+      this.initValues()
+      this.parentFormData[this.props["fields_for"]].push(this.data);
+      this.parentNestedForms[this.props["fields_for"]].push(this);
+    }
+
+    //setup data binding for runtime nested forms (dynamic add via matestack-ui-core-runtime-render)
+    if (!isNaN(id)){
+      this.nestedFormRuntimeId = "_"+this.props["fields_for"]+"_child_"+id
+      if(this.parentFormData[this.props["fields_for"]][id] == undefined){
+        //new runtime form
+        this.initValues()
+        this.parentFormData[this.props["fields_for"]].push(this.data);
+        this.parentNestedForms[this.props["fields_for"]].push(this);
+      }else{
+        //retreive state for existing runtime form (after remount for example)
+        this.data = this.parentFormData[this.props["fields_for"]][id]
+        if (this.data["_destroy"] == true){
+          this.hideNestedForm = true;
+        }
+        this.parentNestedForms[this.props["fields_for"]][id] = this;
+        Object.keys(this.parentFormErrors).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.parentFormMapToNestedForms(parseInt(childModelIndex), childModelName+"_attributes")
+            if(childModelName+"_attributes" == self.props["fields_for"] && mappedChildModelIndex == id){
+              self.setNestedFormServerErrorIndex(parseInt(childModelIndex))
+              self.setErrorKey(childErrorKey, self.parentFormErrors[errorKey])
+            }
+          }
+        })
+      }
+    }
+  }
+};
+
+export default componentDef;

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

@@ -0,0 +1,57 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class NestedForm < Matestack::Ui::VueJs::Components::Form::Form
+            vue_name 'matestack-ui-core-form-nested-form'
+
+            optional :fields_for, :reject_blank
+
+            attr_accessor :prototype_template
+
+            # 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
+              if !previous_form_context.nil?
+                @is_nested_form = true
+                @parent_form_context = previous_form_context
+              end
+              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 component_id
+              "matestack-form-fields-for-#{context.fields_for}-#{SecureRandom.hex}"
+            end
+
+            def response
+              div class: "matestack-form-fields-for", "v-show": "vc.hideNestedForm != true", id: options[:id] do
+                form_input key: context.for&.class&.primary_key, type: :hidden # required for existing model mapping
+                form_input key: :_destroy, type: :hidden, init: true if context.reject_blank == true
+                yield
+              end
+            end
+
+            def vue_props
+              super.merge({
+                fields_for: ctx.fields_for,
+                primary_key: for_object_primary_key
+              })
+            end
+
+            def is_nested_form?
+              true
+            end
+
+            def parent_form_context
+              @parent_form_context
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,85 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Radio < Matestack::Ui::VueJs::Components::Form::Base
+            vue_name 'matestack-ui-core-form-radio'
+
+            def response
+              div class: 'matestack-ui-core-form-radio' do
+                render_options
+                render_errors
+              end
+            end
+
+            def render_options
+              radio_options.to_a.each do |item|
+                input radio_attributes(item)
+                label item_label(item), ":for": item_id(item)
+              end
+            end
+
+            def component_id
+              "radio-component-for-#{key}"
+            end
+
+            def vue_props
+              {
+                init_value: init_value,
+                key: key,
+              }
+            end
+
+            def radio_attributes(item)
+              attributes.merge({
+                ":id": item_id(item),
+                name: item_name(item),
+                type: :radio,
+                "matestack-ui-core-ref": scoped_ref("select.#{key}"),
+                'value-type': value_type(item_value(radio_options.first))
+              }).tap do |attrs|
+                attrs[value_key(item)] = item_value(item)
+              end
+            end
+
+            def radio_options
+              @radio_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 || key}+'_#{item_value(item)}'"
+            end
+
+            def item_name(item)
+              "#{key}_#{item_value(item)}"
+            end
+
+            def v_model_type
+              item_value(radio_options.first).is_a?(Numeric) ? 'v-model.number' : 'v-model'
+            end
+
+            def value_key(value)
+              if value.is_a?(Array)
+                value[1].is_a?(Numeric) ? ':value' : 'value'
+              else
+                value.is_a?(Numeric) ? ':value' : 'value'
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,75 @@
+const formRadioMixin = {
+  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.")) {
+          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)
+            }
+          }
+        }
+      }
+    },
+    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 formRadioMixin

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

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

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

@@ -0,0 +1,96 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Select < Matestack::Ui::VueJs::Components::Form::Base
+            vue_name 'matestack-ui-core-form-select'
+
+            def response
+              div class: 'matestack-ui-core-form-select' do
+                label input_label, ":for": id if input_label
+                select select_attributes do
+                  render_options
+                end
+                render_errors
+              end
+            end
+
+            def render_options
+              if placeholder
+                option value: nil, disabled: true, selected: init_value.nil?, text: placeholder
+              end
+              select_options.to_a.each do |item|
+                option_config = {}.tap do |attrs|
+                  attrs[value_key(item)] = item_value(item)
+                  attrs[:disabled] = item_disabled?(item)
+                end
+                option item_label(item), option_config
+              end
+            end
+
+            def component_id
+              "select-component-for-#{key}"
+            end
+
+            def vue_props
+              {
+                init_value: init_value,
+                key: key,
+              }
+            end
+
+            def select_attributes
+              attributes.except(:options).merge({
+                multiple: multiple,
+                ":id": id,
+                "matestack-ui-core-ref": scoped_ref("select#{'.multiple' if multiple}.#{key}"),
+                'value-type': value_type(select_options.first),
+                'init-value': init_value,
+              })
+            end
+
+            # select options
+
+            def select_options
+              @select_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)
+              "#{key}_#{item_value(item)}"
+            end
+
+            def item_disabled?(item)
+              disabled_options && disabled_options.to_a.include?(item)
+            end
+
+            def v_model_type
+              item_value(select_options.first).is_a?(Numeric) ? 'v-model.number' : 'v-model'
+            end
+
+            def value_key(value)
+              value.is_a?(Numeric) ? ':value' : 'value'
+            end
+
+            # attributes
+
+            def disabled_options
+              @disabled_options ||= options.delete(:disabled_options)
+            end
+
+          end
+        end
+      end
+    end
+  end
+end