rails_admin_json_editor 0.0.24 → 0.0.25

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 80616545cbd8e15804d798ec6bde20b529363355
-  data.tar.gz: 2e7c6f669da13d75868edec8a9e56a49b90ed545
+  metadata.gz: 9f8dae8b1ebeaffd54086badfea8ba5c6ee0ab43
+  data.tar.gz: c974baf5abeb93f121981558bd28641a070d5dc5
 SHA512:
-  metadata.gz: 29871295c6f022ab816f8bd3bd0e22d0364c589340aa6209e66c1f9bf77281034dcde1606383d7559c1340806aeb1257a644b4b93c2a2252b86af945f4f04c97
-  data.tar.gz: 58f0d95407eec864e82a2ac5ac29f6f63e0ff87bae4471ed1bd617caf60dd01e3c6cb10d87baca3f75ce7c77e35d32808f7fb49849c49f0ab5d134005bf8aa50
+  metadata.gz: 236d6d1364ee1514f3436d8e3f4cdc33c08c6bf77f4e465defe149d3f339903f2356af8dc00b9be01ccc3ff62745ce388bb8055adf1845aa1c2e66fb9e053288
+  data.tar.gz: 39dea58187e439508c4b958a83fdba7efb225375015852df6eaccdb61e0783f86272ef0145f2910ae30f5e38eecf2b4ee37356ce4165478914ab8fda677d9c03

data/app/assets/javascripts/rails_admin_json_editor/ra.filtering-select.custom.js

