Set up PDF textbooks list view in Backbone

cms/templates/js/chapter.underscore

@@ -1,14 +1,12 @@
-<li class="chapter chapter<%= order %> field-group">
-  <div class="input-wrap field text required field-add-chapter-name chapter<%= order %>-name">
-    <label for="chapter<%= order %>-name"><%= gettext("Chapter Name") %></label>
-    <input id="chapter<%= order %>-name" name="chapter<%= order %>-name" class="short" placeholder="<%= _.str.sprintf(gettext("Chapter %s"), order) %>" value="<%= name %>" type="text">
-    <span class="tip tip-stacked"><%= gettext("the title/name of the chapter that will be used in navigating") %></span>
-  </div>
-  <div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset">
-    <label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %>:</label>
-    <input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text">
-    <span class="tip tip-stacked"><%= gettext("provide the path to a file added to this course or upload a new one") %></span>
-  <button class="action action-upload"><%= gettext("Upload Asset") %></button>
-  </div>
-  <a class="action action-close"><i class="icon-remove-sign"></i> <span class="sr"><%= gettext("delete chapter") %></span></a>
-</li>
+<div class="input-wrap field text required field-add-chapter-name chapter<%= order %>-name">
+  <label for="chapter<%= order %>-name"><%= gettext("Chapter Name") %></label>
+  <input id="chapter<%= order %>-name" name="chapter<%= order %>-name" class="chapter-name short" placeholder="<%= _.str.sprintf(gettext("Chapter %s"), order) %>" value="<%= name %>" type="text">
+  <span class="tip tip-stacked"><%= gettext("the title/name of the chapter that will be used in navigating") %></span>
+</div>
+<div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset">
+  <label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %>:</label>
+  <input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" class="chapter-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text">
+  <span class="tip tip-stacked"><%= gettext("provide the path to a file added to this course or upload a new one") %></span>
+<button class="action action-upload"><%= gettext("Upload Asset") %></button>
+</div>
+<a class="action action-close"><i class="icon-remove-sign"></i> <span class="sr"><%= gettext("delete chapter") %></span></a>

cms/templates/js/no-textbooks.underscore

@@ -0,0 +1,4 @@
+<div class="no-textbook-content">
+    <p>You haven't added any textbooks to this course yet.</p>
+    <p><a href="#" class="button upload-button new-button">Add your first textbook</a></p>
+</div>

cms/templates/js/textbook-edit.underscore

@@ -0,0 +1,24 @@
+<% if (errors) { %>
+  <div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error">
+    <%= errors %>
+  </div>
+<% } %>
+
+<fieldset class="textbook add-textbook-name field text required">
+  <legend class="sr"><%= gettext("Textbook information") %></legend>
+      <div class="input-wrap">
+        <label for="textbook-name-input"><%= gettext("Textbook Name") %>:</label>
+        <input id="textbook-name-input" type="text" placeholder="<%= gettext("Introduction to Cookie Baking") %>" value="<%= name %>">
+        <span class="tip tip-stacked"><%= gettext("the title/name of the text book as you would like your students to see it.") %></span>
+      </div>
+</fieldset>
+<fieldset class="chapters">
+  <legend class="sr"><%= gettext("Chapter(s) information") %></legend>
+    <ol class="chapters list-input enum"></ol>
+</fieldset>
+
+<div class="actions">
+  <button class="action action-add-chapter"><i class="icon-plus"></i> <%= gettext("Add a Chapter") %></button>
+  <button class="action action-primary" type="submit"><%= gettext("Save") %></button>
+  <button class="action action-secondary action-cancel"><%= gettext("Cancel") %></button>
+</div>

cms/templates/js/textbook-show.underscore

@@ -0,0 +1,11 @@
+<li class="textbook">
+    <span class="name"><%= name %></span>
+    <% if(chapters.length > 1) {%>
+        <%= chapters.length %> PDF Chapters
+    <% } else if(chapters.length === 1) { %>
+        <%= chapters.at(0).asset_path %>
+    <% } %>
+    <a href="#" class="view"><%= gettext("view in course") %></a>
+    <button class="edit"><%= gettext("Edit") %></button>
+    <button class="delete"><%= gettext("Delete") %></button>
+</li>

