rails_admin_json_editor 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/rails_admin_json_editor/lodash.2.4.1.js +6785 -0
- data/app/assets/javascripts/rails_admin_json_editor/rails_admin_json_editor.js +79 -0
- data/app/assets/stylesheets/rails_admin_json_editor/rails_admin_json_editor.css.scss +10 -0
- data/app/views/rails_admin_json_editor/main/_form_json_editor.html.erb +57 -64
- data/config/initializers/assets.rb +1 -0
- data/lib/rails_admin_json_editor/version.rb +1 -1
- metadata +5 -2
|
@@ -1 +1,80 @@
|
|
|
1
1
|
//= require rails_admin_json_editor/vue.0.11.4
|
|
2
|
+
//= require rails_admin_json_editor/lodash.2.4.1
|
|
3
|
+
|
|
4
|
+
$(document).on('rails_admin.dom_ready', function() {
|
|
5
|
+
// TODO: Make this possible for multiple instances
|
|
6
|
+
|
|
7
|
+
// Get data
|
|
8
|
+
var data = $('[ref=json-editor]').data('json');
|
|
9
|
+
if(!data) {
|
|
10
|
+
data = { components: [] };
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Re-initialize temporary vars
|
|
14
|
+
data.tmp = { showJson: false };
|
|
15
|
+
|
|
16
|
+
// Re-initialMake sure all components have their (possibly new) defaults
|
|
17
|
+
var componentTmpDefaults = { expanded: true };
|
|
18
|
+
data.components = _.map(data.components, function(component) {
|
|
19
|
+
component.tmp = _.clone(componentTmpDefaults);
|
|
20
|
+
return component;
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
// Make sure we let Vue update the json-field, but do it here to prevent data-loss when js is disabled
|
|
24
|
+
$('[ref=json-editor] [v-model^="$root.$data"]').val('');
|
|
25
|
+
|
|
26
|
+
// Let's go
|
|
27
|
+
var componentsVM = new Vue({
|
|
28
|
+
el: '[ref=json-editor]',
|
|
29
|
+
data: data,
|
|
30
|
+
methods: {
|
|
31
|
+
addComponent: function(e) {
|
|
32
|
+
e.preventDefault();
|
|
33
|
+
var type = e.target.getAttribute('component-type');
|
|
34
|
+
this.components.push({
|
|
35
|
+
type: type,
|
|
36
|
+
props: {},
|
|
37
|
+
tmp: _.clone(componentTmpDefaults)
|
|
38
|
+
})
|
|
39
|
+
},
|
|
40
|
+
removeComponent: function(index) {
|
|
41
|
+
if(confirm("Are you sure?")) {
|
|
42
|
+
this.components.$remove(index);
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
moveComponentUp: function(index) {
|
|
46
|
+
var from = index;
|
|
47
|
+
var to = index - 1;
|
|
48
|
+
var element = this.components[from];
|
|
49
|
+
this.components.splice(from, 1);
|
|
50
|
+
this.components.splice(to, 0, element);
|
|
51
|
+
},
|
|
52
|
+
moveComponentDown: function(index) {
|
|
53
|
+
var from = index;
|
|
54
|
+
var to = index + 1;
|
|
55
|
+
var element = this.components[from];
|
|
56
|
+
this.components.splice(from, 1);
|
|
57
|
+
this.components.splice(to, 0, element);
|
|
58
|
+
},
|
|
59
|
+
onChangePicker: function(e, index, fieldName) {
|
|
60
|
+
var el = e.target;
|
|
61
|
+
var value = el.options[el.selectedIndex].getAttribute('data-json');
|
|
62
|
+
var json = JSON.parse(value);
|
|
63
|
+
|
|
64
|
+
var props = {};
|
|
65
|
+
props[fieldName] = json;
|
|
66
|
+
|
|
67
|
+
var data = $.extend({}, componentsVM.components[index], {
|
|
68
|
+
props: props
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
componentsVM.components.$set(index, data)
|
|
72
|
+
},
|
|
73
|
+
pickerOptionIsSelected: function(component, fieldName, recordLabel, recordName) {
|
|
74
|
+
return component.props[fieldName]
|
|
75
|
+
&& component.props[fieldName][recordLabel]
|
|
76
|
+
&& component.props[fieldName][recordLabel] == recordName;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
});
|
|
@@ -1,53 +1,73 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
</script>
|
|
1
|
+
<%= javascript_include_tag "rails_admin_json_editor/rails_admin_json_editor" %>
|
|
2
|
+
<%= stylesheet_link_tag "rails_admin_json_editor/rails_admin_json_editor", media: 'all' %>
|
|
4
3
|
|
|
5
|
-
<div ref="
|
|
4
|
+
<div ref="json-editor"
|
|
5
|
+
class="json-editor"
|
|
6
|
+
data-json='<%= raw(field.value.blank? ? '{ "components":[] }' : field.value) %>'>
|
|
6
7
|
|
|
7
8
|
<!-- List content -->
|
|
8
|
-
<div v-repeat="components" class="component">
|
|
9
|
+
<div v-repeat="component: components" class="component">
|
|
9
10
|
<% field.components.each do |component| %>
|
|
10
|
-
<div v-if="type == '<%= component.type %>'">
|
|
11
|
-
<legend
|
|
12
|
-
|
|
11
|
+
<div v-if="component.type == '<%= component.type %>'">
|
|
12
|
+
<legend>
|
|
13
|
+
<%= component.label %>
|
|
14
|
+
<div class="btn-group btn-group-sm pull-right">
|
|
15
|
+
<button v-on="click: moveComponentUp($index)" type="button" class="btn btn-default {{ $index == 0 ? 'disabled' : '' }}">
|
|
16
|
+
<i class="icon-circle-arrow-up"></i>
|
|
17
|
+
</button>
|
|
18
|
+
<button v-on="click: moveComponentDown($index)" type="button" class="btn btn-default {{ $index == components.length - 1 ? 'disabled' : '' }}">
|
|
19
|
+
<i class="icon-circle-arrow-down"></i>
|
|
20
|
+
</button>
|
|
21
|
+
<button v-on="click: component.tmp.expanded = !component.tmp.expanded" type="button" class="btn btn-default">
|
|
22
|
+
<i class="{{ component.tmp.expanded ? 'icon-resize-small' : 'icon-resize-full' }}"></i>
|
|
23
|
+
</button>
|
|
24
|
+
<button v-on="click:removeComponent($index)" type="button" class="btn btn-default">
|
|
25
|
+
<i class="icon-remove"></i>
|
|
26
|
+
</button>
|
|
27
|
+
</div>
|
|
28
|
+
</legend>
|
|
29
|
+
|
|
30
|
+
<div v-show="component.tmp.expanded">
|
|
31
|
+
<%= content_tag :p, component.help, class: "help-block" unless component.help.nil? %>
|
|
13
32
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
33
|
+
<% component.fields.each do |f| %>
|
|
34
|
+
<div class="control-group row">
|
|
35
|
+
<%= label_tag f.name, f.label, class: "col-sm-2 control-label" %>
|
|
17
36
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
37
|
+
<div class="controls col-sm-10">
|
|
38
|
+
<% if f.type == :string %>
|
|
39
|
+
<%= text_field_tag f.name, nil, class: 'form-control', 'v-model' => "component.props.#{f.name}" %>
|
|
40
|
+
<% end %>
|
|
22
41
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
42
|
+
<% if f.type == :text %>
|
|
43
|
+
<%= text_area_tag f.name, nil, class: 'form-control', 'v-model' => "component.props.#{f.name}" %>
|
|
44
|
+
<% end %>
|
|
26
45
|
|
|
27
|
-
|
|
28
|
-
<select v-on="change: onChangePicker($event, $index, '<%= f.name %>')"
|
|
46
|
+
<% if f.type == :picker %>
|
|
47
|
+
<select v-on="change: onChangePicker($event, $index, '<%= f.name %>')" class="form-control record-picker">
|
|
29
48
|
<option value=""></option>
|
|
30
49
|
<% f.picker_records.each do |record| %>
|
|
31
50
|
<option
|
|
32
|
-
v-attr="selected: pickerOptionIsSelected(
|
|
51
|
+
v-attr="selected: pickerOptionIsSelected(component, '<%= f.name %>', '<%= f.picker_label %>', '<%= record.send(f.picker_label) %>')"
|
|
33
52
|
value="<%= record.send(f.picker_label) %>"
|
|
34
53
|
data-json="<%= record.to_json %>">
|
|
35
54
|
<%= record.send(f.picker_label) %>
|
|
36
55
|
</option>
|
|
37
56
|
<% end %>
|
|
38
57
|
</select>
|
|
39
|
-
|
|
58
|
+
<% end %>
|
|
40
59
|
|
|
41
|
-
|
|
60
|
+
<%= content_tag :p, f.help, class: "help-block" unless f.help.nil? %>
|
|
61
|
+
</div>
|
|
42
62
|
</div>
|
|
43
|
-
|
|
44
|
-
|
|
63
|
+
<% end %>
|
|
64
|
+
</div>
|
|
45
65
|
</div>
|
|
46
66
|
<% end %>
|
|
47
67
|
</div>
|
|
48
68
|
|
|
49
69
|
<!-- Dropdown to add new content -->
|
|
50
|
-
<div class="dropdown">
|
|
70
|
+
<div class="dropdown pull-left">
|
|
51
71
|
<a class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#">Component toevoegen <b class="caret"></b></a>
|
|
52
72
|
|
|
53
73
|
<ul class="dropdown-menu">
|
|
@@ -58,42 +78,15 @@
|
|
|
58
78
|
</div>
|
|
59
79
|
|
|
60
80
|
<!-- Hidden field to store JSON -->
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
data: {
|
|
68
|
-
components: <%= raw(field.value.empty? ? "[]" : field.value) %>
|
|
69
|
-
},
|
|
70
|
-
methods: {
|
|
71
|
-
addComponent: function(e) {
|
|
72
|
-
e.preventDefault();
|
|
73
|
-
var type = e.target.getAttribute('component-type');
|
|
74
|
-
this.components.push({ type:type, props:{} })
|
|
75
|
-
},
|
|
76
|
-
onChangePicker: function(e, index, fieldName) {
|
|
77
|
-
var el = e.target;
|
|
78
|
-
var value = el.options[el.selectedIndex].getAttribute('data-json');
|
|
79
|
-
var json = JSON.parse(value);
|
|
80
|
-
|
|
81
|
-
var props = {};
|
|
82
|
-
props[fieldName] = json;
|
|
83
|
-
|
|
84
|
-
var data = $.extend({}, componentsVM.components[index], {
|
|
85
|
-
props: props
|
|
86
|
-
});
|
|
81
|
+
<div>
|
|
82
|
+
<% if Rails.env.development? %>
|
|
83
|
+
<button v-on="click: tmp.showJson = !tmp.showJson" type="button" class="btn btn-default pull-right">
|
|
84
|
+
<i class="icon-list-alt"></i>
|
|
85
|
+
</button>
|
|
86
|
+
<% end %>
|
|
87
87
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
&& component.$data.props[fieldName]
|
|
94
|
-
&& component.$data.props[fieldName][recordLabel] == recordName
|
|
95
|
-
&& component.$data.props[fieldName][recordLabel] == recordName;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
</script>
|
|
88
|
+
<div v-show="tmp.showJson">
|
|
89
|
+
<%= form.text_area field.name, value: field.value, 'v-model' => '$root.$data | json', style: 'width:100%; height:400px; margin-top:20px' %>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Rails.application.config.assets.precompile += ["rails_admin_json_editor/rails_admin_json_editor.js", "rails_admin_json_editor/rails_admin_json_editor.css"]
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: rails_admin_json_editor
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.7
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jasper Haggenburg
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2015-01-
|
|
11
|
+
date: 2015-01-22 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bundler
|
|
@@ -65,9 +65,12 @@ files:
|
|
|
65
65
|
- LICENSE.txt
|
|
66
66
|
- README.md
|
|
67
67
|
- Rakefile
|
|
68
|
+
- app/assets/javascripts/rails_admin_json_editor/lodash.2.4.1.js
|
|
68
69
|
- app/assets/javascripts/rails_admin_json_editor/rails_admin_json_editor.js
|
|
69
70
|
- app/assets/javascripts/rails_admin_json_editor/vue.0.11.4.js
|
|
71
|
+
- app/assets/stylesheets/rails_admin_json_editor/rails_admin_json_editor.css.scss
|
|
70
72
|
- app/views/rails_admin_json_editor/main/_form_json_editor.html.erb
|
|
73
|
+
- config/initializers/assets.rb
|
|
71
74
|
- lib/rails_admin_json_editor.rb
|
|
72
75
|
- lib/rails_admin_json_editor/version.rb
|
|
73
76
|
- rails_admin_json_editor.gemspec
|