Fix auto course-instance creation

The interface now shows a progress bar while course instances are created for a class.
It also creates the course instances as soon as the classroom is created.

app/templates/courses/teacher-courses-view.jade

@@ -13,7 +13,7 @@ block content
       a(href="#manage-tab-pane" aria-controls="manage" role="tab" data-toggle="tab") Manage
     
   .tab-content
-    #courses-tab-pane.tab-pane.active.well
+    #courses-tab-pane.tab-pane.well
       h3 Your Courses
       - var courseInstances = view.courseInstances.sliceWithMembers();
       if !_.size(courseInstances)
@@ -29,7 +29,6 @@ block content
             th Size
             th
           for courseInstance in courseInstances
-            - console.log('course instance!', courseInstance)
             tr
               td
                 - var classroom = view.classrooms.get(courseInstance.get('classroomID'));
@@ -63,7 +62,7 @@ block content
           
         
       
-    #manage-tab-pane.tab-pane.well
+    #manage-tab-pane.tab-pane.well.active
 
       p Create a class and add students to it.
       
@@ -79,39 +78,40 @@ block content
         
         - var courseInstances = view.courseInstances.where({classroomID: classroom.id})
     
-        if classroom.saving
+        if classroom.saving || classroom.filling
-          .progress
+          .progress.progress-striped.active
             .progress-bar(style="width: 100%")
           
-        table.table
+        else
-          tr
+          table.table
-            th Student
-            for courseInstance in courseInstances
-              th
-                if courseInstance.course
-                | #{courseInstance.course.get('name')}
-            
-          if !_.size(classroom.get('members'))
             tr
-              td(colspan=1+view.courses.size())
+              th Student
-                em No students in this class yet.
-            
-          for member in classroom.get('members') || []
-            - var user = view.members.get(member);
-            if !user
-              - continue;
-            tr
-              td= user.get('name')
               for courseInstance in courseInstances
-                td
+                th
-                  if _.contains(courseInstance.get('members'), user.id)
+                  if courseInstance.course
-                    span.glyphicon.glyphicon-ok
+                  | #{courseInstance.course.get('name')}
-                  else
+              
-                    input.course-instance-membership-checkbox(
+            if !_.size(classroom.get('members'))
-                      type='checkbox'
+              tr
-                      data-course-instance-id=courseInstance.id
+                td(colspan=1+view.courses.size())
-                      data-user-id=user.id
+                  em No students in this class yet.
-                    )
+              
+            for member in classroom.get('members') || []
+              - var user = view.members.get(member);
+              if !user
+                - continue;
+              tr
+                td= user.get('name')
+                for courseInstance in courseInstances
+                  td
+                    if _.contains(courseInstance.get('members'), user.id)
+                      span.glyphicon.glyphicon-ok
+                    else
+                      input.course-instance-membership-checkbox(
+                        type='checkbox'
+                        data-course-instance-id=courseInstance.id
+                        data-user-id=user.id
+                      )
           
         button.add-students-btn.btn.btn-sm(data-classroom-id=classroom.id) Add Students
     

app/views/courses/TeacherCoursesView.coffee

@@ -42,7 +42,7 @@ module.exports = class TeacherCoursesView extends RootView
     @prepaids.totalRedeemers = -> sum((_.size(prepaid.get('redeemers')) for prepaid in @models)) or 0
     @prepaids.comparator = '_id'
     @supermodel.loadCollection(@prepaids, 'prepaids', {data: {creator: me.id}})
-    @listenTo @members, 'sync', @render
+    @listenTo @members, 'sync', @renderManageTab
     @usersToRedeem = new CocoCollection([], { model: User })
     @
 
@@ -60,10 +60,15 @@ module.exports = class TeacherCoursesView extends RootView
     classroom.save()
     @classrooms.add(classroom)
     classroom.saving = true
-    @render()
+    @renderManageTab()
     @listenTo classroom, 'sync', ->
       classroom.saving = false
-      @render()
+      @fillMissingCourseInstances()
+      
+  renderManageTab: ->
+    isActive = @$('#manage-tab-pane').hasClass('active')
+    @renderSelectors('#manage-tab-pane')
+    @$('#manage-tab-pane').toggleClass('active', isActive)
 
   onClickAddStudentsButton: (e) ->
     classroomID = $(e.target).data('classroom-id')
@@ -84,9 +89,11 @@ module.exports = class TeacherCoursesView extends RootView
     # TODO: Give teachers control over which courses are enabled for a given class.
     # Add/remove course instances and columns in the view to match.
     for classroom in @classrooms.models
+      classroom.filling = false
       for course in @courses.models
         courseInstance = @courseInstances.findWhere({classroomID: classroom.id, courseID: course.id})
         if not courseInstance
+          classroom.filling = true
           courseInstance = new CourseInstance({
             classroomID: classroom.id
             courseID: course.id
@@ -97,7 +104,9 @@ module.exports = class TeacherCoursesView extends RootView
           courseInstance.course = course
           @courseInstances.add(courseInstance)
           @listenToOnce courseInstance, 'sync', @fillMissingCourseInstances
+          @renderManageTab()
           return
+    @renderManageTab()
 
   onClickCourseInstanceMembershipCheckbox: ->
     usersToRedeem = {}