rails_admin_json_editor 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a3c92dbe898a471457c77af0fa8bb6c166c8a9c6
-  data.tar.gz: 4b94e3905ca9634a9e303487ffb15138f9eca94f
+  metadata.gz: 66033e2e1d435edb2107caaad3e774d3c2e1187f
+  data.tar.gz: 1f031aa83e5b878da54539ab47888e193e853837
 SHA512:
-  metadata.gz: c65446a1eb3e2f1b9c2a98a1034279fcc5ed2aba3e9adda95d7cd712c3f4d4ebaafbd96bafd57319fb68c556f6547a8a159188a29ab285d79aa3e8716841017d
-  data.tar.gz: 13a9ceed676562a583fde2601dcfd7b8402848cc2569a617c238a6a322593e86b9b624fe2e6ab930c38d26daeed9815cdab3e9dab01b647bffe7c6fcdc7ba253
+  metadata.gz: 7888672433e39229489fb4209d59bd911a4d967ace462ce7860dd901181647bc42f69c51d7f74f3d60eabce4133cf6d8b771d90e5497dea8605868a8692509f2
+  data.tar.gz: 3fffe32b27449490688e0bcb25e7baec737afe87f51bd3bf82f156986a50a06c75e9154c02e1f361601bd38dedea76d995894a951e82cc0f7bf17b3c805fec63

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

@@ -1,80 +1,130 @@
 //= require rails_admin_json_editor/vue.0.11.4
 //= require rails_admin_json_editor/lodash.2.4.1
 
