basemate-ui-core 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9fca01ad9a69d5ad7714be6303266507651f75ec205812a7a7c4771fc2e7255d
-  data.tar.gz: 0b0d45ba477ba7c4693565cf3ef2e151081892ec0676746c8629682be08554f5
+  metadata.gz: dff05e3fe084c36ce2fbd5c1812f87da7682563e314f3cb354e797cfed814b19
+  data.tar.gz: dfcc244c148cc0a38adcdcb363cadc6cd211a692a88a3295737b7cc47b5a1abb
 SHA512:
-  metadata.gz: 2de5fa9c6e02bb29f16748c16c52c4e3847428348e83299146cbb6c9e8a3a80cd0d2e7d39b380475c6db810f4b60d9778d96005eb5c6df06d2c852816bf90ae0
-  data.tar.gz: 8f2e45bc1e48ddd2f095728afcfbd6c8522cdc45a1a6e7c856fdf81d4ed01f00da31beb6850dd28d1be8dd4f3d240edc561455d77e34b3148bd676108182adb2
+  metadata.gz: 34047d5f4853321fccb736f091840deb4cd77602aafe060be4e1826300cf80eba36424f2604502ec00fd5829dd0cbcb02142b55950972d49329ff6f64d559599
+  data.tar.gz: aa2d3034364c8e1c7f060d9f61977734a0353afc3a23148f2c894718d7c8683d8800ea5c5a044c639506d9f2b38874fcd7e4b4efe51f8e4f961d344989ab1a58

data/README.md

@@ -1,16 +1,21 @@
-# Basemate::Ui::Core
+# Basemate UI Core
 
-Create component based, object oriented views. Get dynamic SPA-like behaviour
-through integrated vue.js with zero effort.
+## What is basemate?
 
-## Why basemate?
+basemate is a "Rails Engine", turning the MVC-Framework "Ruby on Rails" into a
+Fullstack Web-Development Framework. With basemate you are able to write dynamic
+Web-Apps in pure Ruby. Javascript/HTML/CSS is only used for adding special, custom
+UI-Behaviour.
+
+basemate is designed to write maintainable, dynamic Web-UIs on top of Rails and Vue.js with
+minimum effort. In order to increase development speed, basemate's architecture
+moves back- and frontend development closer together. In other words: basemate
+melts Rails and Vue.js down to one holistic Web App Development Framework.
+
+basemate progressively replaces the classic Rails-View-Layer. You are able to use
+it alongside your classic views and incrementally turn your Rails-App into a
+dynamic, more maintainable Web-App.
 
-### Our why:
-Frontend development has gotten unnecessarily complex, messy and expensive. Implementing responsive, basic user interfaces often keeps us from creating the really valuable juice (= business logic).
-### Our how:
-We're replacing the original view-layer of Ruby on Rails, the most productive MVC framework we know, with our technology. By introducing basemate we get dynamic, fast and simple user interfaces without the need to touch HTML/HAML/ERB/JS/CSS. Plus, it feels like a single page application, but there's no need for all the API hustle SPAs usually bring with them.
-### Our what:
-basemate. Declarative frontend solutions.
 
 ## Current State
 This repo is currently under heavy development and should not be used until the

data/app/concepts/action/cell/action.rb

@@ -5,6 +5,9 @@ module Action::Cell
       @component_config[:action_path] = action_path
       @component_config[:method] = options[:method]
       @component_config[:success] = options[:success]
+      if options[:notify].nil?
+        @component_config[:notify] = true
+      end
     end
 
     def action_path

data/app/concepts/action/js/action.js

@@ -2,6 +2,8 @@ import Vue from 'vue/dist/vue.esm'
 import Vuex from 'vuex'
 import axios from 'axios'
 
