criteria_operator-ui_component 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0cad334db1807a2dba136b21d075e5a7d342bdf4
-  data.tar.gz: a2bf858f82ef1a772cff4471f82c82cd550690df
+  metadata.gz: e59209173c826deb5e89edbd128dc8875980a835
+  data.tar.gz: 9a6b936f6fd41493dfe9d8e4ee581a4c7d3198c1
 SHA512:
-  metadata.gz: 8b354a5d441e9fe56ac232ad466d0e0662186dc5736b2516f37ea6c15dbcd95038190e2f33c9463c55cc4e3e7ddc692afde021f83698368a8b801d8c9376d2bc
-  data.tar.gz: 1bd3998c0ac1fa0a7b3ffaa7ca20ab6fd474694a14dfab1420030c5b134a5071fb32a67a0d18e601afab997d3da8245c7b24985fbf8791f68cc7cafab7b89a33
+  metadata.gz: 5b5f5596ee42e83b0a33f38309ff529aaf98e7b02b983d59d6b1993f2528a517c909d1666606530ecaf6be0f5b5f32ebf0c27856994d271ca7531e53f30e7177
+  data.tar.gz: 57340e412354213ef57c2753d289c08aa0a2f1a74333c8626dfafdb2843c9fcc7cc8e52662bff3fc2a37d1a44b861aab45083061eb73e90c692b1d3c2d046f2b

data/.gitignore

@@ -11,5 +11,9 @@ pkg/
 /pkg/
 /spec/reports/
 /tmp/
+test/dummy/db/*.sqlite3
+test/dummy/db/*.sqlite3-journal
+test/dummy/log/*.log
+test/dummy/tmp/
 
 *.gem

data/Gemfile

@@ -1,16 +1,16 @@
-source 'https://rubygems.org'
-
-# Declare your gem's dependencies in criteria_operator-ui_component.gemspec.
-# Bundler will treat runtime dependencies like base dependencies, and
-# development dependencies will be added by default to the :development group.
-gemspec
-
-# Declare any dependencies that are still in development here instead of in
-# your gemspec. These might include edge Rails or gems from your path or
-# Git. Remember to move these dependencies to your gemspec before releasing
-# your gem to rubygems.org.
-
-# To use a debugger
-# gem 'byebug', group: [:development, :test]
-
-gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+source 'https://rubygems.org'
+
+# Declare your gem's dependencies in criteria_operator-ui_component.gemspec.
+# Bundler will treat runtime dependencies like base dependencies, and
+# development dependencies will be added by default to the :development group.
+gemspec
+
+# Declare any dependencies that are still in development here instead of in
+# your gemspec. These might include edge Rails or gems from your path or
+# Git. Remember to move these dependencies to your gemspec before releasing
+# your gem to rubygems.org.
+
+# To use a debugger
+# gem 'byebug', group: [:development, :test]
+
+gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

data/README.md

@@ -1,3 +1,12 @@
+[![Gem Version](http://img.shields.io/gem/v/criteria_operator-ui_component.svg?style=flat)](https://rubygems.org/gems/criteria_operator-ui_component)
+[![License](http://img.shields.io/:license-mit-blue.svg?style=flat)](http://TheFlow0360.mit-license.org)
+[![Build Status](http://img.shields.io/travis/TheFlow0360/criteria_operator-ui_component.svg?style=flat)](https://travis-ci.org/TheFlow0360/criteria_operator-ui_component)
+[![Dependency Status](http://img.shields.io/gemnasium/TheFlow0360/criteria_operator-ui_component.svg?style=flat)](https://gemnasium.com/TheFlow0360/criteria_operator-ui_component)
+[![Code Climate](http://img.shields.io/codeclimate/github/TheFlow0360/criteria_operator-ui_component.svg?style=flat)](https://codeclimate.com/github/TheFlow0360/criteria_operator-ui_component)
+[![Coverage Status](https://coveralls.io/repos/github/TheFlow0360/criteria_operator-ui_component/badge.svg?branch=master)](https://coveralls.io/github/TheFlow0360/criteria_operator-ui_component?branch=master)
+[![Inline docs](http://inch-ci.org/github/TheFlow0360/criteria_operator-ui_component.svg?branch=master&style=shields)](http://inch-ci.org/github/TheFlow0360/criteria_operator-ui_component)
+[![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/963/badge)](https://bestpractices.coreinfrastructure.org/projects/963)
+
 # CriteriaOperator::UiComponent
 
 This gem is an extension to the [criteria_operator](https://github.com/TheFlow0360/criteria_operator) gem and provides UI to be used in a Rails application. This component allows easy editing of filter statements represented by the criteria_operator classes.
@@ -21,10 +30,6 @@ Or install it yourself as:
 
 TODO: provide usage instructions
 
-## Contributing
-
-Contribution directions go here.
-
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

data/Rakefile

@@ -4,21 +4,18 @@ rescue LoadError
   puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
 end
 
-require 'rdoc/task'
-
-RDoc::Task.new(:rdoc) do |rdoc|
-  rdoc.rdoc_dir = 'rdoc'
-  rdoc.title    = 'CriteriaOperator::UiComponent'
-  rdoc.options << '--line-numbers'
-  rdoc.rdoc_files.include('README.md')
-  rdoc.rdoc_files.include('lib/**/*.rb')
-end
-
-
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
 
 load 'rails/tasks/statistics.rake'
 