@@ -0,0 +1,199 @@
+/*
+ * RailsAdmin filtering select @VERSION
+ *
+ * Based on the combobox example from jQuery UI documentation
+ * http://jqueryui.com/demos/autocomplete/#combobox
+ *
+ * License
+ *
+ * http://www.railsadmin.org
+ *
+ * Depends:
+ *   jquery.ui.core.js
+ *   jquery.ui.widget.js
+ *   jquery.ui.autocomplete.js
+ */
+(function($) {
+  $.widget("ra.jsonEditorFilteringSelect", {
+    options: {
+      createQuery: function(query) {
+        return { query: query };
+      },
+      minLength: 0,
+      searchDelay: 200,
+      remote_source: null,
+      source: null,
+      xhr: false
+    },
+
+    _create: function() {
+      var self = this,
+        select = this.element.hide(),
+        selected = select.children(":selected"),
+        value = selected.val() ? selected.text() : "";
+
+      if (this.options.xhr) {
+        this.options.source = this.options.remote_source;
+      } else {
+        this.options.source = select.children("option").map(function() {
+          return { label: $(this).text(), value: this.value };
+        }).toArray();
+      }
+
+      var remoteSource = this.element.data('remote-source');
+      if(remoteSource) {
+        this.options.xhr = true;
+        this.options.source = remoteSource;
+      }
+      this.element.removeClass('not-initialized-filtering-select');
+
+      var filtering_select = $('<div class="input-append filtering-select" style="float:left"></div>')
+      var input = this.input = $('<input type="text">')
+        .val(value)
+        .addClass("form-control ra-filtering-select-input")
+        .attr('style', select.attr('style'))
+        .show()
+        .autocomplete({
+          delay: this.options.searchDelay,
+          minLength: this.options.minLength,
+          source: this._getSourceFunction(this.options.source),
+          select: function(event, ui) {
+            var option = $('<option></option>').attr('value', ui.item.id).attr('selected', 'selected').text(ui.item.value);
+            select.html(option);
+            select.trigger("change", ui.item.id);
+            select[0].dispatchEvent(new Event('change')); // Dispatch native event
+            self._trigger("selected", event, {
+              item: option
+            });
+            $(self.element.parents('.controls')[0]).find('.update').removeClass('disabled');
+          },
+          change: function(event, ui) {
+            if (!ui.item) {
+              var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
+                  valid = false;
+              select.children("option").each(function() {
+                if ($(this).text().match(matcher)) {
+                  this.selected = valid = true;
+                  return false;
+                }
+              });
+              if (!valid || $(this).val() == '') {
+                // remove invalid value, as it didn't match anything
+                $(this).val(null);
+                select.html($('<option value="" selected="selected"></option>'));
+                input.data("ui-autocomplete").term = "";
+                $(self.element.parents('.controls')[0]).find('.update').addClass('disabled');
+                return false;
+              }
+
+            }
+          }
+        })
+        .keyup(function() {
+          /* Clear select options and trigger change if selected item is deleted */
+          if ($(this).val().length == 0) {
+            select.html($('<option value="" selected="selected"></option>'));
+            select.trigger("change");
+          }
+        })
+
+      if(select.attr('placeholder'))
+        input.attr('placeholder', select.attr('placeholder'))
+
+      input.data("ui-autocomplete")._renderItem = function(ul, item) {
+        return $("<li></li>")
+          .data("ui-autocomplete-item", item)
+          .append( $( "<a></a>" ).html( item.label || item.id ) )
+          .appendTo(ul);
+      };
+
+      // replace with dropdown button once ready in twitter-bootstrap
+      var button = this.button = $('<label class="add-on ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Show All Items" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text">&nbsp;</span></label>')
+        .click(function() {
+          // close if already visible
+          if (input.autocomplete("widget").is(":visible")) {
+            input.autocomplete("close");
+            return;
+          }
+
+          // pass empty string as value to search for, displaying all results
+          input.autocomplete("search", "");
+          input.focus();
+        });
+
+      filtering_select.append(input).append(button).insertAfter(select);
+
+
+    },
+
+    _getResultSet: function(request, data, xhr) {
+      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
+
+      return $.map(data, function(el, i) {
+        // match regexp only for local requests, remote ones are already filtered, and label may not contain filtered term.
+        if ((el.id || el.value) && (xhr || matcher.test(el.label))) {
+          return {
+            label: el.label ? el.label.replace(
+              new RegExp(
+                "(?![^&;]+;)(?!<[^<>]*)(" +
+                $.ui.autocomplete.escapeRegex(request.term) +
+                ")(?![^<>]*>)(?![^&;]+;)", "gi"
+             ), "<strong>$1</strong>") : el.id,
+            value: el.label || el.id,
+            id: el.id || el.value
+          };
+        }
+      });
+    },
+
+    _getSourceFunction: function(source) {
+
+      var self = this,
+          requestIndex = 0;
+
+      if ($.isArray(source)) {
+
+        return function(request, response) {
+          response(self._getResultSet(request, source, false));
+        };
+
+      } else if (typeof source === "string") {
+
+        return function(request, response) {
+
+          if (this.xhr) {
+            this.xhr.abort();
+          }
+
+          this.xhr = $.ajax({
+            url: source,
+            data: self.options.createQuery(request.term),
+            dataType: "json",
+            autocompleteRequest: ++requestIndex,
+            success: function(data, status) {
+              if (this.autocompleteRequest === requestIndex) {
+                response(self._getResultSet(request, data, true));
+              }
+            },
+            error: function() {
+              if (this.autocompleteRequest === requestIndex) {
+                response([]);
+              }
+            }
+          });
+        };
+
+      } else {
+
+        return source;
+      }
+    },
+
+    destroy: function() {
+      this.input.remove();
+      this.button.remove();
+      this.element.show();
+      $.Widget.prototype.destroy.call(this);
+    }
+  });
+})(jQuery);

data/app/assets/javascripts/rails_admin_json_editor/ra.remoteForm.custom.js

