outcome results: persist tab selection to URL

fixes CNVS-10608

test plan:
  * open gradebook
  * select the learning mastery view
  * verify that you can switch views with your browser's
    back and forward buttons
  * refresh the page
  * verify that you are on the same view

Change-Id: Ia3657f7113cd9473ec9b3583d123eaf59c03d70f
Reviewed-on: https://gerrit.instructure.com/28845
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Jon Willesen <jonw@instructure.com>
QA-Review: Steven Shepherd <sshepherd@instructure.com>
Product-Review: Braden Anderson <banderson@instructure.com>

app/coffeescripts/bundles/gradebook2.coffee

@@ -1,28 +1,46 @@
 require [
   'jquery'
+  'Backbone'
   'compiled/gradebook2/Gradebook'
   'compiled/views/gradebook/NavigationPillView'
   'compiled/views/gradebook/OutcomeGradebookView'
-], ($, Gradebook, NavigationPillView, OutcomeGradebookView) ->
+], ($, Backbone, Gradebook, NavigationPillView, OutcomeGradebookView) ->
+  class GradebookRouter extends Backbone.Router
+    routes:
+      '': 'showGrades'
+      'outcomes': 'showOutcomes'
 
-  isLoaded      = false
+    initialize: ->
-  initGradebook = () -> new Gradebook(ENV.GRADEBOOK_OPTIONS)
+      @isLoaded      = false
-  initOutcomes  = (gradebook) ->
+      @views = {}
-    navigation = new NavigationPillView(el: $('.gradebook-navigation'))
+      @views.gradebook = new Gradebook(ENV.GRADEBOOK_OPTIONS)
-    book       = new OutcomeGradebookView(
+      if ENV.GRADEBOOK_OPTIONS.outcome_gradebook_enabled
-      el: $('.outcome-gradebook-container'),
+        @views['outcome-gradebook'] = @initOutcomes()
-      gradebook: gradebook)
-    book.render()
 
-    navigation.on 'pillchange', (viewName) ->
+    initOutcomes: ->
+      book = new OutcomeGradebookView(
+        el: $('.outcome-gradebook-container'),
+        gradebook: @views.gradebook)
+      book.render()
+      @navigation = new NavigationPillView(el: $('.gradebook-navigation'))
+      @navigation.on 'pillchange', @handlePillChange
+      book
+
+    handlePillChange: (viewname) =>
+      route = if viewname == 'gradebook' then '' else 'outcomes'
+      @navigate(route, trigger: true)
+
+    showGrades: ->
+      @showView('gradebook')
+
+    showOutcomes: ->
+      @showView('outcome-gradebook')
+
+    showView: (viewName) ->
+      @navigation.setActiveView(viewName) if @navigation
       $('.gradebook-container, .outcome-gradebook-container').addClass('hidden')
       $(".#{viewName}-container").removeClass('hidden')
-      loadOutcomes(book) if !isLoaded and viewName is 'outcome-gradebook'
+      @views[viewName].onShow()
 
-  loadOutcomes = (book) ->
+  @router = new GradebookRouter
-    isLoaded = true
+  Backbone.history.start()
-    book.loadOutcomes()
-
-  $(document).ready ->
-    gradebook = initGradebook()
-    initOutcomes(gradebook) if ENV.GRADEBOOK_OPTIONS.outcome_gradebook_enabled

app/coffeescripts/gradebook2/Gradebook.coffee

