Quality Size knobbed, other quality changes

UI/Settings/Quality/Profile/EditQualityProfileTemplate.html

@@ -1,6 +1,10 @@
 <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>Edit: Quality Profile</h3>
+    {{#if id}}
+        <h3>Edit</h3>
+    {{else}}
+        <h3>Add</h3>
+    {{/if}}
 </div>
 <div class="modal-body">
     <div class="form-horizontal">
@@ -16,9 +20,9 @@
         <div class="control-group">
             <label class="control-label">Cutoff</label>
             <div class="controls">
-                <select class="x-cutoff" name="cutoff">
+                <select class="x-cutoff" name="cutoff.id">
                     {{#each allowed}}
-                    <option value="{{id}}">{{name}}</option>
+                        <option value="{{id}}">{{name}}</option>
                     {{/each}}
                 </select>
                 <span class="help-inline">
@@ -47,7 +51,9 @@
     </div>
 </div>
 <div class="modal-footer">
-    <button class="btn btn-danger pull-left x-remove">delete</button>
+    {{#if id}}
+        <button class="btn btn-danger pull-left x-remove">delete</button>
+    {{/if}}
     <button class="btn" data-dismiss="modal">cancel</button>
     <button class="btn btn-primary x-save">save</button>
 </div>

UI/Settings/Quality/Profile/EditQualityProfileView.js

@@ -4,12 +4,20 @@ define(['app', 'marionette', 'Mixins/AsModelBoundView'], function (App, Marionet
     var view = Marionette.ItemView.extend({
         template: 'Settings/Quality/Profile/EditQualityProfileTemplate',
 
+        ui: {
+            cutoff: '.x-cutoff'
+        },
+
         events: {
-            'click .x-save'             : 'saveQualityProfile',
+            'click .x-save'             : '_saveQualityProfile',
             'dblclick .x-available-list': '_moveQuality',
             'dblclick .x-allowed-list'  : '_moveQuality'
         },
 
+        initialize: function (options) {
+            this.profileCollection = options.profileCollection;
+        },
+
         _moveQuality: function (event) {
 
             var quality;
@@ -39,19 +47,25 @@ define(['app', 'marionette', 'Mixins/AsModelBoundView'], function (App, Marionet
                 throw 'couldnt find quality id ' + qualityId;
             }
 
-
             this.model.set('available', availableCollection.toJSON());
             this.model.set('allowed', allowedCollection.toJSON());
 
             this.render();
         },
 
-        saveQualityProfile: function () {
-            //Todo: Make sure model is updated with Allowed, Cutoff, Name
+        _saveQualityProfile: function () {
+            var self = this;
+            var cutoff = _.findWhere(this.model.get('allowed'), { id: parseInt(this.ui.cutoff.val())});
+            this.model.set('cutoff', cutoff);
 
-            this.model.save();
-            this.trigger('saved');
-            App.modalRegion.closeModal();
+            var promise = this.model.save();
+
+            if (promise) {
+                promise.done(function () {
+                    self.profileCollection.add(self.model, { merge: true });
+                    App.modalRegion.closeModal();
+                });
+            }
         }
     });
 

UI/Settings/Quality/Profile/QualityProfileCollectionTemplate.html

@@ -1,4 +1,13 @@
 <fieldset>
     <legend>Quality Profiles</legend>
-    <ul class="quality-profiles"></ul>
+    <div class="row">
+        <div class="span12">
+            <button class="btn btn-success x-add">Add Profile</button>
+        </div>
+    </div>
+    <div class="row">
+        <div class="span12">
+            <ul class="quality-profiles"></ul>
+        </div>
+    </div>
 </fieldset>

UI/Settings/Quality/Profile/QualityProfileCollectionView.js

@@ -1,9 +1,35 @@
 'use strict';
 
-define(['marionette', 'Settings/Quality/Profile/QualityProfileView'], function (Marionette, QualityProfileView) {
+define(['app',
+        'marionette',
+        'Settings/Quality/Profile/QualityProfileView',
+        'Settings/Quality/Profile/EditQualityProfileView',
+        'Settings/Quality/Profile/QualityProfileSchemaCollection'],
+    function (App, Marionette, QualityProfileView, EditProfileView, ProfileCollection) {
+
     return Marionette.CompositeView.extend({
         itemView         : QualityProfileView,
         itemViewContainer: '.quality-profiles',
-        template         : 'Settings/Quality/Profile/QualityProfileCollectionTemplate'
+        template         : 'Settings/Quality/Profile/QualityProfileCollectionTemplate',
+
+        events: {
+            'click .x-add': '_addProfile'
+        },
+
+        _addProfile: function () {
+            var self = this;
+            var schemaCollection = new ProfileCollection();
+            schemaCollection.fetch({
+                success: function (collection) {
+                    var model = _.first(collection.models);
+                    model.set('id', undefined);
+                    model.set('name', '');
+                    model.collection = self.collection;
+
+                    var view = new EditProfileView({ model: model, profileCollection: self.collection});
+                    App.modalRegion.show(view);
+                }
+            });
+        }
     });
 });

UI/Settings/Quality/Profile/QualityProfileSchemaCollection.js

@@ -0,0 +1,13 @@
+"use strict";
+
+define(
+    [
+        'backbone',
+        'Quality/QualityProfileModel'
+    ], function (Backbone, QualityProfileModel) {
+
+        return Backbone.Collection.extend({
+            model: QualityProfileModel,
+            url  : window.ApiRoot + '/qualityprofiles/schema'
+        });
+    });

UI/Settings/Quality/Profile/QualityProfileTemplate.html

@@ -1,9 +1,9 @@
 <div class="quality-profile-item">
     <div>
-        <h2>{{name}}</h2>
+        <h2 name="name"></h2>
         <span class="btn-group pull-right">
-            <button class="btn btn-mini btn-danger x-delete">Delete</button>
             <button class="btn btn-mini x-edit">Edit</button>
+            <button class="btn btn-mini btn-danger x-delete">Delete</button>
         </span>
     </div>
 

UI/Settings/Quality/Profile/QualityProfileView.js

@@ -24,8 +24,12 @@ define(
                 'click .x-delete': '_deleteProfile'
             },
 
+            initialize: function () {
+                this.listenTo(this.model, 'sync', this.render);
+            },
+
             _editProfile: function () {
-                var view = new EditProfileView({ model: this.model});
+                var view = new EditProfileView({ model: this.model, profileCollection: this.model.collection });
                 App.modalRegion.show(view);
             },