@@ -0,0 +1,91 @@
+(function($) {
+  'use strict';
+
+  window.jsonEditorRemoteForm = {
+    init: function(url) {
+      var deferred = $.Deferred();
+
+      setTimeout(function() {
+        $.ajax({
+          url: url,
+          beforeSend: function(xhr) {
+            xhr.setRequestHeader("Accept", "text/javascript");
+          },
+          success: function(data, status, xhr) {
+            deferred.resolve(data);
+          },
+          error: function(xhr, status, error) {
+            deferred.reject(xhr.responseText);
+          },
+          dataType: 'text'
+        });
+      }, 200);
+
+      return deferred.promise();
+    },
+
+    setupForm: function($modal) {
+      var deferred = $.Deferred();
+
+      var $form = $modal.find("form");
+      var saveButtonText = $modal.find(":submit[name=_save]").html();
+      var cancelButtonText = $modal.find(":submit[name=_continue]").html();
+      $modal.find('.form-actions').remove();
+
+      $form.attr("data-remote", true);
+      $modal.find('.modal-header-title').text($form.data('title'));
+      $modal.find('.cancel-action').unbind().click(function(){
+        $modal.modal('hide');
+        deferred.reject();
+        return false;
+      }).html(cancelButtonText);
+
+      $modal.find('.save-action').unbind().click(function(){
+        $form.submit();
+        return false;
+      }).html(saveButtonText);
+
+      $(document).trigger('rails_admin.dom_ready', [$form]);
+
+      $form.bind("ajax:complete", function(xhr, data, status) {
+        if (status === 'error') {
+          // TODO
+          // $modal.find('.modal-body').html(data.responseText);
+          // widget._bindFormEvents();
+          deferred.reject(data.responseText);
+        } else {
+          var json = $.parseJSON(data.responseText);
+          $modal.modal('hide');
+          deferred.resolve(json);
+        }
+      });
+
+      return deferred.promise();
+    },
+
+    getModal: function() {
+      return $('<div id="modal" class="modal fade">\
+          <div class="modal-dialog">\
+          <div class="modal-content">\
+          <div class="modal-header">\
+            <a href="#" class="close" data-dismiss="modal">&times;</a>\
+            <h3 class="modal-header-title">...</h3>\
+          </div>\
+          <div class="modal-body">\
+            ...\
+          </div>\
+          <div class="modal-footer">\
+            <a href="#" class="btn cancel-action">...</a>\
+            <a href="#" class="btn btn-primary save-action">...</a>\
+          </div>\
+          </div>\
+          </div>\
+        </div>')
+        .modal({
+          keyboard: true,
+          backdrop: true,
+          show: true
+        });
+    }
+  };
+})(jQuery);

data/app/assets/javascripts/rails_admin_json_editor/rails_admin_json_editor.js

@@ -1,8 +1,11 @@
 /*globals $, Vue, markdown, _*/
 
-//= require rails_admin_json_editor/vue.0.11.4
-//= require rails_admin_json_editor/lodash.2.4.1
-//= require rails_admin_json_editor/markdown
+//= require rails_admin_json_editor/lib/vue.0.11.4
+//= require rails_admin_json_editor/lib/lodash.2.4.1
+//= require rails_admin_json_editor/lib/markdown
+
+//= require rails_admin_json_editor/ra.remoteForm.custom
+//= require rails_admin_json_editor/ra.filtering-select.custom
 
 var vm;
 