+var vm;
+
 $(document).on('rails_admin.dom_ready', function() {
   // TODO: Make this possible for multiple instances
 
-  // Get data
-  var data = $('[ref=json-editor]').data('json');
-  if(!data) {
-    data = { components: [] };
-  }
+  // Vue.config.debug = true
 
-  // Re-initialize temporary vars
-  data.tmp = { showJson: false };
+  // Get data
+  var jsonResult          = $('[ref=json-editor]').data('json-result');
+  var jsonComponentTypes  = $('[ref=json-editor]').data('json-component-types');
 
-  // Re-initialMake sure all components have their (possibly new) defaults
-  var componentTmpDefaults = { expanded: true };
-  data.components = _.map(data.components, function(component) {
-    component.tmp = _.clone(componentTmpDefaults);
-    return component;
-  });
+  if(!jsonResult) {
+    jsonResult = { components: [] };
+  }
 
   // Make sure we let Vue update the json-field, but do it here to prevent data-loss when js is disabled
-  $('[ref=json-editor] [v-model^="$root.$data"]').val('');
+  $('[ref=json-textarea]').val('');
 
-  // Let's go
-  var componentsVM = new Vue({
-    el: '[ref=json-editor]',
-    data: data,
-    methods: {
-      addComponent: function(e) {
-        e.preventDefault();
-        var type = e.target.getAttribute('component-type');
-        this.components.push({
-          type: type,
+  // Setup dynamic component-type components
+  var components = {};
+  _.each(jsonComponentTypes, function(c) {
+    components['component-type-' + c.type] = {
+      template: '#template-component-type-' + c.type,
+      data: function() {
+        return {
+          type: null,
           props: {},
-          tmp: _.clone(componentTmpDefaults)
-        })
+          expanded: true
+        };
       },
-      removeComponent: function(index) {
-        if(confirm("Are you sure?")) {
-          this.components.$remove(index);
+      computed: {
+        moveUpEnabled: function() {
+          return this.parentIndex > 0;
+        },
+        moveDownEnabled: function() {
+          return this.parentIndex < this.parentComponents.length - 1;
         }
       },
-      moveComponentUp: function(index) {
-        var from = index;
-        var to = index - 1;
-        var element = this.components[from];
-        this.components.splice(from, 1);
-        this.components.splice(to, 0, element);
-      },
-      moveComponentDown: function(index) {
-        var from = index;
-        var to = index + 1;
-        var element = this.components[from];
-        this.components.splice(from, 1);
-        this.components.splice(to, 0, element);
-      },
-      onChangePicker: function(e, index, fieldName) {
-        var el = e.target;
-        var value = el.options[el.selectedIndex].getAttribute('data-json');
-        var json = JSON.parse(value);
+      methods: {
+        moveUp: function() {
+          var from = this.parentIndex;
+          var to = this.parentIndex - 1;
+          var element = this.parentComponents[from];
+          this.parentComponents.splice(from, 1);
+          this.parentComponents.splice(to, 0, element);
+        },
 
-        var props = {};
-        props[fieldName] = json;
+        moveDown: function() {
+          var from = this.parentIndex;
+          var to = this.parentIndex + 1;
+          var element = this.parentComponents[from];
+          this.parentComponents.splice(from, 1);
+          this.parentComponents.splice(to, 0, element);
+        },
 
-        var data = $.extend({}, componentsVM.components[index], {
-          props: props
-        });
+        remove: function() {
+          if(confirm("Are you sure?")) {
+            this.parentComponents.$remove(this.parentIndex);
+          }
+        },
 
-        componentsVM.components.$set(index, data)
-      },
-      pickerOptionIsSelected: function(component, fieldName, recordLabel, recordName) {
-        return component.props[fieldName]
-          && component.props[fieldName][recordLabel]
-          && component.props[fieldName][recordLabel] == recordName;
+        // TODO: DRY up with $root.addComponent
+        addComponent: function(event, component, type) {
+          event.preventDefault();
+
+          var clonedProps = _.clone(component.props);
+          if(!clonedProps.components) {
+            clonedProps.components = []
+          }
+
+          var obj = {
+            type: type,
+            props: {}
+          };
+
+          clonedProps.components.push(obj);
+          this.parentComponents[this.parentIndex].props = clonedProps;
+        },
+
+        onChangePicker: function(event, component, fieldName) {
+          var el = event.target;
+          var value = el.options[el.selectedIndex].getAttribute('data-json');
+          var json = JSON.parse(value);
+
+          var clonedProps = _.clone(component.props);
+          clonedProps[fieldName] = json;
+          this.parentComponents[this.parentIndex].props = clonedProps;
+        },
+
+        pickerOptionIsSelected: function(component, fieldName, recordLabel, recordName) {
+          return component.props &&
+            component.props[fieldName] &&
+            component.props[fieldName][recordLabel] &&
+            component.props[fieldName][recordLabel] === recordName;
+        }
+      }
+    };
+  });
+
+  // Let's go
+  vm = new Vue({
+    el: '[ref=json-editor]',
+    data: {
+      components: jsonResult.components,
+      componentTypes: jsonComponentTypes,
+      showJson: false
+    },
+    methods: {
+      addComponent: function(e, type) {
+        e.preventDefault();
+
+        var obj = {
+          type: type,
+          props: {}
+        };
+
+        this.components.push(obj);
+      }
+    },
+    computed: {
+      result: function() {
+        return { components: this.components };
       }
-    }
+    },
+    components: components
   });
 });

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

@@ -7,4 +7,8 @@ body.rails_admin .form-horizontal.denser .json-editor {
   .form-control {
     width: 90%;
   }
+
+  .btn-toggle-json {
+    margin-left: 15px;
+  }
 }

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

@@ -3,48 +3,48 @@
 
 <div ref="json-editor"
   class="json-editor"
-  data-json='<%= raw(field.value.blank? ? '{ "components":[] }' : field.value) %>'>
+  data-json-result='<%= raw(field.value.blank? ? '{ "components":[] }' : field.value) %>'
+  data-json-component-types='<%= raw field.components.to_json %>'>
 
-  <!-- List content -->
-  <div v-repeat="component: components" class="component">
-    <% field.components.each do |component| %>
-      <div v-if="component.type == '<%= component.type %>'">
+  <% field.components.each do |component| %>
+    <script type="text/x-template" id="template-component-type-<%= component.type %>">
+      <div class="component">
         <legend>
           <%= component.label %>
           <div class="btn-group btn-group-sm pull-right">
-            <button v-on="click: moveComponentUp($index)" type="button" class="btn btn-default {{ $index == 0 ? 'disabled' : '' }}">
+            <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: moveComponentDown($index)" type="button" class="btn btn-default {{ $index == components.length - 1 ? 'disabled' : '' }}">
+            <button v-on="click: moveDown" type="button" class="btn btn-default {{ moveDownEnabled ? '' : 'disabled' }}">
               <i class="icon-circle-arrow-down"></i>
             </button>
-            <button v-on="click: component.tmp.expanded = !component.tmp.expanded" type="button" class="btn btn-default">
-              <i class="{{ component.tmp.expanded ? 'icon-resize-small' : 'icon-resize-full' }}"></i>
+            <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:removeComponent($index)" type="button" class="btn btn-default">
+            <button v-on="click:remove" type="button" class="btn btn-default">
               <i class="icon-remove"></i>
             </button>
           </div>
         </legend>
 
-        <div v-show="component.tmp.expanded">
+        <div v-show="expanded">
           <%= content_tag :p, component.help, class: "help-block" unless component.help.nil? %>
 
           <% component.fields.each do |f| %>
             <div class="control-group row">
-              <%= label_tag f.name, f.label, class: "col-sm-2 control-label" %>
+              <label class="col-sm-2 control-label"><%= f.label %></label>
 
               <div class="controls col-sm-10">
                 <% if f.type == :string %>
-                  <%= text_field_tag f.name, nil, class: 'form-control', 'v-model' => "component.props.#{f.name}" %>
+                  <input v-model="component.props.<%= f.name %>" type="text" class="form-control" />
                 <% end %>
 
                 <% if f.type == :text %>
-                  <%= text_area_tag f.name, nil, class: 'form-control', 'v-model' => "component.props.#{f.name}" %>
+                  <textarea v-model="component.props.<%= f.name %>" class="form-control"></textarea>
                 <% end %>
 
                 <% if f.type == :picker %>
-                  <select v-on="change: onChangePicker($event, $index, '<%= f.name %>')" class="form-control record-picker">
+                  <select v-on="change: onChangePicker($event, component, '<%= f.name %>')" class="form-control record-picker">
                     <option value=""></option>
                     <% f.picker_records.each do |record| %>
                       <option
@@ -57,13 +57,37 @@
                   </select>
                 <% end %>
 
+                <% if f.type == :list %>
+                  <% # TODO: DRY up with root-list/dropdown %>
+                  <div v-repeat="nested_component: component.props.components">
+                    <div
+                      v-component="component-type-{{ nested_component.type }}"
+                      v-with="component: nested_component, parentComponents: component.props.components, parentIndex: $index">
+                    </div>
+                  </div>
+
+                  <div class="dropdown pull-left">
+                    <a class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#">Component toevoegen <b class="caret"></b></a>
+                    <ul class="dropdown-menu">
+                      <li v-repeat="componentType: $root.componentTypes">
+                        <a href="#" v-on="click: addComponent($event, component, componentType.type)">{{ componentType.label }}</a>
+                      </li>
+                    </ul>
+                  </div>
+                <% end %>
+
                 <%= content_tag :p, f.help, class: "help-block" unless f.help.nil? %>
               </div>
             </div>
           <% end %>
         </div>
       </div>
-    <% end %>
+    </script>
+  <% end %>
+
+  <!-- List all components and their fields -->
+  <div v-repeat="component: components">
+    <div v-component="component-type-{{ component.type }}" v-with="component: component, parentComponents: components, parentIndex: $index"></div>
   </div>
 
   <!-- Dropdown to add new content -->
@@ -71,22 +95,26 @@
     <a class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#">Component toevoegen <b class="caret"></b></a>
 
     <ul class="dropdown-menu">
-      <% field.components.each do |component| %>
-        <li><a href="#" v-on="click: addComponent" component-type="<%= component.type %>"><%= component.type %></a></li>
-      <% end %>
+      <li v-repeat="componentType: componentTypes">
+        <a href="#" v-on="click: addComponent($event, componentType.type)">{{ componentType.label }}</a>
+      </li>
     </ul>
   </div>
 
   <!-- Hidden field to store JSON -->
   <div>
     <% if Rails.env.development? %>
-      <button v-on="click: tmp.showJson = !tmp.showJson" type="button" class="btn btn-default pull-right">
+      <button v-on="click: showJson = !showJson" type="button" class="btn btn-default pull-left btn-toggle-json">
         <i class="icon-list-alt"></i>
       </button>
     <% end %>
 
-    <div v-show="tmp.showJson">
-      <%= form.text_area field.name, value: field.value, 'v-model' => '$root.$data | json', style: 'width:100%; height:400px; margin-top:20px' %>
+    <div v-show="showJson">
+      <%= form.text_area field.name,
+        'v-model' => 'result | json',
+        value: field.value,
+        ref: 'json-textarea',
+        style: 'width:100%; height:400px; margin-top:20px' %>
     </div>
   </div>
 </div>

data/lib/rails_admin_json_editor/version.rb

@@ -1,3 +1,3 @@
 module RailsAdminJsonEditor
-  VERSION = "0.0.7"
+  VERSION = "0.0.8"
 end

data/lib/rails_admin_json_editor.rb

@@ -43,7 +43,7 @@ module RailsAdmin
             def initialize(type)
               @type = type
               @fields = []
-              @label = type
+              @label = type.to_s.humanize
             end
 
             def field(name, type)
@@ -68,11 +68,13 @@ module RailsAdmin
             attr_accessor :label, :help
             attr_accessor :picker_label
             attr_accessor :picker_records
+            attr_accessor :components
 
             def initialize(name, type)
               @name = name
               @type = type
-              @label = name
+              @label = name.to_s.humanize
+              @components = [] if type == :list
             end
 
             def label(s = nil)
@@ -87,6 +89,14 @@ module RailsAdmin
               @picker_label = label
               @picker_records = records
             end
+
+            def component(type)
+              component = Component.new(type)
+
+              yield(component) if block_given?
+
+              @components << component
+            end
           end
         end
       end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_admin_json_editor
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
 platform: ruby
 authors:
 - Jasper Haggenburg
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-01-22 00:00:00.000000000 Z
+date: 2015-01-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler