rails_admin_json_editor 0.0.5 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ddd92f50da82bca1dec3c00600bd72c8fd9f62e9
-  data.tar.gz: b12d5ade0891ba00ac288c05d00b9327db47372a
+  metadata.gz: bfa96e00db2bfaabb8f895b9329817f255ba06df
+  data.tar.gz: 3622c63269ad8d5d47224ac9385f4eec57db8b01
 SHA512:
-  metadata.gz: ccec4610aa25d05ea38421cf0809a5dfa97f989e72a93237bb9b5a644c5405159fb0b8b06c263d8f4b767b0e97462dca6a2d52ce082fe51f1a42ed9aa801ac99
-  data.tar.gz: 9bef18df4bb6fe03ece3004807ff5277a023454db16ce8f5e5aa7ed8405ba91b1c5e670625a6eb9b2a25715b8f1bf4c242443436dce031147e4c8bef663c0094
+  metadata.gz: 879ecc9a8a2028e79ec1842d88094e711c0bc9055133fb46b80ca5265be2015be93bd6850e00cd9f1465ae3b2c8ca84df1f7f3f3c35d3d52a78d4ba1452f35a1
+  data.tar.gz: 7e475f123accc3338aecd3a26682f814fcee8c877e00175fa8fba775aa74e375cb7ea8168a8ba373a342340be3a0f2cb277d280593f2c48f11fc73c9f2c7c29b

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

@@ -1 +1 @@
-//= require rails_admin_json_editor/vue
+//= require rails_admin_json_editor/vue.0.11.4

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

@@ -3,43 +3,96 @@
 </script>
 
 <div ref="components_json" class="components_json">
+
+  <!-- List content -->
   <div v-repeat="components" class="component">
     <% field.components.each do |component| %>
-      <%= render 'rails_admin_json_editor/main/form_json_editor_component', locals: { component: component } %>
+      <div v-if="type == '<%= component.type %>'">
+        <legend><%= component.label %></legend>
+        <%= content_tag :p, component.help, class: "help-block" unless component.help.nil? %>
+
+        <% component.fields.each do |f| %>
+          <div class="control-group">
+            <%= label_tag f.name, f.label, class: "control-label" %>
+
+            <div class="controls">
+              <% if f.type == :string %>
+                <%= text_field_tag f.name, nil, 'v-model' => "props.#{f.name}" %>
+              <% end %>
+
+              <% if f.type == :text %>
+                <%= text_area_tag f.name, nil, 'v-model' => "props.#{f.name}" %>
+              <% end %>
+
+              <% if f.type == :picker %>
+                  <select v-on="change: onChangePicker($event, $index, '<%= f.name %>')" placeholder="Zoeken">
+                    <option value=""></option>
+                    <% f.picker_records.each do |record| %>
+                      <option
+                        v-attr="selected: pickerOptionIsSelected(this, '<%= f.name %>', '<%= f.picker_label %>', '<%= record.send(f.picker_label) %>')"
+                        value="<%= record.send(f.picker_label) %>"
+                        data-json="<%= record.to_json %>">
+                          <%= record.send(f.picker_label) %>
+                      </option>
+                    <% end %>
+                  </select>
+              <% end %>
+
+              <%= content_tag :p, f.help, class: "help-block" unless f.help.nil? %>
+            </div>
+          </div>
+        <% end %>
+      </div>
     <% end %>
   </div>
 
-  <%= render 'rails_admin_json_editor/main/form_json_editor_dropdown', locals: { components: field.components } %>
+  <!-- Dropdown to add new content -->
+  <div class="dropdown">
+    <a class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#">Component toevoegen <b class="caret"></b></a>
 
-  <%= form.text_area field.name, 'v-model' => 'components', cols:50, rows:10, style: 'margin-top:40px' %>
-</div>
+    <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 %>
+    </ul>
+  </div>
 
-<% field.components
-        .map(&:fields)
-        .flatten
-        .select { |f| f.picker_records != nil }
-        .each do |f| %>
-          <%= render 'rails_admin_json_editor/main/form_json_editor_picker', locals: { field:f } %>
-        <% end %>
+  <!-- Hidden field to store JSON -->
+  <%= form.text_area field.name, 'v-model' => 'components | json', cols:50, rows:10, style: 'margin-top:40px' %>
+</div>
 
 <script type="text/javascript">
   var componentsVM = new Vue({
     el: '[ref=components_json]',
     data: {
-      components: <%= raw field.value || "[]" %>
+      components: <%= raw(field.value.empty? ? "[]" : field.value) %>
     },
     methods: {
       addComponent: function(e) {
         e.preventDefault();
         var type = e.target.getAttribute('component-type');
-        this.components.push({ type:type })
+        this.components.push({ type:type, props:{} })
       },
-      openPicker: function(e) {
-        e.preventDefault();
-        var name = e.target.getAttribute('component-name');
-        var index = e.target.getAttribute('component-index');
-        console.log('openPicker', name, index);
-        recordPickers[name].show(index);
+      onChangePicker: function(e, index, fieldName) {
+        var el = e.target;
+        var value = el.options[el.selectedIndex].getAttribute('data-json');
+        var json = JSON.parse(value);
+
+        var props = {};
+        props[fieldName] = json;
+
+        var data = $.extend({}, componentsVM.components[index], {
+          props: props
+        });
+
+        componentsVM.components.$set(index, data)
+      },
+      pickerOptionIsSelected: function(component, fieldName, recordLabel, recordName) {
+        return component.$data
+          && component.$data.props
+          && component.$data.props[fieldName]
+          && component.$data.props[fieldName][recordLabel] == recordName
+          && component.$data.props[fieldName][recordLabel] == recordName;
       }
     }
   });

data/lib/rails_admin_json_editor/version.rb

@@ -1,3 +1,3 @@
 module RailsAdminJsonEditor
-  VERSION = "0.0.5"
+  VERSION = "0.0.6"
 end

data/lib/rails_admin_json_editor.rb

@@ -66,6 +66,7 @@ module RailsAdmin
           class Field
             attr_accessor :name, :type
             attr_accessor :label, :help
+            attr_accessor :picker_label
             attr_accessor :picker_records
 
             def initialize(name, type)
@@ -82,8 +83,9 @@ module RailsAdmin
               if s.nil? then return @help else @help = s end
             end
 
-            def picker_records(a = nil)
-              if a.nil? then return @picker_records else @picker_records = a end
+            def setup_picker(label, records)
+              @picker_label = label
+              @picker_records = records
             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.5
+  version: 0.0.6
 platform: ruby
 authors:
 - Jasper Haggenburg
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-01-20 00:00:00.000000000 Z
+date: 2015-01-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -66,11 +66,8 @@ files:
 - README.md
 - Rakefile
 - app/assets/javascripts/rails_admin_json_editor/rails_admin_json_editor.js
-- app/assets/javascripts/rails_admin_json_editor/vue.js
+- app/assets/javascripts/rails_admin_json_editor/vue.0.11.4.js
 - app/views/rails_admin_json_editor/main/_form_json_editor.html.erb
-- app/views/rails_admin_json_editor/main/_form_json_editor_component.html.erb
-- app/views/rails_admin_json_editor/main/_form_json_editor_dropdown.html.erb
-- app/views/rails_admin_json_editor/main/_form_json_editor_picker.html.erb
 - lib/rails_admin_json_editor.rb
 - lib/rails_admin_json_editor/version.rb
 - rails_admin_json_editor.gemspec

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

@@ -1,29 +0,0 @@
-<div v-show="type == '<%= locals[:component].type %>'">
-  <legend><%= locals[:component].label %></legend>
-  <%= content_tag :p, locals[:component].help, class: "help-block" unless locals[:component].help.nil? %>
-
-  <% locals[:component].fields.each do |f| %>
-    <div class="control-group">
-      <%= label_tag f.name, f.label, class: "control-label" %>
-
-      <div class="controls">
-        <% if f.type == :string %>
-          <%= text_field_tag f.name, nil, 'v-model' => "props.#{f.name}" %>
-        <% end %>
-
-        <% if f.type == :text %>
-          <%= text_area_tag f.name, nil, 'v-model' => "props.#{f.name}" %>
-        <% end %>
-
-        <% if f.type == :picker %>
-          <%= link_to 'Selecteer', '#', role: 'button', class: 'btn',
-            'v-on' => 'click: openPicker',
-            'component-name' => f.name,
-            'component-index' => '{{ $index }}' %>
-        <% end %>
-
-        <%= content_tag :p, f.help, class: "help-block" unless f.help.nil? %>
-      </div>
-    </div>
-  <% end %>
-</div>

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

@@ -1,9 +0,0 @@
-<div class="dropdown">
-  <a class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#">Component toevoegen <b class="caret"></b></a>
-
-  <ul class="dropdown-menu">
-    <% locals[:components].each do |component| %>
-      <li><a href="#" v-on="click: addComponent" component-type="<%= component.type %>"><%= component.type %></a></li>
-    <% end %>
-  </ul>
-</div>

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

@@ -1,52 +0,0 @@
-<%
-  name = locals[:field].name
-  id = "#{name}-record-picker"
-  records = locals[:field].picker_records
-%>
-
-<div id="<%= id %>" class="modal hide fade">
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal">×</button>
-    <h3>Kies <%= name %></h3>
-  </div>
-
-  <div class="modal-body">
-    <select v-model="selectedRecord" placeholder="Zoeken">
-      <option value=""></option>
-      <% records.each do |record| %>
-        <option value="<%= record.to_json %>"><%= record.upload_file_name %></option>
-      <% end %>
-    </select>
-  </div>
-
-  <div class="modal-footer">
-    <button class="btn" data-dismiss="modal">Sluiten</button>
-    <button v-on="click:submit" class="btn btn-primary">Opslaan</button>
-  </div>
-</div>
-
-<script type="text/javascript">
-  recordPickers['<%= name %>'] = new Vue({
-    el: '#<%= id %>',
-    data: {
-      componentIndex: null,
-      selectedRecord: null
-    },
-    methods: {
-      show: function(componentIndex) {
-        this.componentIndex = componentIndex;
-        this.selectedRecord = null;
-        $('#<%= id %>').modal();
-      },
-      submit: function(e) {
-        e.preventDefault();
-        var values = JSON.parse(this.selectedRecord)
-
-        if(values) {
-          componentsVM.components[this.componentIndex].props = values
-          $('#<%= id %>').modal('hide');
-        }
-      }
-    }
-  })
-</script>