@@ -84,21 +87,61 @@ $(document).on('rails_admin.dom_ready', function() {
           this.parentComponents[this.parentIndex].properties = clonedproperties;
         },
 
-        onChangePicker: function(event, fieldName) {
-          var el = event.target;
-          var value = el.options[el.selectedIndex].getAttribute('data-json');
-          var json = JSON.parse(value);
+        showPickerModal: function(e, fieldName, baseUrl) {
+          var remoteForm = window.jsonEditorRemoteForm;
+          var $modal = remoteForm.getModal();
+          var self = this;
+
+          remoteForm.init(baseUrl + '/new?modal=true')
+            // Inject form-DOM into modal
+            .then(function(form) {
+              $modal.find('.modal-body').html(form);
+            })
+
+            // Wait for results from modal
+            .then(function() {
+              return remoteForm.setupForm($modal);
+            })
+
+            // Fetch full JSON
+            .then(function(minimalJson) {
+              var url = baseUrl + '/' + minimalJson.id + '.json';
+              return $.get(url);
+            })
+
+            // Full result received
+            .then(function(json) {
+              var clonedproperties = _.clone(self.component.properties);
+              clonedproperties[fieldName] = json;
+              self.parentComponents[self.parentIndex].properties = clonedproperties;
+            })
+
+            // Cleanup
+            .always(function() {
+              setTimeout(function() {
+                $('.modal-backdrop, #modal').remove();
+              }, 500);
+            });
+        },
 
-          var clonedproperties = _.clone(this.component.properties);
-          clonedproperties[fieldName] = json;
-          this.parentComponents[this.parentIndex].properties = clonedproperties;
+        onChangePickerSelect: function(e, fieldName, baseUrl) {
+          var self = this;
+          var id = $(e.currentTarget).val();
+          var url = baseUrl + '/' + id + '.json';
+
+          $.get(url).then(function(json) {
+            var clonedproperties = _.clone(self.component.properties);
+            clonedproperties[fieldName] = json;
+            self.parentComponents[self.parentIndex].properties = clonedproperties;
+          });
+        },
+
+        pickerResult: function(fieldName) {
+          return this.component.properties[fieldName];
         },
 
-        pickerOptionIsSelected: function(fieldName, recordLabel, recordName) {
-          return this.component.properties &&
-            this.component.properties[fieldName] &&
-            this.component.properties[fieldName][recordLabel] &&
-            this.component.properties[fieldName][recordLabel].replace(/["']/g, "") === recordName.replace(/["']/g, "");
+        removePickerResult: function(fieldName) {
+          this.component.properties[fieldName] = null;
         },
 
         nestedModelIsAllowed: function(model, allowedModels) {
@@ -134,6 +177,10 @@ $(document).on('rails_admin.dom_ready', function() {
     },
     computed: {
       result: function() {
+        // Hack in jquery filtering select
+        $('.not-initialized-filtering-select').jsonEditorFilteringSelect();
+
+        // Format result
         var result = { components: this.components };
         $(this.$el).trigger('json-editor:changed', result);
         return JSON.stringify(result);

data/app/assets/stylesheets/rails_admin_json_editor/rails_admin_json_editor.css.scss

@@ -6,6 +6,10 @@ body.rails_admin .form-horizontal.denser .json-editor {
 
   .form-control:not([type="checkbox"]) {
     width: 90%;
+
+    &.ra-filtering-select-input {
+      width: auto;
+    }
   }
 
   .btn-toggle-json {
@@ -35,4 +39,28 @@ body.rails_admin .form-horizontal.denser .json-editor {
     padding: 0.1em 0.5em;
     margin: 0 0 -2px 5px;
   }
+
+  .picker {
+    .btn.remove {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    .btn.create {
+      margin-left: 10px;
+    }
+
+    .picker-preview {
+      img {
+        margin-bottom: 5px;
+      }
+
+      p {
+        margin-top: 8px;
+        margin-right: 12px;
+        display: inline-block;
+        font-size: 14px;
+      }
+    }
+  }
 }

data/app/views/rails_admin_json_editor/main/_component.html.erb

@@ -0,0 +1,68 @@
+<div class="component">
+  <legend>
+    <span class="model-label"><%= model.label %></span>
+    <pre class="guid" v-text="component.guid"></pre>
+
+    <div class="btn-group btn-group-sm pull-right">
+      <% if field.orderable %>
+        <button v-on="click: moveUp" type="button" class="btn btn-default {{ moveUpEnabled ? '' : 'disabled' }}">
+          <i class="icon-circle-arrow-up"></i>
+        </button>
+
+        <button v-on="click: moveDown" type="button" class="btn btn-default {{ moveDownEnabled ? '' : 'disabled' }}">
+          <i class="icon-circle-arrow-down"></i>
+        </button>
+      <% end %>
+
+      <button v-on="click: expanded = !expanded" type="button" class="btn btn-default">
+        <i class="{{ expanded ? 'icon-resize-small' : 'icon-resize-full' }}"></i>
+      </button>
+
+      <button v-on="click:remove" type="button" class="btn btn-default">
+        <i class="icon-remove"></i>
+      </button>
+    </div>
+  </legend>
+
+  <div v-show="expanded">
+    <%= content_tag :p, model.help, class: "help-block" unless model.help.nil? %>
+
+    <% model.fields.each do |f| %>
+      <div class="control-group row <%= f.css_class %>">
+        <label class="col-sm-2 control-label"><%= f.label %></label>
+
+        <div class="controls col-sm-10">
+          <% if f.type == :string %>
+            <%= render 'rails_admin_json_editor/main/component_fields/string', f: f %>
+          <% end %>
+
+          <% if f.type == :text %>
+            <%= render 'rails_admin_json_editor/main/component_fields/text', f: f %>
+          <% end %>
+
+          <% if f.type == :markdown %>
+            <%= render 'rails_admin_json_editor/main/component_fields/markdown', f: f %>
+          <% end %>
+
+          <% if f.type == :boolean %>
+            <%= render 'rails_admin_json_editor/main/component_fields/boolean', f: f %>
+          <% end %>
+
+          <% if f.type == :enum %>
+            <%= render 'rails_admin_json_editor/main/component_fields/enum', f: f %>
+          <% end %>
+
+          <% if f.type == :picker %>
+            <%= render 'rails_admin_json_editor/main/component_fields/picker', f: f %>
+          <% end %>
+
+          <% if f.type == :list %>
+            <%= render 'rails_admin_json_editor/main/component_fields/list', f: f %>
+          <% end %>
+
+          <%= content_tag :p, f.help, class: "help-block" unless f.help.nil? %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/rails_admin_json_editor/main/_form_json_editor.html.erb

@@ -9,144 +9,21 @@
 
   <% field.models.each do |model| %>
     <script type="text/x-template" id="template-fields-for-<%= model.name %>">
-      <div class="component">
-        <legend>
-          <span class="model-label"><%= model.label %></span>
-          <pre class="guid" v-text="component.guid"></pre>
-
-          <div class="btn-group btn-group-sm pull-right">
-            <% if field.orderable %>
-              <button v-on="click: moveUp" type="button" class="btn btn-default {{ moveUpEnabled ? '' : 'disabled' }}">
-                <i class="icon-circle-arrow-up"></i>
-              </button>
-
-              <button v-on="click: moveDown" type="button" class="btn btn-default {{ moveDownEnabled ? '' : 'disabled' }}">
-                <i class="icon-circle-arrow-down"></i>
-              </button>
-            <% end %>
-
-            <button v-on="click: expanded = !expanded" type="button" class="btn btn-default">
-              <i class="{{ expanded ? 'icon-resize-small' : 'icon-resize-full' }}"></i>
-            </button>
-
-            <button v-on="click:remove" type="button" class="btn btn-default">
-              <i class="icon-remove"></i>
-            </button>
-          </div>
-        </legend>
-
-        <div v-show="expanded">
-          <%= content_tag :p, model.help, class: "help-block" unless model.help.nil? %>
-
-          <% model.fields.each do |f| %>
-            <div class="control-group row <%= f.css_class %>">
-              <label class="col-sm-2 control-label"><%= f.label %></label>
-
-              <div class="controls col-sm-10">
-                <% if f.type == :string %>
-                  <input v-model="component.properties.<%= f.name %>" type="text" class="form-control" />
-                <% end %>
-
-                <% if f.type == :text %>
-                  <textarea v-model="component.properties.<%= f.name %>" class="form-control"></textarea>
-                <% end %>
-
-                <% if f.type == :markdown %>
-                  <div class="markdown-field">
-                    <textarea v-model="component.properties.<%= f.name %>" class="form-control" rows="10"></textarea>
-
-                    <button v-on="click: showPreview = !showPreview" type="button" class="btn btn-default">
-                      <i class="icon-eye-open"></i>
-                    </button>
-                  </div>
-
-                  <div class="markdown-preview" v-show="showPreview">
-                    <div v-html="component.properties.<%= f.name %> | markdown"></div>
-                  </div>
-                <% end %>
-
-                <% if f.type == :boolean %>
-                  <input type="checkbox" v-model="component.properties.<%= f.name %>" class="form-control">
-                <% end %>
-
-                <% if f.type == :enum %>
-                  <%= select_tag(nil, options_for_select(f.enum_options), include_blank: true, class: "form-control", "v-model" => "component.properties.#{f.name}") %>
-                <% end %>
-
-                <% if f.type == :picker %>
-                  <select v-on="change: onChangePicker($event, '<%= f.name %>')" class="form-control record-picker">
-                    <option value=""></option>
-                    <%
-                      records = Rails.cache.fetch("record-picker-#{f.picker_model_name}") do
-                        f.picker_model_name.constantize.send(:all).order(f.picker_label)
-                      end
-                    %>
-                    <% records.each do |record| %>
-                      <option
-                        v-attr="selected: pickerOptionIsSelected('<%= f.name %>', '<%= f.picker_label %>', '<%= record.send(f.picker_label).gsub(/['"]/, '') %>')"
-                        value="<%= record.send(f.picker_label) %>"
-                        data-json="<%= record.to_json %>">
-                          <%= record.send(f.picker_label) %>
-                      </option>
-                    <% end %>
-                  </select>
-                <% end %>
-
-                <% if f.type == :list %>
-                  <div v-repeat="nestedComponent: component.properties.<%= f.name %>">
-                    <div
-                      v-component="fields-for-{{ nestedComponent.model_name }}"
-                      v-with="component: nestedComponent, parentComponents: component.properties.<%= f.name %>, parentIndex: $index">
-                    </div>
-                  </div>
-
-                  <div v-show="!component.properties.<%= f.name %> || component.properties.<%= f.name %>.length < <%= f.list_max_length.nil? ? 999999 : f.list_max_length %>">
-                    <!-- Add nested component -- one model allowed -->
-                    <% if f.list_model_names.count == 1 %>
-                      <a href="#"
-                        class="btn btn-info"
-                        v-repeat="model: $root.scheme.models"
-                        v-show="nestedModelIsAllowed(model, <%= f.list_model_names %>)"
-                        v-on="click: addComponent($event, '<%= f.name %>', model)">
-                          Add {{ model.label | lowercase }}
-                      </a>
-                    <% end %>
-
-                    <!-- Add nested component -- multiple models allowed -->
-                    <% if f.list_model_names.count > 1 %>
-                      <div class="dropdown">
-                        <a class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#">Add component <b class="caret"></b></a>
-                        <ul class="dropdown-menu">
-                          <li v-repeat="model: $root.scheme.models">
-                            <a href="#"
-                              v-if="nestedModelIsAllowed(model, <%= f.list_model_names %>)"
-                              v-on="click: addComponent($event, '<%= f.name %>', model)">
-                                {{ model.label }}
-                            </a>
-                          </li>
-                        </ul>
-                      </div>
-                    <% end %>
-                  </div>
-                <% end %>
-
-                <%= content_tag :p, f.help, class: "help-block" unless f.help.nil? %>
-              </div>
-            </div>
-          <% end %>
-        </div>
-      </div>
+      <%= render 'rails_admin_json_editor/main/component', field: field, model: model %>
     </script>
   <% end %>
 
-  <!-- List all components and their fields -->
+  <!-- List all content -->
   <div v-repeat="component: components">
     <div v-component="fields-for-{{ component.model_name }}" v-with="component: component, parentComponents: components, parentIndex: $index"></div>
   </div>
 
   <!-- Dropdown to add new content -->
   <div class="dropdown pull-left">
-    <a class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#">Add component <b class="caret"></b></a>
+    <a class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#">
+      <%= I18n.t 'admin.json_editor.add', field_name: 'Component' %>
+      <b class="caret"></b>
+    </a>
 
     <ul class="dropdown-menu">
       <li v-repeat="model: scheme.models">

data/app/views/rails_admin_json_editor/main/component_fields/_boolean.html.erb

@@ -0,0 +1 @@
+<input type="checkbox" v-model="component.properties.<%= f.name %>" class="form-control">

data/app/views/rails_admin_json_editor/main/component_fields/_enum.html.erb

@@ -0,0 +1 @@
+<%= select_tag(nil, options_for_select(f.enum_options), include_blank: true, class: "form-control", "v-model" => "component.properties.#{f.name}") %>

data/app/views/rails_admin_json_editor/main/component_fields/_list.html.erb

@@ -0,0 +1,37 @@
+<div v-repeat="nestedComponent: component.properties.<%= f.name %>">
+  <div
+    v-component="fields-for-{{ nestedComponent.model_name }}"
+    v-with="component: nestedComponent, parentComponents: component.properties.<%= f.name %>, parentIndex: $index">
+  </div>
+</div>
+
+<div v-show="!component.properties.<%= f.name %> || component.properties.<%= f.name %>.length < <%= f.list_max_length.nil? ? 999999 : f.list_max_length %>">
+  <!-- Add nested component, one model allowed -->
+  <% if f.list_model_names.count == 1 %>
+    <a href="#"
+      class="btn btn-info"
+      v-repeat="model: $root.scheme.models"
+      v-show="nestedModelIsAllowed(model, <%= f.list_model_names %>)"
+      v-on="click: addComponent($event, '<%= f.name %>', model)">
+        <i class="icon-plus icon-white"></i>
+        Add {{ model.label | lowercase }}
+    </a>
+  <% end %>
+
+  <!-- Add nested component, multiple models allowed -->
+  <% if f.list_model_names.count > 1 %>
+    <div class="dropdown">
+      <a class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#">Add component <b class="caret"></b></a>
+      <ul class="dropdown-menu">
+        <li v-repeat="model: $root.scheme.models">
+          <a href="#"
+            v-if="nestedModelIsAllowed(model, <%= f.list_model_names %>)"
+            v-on="click: addComponent($event, '<%= f.name %>', model)">
+              <i class="icon-plus icon-white"></i>
+              {{ model.label }}
+          </a>
+        </li>
+      </ul>
+    </div>
+  <% end %>
+</div>

data/app/views/rails_admin_json_editor/main/component_fields/_markdown.html.erb

@@ -0,0 +1,11 @@
+<div class="markdown-field">
+  <textarea v-model="component.properties.<%= f.name %>" class="form-control" rows="10"></textarea>
+
+  <button v-on="click: showPreview = !showPreview" type="button" class="btn btn-default">
+    <i class="icon-eye-open"></i>
+  </button>
+</div>
+
+<div class="markdown-preview" v-show="showPreview">
+  <div v-html="component.properties.<%= f.name %> | markdown"></div>
+</div>

data/app/views/rails_admin_json_editor/main/component_fields/_picker.html.erb

@@ -0,0 +1,35 @@
+<div class="picker">
+  <div v-if="pickerResult('<%= f.name %>')" class="picker-preview">
+    <% if !f.picker_preview_image_field.nil? %>
+      <img v-attr="src: pickerResult('<%= f.name %>').<%= f.picker_preview_image_field %>" />
+    <% elsif !f.picker_preview_field.nil? %>
+      <p v-text="pickerResult('<%= f.name %>').<%= f.picker_preview_field %>"></p>
+    <% else %>
+      <pre v-text="pickerResult('<%= f.name %>') | json"></pre>
+    <% end %>
+
+    <a v-on="click: removePickerResult('<%= f.name %>')" class="btn btn-info remove">
+      <i class="icon-remove icon-white"></i>
+      <%= I18n.t('admin.json_editor.remove', field_name: f.picker_model_name.constantize.send(:model_name).human) %>
+    </a>
+  </div>
+
+  <div v-if="!pickerResult('<%= f.name %>')">
+    <%
+      base_url = rails_admin.index_path(f.picker_model_name)
+    %>
+
+    <select v-on="change: onChangePickerSelect($event, '<%= f.name %>', '<%= base_url %>')"
+      data-filteringselect="true"
+      data-remote-source="<%= base_url %>?compact=true"
+      placeholder="Search"
+      class="not-initialized-filtering-select" >
+        <option value=""></option>
+    </select>
+
+    <a v-on="click: showPickerModal($event, '<%= f.name %>', '<%= base_url %>')" class="btn btn-info create">
+      <i class="icon-plus icon-white"></i>
+      <%= I18n.t('admin.json_editor.add', field_name: f.picker_model_name.constantize.send(:model_name).human) %>
+    </a>
+  </div>
+</div>

data/app/views/rails_admin_json_editor/main/component_fields/_string.html.erb

@@ -0,0 +1 @@
+<input v-model="component.properties.<%= f.name %>" type="text" class="form-control" />

data/app/views/rails_admin_json_editor/main/component_fields/_text.html.erb

@@ -0,0 +1 @@
+<textarea v-model="component.properties.<%= f.name %>" class="form-control"></textarea>

data/config/locales/rails_admin_json_editor.en.yml

@@ -0,0 +1,5 @@
+en:
+  admin:
+    json_editor:
+      add: 'Add %{field_name}'
+      remove: 'Remove %{field_name}'

data/lib/rails_admin_json_editor.rb

@@ -88,8 +88,9 @@ module RailsAdmin
                           :help,
                           :css_class
 
-            attr_accessor :picker_label,
-                          :picker_model_name
+            attr_accessor :picker_model_name,
+                          :picker_preview_field,
+                          :picker_preview_image_field
 
             attr_accessor :list_model_names,
                           :list_max_length
@@ -115,8 +116,9 @@ module RailsAdmin
             end
 
             def picker(options)
-              @picker_label = options[:label]
               @picker_model_name = options[:model].name
+              @picker_preview_field = options[:preview_field]
+              @picker_preview_image_field = options[:preview_image_field]
             end
 
             def list(models, options = {})

data/lib/rails_admin_json_editor/version.rb

@@ -1,3 +1,3 @@
 module RailsAdminJsonEditor
-  VERSION = "0.0.24"
+  VERSION = "0.0.25"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_admin_json_editor
 version: !ruby/object:Gem::Version
-  version: 0.0.24
+  version: 0.0.25
 platform: ruby
 authors:
 - Jasper Haggenburg
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-04-13 00:00:00.000000000 Z
+date: 2015-05-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -65,13 +65,24 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
-- app/assets/javascripts/rails_admin_json_editor/lodash.2.4.1.js
-- app/assets/javascripts/rails_admin_json_editor/markdown.js
+- app/assets/javascripts/rails_admin_json_editor/lib/lodash.2.4.1.js
+- app/assets/javascripts/rails_admin_json_editor/lib/markdown.js
+- app/assets/javascripts/rails_admin_json_editor/lib/vue.0.11.4.js
+- app/assets/javascripts/rails_admin_json_editor/ra.filtering-select.custom.js
+- app/assets/javascripts/rails_admin_json_editor/ra.remoteForm.custom.js
 - app/assets/javascripts/rails_admin_json_editor/rails_admin_json_editor.js
-- app/assets/javascripts/rails_admin_json_editor/vue.0.11.4.js
 - app/assets/stylesheets/rails_admin_json_editor/rails_admin_json_editor.css.scss
+- app/views/rails_admin_json_editor/main/_component.html.erb
 - app/views/rails_admin_json_editor/main/_form_json_editor.html.erb
+- app/views/rails_admin_json_editor/main/component_fields/_boolean.html.erb
+- app/views/rails_admin_json_editor/main/component_fields/_enum.html.erb
+- app/views/rails_admin_json_editor/main/component_fields/_list.html.erb
+- app/views/rails_admin_json_editor/main/component_fields/_markdown.html.erb
+- app/views/rails_admin_json_editor/main/component_fields/_picker.html.erb
+- app/views/rails_admin_json_editor/main/component_fields/_string.html.erb
+- app/views/rails_admin_json_editor/main/component_fields/_text.html.erb
 - config/initializers/assets.rb
+- config/locales/rails_admin_json_editor.en.yml
 - lib/rails_admin_json_editor.rb
 - lib/rails_admin_json_editor/version.rb
 - rails_admin_json_editor.gemspec