-
-
 require 'bundler/gem_tasks'
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList['test/**/*_test.rb']
+end
 
+task :default => :test

data/app/assets/config/criteria_operator_ui_component_manifest.js

@@ -1,2 +1,2 @@
-//= link_directory ../javascripts/criteria_operator/ui_component .js
-//= link_directory ../stylesheets/criteria_operator/ui_component .css
+//= link_directory ../javascripts/criteria_operator/ui_component .js
+//= link_directory ../stylesheets/criteria_operator/ui_component .css

data/app/assets/javascripts/criteria_operator/ui_component/application.js

@@ -1,13 +1,16 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file. JavaScript code in this file should be added after the last require_* statement.
-//
-// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
-// about supported directives.
-//
-//= require_tree .
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery_ujs
+//= require criteria_operator/ui_component/criteria_editor
+//= require_tree .

data/app/assets/javascripts/criteria_operator/ui_component/criteria_editor.js

@@ -0,0 +1,341 @@
+// ---------------------------------
+// ----- Criteria Editor Plugin ----
+// ---------------------------------
+// Using John Dugan's boilerplate: https://john-dugan.com/jquery-plugin-boilerplate-explained/
+// ---------------------------------
+
+/*
+ The semi-colon before the function invocation is a safety net against
+ concatenated scripts and/or other plugins which may not be closed properly.
+
+ "undefined" is used because the undefined global variable in ECMAScript 3
+ is mutable (ie. it can be changed by someone else). Because we don't pass a
+ value to undefined when the anonymyous function is invoked, we ensure that
+ undefined is truly undefined. Note, in ECMAScript 5 undefined can no
+ longer be modified.
+
+ "window" and "document" are passed as local variables rather than global.
+ This (slightly) quickens the resolution process.
+ */
+;(function ( $, window, document, undefined ) {
+
+    /*
+     Store the name of the plugin in the "pluginName" variable. This
+     variable is used in the "Plugin" constructor below, as well as the
+     plugin wrapper to construct the key for the "$.data" method.
+
+     More: http://api.jquery.com/jquery.data/
+     */
+    var pluginName = 'criteriaEditor';
+
+    /*
+     The "Plugin" constructor, builds a new instance of the plugin for the
+     DOM node(s) that the plugin is called on. For example,
+     "$('h1').pluginName();" creates a new instance of pluginName for
+     all h1's.
+     */
+    // Create the plugin constructor
+    function Plugin ( element, options ) {
+        /*
+         Provide local access to the DOM node(s) that called the plugin,
+         as well local access to the plugin name and default options.
+         */
+        this.element = element;
+        this._name = pluginName;
+        this._defaults = $.fn.criteriaEditor.defaults;
+        /*
+         The "$.extend" method merges the contents of two or more objects,
+         and stores the result in the first object. The first object is
+         empty so that we don't alter the default options for future
+         instances of the plugin.
+
+         More: http://api.jquery.com/jquery.extend/
+         */
+        this.options = $.extend( {}, this._defaults, options );
+
+        /*
+         The "init" method is the starting point for all plugin logic.
+         Calling the init method here in the "Plugin" constructor function
+         allows us to store all methods (including the init method) in the
+         plugin's prototype. Storing methods required by the plugin in its
+         prototype lowers the memory footprint, as each instance of the
+         plugin does not need to duplicate all of the same methods. Rather,
+         each instance can inherit the methods from the constructor
+         function's prototype.
+         */
+        this.init();
+    }
+
+    // Avoid Plugin.prototype conflicts
+    $.extend(Plugin.prototype, {
+
+        // Initialization logic
+        init: function () {
+            /*
+             Create additional methods below and call them via
+             "this.myFunction(arg1, arg2)", ie: "this.buildCache();".
+
+             Note, you can access the DOM node(s), plugin name, default
+             plugin options and custom plugin options for a each instance
+             of the plugin by using the variables "this.element",
+             "this._name", "this._defaults" and "this.options" created in
+             the "Plugin" constructor function (as shown in the buildCache
+             method below).
+             */
+            this.buildCache();
+            this.bindEvents();
+        },
+
+        // Remove plugin instance completely
+        destroy: function() {
+            /*
+             The destroy method unbinds all events for the specific instance
+             of the plugin, then removes all plugin data that was stored in
+             the plugin instance using jQuery's .removeData method.
+
+             Since we store data for each instance of the plugin in its
+             instantiating element using the $.data method (as explained
+             in the plugin wrapper below), we can call methods directly on
+             the instance outside of the plugin initialization, ie:
+             $('selector').data('plugin_myPluginName').someOtherFunction();
+
+             Consequently, the destroy method can be called using:
+             $('selector').data('plugin_myPluginName').destroy();
+             */
+            this.unbindEvents();
+            this.$element.removeData();
+        },
+
+        // Cache DOM nodes for performance
+        buildCache: function () {
+            /*
+             Create variable(s) that can be accessed by other plugin
+             functions. For example, "this.$element = $(this.element);"
+             will cache a jQuery reference to the element that initialized
+             the plugin. Cached variables can then be used in other methods.
+             */
+            this.$element = $(this.element);
+            this.$valueInput = this.$element.find(this.options.valueInput)
+        },
+
+        // Bind events that trigger methods
+        bindEvents: function() {
+            var plugin = this;
+
+            /*
+             Bind event(s) to handlers that trigger other functions, ie:
+             "plugin.$element.on('click', function() {});". Note the use of
+             the cached variable we created in the buildCache method.
+
+             All events are namespaced, ie:
+             ".on('click'+'.'+this._name', function() {});".
+             This allows us to unbind plugin-specific events using the
+             unbindEvents method below.
+             */
+            //plugin.$element.on('click'+'.'+plugin._name, function() {
+                /*
+                 Use the "call" method so that inside of the method being
+                 called, ie: "someOtherFunction", the "this" keyword refers
+                 to the plugin instance, not the event handler.
+
+                 More: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
+                 */
+            //    plugin.someOtherFunction.call(plugin);
+            //});
+            plugin.$element.find(plugin.options.newExpression).on('click'+'.'+plugin._name, function(event) {
+                plugin.createElement.call(plugin, 'expression', plugin.options, event.target);
+            });
+            plugin.$element.find(plugin.options.newGroup).on('click'+'.'+plugin._name, function(event) {
+                plugin.createElement.call(plugin, 'group', plugin.options, event.target);
+            });
+            plugin.$element.find(plugin.options.deleteExpression).on('click'+'.'+plugin._name, function(event) {
+                plugin.deleteElement.call(plugin, plugin.options, event.target);
+            });
+            plugin.$element.find(plugin.options.deleteGroup).on('click'+'.'+plugin._name, function(event) {
+                plugin.deleteElement.call(plugin, plugin.options, event.target);
+            });
+            plugin.$element.find(plugin.options.operandInput).on('change'+'.'+plugin._name, function(event) {
+                plugin.operandChanged.call(plugin, plugin.options, event.target);
+            });
+            plugin.$element.find(plugin.options.operatorTypeInput).on('change'+'.'+plugin._name, function(event) {
+                plugin.operatorTypeChanged.call(plugin, plugin.options, event.target);
+            });
+        },
+
+        // Unbind events that trigger methods
+        unbindEvents: function() {
+            /*
+             Unbind all events in our plugin's namespace that are attached
+             to child elements.
+             */
+            this.$element.find("*").off('.'+this._name);
+        },
+
+        createElement: function(type, options, element) {
+            var plugin = this;
+            var requestData = {};
+            requestData["root_operator"] = plugin.$valueInput.val();
+            requestData["locator"] = plugin.buildLocatorChain(element, options);
+            requestData["child_count"] = $(element).parent().data("childcount");
+            $.ajax({
+                url: "/criteria_operator-ui_component/create_" + type,
+                data: requestData,
+                method: "POST"
+            }).done(function(data) {
+                var wrapper = $(element).parent().children(options.rowWrapper);
+                wrapper.children(options.placeholder).remove();
+                wrapper.append(data['html']);
+                $(element).parent().data("childcount", $(element).parent().data("childcount") + 1);
+                plugin.$valueInput.val(data['operator']);
+                plugin.rebind();
+            });
+        },
+
+        deleteElement: function(options, element) {
+            var plugin = this;
+            var requestData = {};
+            requestData["root_operator"] = plugin.$valueInput.val();
+            requestData["locator"] = plugin.buildLocatorChain(element, options);
+            $.ajax({
+                url: "/criteria_operator-ui_component/delete_element",
+                data: requestData,
+                method: "POST"
+            }).done(function(data) {
+                $(element).parent().nextAll().each(function() {
+                    $( this ).attr('data-locator', $( this ).attr('data-locator') - 1);
+                });
+                var parentGroup = $(element).parent().parent().parent();
+                parentGroup.data("childcount", parentGroup.data("childcount") - 1);
+                $(element).parent().remove()
+                plugin.$valueInput.val(data['operator']);
+            });
+        },
+
+        operandChanged: function(options, element) {
+            var plugin = this;
+            var requestData = {};
+            requestData["root_operator"] = plugin.$valueInput.val();
+            requestData["locator"] = plugin.buildLocatorChain(element, options);
+            if ($(element).hasClass(options.binaryLeftOperandClass)) {
+                requestData["operand_type"] = "left";
+            } else if ($(element).hasClass(options.binaryRightOperandClass)) {
+                requestData["operand_type"] = "right";
+            } else { return }
+            requestData["operand_value"] = $(element).val();
+            $.ajax({
+                url: "/criteria_operator-ui_component/operand_change",
+                data: requestData,
+                method: "POST"
+            }).done(function(data) {
+                plugin.$valueInput.val(data['operator']);
+            });
+        },
+
+        operatorTypeChanged: function(options, element) {
+            var plugin = this;
+            var requestData = {};
+            requestData["root_operator"] = plugin.$valueInput.val();
+            requestData["locator"] = plugin.buildLocatorChain(element, options);
+            requestData["operator_type_value"] = $(element).val();
+            var type;
+            if ($(element).hasClass(options.expressionOperatorTypeClass)) {
+                type = "expression_type_change"
+            } else if ($(element).hasClass(options.groupOperatorTypeClass)) {
+                type = "group_type_change"
+            } else { return }
+            $.ajax({
+                url: "/criteria_operator-ui_component/" + type,
+                data: requestData,
+                method: "POST"
+            }).done(function(data) {
+                plugin.$valueInput.val(data['operator']);
+            });
+        },
+
+        rebind: function() {
+            // TODO: reduce workload by just binding new instead of rebinding all
+            var plugin = this;
+            plugin.unbindEvents();
+            plugin.bindEvents();
+        },
+
+        buildLocatorChain: function(element, options) {
+            if ($(element).hasClass(options.rootElementClass)) {
+                return ""
+            } else {
+                var chain = this.buildLocatorChain($(element).parent(), options);
+                var locator = $(element).attr("data-locator");
+                if (typeof locator !== typeof undefined && locator !== false) {
+                    chain = (chain === "" ? "" : chain + "," ) + locator;
+                }
+                return chain;
+            }
+        }
+    });
+
+    /*
+     Create a lightweight plugin wrapper around the "Plugin" constructor,
+     preventing against multiple instantiations.
+
+     More: http://learn.jquery.com/plugins/basic-plugin-creation/
+     */
+    $.fn.criteriaEditor = function ( options ) {
+        this.each(function() {
+            if ( !$.data( this, "plugin_" + pluginName ) ) {
+                /*
+                 Use "$.data" to save each instance of the plugin in case
+                 the user wants to modify it. Using "$.data" in this way
+                 ensures the data is removed when the DOM element(s) are
+                 removed via jQuery methods, as well as when the user leaves
+                 the page. It's a smart way to prevent memory leaks.
+
+                 More: http://api.jquery.com/jquery.data/
+                 */
+                $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
+            }
+        });
+        /*
+         "return this;" returns the original jQuery object. This allows
+         additional jQuery methods to be chained.
+         */
+        return this;
+    };
+
+    /*
+     Attach the default plugin options directly to the plugin object. This
+     allows users to override default plugin options globally, instead of
+     passing the same option(s) every time the plugin is initialized.
+
+     For example, the user could set the "property" value once for all
+     instances of the plugin with
+     "$.fn.pluginName.defaults.property = 'myValue';". Then, every time
+     plugin is initialized, "property" will be set to "myValue".
+
+     More: http://learn.jquery.com/plugins/advanced-plugin-concepts/
+     */
+    $.fn.criteriaEditor.defaults = {
+        property: 'value',
+        onComplete: null,
+        rootElementClass: 'criteria_editor',
+        newExpression: '.criteria_editor_new_expression',
+        newGroup: '.criteria_editor_new_group',
+        placeholder: '.criteria_editor_empty_placeholder',
+        rowWrapper: '.criteria_editor_row_wrapper',
+        deleteExpression: '.criteria_expression_delete',
+        deleteGroup: '.criteria_group_delete',
+        valueInput: '.criteria_editor_root_operator',
+        operandInput: '.criteria_operand_input',
+        operatorTypeInput: '.criteria_operator_type_input',
+        binaryLeftOperandClass: 'binary_operator_left_operand',
+        binaryRightOperandClass: 'binary_operator_right_operand',
+        expressionOperatorTypeClass: 'expression_operator_type',
+        groupOperatorTypeClass: 'group_operator_type'
+    };
+
+})( jQuery, window, document );
+
+$(document).ready(function() {
+    $('.criteria_editor').criteriaEditor({
+        rootElementClass: 'criteria_editor'
+    });
+});

