created traits and front end for editing traits

back-office/app/assets/javascripts/application.js

@@ -12,6 +12,7 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require jquery-ui
 //= require turbolinks
 //= require active_scaffold
 //= require cloudinary

back-office/app/assets/stylesheets/application.css

@@ -12,5 +12,7 @@
  *
  *= require_tree .
  *= require_self
+ *= require jquery-ui
  *= require active_scaffold
  */
+ 

back-office/app/views/items/_traits_form_column.html.erb

@@ -0,0 +1,6 @@
+<label>Traits</label>
+<%= hidden_field :record, :traits %>
+<div id="json_save" style="display:none">Save JSON</div>
+<div id="json_editor"> </div>
+<div id="json_click" onclick="runJsonEditor('json_editor','record_traits','json_save','json_click')" > Click to view / edit </div>
+

back-office/app/views/layouts/application.html.erb

@@ -16,7 +16,31 @@
   </div>
 
 
+
 <%= yield %>
 
+<script type="text/javascript" >
+   function runJsonEditor(id_of_editor_place, id_of_hidden_field, id_of_save_button, id_of_click_to_edit) {
+
+   
+       $("#" + id_of_click_to_edit).hide();
+       $("#" + id_of_save_button).show();
+      // create the editor
+      var container = $("#" + id_of_editor_place).get(0);
+      var editor = new JSONEditor(container);
+
+      var value = $("#" + id_of_hidden_field).val();
+      if(value !== undefined && value !== "") {
+        editor.set(JSON.parse(value));
+      }
+
+      $("#" + id_of_save_button).click(function(e) {
+        var field = $("#" + id_of_hidden_field);
+        var json = editor.get();        
+        field.val(JSON.stringify(json));
+        alert("JSON Edited. Save the record now !");
+      });
+    }
+</script>
 </body>
 </html>