cms/templates/js/textbook.underscore

@@ -1,30 +0,0 @@
-<form id="edit_textbook_form" class="edit-textbook">
-  <div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error"></div>
-
-    <ol class="list-input">
-      <li class="add-textbook-name field text required">
-  <fieldset class="textbook">
-  <legend class="sr"><%= gettext("Textbook information") %></legend>
-        <div class="input-wrap">
-          <label for="textbook-name-input"><%= gettext("Textbook Name") %>:</label>
-          <input id="textbook-name-input" type="text" placeholder="<%= gettext("Introduction to Cookie Baking") %>" value="<%= name %>">
-          <span class="tip tip-stacked"><%= gettext("the title/name of the text book as you would like your students to see it.") %></span>
-        </div>
-  </fieldset>
-      </li>
-      <li>
-  <fieldset class="chapters">
-  <legend class="sr"><%= gettext("Chapter(s) information") %></legend>
-
-        <ol class="chapters list-input enum"></ol>
-
-  </fieldset>
-       </li>
-    </ol>
-
-  <div class="actions">
-    <button class="action action-add-chapter"><i class="icon-plus"></i> <%= gettext("Add a Chapter") %></button>
-    <button class="action action-primary" type="submit"><%= gettext("Save") %></button>
-    <button class="action action-secondary action-cancel"><%= gettext("Cancel") %></button>
-  </div>
-</form>

cms/templates/textbooks.html

@@ -6,11 +6,17 @@
 
 <%block name="header_extras">
   <script type="text/template" id="new-textbook-tpl">
-    <%static:include path="js/textbook.underscore" />
+    <%static:include path="js/textbook-edit.underscore" />
+  </script>
+  <script type="text/template" id="show-textbook-tpl">
+    <%static:include path="js/textbook-show.underscore" />
   </script>
   <script type="text/template" id="new-chapter-tpl">
     <%static:include path="js/chapter.underscore" />
   </script>
+  <script type="text/template" id="no-textbooks-tpl">
+    <%static:include path="js/no-textbooks.underscore" />
+  </script>
   <script type="text/template" id="upload-dialog-tpl">
     <%static:include path="js/upload-dialog.underscore" />
   </script>
@@ -22,13 +28,77 @@ window.UPLOAD_ASSET_CALLBACK_URL = "${upload_asset_callback_url}"
 
 CMS.Models.Textbook = Backbone.Model.extend({
     defaults: {
-        name: ""
+        name: "",
     },
     initialize: function() {
         this.chapters = new CMS.Collections.ChapterSet;
         this.chapters.add([{}]);
     }
 })
