Fixed up UI changes when model is edited

NzbDrone.Web/Scripts/NzbDrone/common.js

@@ -15,6 +15,13 @@
     };
 })(jQuery);
 
+function createGuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+}
+
 $(document).ready(function () {
     while($('#logo span').height() > $('#logo').height()) {
         $('#logo span').css('font-size', (parseInt($('#logo span').css('font-size')) - 1) + "px" );

NzbDrone.Web/Scripts/backbone/views/qualityProfiles.js

@@ -57,16 +57,27 @@
     changeName: function(e) {
         var name = $(e.target).val();
 
-        $('#DefaultQualityProfileId option[value="' + this.model.get("Id") + '"]').html(name);
-
         this.model.set({ "Name": name });
-        this.model.save();
+        this.model.save(this.model, {
+            success: function (model) {
+                var id = model.get('Id');
+                var name = model.get('Name');
+
+                var exists = $('#DefaultQualityProfileId option[value="' + id + '"]');
+
+                if (exists.length == 0) 
+                    $('#DefaultQualityProfileId').append($('\<option\> \</option\>').val(id).html(name));
+
+                else
+                    $('#DefaultQualityProfileId option[value="' + id + '"]').html(name);
+            }
+        });
     },
     destroy: function (e) {
-        //if (e === undefined)
-        //    return;
-
         e.preventDefault();
+        
+        $("#DefaultQualityProfileId option[value='" + this.model.get('Id') + "']").remove();
+
         this.model.destroy();
         e.stopPropagation();
     },
@@ -81,10 +92,6 @@ QualityProfileCollectionView = Backbone.Marionette.CompositeView.extend({
     itemView: QualityProfileView,
     template: QualityProfileApp.Constants.Templates.QualityProfileCollection,
     
-    //appendHtml: function (collectionView, itemView) {
-    //    collectionView.$('#collection').append(itemView.el);
-    //},
-    
     initialize: function () {
         _.bindAll(this, 'render');
         this.collection = new QualityProfileCollection();
@@ -96,8 +103,8 @@ QualityProfileCollectionView = Backbone.Marionette.CompositeView.extend({
     },
     addProfile: function (e) {
         e.preventDefault();
-        //Add new profile to collection
-        //Todo: How will we get the list of qualities (they would all be NOT allowed) - it all comes from the server side...
+        
+        //Todo: Need to get the default profile from the server, instead of creating it manually...
         var newProfile = new QualityProfile({
             Name: '', Cutoff: 0, Qualities: [
                 { "Id": 0, "Weight": 0, "Name": "Unknown", "Allowed": false },

NzbDrone.Web/Views/Settings/Quality.cshtml

@@ -130,16 +130,18 @@
             <% }); %>
             </select>
         </div>
+        
+        <% var guid = createGuid(); %>
 
         <% _.each(Qualities, function(quality) { %>
-            <input id="<%= Id %>_<%= quality.Id %>"
+            <input id="<%= guid %>_<%= quality.Id %>"
                     class="quality-selectee"
                     type="checkbox"
                     value="<%= quality.Allowed %>"
                     data-quality-id="<%= quality.Id %>"
                     <%= quality.Allowed ? 'checked="checked"' : '' %>
             />
-            <label for="<%= Id %>_<%= quality.Id %>"><%= quality.Name %></label>
+            <label for="<%= guid %>_<%= quality.Id %>"><%= quality.Name %></label>
         <% }); %>
     
     
@@ -147,8 +149,6 @@
     
     <script id="QualityProfileCollectionTemplate" type="text/template">
         <div id="profileHeader">
-            @*<button id="add-profile"><i class="icon-plus icon-large"></i> Add New Profile</button>*@
-
             <a id="add-profile" href="@Url.Action("AddProfile", "Settings")">
                 <i class="icon-plus icon-large"></i>
                 Add New Profile