+import basemateEventHub from 'core/js/event-hub'
+
 import componentMixin from 'component/js/component'
 
 const componentDef = {
@@ -15,21 +17,26 @@ const componentDef = {
       axios({
         method: self.componentConfig["method"],
         url: self.componentConfig["action_path"],
+        data: self.componentConfig["data"],
         headers: {
           'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
         }
       })
       .then(function(response){
         for (let key in self.componentConfig["success"]) {
-          self.$root.$refs[key][self.componentConfig["success"][key]]()
+          basemateEventHub.$emit(self.componentConfig["success"][key], key);
         }
-        if (typeof basemateUiCoreActionSuccess !== 'undefined') {
-          basemateUiCoreActionSuccess(response);
+        if (self.componentConfig["notify"] === true) {
+          if (typeof basemateUiCoreActionSuccess !== 'undefined') {
+            basemateUiCoreActionSuccess(response);
+          }
         }
       })
-      .catch(function(response){
-        if (typeof basemateUiCoreActionError !== 'undefined') {
-          basemateUiCoreActionError(response);
+      .catch(function(error){
+        if (self.componentConfig["notify"] === true) {
+          if (typeof basemateUiCoreActionError !== 'undefined') {
+            basemateUiCoreActionError(error);
+          }
         }
       })
     }

data/app/concepts/action/view/action.haml

@@ -1,9 +1,3 @@
-- if options[:type] == :button || options[:type] == "button"
-
-  %button{"@click.prevent": "perform"}
-    = options[:text]
-
-- if options[:type] == :link || options[:type] == "link"
-
-  %a{href: "#", "@click.prevent": "perform"}
-    = options[:text]
+%span{"@click.prevent": "perform"}
+  - if block_given?
+    = yield

data/app/concepts/{navigation → button}/cell/button.rb

@@ -1,4 +1,4 @@
-module Navigation::Cell
+module Button::Cell
   class Button < Component::Cell::Static
 
   end

data/app/concepts/button/view/button.haml

@@ -0,0 +1,7 @@
+- if options[:text].nil?
+  %button{"class": options[:class], "id": component_id}
+    - if block_given?
+      = yield
+- else
+  %button{"class": options[:class], "id": component_id}
+    = options[:text]

data/app/concepts/component/cell/dynamic.rb

@@ -42,21 +42,31 @@ module Component::Cell
       @controller_context = context[:controller_context]
       @argument = model
       @static = false
+      @nodes = {}
+      @cells = {}
       generate_component_name
       generate_children_cells
       setup
     end
 
-    def self.static
-      @static = true
-    end
-
     def setup
       true
     end
 
     def show(&block)
-      render(view: :dynamic, &block)
+      if respond_to? :prepare
+        prepare
+      end
+      if respond_to? :response
+        response &block
+        render :response
+      else
+        if @static
+          render(view: :static, &block)
+        else
+          render(view: :dynamic, &block)
+        end
+      end
     end
 
     def render_children
@@ -70,7 +80,7 @@ module Component::Cell
     end
 
     def component_id
-      options[:id] ||= @component_key
+      options[:id] ||= nil
     end
 
     def js_action name, arguments
@@ -83,6 +93,18 @@ module Component::Cell
       js_action("navigateTo", [path])
     end
 
+    def components(&block)
+      @nodes = ::Component::Utils::ComponentNode.build(self, &block)
+
+      @nodes.each do |key, node|
+        @cells[key] = to_cell(key, node["component_name"], node["config"], node["argument"], node["components"])
+      end
+    end
+
+    def partial(&block)
+      ::Component::Utils::ComponentNode.build(self, &block)
+    end
+
     private
 
       def generate_children_cells

data/app/concepts/component/cell/static.rb

@@ -11,13 +11,5 @@ module Component::Cell
       end
     end
 
-    def show(&block)
-      if @static
-        render(view: :static, &block)
-      else
-        render(view: :dynamic, &block)
-      end
-    end
-
   end
 end

data/app/concepts/component/js/component.js

@@ -2,6 +2,8 @@ import Vue from 'vue/dist/vue.esm'
 import axios from 'axios'
 import VRuntimeTemplate from "v-runtime-template"
 
+import basemateEventHub from 'core/js/event-hub'
+
 const componentMixin = {
   props: ['componentConfig', 'params'],
   data: function(){
@@ -10,6 +12,11 @@ const componentMixin = {
     }
   },
   methods: {
+    onRerender: function(event){
+      if (this.$el.id === event){
+        this.rerender()
+      }
+    },
     rerender: function(){
       var self = this;
       self.params["component_key"] = self.componentConfig["component_key"]
@@ -30,6 +37,14 @@ const componentMixin = {
       this.rerender()
     }
   },
+  created: function () {
+    const self = this
+    basemateEventHub.$on('rerender', self.onRerender)
+  },
+  beforeDestroy: function() {
+    const self = this
+    basemateEventHub.$off('rerender', self.onRerender);
+  },
   components: {
     VRuntimeTemplate: VRuntimeTemplate
   }

data/app/concepts/component/utils/component_node.rb

@@ -0,0 +1,51 @@
+module Component::Utils
+  class ComponentNode
+
+    def self.build(component_instance, &block)
+      node = ComponentNode.new(component_instance)
+      node.instance_eval(&block)
+      node.hash
+    end
+
+    attr_reader :hash
+
+    def initialize(component_instance)
+      @hash = {}
+      @node_start_id = 0
+      @component_instance = component_instance
+      component_instance.instance_variables.each do |component_instance_var_key|
+        self.instance_variable_set(component_instance_var_key, component_instance.instance_variable_get(component_instance_var_key))
+      end
+    end
+
+    def method_missing meth, *args, &block
+      begin
+        @component_instance.send(meth, *args, &block)
+      rescue
+        node_id = @node_start_id + 1
+        @node_start_id = node_id
+        current_node = "#{meth}_#{@node_start_id}"
+        @hash[current_node] = {}
+        @hash[current_node]["component_name"] = meth.to_s
+        @hash[current_node]["config"] = {}
+        @hash[current_node]["argument"] = nil
+
+        if meth == :partial
+          @hash[current_node]["components"] = @component_instance.send(args.first, *args.drop(1))
+        else
+          if args.first.is_a?(Hash)
+            @hash[current_node]["config"] = args.first
+          else
+            @hash[current_node]["argument"] = args.first
+          end
+
+          if block_given?
+            @hash[current_node]["components"] = ComponentNode.build(@component_instance, &block)
+          end
+        end
+      end
+
+    end
+
+  end
+end

data/app/concepts/component/view/response.haml

@@ -0,0 +1,2 @@
+- @cells.each do |key, cell|
+  = cell.call(:show)

data/app/concepts/core/js/core.js

@@ -7,12 +7,13 @@ import anonymDynamicComponent from 'component/js/anonym-dynamic-component'
 import html from 'html/js/html'
 import transition from 'transition/js/transition'
 import action from 'action/js/action'
+import form from 'form/js/form'
 
-
+let basemateUiApp = undefined
 
 document.addEventListener('DOMContentLoaded', () => {
 
-    const basemateUiApp = new Vue({
+    basemateUiApp = new Vue({
       el: "#basemate_ui",
       store: store
     })

data/app/concepts/core/js/event-hub.js

@@ -0,0 +1,5 @@
+import Vue from 'vue/dist/vue.esm'
+
+const basemateEventHub = new Vue();
+
+export default basemateEventHub

data/app/concepts/form/cell/form.rb

@@ -0,0 +1,23 @@
+module Form::Cell
+  class Form < Component::Cell::Dynamic
+
+    def setup
+      @component_config[:submit_path] = submit_path
+      @component_config[:method] = options[:method]
+      @component_config[:success] = options[:success]
+      if options[:notify].nil?
+        @component_config[:notify] = true
+      end
+    end
+
+    def submit_path
+      begin
+        return ::Rails.application.routes.url_helpers.send(options[:path], options[:params])
+      rescue
+        "path_not_found"
+      end
+    end
+
+
+  end
+end

data/app/concepts/form/js/form.js

@@ -0,0 +1,76 @@
+import Vue from 'vue/dist/vue.esm'
+import Vuex from 'vuex'
+import axios from 'axios'
+
+import basemateEventHub from 'core/js/event-hub'
+
+import componentMixin from 'component/js/component'
+
+const componentDef = {
+  mixins: [componentMixin],
+  data: function(){
+    return {
+      data: {},
+      showInlineForm: false
+    }
+  },
+  methods: {
+    launchInlineForm: function(key, value){
+      this.showInlineForm = true;
+      this.data[key] = value;
+      const self = this;
+      setTimeout(function () {
+        self.$refs.inlineinput.focus();
+      }, 300);
+    },
+    closeInlineForm: function(){
+      this.showInlineForm = false;
+    },
+    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;
+         }
+      }
+    },
+    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){
+        for (let key in self.componentConfig["success"]) {
+          basemateEventHub.$emit(self.componentConfig["success"][key], key);
+        }
+        if (self.componentConfig["notify"] === true) {
+          if (typeof basemateUiCoreActionSuccess !== 'undefined') {
+            basemateUiCoreActionSuccess(response);
+          }
+        }
+        self.setProps(self.data, null);
+        self.showInlineForm = false;
+      })
+      .catch(function(error){
+        if (self.componentConfig["notify"] === true) {
+          if (typeof basemateUiCoreActionError !== 'undefined') {
+            basemateUiCoreActionError(error);
+          }
+        }
+      })
+    }
+  }
+}
+
+let component = Vue.component('form-cell', componentDef)
+
+export default componentDef

data/app/concepts/form/view/form.haml

@@ -0,0 +1,2 @@
+%form{"@submit.prevent": true}
+  = yield

data/app/concepts/input/cell/inline.rb

@@ -0,0 +1,9 @@
+module Input::Cell
+  class Inline < Component::Cell::Static
+
+
+    def input_key
+      'data["' + options[:key].to_s + '"]'
+    end
+  end
+end

data/app/concepts/input/cell/input.rb

@@ -0,0 +1,9 @@
+module Input::Cell
+  class Input < Component::Cell::Static
+
+
+    def input_key
+      'data["' + options[:key].to_s + '"]'
+    end
+  end
+end