Add sorting to course details mock UI

app/styles/courses/mock1/course-details.sass

@@ -1,5 +1,10 @@
 #course-details-view
 
+  .member-header
+    cursor: pointer
+    display: inline-block
+    padding: 2px
+
   .textarea-emails
     width: 50%
 
@@ -13,6 +18,7 @@
 
   .progress-header
     margin-right: 14px
+    cursor: pointer
 
   .progress-key
     cursor: default

app/templates/courses/mock1/course-details.jade

@@ -73,8 +73,19 @@ block content
             thead
               tr
                 th
+                  span.member-header.spr Name
+                  if memberSort === 'nameAsc'
+                    span.member-header.glyphicon.glyphicon-chevron-up
+                  else if memberSort === 'nameDesc'
+                    span.member-header.glyphicon.glyphicon-chevron-down
                 th
-                  span.progress-header Progress
+                  span.progress-header.spr Progress
+                  if memberSort === 'progressAsc'
+                    span.progress-header.glyphicon.glyphicon-chevron-up
+                  else if memberSort === 'progressDesc'
+                    span.progress-header.glyphicon.glyphicon-chevron-down
+                  else
+                    span(style='padding-left:16px;')
                   span.progress-key.progress-key-complete complete
                   span.progress-key.progress-key-started started
                   span.progress-key not started

app/views/courses/mock1/CourseDetailsView.coffee

@@ -12,9 +12,11 @@ module.exports = class CourseDetailsView extends RootView
     'change .expand-progress-checkbox': 'onExpandedProgressCheckbox'
     'change .select-session': 'onChangeSession'
     'change .student-mode-checkbox': 'onChangeStudent'
+    'click .btn-play-level': 'onClickPlayLevel'
     'click .edit-class-name-btn': 'onClickEditClassName'
     'click .edit-description-btn': 'onClickEditClassDescription'
-    'click .btn-play-level': 'onClickPlayLevel'
+    'click .member-header': 'onClickMemberHeader'
+    'click .progress-header': 'onClickProgressHeader'
 
   constructor: (options, @courseID) ->
     super options
@@ -32,6 +34,7 @@ module.exports = class CourseDetailsView extends RootView
     context.instances = @instances ? []
     context.levelConceptsMap = @levelConceptsMap ? {}
     context.maxLastStartedIndex = @maxLastStartedIndex ? 0
+    context.memberSort = @memberSort
     context.userConceptsMap = @userConceptsMap ? {}
     context.userLevelStateMap = @userLevelStateMap ? {}
     context.showExpandedProgress = @course.levels.length <= 30 or @showExpandedProgress
@@ -39,6 +42,7 @@ module.exports = class CourseDetailsView extends RootView
     context
 
   initData: ->
+    @memberSort = 'nameAsc'
     mockData = require 'views/courses/mock1/CoursesMockData'
     @course = mockData.courses[@courseID]
     @currentInstanceIndex = 0
@@ -62,6 +66,33 @@ module.exports = class CourseDetailsView extends RootView
       lastStartedIndex = lastCompletedIndex + 1
       @userLevelStateMap[student][@course.levels[lastStartedIndex]] = 'started'
       @maxLastStartedIndex = lastStartedIndex if lastStartedIndex > @maxLastStartedIndex
+    @sortMembers()
+
+  sortMembers: ->
+    # Progress sort precedence: most completed concepts, most started concepts, most levels, name sort
+    instance = @instances?[@currentInstanceIndex] ? {}
+    return if _.isEmpty(instance)
+    switch @memberSort
+      when "nameDesc"
+        instance.students.sort (a, b) -> b.localeCompare(a)
+      when "progressAsc"
+        instance.students.sort (a, b) =>
+          for level in @course.levels
+            if @userLevelStateMap[a][level] isnt 'complete' and @userLevelStateMap[b][level] is 'complete'
+              return -1
+            else if @userLevelStateMap[a][level] is 'complete' and @userLevelStateMap[b][level] isnt 'complete'
+              return 1
+          0
+      when "progressDesc"
+        instance.students.sort (a, b) =>
+          for level in @course.levels
+            if @userLevelStateMap[a][level] isnt 'complete' and @userLevelStateMap[b][level] is 'complete'
+              return 1
+            else if @userLevelStateMap[a][level] is 'complete' and @userLevelStateMap[b][level] isnt 'complete'
+              return -1
+          0
+      else
+        instance.students.sort (a, b) -> a.localeCompare(b)
 
   onCampaignSync: ->
     return unless @campaigns.loaded
@@ -101,6 +132,7 @@ module.exports = class CourseDetailsView extends RootView
     for val, index in @instances when val.name is newSessionValue
       @currentInstanceIndex = index
     @updateLevelMaps()
+    @onCampaignSync()
     @render?()
 
   onExpandedProgressCheckbox: (e) ->
@@ -115,6 +147,16 @@ module.exports = class CourseDetailsView extends RootView
   onClickEditClassDescription: (e) ->
     alert 'TODO: Popup for editing description for this course session'
 
+  onClickMemberHeader: (e) ->
+    @memberSort = if @memberSort is 'nameAsc' then 'nameDesc' else 'nameAsc'
+    @sortMembers()
+    @render?()
+
+  onClickProgressHeader: (e) ->
+    @memberSort = if @memberSort is 'progressAsc' then 'progressDesc' else 'progressAsc'
+    @sortMembers()
+    @render?()
+
   onClickPlayLevel: (e) ->
     levelName = $(e.target).data('level')
     levelSlug = @levelNameSlugMap[levelName]