+CMS.Views.TextbookShow = Backbone.View.extend({
+    initialize: function() {
+        this.template = _.template($("#show-textbook-tpl").text());
+        this.listenTo(this.model, "change", this.render);
+    },
+    events: {
+        "click .edit": "editTextbook",
+    },
+    render: function() {
+        var attrs = $.extend({}, this.model.attributes);
+        attrs.chapters = this.model.chapters;
+        this.$el.html(this.template(attrs));
+        return this;
+    },
+    editTextbook: function(e) {
+        if(e && e.preventDefault) { e.preventDefault(); }
+        this.model.collection.trigger("editOne", this.model);
+    }
+})
+CMS.Collections.TextbookSet = Backbone.Collection.extend({
+    model: CMS.Models.Textbook,
+    initialize: function() {
+        this.listenTo(this, "editOne", this.editOne);
+    },
+    editOne: function(textbook) {
+        // the old TextbookEdit view is listening for the editOne event, and
+        // will remove itself when the event is fired, so this method doesnt
+        // need to worry about it.
+        $(".inner-wrapper").append(
+            new CMS.Views.TextbookEdit({model: textbook}).render().el
+        );
+    }
+})
+CMS.Views.ListTextbooks = Backbone.View.extend({
+    initialize: function() {
+        this.emptyTemplate = _.template($("#no-textbooks-tpl").text());
+        this.listenTo(this.collection, 'all', this.render);
+    },
+    tagName: "ul",
+    className: "textbooks",
+    render: function() {
+        if(this.collection.length === 0) {
+            this.$el.html(this.emptyTemplate());
+        } else {
+            var $el = this.$el;
+            $el.empty();
+            this.collection.each(function(textbook) {
+                $el.append(
+                    new CMS.Views.TextbookShow({model: textbook}).render().el
+                );
+            })
+        }
+        return this;
+    },
+    events: {
+        "click .new-button": "addOne"
+    },
+    addOne: function(e) {
+        if(e && e.preventDefault) { e.preventDefault(); }
+        var m = new this.collection.model;
+        this.collection.add(m);
+        this.collection.trigger("editOne", m);
+    }
+})
 CMS.Models.Chapter = Backbone.Model.extend({
     defaults: function() {
         return {
@@ -52,17 +122,22 @@ CMS.Views.TextbookEdit = Backbone.View.extend({
         this.listenTo(this.model.chapters, "add", this.addOne);
         this.listenTo(this.model.chapters, "reset", this.addAll);
         this.listenTo(this.model.chapters, "all", this.render);
+        this.listenTo(this.model.collection, "editOne", this.remove);
     },
+    tagName: "form",
+    className: "edit-textbook",
+    id: "edit_textbook_form",
     render: function() {
         this.$el.html(this.template({
             name: this.model.escape('name'),
+            errors: null
         }));
         this.addAll();
         return this;
     },
     events: {
         "submit": "save",
-        "click .action-cancel": "remove",
+        "click .action-cancel": "cancel",
         "click .action-add-chapter": "createChapter"
     },
     addOne: function(chapter) {
@@ -79,14 +154,34 @@ CMS.Views.TextbookEdit = Backbone.View.extend({
     },
     save: function(e) {
         if(e && e.preventDefault) { e.preventDefault(); }
-        alert("save is currently unimplemented")
+        var name = this.$("#textbook-name-input").val();
+        var textbook = this.model;
+        textbook.set("name", name);
+        _.each(this.$("li"), function(li, i) {
+            var chapter = textbook.chapters.at(i);
+            chapter.set({
+                "name": $(".chapter-name", li).val(),
+                "asset_path": $(".chapter-asset-path", li).val()
+            })
+        });
+        this.remove();
+        return this;
+    },
+    cancel: function(e) {
+        if(e && e.preventDefault) { e.preventDefault(); }
+        this.remove();
+        return this;
     }
 
 })
 CMS.Views.ChapterEdit = Backbone.View.extend({
     initialize: function() {
         this.template = _.template($("#new-chapter-tpl").text());
-        this.listenTo(this.model, "change", this.render)
+        this.listenTo(this.model, "change", this.render);
+    },
+    tagName: "li",
+    className: function() {
+        return "field-group chapter chapter" + this.model.get('order');
     },
     render: function() {
         this.$el.html(this.template({
@@ -228,11 +323,13 @@ var section = new CMS.Models.Section({
     id: "${course.id}",
     name: "${course.display_name_with_default | h}"
 });
+var textbooks = new CMS.Collections.TextbookSet();
+var tbView = new CMS.Views.ListTextbooks({collection: textbooks});
+
 $(function() {
-    $(".new-button").click(function() {
-        var textbook = new CMS.Models.Textbook();
-        var view = new CMS.Views.TextbookEdit({model: textbook})
-        $(".inner-wrapper").append(view.render().el);
+    $(".inner-wrapper").append(tbView.render().el);
+    $(".nav-actions .new-button").click(function(e) {
+        tbView.addOne(e);
     })
 })
 </script>
@@ -275,11 +372,6 @@ $(function() {
           </nav>
         </div>
 
-        <div class="no-textbook-content">
-            <p>You haven't added any textbooks to this course yet.</p>
-            <p><a href="#" class="button upload-button new-button">Add your first textbook</a></p>
-        </div>
-
     </div>
     </section>
   </div>