Fauxton: Fix issue cannot delete new view

4 files changed, 100 insertions, 56 deletions

diff --git a/src/fauxton/app/modules/documents/resources.js b/src/fauxton/app/modules/documents/resources.js
index 8df2e6f1a..5512add18 100644
--- a/src/fauxton/app/modules/documents/resources.js
+++ b/src/fauxton/app/modules/documents/resources.js
@@ -167,7 +167,6 @@ function(app, FauxtonAPI) {
       if (resp.ok) {
         delete resp.ok;
       }
-
       return resp;
     },
 
diff --git a/src/fauxton/app/modules/documents/views.js b/src/fauxton/app/modules/documents/views.js
index 8cd1384cf..512292125 100644
--- a/src/fauxton/app/modules/documents/views.js
+++ b/src/fauxton/app/modules/documents/views.js
@@ -1099,7 +1099,60 @@ function(app, FauxtonAPI, Components, Documents, pouchdb, Codemirror, JSHint, re
     }
   });
 
-  //TODO split this into two smaller views, one for advance query options and other for index editing
+  Views.DesignDocSelector = FauxtonAPI.View.extend({
+    template: "templates/documents/design_doc_selector",
+
+    events: {
+      "change select#ddoc": "updateDesignDoc"
+    },
+
+    initialize: function (options) {
+      this.ddocName = options.ddocName;
+      this.database = options.database;
+      this.listenTo(this.collection, 'add', this.ddocAdded);
+    },
+
+    ddocAdded: function (ddoc) {
+      this.ddocName = ddoc.id;
+      this.render();
+    },
+
+    serialize: function () {
+      return {
+        ddocName: this.ddocName,
+        ddocs: this.collection
+      };
+    },
+
+    updateDesignDoc: function () {
+      if (this.$('#ddoc :selected').prop('id') === 'new-doc') {
+        this.$('#new-ddoc-section').show();
+      } else {
+        this.$('#new-ddoc-section').hide();
+      }
+    },
+
+    newDesignDoc: function () {
+      return this.$('#ddoc :selected').prop('id') === 'new-doc';
+    },
+
+    getCurrentDesignDoc: function () {
+      if (this.newDesignDoc()) {
+        var doc = {
+          _id: '_design/' + this.$('#new-ddoc').val(),
+          views: {},
+          language: "javascript"
+        };
+        return new Documents.Doc(doc, {database: this.database});
+      } else {
+        var ddocName = this.$('#ddoc').val();
+        return this.collection.find(function (ddoc) {
+          return ddoc.id === ddocName;
+        }).dDocModel();
+      }
+    }
+  });
+
   Views.ViewEditor = FauxtonAPI.View.extend({
     template: "templates/documents/view_editor",
     builtinReduces: ['_sum', '_count', '_stats'],
@@ -1108,7 +1161,7 @@ function(app, FauxtonAPI, Components, Documents, pouchdb, Codemirror, JSHint, re
       "click button.save": "saveView",
       "click button.delete": "deleteView",
       "change select#reduce-function-selector": "updateReduce",
-      "change select#ddoc": "updateDesignDoc",
+      
       "click #db-views-tabs-nav": 'toggleIndexNav'
     },
 
@@ -1143,17 +1196,7 @@ function(app, FauxtonAPI, Components, Documents, pouchdb, Codemirror, JSHint, re
       }
     },
 
-    updateDesignDoc: function () {
-
-      if (this.$('#ddoc :selected').prop('id') === 'new-doc') {
-        this.$('#new-ddoc-section').show();
-
-      } else {
-        this.$('#new-ddoc-section').hide();
-      }
-
-    },
-
+    
     updateValues: function() {
       var notification;
       if (this.model.changedAttributes()) {
@@ -1335,26 +1378,9 @@ function(app, FauxtonAPI, Components, Documents, pouchdb, Codemirror, JSHint, re
     },
 
     getCurrentDesignDoc: function () {
-      if (this.newDesignDoc()) {
-        var doc = {
-          _id: '_design/' + this.$('#new-ddoc').val(),
-          views: {},
-          language: "javascript"
-        };
-        return new Documents.Doc(doc, {database: this.database});
-      } else {
-        var ddocName = this.$('#ddoc').val();
-        return this.ddocs.find(function (ddoc) {
-          return ddoc.id === ddocName;
-        }).dDocModel();
-      }
-
+      return this.designDocSelector.getCurrentDesignDoc();
     },
-
-    newDesignDoc: function () {
-      return this.$('#ddoc :selected').prop('id') === 'new-doc';
-    },
-
+    
     isCustomReduceEnabled: function() {
       return $("#reduce-function-selector").val() == "CUSTOM";
     },
@@ -1461,6 +1487,12 @@ function(app, FauxtonAPI, Components, Documents, pouchdb, Codemirror, JSHint, re
         this.setView('#ddoc-info', new Views.DdocInfo({model: this.ddocInfo }));
       }
 
+      this.designDocSelector = this.setView('.design-doc-group', new Views.DesignDocSelector({
+        collection: this.ddocs,
+        ddocName: this.model.id,
+        database: this.database
+      }));
+
       this.advancedOptions = this.insertView('#query', new Views.AdvancedOptions({
         updateViewFn: this.updateView,
         previewFn: this.previewView
@@ -1480,7 +1512,7 @@ function(app, FauxtonAPI, Components, Documents, pouchdb, Codemirror, JSHint, re
         this.$('#index-nav').parent().removeClass('active');
       }
 
-      this.updateDesignDoc();
+      this.designDocSelector.updateDesignDoc();
       // This is a hack around a bug in backbone.layoutmanager with grunt dev
       // When in grunt dev mode we load templates asynchronously
       // and this can cause a double render which then gives us two 
diff --git a/src/fauxton/app/templates/documents/design_doc_selector.html b/src/fauxton/app/templates/documents/design_doc_selector.html
new file mode 100644
index 000000000..0cd6bdff7
--- /dev/null
+++ b/src/fauxton/app/templates/documents/design_doc_selector.html
@@ -0,0 +1,35 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+<div class="span3">
+  <label for="ddoc">Design document <a href="<%=getDocUrl('design_doc')%>" target="_blank"><i class="icon-question-sign"></i></a></label>
+  <select id="ddoc">
+    <optgroup label="Select a document">
+      <option id="new-doc">New document</option>
+      <% ddocs.each(function(ddoc) { %>
+      <% if (ddoc.id === ddocName) { %>
+      <option selected="selected"><%= ddoc.id %></option>
+      <% } else { %>
+      <option><%= ddoc.id %></option>
+      <% } %>
+      <% }); %>
+    </optgroup>
+  </select>
+</div>
+
+<div id="new-ddoc-section" class="span5" style="display:none">
+  <label class="control-label" for="new-ddoc"> _design/ </label>
+  <div class="controls">
+    <input type="text" id="new-ddoc" placeholder="newDesignDoc">
+  </div>
+</div>
diff --git a/src/fauxton/app/templates/documents/view_editor.html b/src/fauxton/app/templates/documents/view_editor.html
index f75edc5ab..76265e070 100644
--- a/src/fauxton/app/templates/documents/view_editor.html
+++ b/src/fauxton/app/templates/documents/view_editor.html
@@ -25,28 +25,6 @@ the License.
         <form class="form-horizontal view-query-save">
 
           <div class="control-group design-doc-group">
-            <div class="span3">
-              <label for="ddoc">Design document <a href="<%=getDocUrl('design_doc')%>" target="_blank"><i class="icon-question-sign"></i></a></label>
-              <select id="ddoc">
-                <optgroup label="Select a document">
-                  <option id="new-doc">New document</option>
-                  <% ddocs.each(function(ddoc) { %>
-                  <% if (ddoc.id === ddocName) { %>
-                  <option selected="selected"><%= ddoc.id %></option>
-                  <% } else { %>
-                  <option><%= ddoc.id %></option>
-                  <% } %>
-                  <% }); %>
-                </optgroup>
-              </select>
-            </div>
-
-            <div id="new-ddoc-section" class="span5" style="display:none">
-              <label class="control-label" for="new-ddoc"> _design/ </label>
-              <div class="controls">
-                <input type="text" id="new-ddoc" placeholder="newDesignDoc">
-              </div>
-            </div>
           </div>
 
           <div class="control-group">