BLD-658: Add view for field type Dict in Studio.

cms/static/js/models/metadata.js

@@ -107,6 +107,7 @@ define(["backbone"], function(Backbone) {
     Metadata.FLOAT_TYPE = "Float";
     Metadata.GENERIC_TYPE = "Generic";
     Metadata.LIST_TYPE = "List";
+    Metadata.DICT_TYPE = "Dict";
     Metadata.VIDEO_LIST_TYPE = "VideoList";
     Metadata.RELATIVE_TIME_TYPE = "RelativeTime";
 

cms/static/js/views/metadata.js

@@ -23,26 +23,23 @@ function(BaseView, _, MetadataModel, AbstractEditor, VideoList) {
             this.collection.each(
                 function (model) {
                     var data = {
-                        el: self.$el.find('.metadata_entry')[counter++],
-                        model: model
-                    };
-                    if (model.getType() === MetadataModel.SELECT_TYPE) {
-                        new Metadata.Option(data);
+                            el: self.$el.find('.metadata_entry')[counter++],
+                            model: model
+                        },
+                        conversions = {
+                            'Select': 'Option',
+                            'Float': 'Number',
+                            'Integer': 'Number'
+                        },
+                        type = model.getType();
+
+                    if (conversions[type]) {
+                        type = conversions[type];
                     }
-                    else if (model.getType() === MetadataModel.INTEGER_TYPE ||
-                        model.getType() === MetadataModel.FLOAT_TYPE) {
-                        new Metadata.Number(data);
-                    }
-                    else if(model.getType() === MetadataModel.LIST_TYPE) {
-                        new Metadata.List(data);
-                    }
-                    else if(model.getType() === MetadataModel.VIDEO_LIST_TYPE) {
-                        new VideoList(data);
-                    }
-                    else if(model.getType() === MetadataModel.RELATIVE_TIME_TYPE) {
-                        new Metadata.RelativeTime(data);
-                    }
-                    else {
+
+                    if (_.isFunction(Metadata[type])) {
+                        new Metadata[type](data);
+                    } else {
                         // Everything else is treated as GENERIC_TYPE, which uses String editor.
                         new Metadata.String(data);
                     }
@@ -84,6 +81,8 @@ function(BaseView, _, MetadataModel, AbstractEditor, VideoList) {
         }
     });
 
+    Metadata.VideoList = VideoList;
+
     Metadata.String = AbstractEditor.extend({
 
         events : {
@@ -277,6 +276,7 @@ function(BaseView, _, MetadataModel, AbstractEditor, VideoList) {
 
         setValueInEditor: function (value) {
             var list = this.$el.find('ol');
+
             list.empty();
             _.each(value, function(ele, index) {
                 var template = _.template(
@@ -308,6 +308,13 @@ function(BaseView, _, MetadataModel, AbstractEditor, VideoList) {
 
         enableAdd: function() {
             this.$el.find('.create-setting').removeClass('is-disabled');
+        },
+
+        clear: function() {
+            AbstractEditor.prototype.clear.apply(this, arguments);
+            if (_.isNull(this.model.getValue())) {
+                this.$el.find('.create-setting').removeClass('is-disabled');
+            }
         }
     });
 
@@ -386,5 +393,89 @@ function(BaseView, _, MetadataModel, AbstractEditor, VideoList) {
         }
     });
 
+    Metadata.Dict = AbstractEditor.extend({
+
+        events : {
+            "click .setting-clear" : "clear",
+            "keypress .setting-input" : "showClearButton",
+            "change input" : "updateModel",
+            "input input" : "enableAdd",
+            "click .create-setting" : "addEntry",
+            "click .remove-setting" : "removeEntry"
+        },
+
+        templateName: "metadata-dict-entry",
+
+        getValueFromEditor: function () {
+            var dict = {};
+
+            _.each(this.$el.find('li'), function(li, index) {
+                var key = $(li).find('.input-key').val().trim(),
+                    value = $(li).find('.input-value').val().trim();
+
+                // Keys should be unique, so if our keys are duplicated and
+                // second key is empty or key and value are empty just do
+                // nothing. Otherwise, it'll be overwritten by the new value.
+                if (value === '') {
+                    if (key === '' || key in dict) {
+                        return false;
+                    }
+                }
+
+                dict[key] = value;
+            });
+
+            return dict;
+        },
+
+        setValueInEditor: function (value) {
+            var list = this.$el.find('ol'),
+                frag = document.createDocumentFragment();
+
+            _.each(value, function(value, key) {
+                var template = _.template(
+                    '<li class="list-settings-item">' +
+                        '<input type="text" class="input input-key" value="<%= key %>">' +
+                        '<input type="text" class="input input-value" value="<%= value %>">' +
+                        '<a href="#" class="remove-action remove-setting" data-value="<%= value %>"><i class="icon-remove-sign"></i><span class="sr">Remove</span></a>' +
+                    '</li>'
+                );
+
+                frag.appendChild($(template({'key': key, 'value': value}))[0]);
+            });
+
+            list.html([frag]);
+        },
+
+        addEntry: function(event) {
+            event.preventDefault();
+            // We don't call updateModel here since it's bound to the
+            // change event
+            var dict = $.extend(true, {}, this.model.get('value')) || {};
+            dict[''] = '';
+            this.setValueInEditor(dict);
+            this.$el.find('.create-setting').addClass('is-disabled');
+        },
+
+        removeEntry: function(event) {
+            event.preventDefault();
+            var entry = $(event.currentTarget).siblings('.input-key').val();
+            this.setValueInEditor(_.omit(this.model.get('value'), entry));
+            this.updateModel();
+            this.$el.find('.create-setting').removeClass('is-disabled');
+        },
+
+        enableAdd: function() {
+            this.$el.find('.create-setting').removeClass('is-disabled');
+        },
+
+        clear: function() {
+            AbstractEditor.prototype.clear.apply(this, arguments);
+            if (_.isNull(this.model.getValue())) {
+                this.$el.find('.create-setting').removeClass('is-disabled');
+            }
+        }
+    });
+
     return Metadata;
 });