@@ -119,21 +119,24 @@ define [
           gotAllStudents.resolve()
 
       gotCustomColumns = @getCustomColumns()
-      $.when(gotCustomColumns, gotAllStudents).done @doSlickgridStuff
+      @gotAllData = $.when(gotCustomColumns, gotAllStudents)
 
       @allSubmissionsLoaded.done =>
         for c in @customColumns
           url = @options.custom_column_data_url.replace /:id/, c.id
           @getCustomColumnData(c.id)
 
+      @showCustomColumnDropdownOption()
+
+    onShow: ->
       @spinner = new Spinner()
       $(@spinner.spin().el).css(
         opacity: 0.5
         top: '55px'
         left: '50%'
       ).addClass('use-css-transitions-for-show-hide').appendTo('#main')
-
+      $('#gradebook-grid-wrapper').hide()
-      @showCustomColumnDropdownOption()
+      @gotAllData.done @doSlickgridStuff
 
     getCustomColumns: ->
       # not going to support pagination because that would be crazy
@@ -664,7 +667,7 @@ define [
     onGridInit: () ->
       tooltipTexts = {}
       $(@spinner.el).remove()
-      $('#gradebook_wrapper').show()
+      $('#gradebook-grid-wrapper').show()
       @uid = @grid.getUID()
       @$grid = grid = $('#gradebook_grid')
         .fillWindowWithMe({
@@ -794,7 +797,7 @@ define [
     updateCurrentSection: (section, author) =>
       @sectionToShow = section
       userSettings[if @sectionToShow then 'contextSet' else 'contextRemove']('grading_show_only_section', @sectionToShow)
-      @buildRows()
+      @buildRows() if @grid
 
     initHeader: =>
       @drawSectionSelectButton() if @sections_enabled

app/coffeescripts/views/gradebook/NavigationPillView.coffee

@@ -14,3 +14,5 @@ define ['jquery', 'Backbone'], ($, {View}) ->
       $(active).parent().addClass('active')
       @trigger('pillchange', $(active).data('id'))
 
+    setActiveView: (viewName) ->
+      @setActiveTab(@$("[data-id=#{viewName}]"))

app/coffeescripts/views/gradebook/OutcomeGradebookView.coffee

@@ -117,15 +117,15 @@ define [
     #
     # Returns an object.
     toJSON: ->
-      _.extend({}, @checkboxes, menu: @menu)
+      _.extend({}, @checkboxes)
 
     # Public: Render the view once all needed data is loaded.
     #
     # Returns this.
     render: ->
       $.when(@gradebook.hasSections)
-        .then(@_initMenu)
         .then(=> super)
+        .then(@_drawSectionMenu)
       $.when(@hasOutcomes).then(@renderGrid)
       this
 
@@ -149,10 +149,18 @@ define [
       Grid.Events.init(@grid)
       @_attachEvents()
 
+    isLoaded: false
+    onShow: ->
+      @loadOutcomes() if !@isLoaded
+      @isLoaded = true
+
     # Public: Load all outcome results from API.
     #
     # Returns nothing.
     loadOutcomes: () ->
+      $.when(@gradebook.hasSections).then(@_loadOutcomes)
+
+    _loadOutcomes: =>
       course = ENV.context_asset_string.split('_')[1]
       @$('.outcome-gradebook-wrapper').disableWhileLoading(@hasOutcomes)
       @_loadPage("/api/v1/courses/#{course}/outcome_rollups?per_page=100&include[]=outcomes&include[]=users")
@@ -190,12 +198,13 @@ define [
     #   the menu needs to wait for relevant course sections to load.
     #
     # Returns nothing.
-    _initMenu: =>
+    _drawSectionMenu: =>
       @menu = new SectionMenuView(
         sections: @gradebook.sectionList()
         currentSection: @gradebook.sectionToShow
-        className: 'outcome-gradebook-section-select'
+        el: $('.section-button-placeholder'),
       )
+      @menu.render()
 
     # Internal: Create an event listener function used to filter SlickGrid results.
     #

app/coffeescripts/views/gradebook/SectionMenuView.coffee

@@ -35,6 +35,7 @@ define [
 
     attachEvents: ->
       $.subscribe('currentSection/change', @onSectionChange)
+      @$('.section-select-menu').on('click', (e) -> e.preventDefault())
       @$('.section-select-menu').on('menuselect', (event, ui) =>
         section = @$('[aria-checked=true] input[name=section_to_show_radio]').val() || undefined
         $.publish('currentSection/change', [section, @cid])

app/views/gradebook2/show.html.erb

@@ -10,7 +10,7 @@
   js_bundle :gradebook2
 %>
 <div id="keyboard_navigation"></div>
-<div id="gradebook_wrapper" class="use-css-transitions-for-show-hide" style="display:none;">
+<div id="gradebook_wrapper">
 
   <% if @context.feature_enabled?(:outcome_gradebook) %>
     <div class="gradebook-header">
@@ -31,7 +31,7 @@
     </div>
   <% end %>
 
-  <div class="gradebook-container">
+  <div class="gradebook-container hidden">
     <div id="gradebook-toolbar" class="toolbar">
       <% if !@context.feature_enabled?(:outcome_gradebook) %>
         <span class="section-button-placeholder"></span>
@@ -64,7 +64,7 @@
         <input type="text" class="search-query" placeholder="<%= placeholder %>" aria-label="<%= placeholder %>">
       </div>
     </div>
-    <div id="gradebook-grid-wrapper">
+    <div id="gradebook-grid-wrapper" class="use-css-transitions-for-show-hide" style="display:none;">
       <div id="gradebook_grid"></div>
     </div>
     <div style="display:none;">