Move view editor around and lots more

4 files changed, 221 insertions, 140 deletions

diff --git a/src/fauxton/app/modules/documents/routes.js b/src/fauxton/app/modules/documents/routes.js
index 801fa607d..d5dfc6a74 100644
--- a/src/fauxton/app/modules/documents/routes.js
+++ b/src/fauxton/app/modules/documents/routes.js
@@ -378,6 +378,7 @@ function(app, FauxtonAPI, Documents, Databases) {
 
       var ddocInfo = {
         id: "_design/" + ddoc,
+        currView: view,
         designDocs: data.designDocs
       };
 
@@ -396,7 +397,8 @@ function(app, FauxtonAPI, Documents, Databases) {
           }),
 
           "#sidebar-content": new Documents.Views.Sidebar({
-            collection: data.designDocs
+            collection: data.designDocs,
+            ddocInfo: ddocInfo
           }),
 
           "#tabs": new Documents.Views.Tabs({
diff --git a/src/fauxton/app/modules/documents/views.js b/src/fauxton/app/modules/documents/views.js
index c23530c1d..94208cb32 100644
--- a/src/fauxton/app/modules/documents/views.js
+++ b/src/fauxton/app/modules/documents/views.js
@@ -240,18 +240,28 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
   Views.IndexItem = FauxtonAPI.View.extend({
     template: "templates/documents/index_menu_item",
     tagName: "li",
+
     initialize: function(options){
       this.index = options.index;
       this.ddoc = options.ddoc;
       this.database = options.database;
+      this.selected = !! options.selected;
     },
 
     serialize: function() {
       return {
         index: this.index,
         ddoc: this.ddoc,
-        database: this.database
+        database: this.database,
+        selected: this.selected
       };
+    },
+
+    afterRender: function() {
+      if (this.selected) {
+        $("#sidenav ul.nav-list li").removeClass("active");
+        this.$el.addClass("active");
+      }
     }
   });
 
@@ -320,7 +330,8 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
         database: this.collection,
         viewList: this.viewList,
         hasReduce: false,
-        params: this.params
+        params: this.params,
+        ddocs: this.designDocs
       };
       if (this.ddoc) {
         data.ddoc = this.ddoc;
@@ -451,6 +462,14 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
     },
 
     beforeRender: function() {
+      this.setDdocInfo();
+      if (this.viewList) {
+        this.viewEditorView = this.insertView("#edit-index-container", new Views.ViewEditor({
+          model: this.ddoc,
+          ddocs: this.designDocs,
+          viewCollection: this.collection
+        }));
+      }
       this.collection.each(function(doc) {
         this.rows[doc.id] = this.insertView("table.all-docs tbody", new this.nestedView({
           model: doc
@@ -619,9 +638,11 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
 
   Views.ViewEditor = FauxtonAPI.View.extend({
     template: "templates/documents/view_editor",
+    builtinReduces: ['_sum', '_count', '_stats'],
 
     events: {
       "click button.save": "saveView",
+      "click button.preview": "previewView",
       "change select#reduce-function-selector": "updateReduce"
     },
 
@@ -636,6 +657,9 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
 
     initialize: function(options) {
       this.ddocs = options.ddocs;
+      this.viewCollection = options.viewCollection;
+      this.hasReduce = this.model.viewHasReduce(this.viewCollection.view);
+      this.newView = false;
     },
 
     updateValues: function() {
@@ -661,7 +685,22 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
     },
 
     establish: function() {
-      return [this.ddocs.fetch(), this.model.fetch()];
+      //return [this.ddocs.fetch(), this.model.fetch()];
+      return [];
+    },
+
+    previewView: function(event) {
+      FauxtonAPI.addNotification({
+        msg: "<strong>Warning!</strong> Preview executes the Map/Reduce functions in your browser, and may behave differently from CouchDB.",
+        type: "warning",
+        selector: "#define-view .errors-container",
+        fade: false
+      });
+      FauxtonAPI.addNotification({
+        msg: "Preview Functionality Coming Soon",
+        type: "warning",
+        selector: "#define-view .errors-container"
+      });
     },
 
     saveView: function(event) {
@@ -745,18 +784,28 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
 
     serialize: function() {
       return {
-        database: this.model,
-        ddocs: this.ddocs
+        //database: this.model,
+        ddocs: this.ddocs,
+        ddoc: this.model,
+        viewCollection: this.viewCollection,
+        hasReduce: this.hasReduce,
+        newView: this.newView
       };
     },
 
+    hasCustomReduce: function() {
+      return this.hasReduce && ! _.contains(this.builtinReduces, this.hasReduce);
+    },
+
     afterRender: function() {
-      this.model.on("sync", this.updateValues, this);
+      //this.model.on("sync", this.updateValues, this);
       var that = this;
       var mapFun = $("#map-function");
-      mapFun.val(this.langTemplates[this.defaultLang].map);
       var reduceFun = $("#reduce-function");
-      reduceFun.val(this.langTemplates[this.defaultLang].reduce);
+      if (this.newView) {
+        mapFun.val(this.langTemplates[this.defaultLang].map);
+        reduceFun.val(this.langTemplates[this.defaultLang].reduce);
+      }
       this.mapEditor = Codemirror.fromTextArea(mapFun.get()[0], {
         mode: "javascript",
         lineNumbers: true,
@@ -786,7 +835,9 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
       // HACK: this should be in the html
       // but CodeMirror's head explodes and it won't set the hight properly.
       // So render it first, set the editor, then hide.
-      $(".control-group.reduce-function").hide();
+      if ( ! this.hasCustomReduce()) {
+        $(".control-group.reduce-function").hide();
+      }
     }
   });
 
@@ -799,6 +850,13 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
       "click .nav-list a.toggle-view#design-docs": "toggleView"
     },
 
+    initialize: function(options) {
+      if (options.ddocInfo) {
+        this.ddocID = options.ddocInfo.id;
+        this.currView = options.ddocInfo.currView;
+      }
+    },
+
     establish: function() {
       if (this.collection) {
         return [this.collection.fetch()];
@@ -830,10 +888,12 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
     buildIndexList: function(collection, selector, design){
 
       _.each(_.keys(collection), function(key){
+        var selected = this.ddocID == "_design/"+design;
         this.insertView("ul.nav." + selector, new Views.IndexItem({
           ddoc: design,
           index: key,
-          database: this.collection.database.id
+          database: this.collection.database.id,
+          selected: selected && key == this.currView
         }));
       }, this);
     },
diff --git a/src/fauxton/app/templates/documents/all_docs_list.html b/src/fauxton/app/templates/documents/all_docs_list.html
index 715c9795e..d32c0be3b 100644
--- a/src/fauxton/app/templates/documents/all_docs_list.html
+++ b/src/fauxton/app/templates/documents/all_docs_list.html
@@ -13,84 +13,89 @@ the License.
 -->
 
 <div class="view show">
-  <div class="row">
-    <div class="btn-toolbar span6">
-      <button type="button" class="btn all" data-toggle="button">✓ All</button>
-      <button class="btn btn-small disabled bulk-delete"><i class="icon-trash"></i></button>
-    </div>
-    <div class="btn-toolbar pull-right">
-      <a href="#new-view-index" class="btn btn-small toggle-edit disabled"><i class="icon-wrench"></i> Edit index</a>
-      <a href="#params" class="btn btn-small toggle-params"><i class="icon-plus"></i> API preview</a>
+  <% if (!viewList) { %>
+    <div class="row">
+      <div class="btn-toolbar span6">
+        <button type="button" class="btn all" data-toggle="button">✓ All</button>
+        <button class="btn btn-small disabled bulk-delete"><i class="icon-trash"></i></button>
+      </div>
+      <div class="btn-toolbar pull-right">
+        <a href="#new-view-index" class="btn btn-small toggle-edit disabled"><i class="icon-wrench"></i> Edit index</a>
+        <a href="#params" class="btn btn-small toggle-params"><i class="icon-plus"></i> API preview</a>
+      </div>
     </div>
-  </div>
+  <% } %>
 
   <div class="row">
     <div class="errors-container"></div>
-    <div class="accordion" id="advanced-options-accordion">
-      <div class="accordion-group">
-        <div class="accordion-heading">
-          <a class="accordion-toggle" data-bypass="true" data-toggle="collapse" data-parent="#advanced-options-accordion" href="#collapse-advanced-options">
-            Advanced Options
-          </a>
-        </div>
-        <div id="collapse-advanced-options" class="accordion-body collapse in">
-          <div class="accordion-inner">
-            <form class="view-query-update">
-              <div class="controls controls-row">
-                <label class="span3 inline">
-                  Limit:
-                  <select name="limit" class="input-small">
-                    <option>5</option>
-                    <option selected="selected">10</option>
-                    <option>25</option>
-                    <option>50</option>
-                    <option>100</option>
-                  </select>
-                </label>
-                <label class="span3 checkbox inline">
-                  <input name="include_docs" type="checkbox" value="true"> Include Docs
-                </label>
-                <% if (hasReduce) { %>
-                  <label class="span2 checkbox inline">
-                    <input name="reduce" type="checkbox" value="true"> Reduce
-                  </label>
-                  <label class="span4 inline">
-                    Group Level:
-                    <select disabled name="group_level" class="input-small">
-                      <option value="0">None</option>
-                      <option value="1">1</option>
-                      <option value="2">2</option>
-                      <option value="3">3</option>
-                      <option value="4">4</option>
-                      <option value="5">5</option>
-                      <option value="6">6</option>
-                      <option value="7">7</option>
-                      <option value="8">8</option>
-                      <option value="9">9</option>
-                      <option value="999" selected="selected">exact</option>
+    <div id="edit-index-container"></div>
+    <% if (viewList) { %>
+      <div class="accordion" id="advanced-options-accordion">
+        <div class="accordion-group">
+          <div class="accordion-heading">
+            <a class="accordion-toggle" data-bypass="true" data-toggle="collapse" data-parent="#advanced-options-accordion" href="#collapse-advanced-options">
+              <i class="icon-plus"></i> Advanced Options
+            </a>
+          </div>
+          <div id="collapse-advanced-options" class="accordion-body collapse">
+            <div class="accordion-inner">
+              <form class="view-query-update">
+                <div class="controls controls-row">
+                  <label class="span3 inline">
+                    Limit:
+                    <select name="limit" class="input-small">
+                      <option>5</option>
+                      <option selected="selected">10</option>
+                      <option>25</option>
+                      <option>50</option>
+                      <option>100</option>
                     </select>
                   </label>
-                <% } %>
-              </div>
+                  <label class="span3 checkbox inline">
+                    <input name="include_docs" type="checkbox" value="true"> Include Docs
+                  </label>
+                  <% if (hasReduce) { %>
+                    <label class="span2 checkbox inline">
+                      <input name="reduce" type="checkbox" value="true"> Reduce
+                    </label>
+                    <label class="span4 inline">
+                      Group Level:
+                      <select disabled name="group_level" class="input-small">
+                        <option value="0">None</option>
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                        <option value="3">3</option>
+                        <option value="4">4</option>
+                        <option value="5">5</option>
+                        <option value="6">6</option>
+                        <option value="7">7</option>
+                        <option value="8">8</option>
+                        <option value="9">9</option>
+                        <option value="999" selected="selected">exact</option>
+                      </select>
+                    </label>
+                  <% } %>
+                </div>
+
+                <div class="controls controls-row">
+                  <input name="key" class="span4" type="text" placeholder="Key">
+                  <input name="keys" class="span8" type="text" placeholder="Keys">
+                </div>
+                <div class="controls controls-row">
+                  <input name="startkey" class="span6" type="text" placeholder="Start Key">
+                  <input name="endkey" class="span6" type="text" placeholder="End Key">
+                </div>
+                <div class="controls controls-row">
+                  <button type="submit" class="btn btn-primary">Query</button>
+                </div>
+              </form>
 
-              <div class="controls controls-row">
-                <input name="key" class="span4" type="text" placeholder="Key">
-                <input name="keys" class="span8" type="text" placeholder="Keys">
-              </div>
-              <div class="controls controls-row">
-                <input name="startkey" class="span6" type="text" placeholder="Start Key">
-                <input name="endkey" class="span6" type="text" placeholder="End Key">
-              </div>
-              <div class="controls controls-row">
-                <button type="submit" class="btn btn-primary">Query</button>
-              </div>
-            </form>
- 
+            </div>
           </div>
-        </div>
 
+        </div>
       </div>
-    </div>
+    <% } %>
   </div>
 
 
diff --git a/src/fauxton/app/templates/documents/view_editor.html b/src/fauxton/app/templates/documents/view_editor.html
index 635d85f6a..1eceac2a0 100644
--- a/src/fauxton/app/templates/documents/view_editor.html
+++ b/src/fauxton/app/templates/documents/view_editor.html
@@ -12,68 +12,82 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<div id="define-view" class="ddoc-alert well">
-  <div class="errors-container">
-    <div class="alert">
-      <button type="button" class="close" data-dismiss="alert">&times;</button>
-      <strong>Warning!</strong> Preview executes the Map/Reduce functions in your browser, and may behave differently from CouchDB.
+<div class="accordion" id="edit-index-accordion">
+  <div class="accordion-group">
+    <div class="accordion-heading">
+      <a class="accordion-toggle" data-bypass="true" data-toggle="collapse" data-parent="#edit-index-accordion" href="#collapse-edit-index">
+        <i class="icon-wrench"></i> Edit Index
+      </a>
     </div>
-  </div>
-  <form class="form-horizontal">
-    <h3>Define your index</h3>
-    <div class="control-group">
-      <label class="control-label" for="ddoc">Design document <a target="_couch_docs" href="http://docs.couchdb.org/en/latest/ddocs/#design-docs"><i class="icon-question-sign"></i></a></label>
-      <div class="controls">
-        <select id="ddoc">
-          <optgroup label="Select a document">
-            <option>New document</option>
-            <% ddocs.each(function(ddoc) { %>
-              <option><%= ddoc.id %></option>
-            <% }); %>
-            <option selected="selected">_design/views101</option>
-          </optgroup>
-        </select>
-      </div>
-    </div>
-    <div class="control-group">
-      <label class="control-label" for="index-name">Index name <a target="_couch_docs" href="http://docs.couchdb.org/en/latest/ddocs/#view-functions"><i class="icon-question-sign"></i></a></label>
-      <div class="controls">
-        <input type="text" id="index-name" value="" placeholder="Index name" />
-      </div>
-    </div>
-    <div class="control-group">
-      <label class="control-label" for="map-function">Map function <a target="_couch_docs" href="http://docs.couchdb.org/en/latest/ddocs/#map-functions"><i class="icon-question-sign"></i></a></label>
-      <div class="controls">
-        <textarea class="js-editor" id="map-function"></textarea>
-      </div>
-    </div>
-    <div class="control-group">
-      <label class="control-label" for="reduce-function-selector">Reduce function <a target="_couch_docs" href="http://docs.couchdb.org/en/latest/ddocs/#reduce-and-rereduce-functions"><i class="icon-question-sign"></i></a></label>
-      <div class="controls">
-        <select id="reduce-function-selector">
-          <option value="" selected="selected">None</option>
-          <option value="_sum">_sum</option>
-          <option value="_count">_count</option>
-          <option value="_stats">_stats</option>
-          <option value="CUSTOM">Custom reduce</option>
-        </select>
-        <span class="help-block">Reduce functions are optional.</span>
+    <div id="collapse-edit-index" class="accordion-body collapse in">
+      <div class="accordion-inner">
+        <div id="define-view" class="ddoc-alert well">
+          <div class="errors-container"></div>
+          <form class="form-horizontal">
+            <h3>Define your index</h3>
+            <div class="control-group">
+              <label class="control-label" for="ddoc">Design document <a target="_couch_docs" href="http://docs.couchdb.org/en/latest/ddocs/#design-docs"><i class="icon-question-sign"></i></a></label>
+              <div class="controls">
+                <select id="ddoc">
+                  <optgroup label="Select a document">
+                    <option>New document</option>
+                    <% ddocs.each(function(ddoc) { %>
+                      <% if (ddoc.id == "_design/"+viewCollection.design) { %>
+                        <option selected="selected"><%= ddoc.id %></option>
+                      <% } else { %>
+                        <option><%= ddoc.id %></option>
+                      <% } %>
+                    <% }); %>
+                    <option selected="selected">_design/views101</option>
+                  </optgroup>
+                </select>
+              </div>
+            </div>
+            <div class="control-group">
+              <label class="control-label" for="index-name">Index name <a target="_couch_docs" href="http://docs.couchdb.org/en/latest/ddocs/#view-functions"><i class="icon-question-sign"></i></a></label>
+              <div class="controls">
+                <input type="text" id="index-name" value="<%= viewCollection.view %>" placeholder="Index name" />
+              </div>
+            </div>
+            <div class="control-group">
+              <label class="control-label" for="map-function">Map function <a target="_couch_docs" href="http://docs.couchdb.org/en/latest/ddocs/#map-functions"><i class="icon-question-sign"></i></a></label>
+              <div class="controls">
+                <textarea class="js-editor" id="map-function"><%= ddoc.get('doc').views[viewCollection.view].map %></textarea>
+              </div>
+            </div>
+            <div class="control-group">
+              <label class="control-label" for="reduce-function-selector">Reduce function <a target="_couch_docs" href="http://docs.couchdb.org/en/latest/ddocs/#reduce-and-rereduce-functions"><i class="icon-question-sign"></i></a></label>
+              <div class="controls">
+                <select id="reduce-function-selector">
+                  <% console.log("HAS REDUCE: ",hasReduce) %>
+                  <option value="" <%= !hasReduce ? 'selected="selected"' : '' %>>None</option>
+                  <option value="_sum">_sum</option>
+                  <option value="_count">_count</option>
+                  <option value="_stats">_stats</option>
+                  <option value="CUSTOM" <%= hasReduce ? 'selected="selected"' : '' %>>Custom reduce</option>
+                </select>
+                <span class="help-block">Reduce functions are optional.</span>
+              </div>
+            </div>
+            <div class="control-group reduce-function">
+              <label class="control-label" for="reduce-function">Custom Reduce</label>
+              <div class="controls">
+                <textarea class="js-editor" id="reduce-function"><%= ddoc.get('doc').views[viewCollection.view].reduce %></textarea>
+              </div>
+            </div>
+            <div class="control-group">
+              <hr />
+              <div class="controls">
+                <button class="btn btn-small btn-inverse cancel">Cancel</button>
+                <button class="btn btn-small btn-info preview">Preview</button>
+                <button class="btn btn-primary save">Save</button>
+              </div>
+            </div>
+            <div class="clearfix"></div>
+          </form>
+        </div>
       </div>
     </div>
-    <div class="control-group reduce-function">
-      <label class="control-label" for="reduce-function">Custom Reduce</label>
-      <div class="controls">
-        <textarea class="js-editor" id="reduce-function"></textarea>
-      </div>
-    </div>
-    <div class="control-group">
-      <hr />
-      <div class="controls">
-        <button class="btn btn-small btn-inverse cancel">Cancel</button>
-        <button class="btn btn-small btn-info preview">Preview</button>
-        <button class="btn btn-primary save">Save</button>
-      </div>
-    </div>
-    <div class="clearfix"></div>
-  </form>
+
+  </div>
 </div>