data/app/assets/stylesheets/criteria_operator/ui_component/application.css

@@ -1,15 +1,49 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */
+
+.criteria_editor {
+    border: dashed #2E2F30 thin;
+    padding: 5px;
+}
+
+.criteria_editor_header {
+    font-size: large;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.criteria_group_row {
+    border: dashed #666666 thin;
+}
+
+.criteria_group_row_header {
+    font-size: medium;
+    font-weight: bold;
+}
+
+.criteria_expression_row {
+    border: dotted #999999 thin;
+}
+
+.criteria_editor_empty_placeholder {
+    color: #999999;
+    padding: 15px;
+    border: dashed #999999;
+}
+
+.criteria_editor_row_wrapper {
+    margin-left: 10px;
+}

data/app/cells/criteria_operator/ui_component/base_cell.rb

@@ -0,0 +1,13 @@
+require 'cell'
+require 'cell/erb'
+
+module CriteriaOperator
+  module UiComponent
+    class BaseCell < Cell::ViewModel
+      include Cell::Erb
+
+      self.view_paths << "#{CriteriaOperator::UiComponent::Engine.root}/app/cells"
+
+    end
+  end
+end

data/app/cells/criteria_operator/ui_component/criteria_editor/show.erb

@@ -0,0 +1,5 @@
+<div class="criteria_editor">
+  <span class="criteria_editor_header">This is the header</span>
+  <%= cell('criteria_operator/ui_component/group', model).(:show, allow_delete: false) %>
+  <input type="hidden" class="criteria_editor_root_operator" value="<%= serialized_operator %>" />
+</div>

data/app/cells/criteria_operator/ui_component/criteria_editor_cell.rb

@@ -0,0 +1,27 @@
+require 'yaml'
+
+module CriteriaOperator
+  module UiComponent
+    class CriteriaEditorCell < BaseCell
+
+      def show
+        render
+      end
+
+      def choose_template(options = {})
+        if model.kind_of? BinaryOperator
+          ExpressionCell.call(model).call(:show, options)
+        else
+          GroupCell.call(model).call(:show, options)
+        end
+      end
+
+      private
+
+      def serialized_operator
+        YAML.dump(model) if model.is_a? BaseOperator
+      end
+    end
+  end
+end
+

data/app/cells/criteria_operator/ui_component/expression/show.erb

@@ -0,0 +1,11 @@
+<div class="criteria_expression_row" data-locator="<%= @locator %>">
+  <input type="text" class="criteria_operand_input binary_operator_left_operand" placeholder="property" value="<%= property_name %>" />
+  <select class="criteria_operator_type_input expression_operator_type">
+    <% operators.each do |op| %>
+      <option value="<%= op[:value] %>" <% if op[:value] == operator_type %>selected<% end %>><%= op[:text] %></option>
+    <% end %>
+  </select>
+  <input type="text" class="criteria_operand_input binary_operator_right_operand" placeholder="value" value="<%= value %>" />
+  <a href="#" class="criteria_expression_delete">Delete</a>
+</div>
+

data/app/cells/criteria_operator/ui_component/expression_cell.rb

@@ -0,0 +1,48 @@
+module CriteriaOperator
+  module UiComponent
+    class ExpressionCell < BaseCell
+
+      def show(options = {})
+        @locator = options.has_key?(:locator) ? options[:locator] : ''
+        render
+      end
+
+      private
+
+      def property_name
+        if model.kind_of?(BinaryOperator) && model.left_operand.kind_of?(OperandProperty)
+          model.left_operand.property_name
+        else
+          ''
+        end
+      end
+
+      def value
+        if model.kind_of?(BinaryOperator) && model.right_operand.kind_of?(OperandValue)
+          model.right_operand.value
+        else
+          ''
+        end
+      end
+
+      def operator_type
+        if model.kind_of?(BinaryOperator)
+          model.operator_type
+        else
+          0
+        end
+      end
+
+      def operators
+        ops = []
+        ops << { value: BinaryOperatorType::EQUAL, text: 'equal to' }
+        ops << { value: BinaryOperatorType::NOT_EQUAL, text: 'not equal to' }
+        ops << { value: BinaryOperatorType::GREATER, text: 'greater than' }
+        ops << { value: BinaryOperatorType::GREATER_OR_EQUAL, text: 'greater than or equal to' }
+        ops << { value: BinaryOperatorType::LESS, text: 'less than' }
+        ops << { value: BinaryOperatorType::LESS_OR_EQUAL, text: 'less than or equal to' }
+        ops
+      end
+    end
+  end
+end

data/app/cells/criteria_operator/ui_component/group/show.erb

@@ -0,0 +1,23 @@
+<div class="criteria_group_row" data-locator="<%= @locator %>" data-childcount="<%= @group.operand_collection.count %>">
+  <select class="criteria_operator_type_input group_operator_type">
+    <% operators.each do |op| %>
+        <option value="<%= op[:value] %>" <% if op[:value] == operator_type %>selected<% end %>><%= op[:text] %></option>
+    <% end %>
+  </select>
+  <% if @allow_delete %>
+      <a href="#" class="criteria_group_delete">Delete</a>
+  <% end %>
+  <div class="criteria_editor_row_wrapper">
+    <% if empty? %>
+        <div class="criteria_editor_empty_placeholder">It's lonely inside here...</div>
+    <% else %>
+        <% c = 0 %>
+        <% @group.operand_collection.each do |operand| %>
+            <%= cell('criteria_operator/ui_component/criteria_editor', operand).(:choose_template, locator: c) %>
+            <% c += 1 %>
+        <% end %>
+    <% end %>
+  </div>
+  <a href="#" class="criteria_editor_new_group">Add group</a><br />
+  <a href="#" class="criteria_editor_new_expression">Add expression</a>
+</div>

data/app/cells/criteria_operator/ui_component/group_cell.rb

@@ -0,0 +1,49 @@
+module CriteriaOperator
+  module UiComponent
+    class GroupCell < BaseCell
+
+      def show(options = {})
+        @allow_delete = options.has_key?(:allow_delete) ? options[:allow_delete] : true
+        @locator = options.has_key?(:locator) ? options[:locator] : ''
+        if model.kind_of? GroupOperator
+          @group = model
+        elsif model_negated_group?
+          @group = model.operand
+        else
+          @group = nil
+        end
+        render
+      end
+
+    private
+
+      def operator_type
+        if model.kind_of? GroupOperator
+          model.operator_type
+        elsif model_negated_group?
+          model.operand.operator_type * -1
+        else
+          0
+        end
+      end
+
+      def operators
+        ops = []
+        ops << { value: GroupOperatorType::AND, text: 'AND' }
+        ops << { value: GroupOperatorType::OR, text: 'OR' }
+        ops << { value: -1 * GroupOperatorType::AND, text: 'NAND' }
+        ops << { value: -1 * GroupOperatorType::OR, text: 'NOR' }
+        ops
+      end
+
+      def empty?
+        !@group.kind_of?(GroupOperator) || @group.operand_collection.empty?
+      end
+
+      def model_negated_group?
+        model.kind_of?(UnaryOperator) && (model.operator_type == UnaryOperatorType::NOT) && model.operand.kind_of?(GroupOperator)
+      end
+
+    end
+  end
+end

data/app/controllers/criteria_operator/ui_component/ajax_controller.rb

@@ -0,0 +1,146 @@
+require_dependency "criteria_operator/ui_component/application_controller"
+require 'cell'
+require 'cell/erb'
+require 'yaml'
+
+module CriteriaOperator
+  module UiComponent
+    class AjaxController < ApplicationController
+      def create_expression
+        return unless ajax_params.has_key? :root_operator
+        root_operator = root_op_from_params
+        operator = BinaryOperator.new
+        add_sub_operator root_operator, operator, ajax_params[:locator]
+        html = ExpressionCell.call(operator).call(:show, locator: new_locator)
+        render json: { html: html, operator: YAML.dump(root_operator) }
+      end
+
+      def create_group
+        return unless ajax_params.has_key? :root_operator
+        root_operator = root_op_from_params
+        operator = GroupOperator.new
+        add_sub_operator root_operator, operator, ajax_params[:locator]
+        html = GroupCell.call(operator).call(:show, locator: new_locator)
+        render json: { html: html, operator: YAML.dump(root_operator) }
+      end
+
+      def delete_element
+        return unless (ajax_params.has_key? :root_operator) && (ajax_params.has_key? :locator)
+        root_operator = root_op_from_params
+        remove_sub_operator root_operator, ajax_params[:locator]
+        render json: { operator: YAML.dump(root_operator) }
+      end
+
+      def operand_change
+        return unless (ajax_params.has_key? :root_operator) && (ajax_params.has_key? :locator)
+        root_operator = root_op_from_params
+        op = locate_sub_operator root_operator, ajax_params[:locator]
+        op.left_operand = OperandProperty.new(ajax_params[:operand_value]) if ajax_params[:operand_type] == 'left'
+        op.right_operand = OperandValue.new(ajax_params[:operand_value]) if ajax_params[:operand_type] == 'right'
+        render json: { operator: YAML.dump(root_operator) }
+      end
+
+      def expression_type_change
+        return unless (ajax_params.has_key? :root_operator) && (ajax_params.has_key? :locator)
+        root_operator = root_op_from_params
+        op = locate_sub_operator root_operator, ajax_params[:locator]
+        op.operator_type = ajax_params[:operator_type_value]
+        render json: { operator: YAML.dump(root_operator) }
+      end
+
+      def group_type_change
+        return unless (ajax_params.has_key? :root_operator) && (ajax_params.has_key? :locator)
+        root_operator = root_op_from_params
+        root_operator = change_sub_group_type root_operator, ajax_params[:locator], ajax_params[:operator_type_value].to_i
+        render json: { operator: YAML.dump(root_operator) }
+      end
+
+      private
+
+      def ajax_params
+        params.permit :root_operator, :locator, :child_count, :operand_type, :operand_value, :operator_type_value
+      end
+
+      def root_op_from_params
+        YAML.safe_load ajax_params[:root_operator], (ObjectSpace.each_object(Class).select { |klass| klass < BaseOperator })
+      end
+
+      def new_locator
+        if ajax_params.has_key? :child_count
+          ajax_params[:child_count].to_s
+        else
+          '0'
+        end
+      end
+
+      def locate_sub_operator(operator, locator)
+        op = get_negated_group_if_exist operator
+        locator.split(',').map(&:to_i).each do |pos|
+          # TODO: some kind of error handling beside cancelling?
+          return nil unless op.is_a? GroupOperator
+          op = op.operand_collection[pos]
+          op = get_negated_group_if_exist op
+        end
+        op
+      end
+
+      def add_sub_operator(root_op, extend_op, locator)
+        op = locate_sub_operator root_op, locator
+        op.operand_collection << extend_op
+      end
+
+      def remove_sub_operator(root_op, locator)
+        locator_array = locator.split(',')
+        pos = locator_array.pop
+        op = root_op
+        unless locator_array.empty?
+          op = locate_sub_operator op, locator_array.join(',')
+        end
+        op = get_negated_group_if_exist op
+        op.operand_collection.delete_at pos.to_i
+      end
+
+      def change_sub_group_type(root_op, locator, op_type)
+        op = root_op
+        last_pos = -1
+        parent_op = nil
+        locator_array = locator.split(',')
+        locator_array.map(&:to_i).each do |pos|
+          op = get_negated_group_if_exist op
+          last_pos = pos
+          parent_op = op
+          op = op.operand_collection[pos]
+        end
+
+        if negation? op
+          if op_type > 0
+            parent_op.operand_collection[last_pos] = op.operand
+            op.operand.operator_type = op_type
+          else
+            op.operand.operator_type = op_type * -1
+          end
+        else
+          if op_type < 0
+            parent_op.operand_collection[last_pos] = UnaryOperator.new op, UnaryOperatorType::NOT
+            op.operator_type = op_type * -1
+          else
+            op.operator_type = op_type
+          end
+        end
+        root_op
+      end
+
+      def get_negated_group_if_exist(op)
+        if negation? op
+          op.operand
+        else
+          op
+        end
+      end
+
+      def negation?(op)
+        op.is_a?(UnaryOperator) && (op.operator_type == UnaryOperatorType::NOT)
+      end
+    end
+  end
+end

data/app/controllers/criteria_operator/ui_component/application_controller.rb

@@ -1,7 +1,7 @@
-module CriteriaOperator
-  module UiComponent
-    class ApplicationController < ActionController::Base
-      protect_from_forgery with: :exception
-    end
-  end
-end
+module CriteriaOperator
+  module UiComponent
+    class ApplicationController < ActionController::Base
+      protect_from_forgery with: :exception
+    end
+  end
+end

data/bin/rails

@@ -1,13 +1,14 @@
-#!/usr/bin/env ruby.exe
-# This command will automatically be run when you run "rails" with Rails gems
-# installed from the root of your application.
-
-ENGINE_ROOT = File.expand_path('../..', __FILE__)
-ENGINE_PATH = File.expand_path('../../lib/criteria_operator/ui_component/engine', __FILE__)
-
-# Set up gems listed in the Gemfile.
-ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
-require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
-
-require 'rails/all'
-require 'rails/engine/commands'
+#!/usr/bin/env ruby.exe
+# This command will automatically be run when you run "rails" with Rails gems
+# installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/criteria_operator/ui_component/engine', __FILE__)
+APP_PATH = File.expand_path('../../test/dummy/config/application', __FILE__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+
+require 'rails/all'
+require 'rails/engine/commands'

data/config/routes.rb

@@ -1,2 +1,8 @@
-CriteriaOperator::UiComponent::Engine.routes.draw do
-end
+CriteriaOperator::UiComponent::Engine.routes.draw do
+  post 'create_expression', controller: :ajax, action: :create_expression
+  post 'create_group', controller: :ajax, action: :create_group
+  post 'delete_element', controller: :ajax, action: :delete_element
+  post 'operand_change', controller: :ajax, action: :operand_change
+  post 'expression_type_change', controller: :ajax, action: :expression_type_change
+  post 'group_type_change', controller: :ajax, action: :group_type_change
+end

data/criteria_operator-ui_component.gemspec

@@ -1,3 +1,4 @@
+# coding: utf-8
 $:.push File.expand_path("../lib", __FILE__)
 
 # Maintain your gem's version:
@@ -37,13 +38,15 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "minitest", "~> 5.0"
   spec.add_development_dependency "minitest-reporters", "~> 1.1"
   spec.add_development_dependency "coveralls", "~> 0.8"
+  spec.add_development_dependency "sqlite3"
 
-  spec.add_dependency "rails", "~> 5.0.2"
+  spec.add_dependency "rails", "~> 5.1"
   spec.add_dependency "cells", "~> 4.1"
+  spec.add_dependency "cells-rails", "~> 0.0"
+  spec.add_dependency "cells-erb", "~> 0.1"
+  spec.add_dependency "jquery-rails", "~> 4.3"
   spec.add_dependency "criteria_operator", "~> 0.2"
 
   # let yard run on install
   spec.metadata["yard.run"] = "yri"
-
-
 end

data/lib/criteria_operator/ui_component.rb

@@ -1,4 +1,5 @@
-require "criteria_operator/ui_component/engine"
+require 'criteria_operator/ui_component/engine'
+require 'cells/rails'
 
 module CriteriaOperator
   module UiComponent

data/lib/criteria_operator/ui_component/engine.rb

@@ -1,7 +1,12 @@
 module CriteriaOperator
   module UiComponent
     class Engine < ::Rails::Engine
+      require 'jquery-rails'
+      require 'criteria_operator'
       isolate_namespace CriteriaOperator::UiComponent
+
+      # config.assets.paths << File.expand_path("../../../app/assets/stylesheets/application", __FILE__)
+      # config.assets.paths << File.expand_path("../../../app/assets/javascripts/application", __FILE__)
     end
   end
 end

data/lib/criteria_operator/ui_component/version.rb

@@ -1,5 +1,5 @@
 module CriteriaOperator
   module UiComponent
-    VERSION = '0.1.0'
+    VERSION = '0.2.0'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: criteria_operator-ui_component
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Florian Koch
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-05-12 00:00:00.000000000 Z
+date: 2017-05-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -80,20 +80,34 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '0.8'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 5.0.2
+        version: '5.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 5.0.2
+        version: '5.1'
 - !ruby/object:Gem::Dependency
   name: cells
   requirement: !ruby/object:Gem::Requirement
@@ -108,6 +122,48 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '4.1'
+- !ruby/object:Gem::Dependency
+  name: cells-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.0'
+- !ruby/object:Gem::Dependency
+  name: cells-erb
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
 - !ruby/object:Gem::Dependency
   name: criteria_operator
   requirement: !ruby/object:Gem::Requirement
@@ -141,13 +197,17 @@ files:
 - app/assets/config/criteria_operator_ui_component_manifest.js
 - app/assets/images/criteria_operator/ui_component/.keep
 - app/assets/javascripts/criteria_operator/ui_component/application.js
+- app/assets/javascripts/criteria_operator/ui_component/criteria_editor.js
 - app/assets/stylesheets/criteria_operator/ui_component/application.css
+- app/cells/criteria_operator/ui_component/base_cell.rb
+- app/cells/criteria_operator/ui_component/criteria_editor/show.erb
+- app/cells/criteria_operator/ui_component/criteria_editor_cell.rb
+- app/cells/criteria_operator/ui_component/expression/show.erb
+- app/cells/criteria_operator/ui_component/expression_cell.rb
+- app/cells/criteria_operator/ui_component/group/show.erb
+- app/cells/criteria_operator/ui_component/group_cell.rb
+- app/controllers/criteria_operator/ui_component/ajax_controller.rb
 - app/controllers/criteria_operator/ui_component/application_controller.rb
-- app/helpers/criteria_operator/ui_component/application_helper.rb
-- app/jobs/criteria_operator/ui_component/application_job.rb
-- app/mailers/criteria_operator/ui_component/application_mailer.rb
-- app/models/criteria_operator/ui_component/application_record.rb
-- app/views/layouts/criteria_operator/ui_component/application.html.erb
 - bin/console
 - bin/rails
 - bin/setup

data/app/helpers/criteria_operator/ui_component/application_helper.rb

@@ -1,6 +0,0 @@
-module CriteriaOperator
-  module UiComponent
-    module ApplicationHelper
-    end
-  end
-end

data/app/jobs/criteria_operator/ui_component/application_job.rb

@@ -1,6 +0,0 @@
-module CriteriaOperator
-  module UiComponent
-    class ApplicationJob < ActiveJob::Base
-    end
-  end
-end

data/app/mailers/criteria_operator/ui_component/application_mailer.rb

@@ -1,8 +0,0 @@
-module CriteriaOperator
-  module UiComponent
-    class ApplicationMailer < ActionMailer::Base
-      default from: 'from@example.com'
-      layout 'mailer'
-    end
-  end
-end

data/app/models/criteria_operator/ui_component/application_record.rb

@@ -1,7 +0,0 @@
-module CriteriaOperator
-  module UiComponent
-    class ApplicationRecord < ActiveRecord::Base
-      self.abstract_class = true
-    end
-  end
-end

data/app/views/layouts/criteria_operator/ui_component/application.html.erb

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Criteria operator ui component</title>
-  <%= stylesheet_link_tag    "criteria_operator/ui_component/application", media: "all" %>
-  <%= javascript_include_tag "criteria_operator/ui_component/application" %>
-  <%= csrf_meta_tags %>
-</head>
-<body>
-
-<%= yield %>
-
-</body>
-</html>