BLD-1110: Create, edit, delete groups.

cms/static/js/views/group_configuration_details.js

@@ -42,13 +42,13 @@ function(BaseView, _, gettext) {
             this.model.set('editing', true);
         },
 
-        showGroups: function(e) {
-            if(e && e.preventDefault) { e.preventDefault(); }
+        showGroups: function(event) {
+            if(event && event.preventDefault) { event.preventDefault(); }
             this.model.set('showGroups', true);
         },
 
-        hideGroups: function(e) {
-            if(e && e.preventDefault) { e.preventDefault(); }
+        hideGroups: function(event) {
+            if(event && event.preventDefault) { event.preventDefault(); }
             this.model.set('showGroups', false);
         },
 

cms/static/js/views/group_configuration_edit.js

@@ -1,13 +1,15 @@
 define([
-    'js/views/baseview', 'underscore', 'jquery', 'gettext'
+    'js/views/baseview', 'underscore', 'jquery', 'gettext',
+    'js/views/group_edit'
 ],
-function(BaseView, _, $, gettext) {
+function(BaseView, _, $, gettext, GroupEdit) {
     'use strict';
     var GroupConfigurationEdit = BaseView.extend({
         tagName: 'div',
         events: {
             'change .group-configuration-name-input': 'setName',
             'change .group-configuration-description-input': 'setDescription',
+            "click .action-add-group": "createGroup",
             'focus .input-text': 'onFocus',
             'blur .input-text': 'onBlur',
             'submit': 'setAndClose',
@@ -24,8 +26,14 @@ function(BaseView, _, $, gettext) {
         },
 
         initialize: function() {
+            var groups;
+
             this.template = this.loadTemplate('group-configuration-edit');
             this.listenTo(this.model, 'invalid', this.render);
+            groups = this.model.get('groups');
+            this.listenTo(groups, 'add', this.addOne);
+            this.listenTo(groups, 'reset', this.addAll);
+            this.listenTo(groups, 'all', this.render);
         },
 
         render: function() {
@@ -37,10 +45,31 @@ function(BaseView, _, $, gettext) {
                 isNew: this.model.isNew(),
                 error: this.model.validationError
             }));
+            this.addAll();
 
             return this;
         },
 
+        addOne: function(group) {
+            var view = new GroupEdit({ model: group });
+            this.$('ol.groups').append(view.render().el);
+
+            return this;
+        },
+
+        addAll: function() {
+            this.model.get('groups').each(this.addOne, this);
+        },
+
+        createGroup: function(event) {
+            if(event && event.preventDefault) { event.preventDefault(); }
+            var collection = this.model.get('groups');
+            collection.add([{
+                name: collection.getNextDefaultGroupName(),
+                order: collection.nextOrder()
+            }]);
+        },
+
         setName: function(event) {
             if(event && event.preventDefault) { event.preventDefault(); }
             this.model.set(
@@ -62,6 +91,16 @@ function(BaseView, _, $, gettext) {
             this.setName();
             this.setDescription();
 
+            _.each(this.$('.groups li'), function(li, i) {
+                var group = this.model.get('groups').at(i);
+
+                if(group) {
+                    group.set({
+                        'name': $('.group-name', li).val()
+                    });
+                }
+            }, this);
+
             return this;
         },
 

cms/static/js/views/group_configurations_list.js

@@ -56,7 +56,7 @@ define([
 
         addOne: function(event) {
             if(event && event.preventDefault) { event.preventDefault(); }
-            this.collection.add([{editing: true}]);
+            this.collection.add([{ editing: true }]);
         }
     });
 

cms/static/js/views/group_edit.js

@@ -0,0 +1,69 @@
+define([
+    'js/views/baseview', 'underscore', 'underscore.string', 'jquery', 'gettext'
+],
+function(BaseView, _, str, $, gettext) {
+    'use strict';
+    _.str = str; // used in template
+    var GroupEdit = BaseView.extend({
+        tagName: 'li',
+        events: {
+            'click .action-close': 'removeGroup',
+            'change .group-name': 'changeName',
+            'focus .groups-fields input': 'onFocus',
+            'blur .groups-fields input': 'onBlur'
+        },
+
+        className: function() {
+            var index = this.model.collection.indexOf(this.model);
+            return 'field-group group group-' + index;
+        },
+
+        initialize: function() {
+            this.template = this.loadTemplate('group-edit');
+            this.listenTo(this.model, 'change', this.render);
+        },
+
+        render: function() {
+            var collection = this.model.collection,
+                index = collection.indexOf(this.model);
+
+            this.$el.html(this.template({
+                name: this.model.escape('name'),
+                allocation: this.getAllocation(),
+                index: index,
+                error: this.model.validationError
+            }));
+
+            return this;
+        },
+
+        changeName: function(event) {
+            if(event && event.preventDefault) { event.preventDefault(); }
+            this.model.set({
+                name: this.$('.group-name').val()
+            }, { silent: true });
+
+            return this;
+        },
+
+        removeGroup: function(event) {
+            if(event && event.preventDefault) { event.preventDefault(); }
+            this.model.collection.remove(this.model);
+            return this.remove();
+        },
+
+        getAllocation: function() {
+            return Math.floor(100 / this.model.collection.length);
+        },
+
+        onFocus: function () {
+            this.$el.closest('.groups-fields').addClass('is-focused');
+        },
+
+        onBlur: function () {
+            this.$el.closest('.groups-fields').removeClass('is-focused');
+        }
+    });
+
+    return GroupEdit;
+});