view options menu now allows rearranging assignment columns

columns can be rearranged by name, due date or points closes CNVS-36381 test plan: * Create a course with at least two assignments and two students with the following criteria: - Assignments should have different names - Assignments should have different points possible - Assignments should have different due dates * Open Gradezilla * From the View menu, choose the first option in the "Arrange By" options group: (Assignment Name - A-Z). This option should now get a checkmark against it. * Reorder the columns by dragging them around * Open the View menu again and notice the checkmark is gone from the "Assignment Name - A-Z" option. * Reload Gradezilla and notice none of the "Arrange By" options are checked because the Gradebook is using a custom column order and not any of the pre-defined ones listed there. * From the View menu, choose the first option in the "Arrange By" options group: (Assignment Name - A-Z) * Verify that the assignment columns are sorted in alphabetical order. * Open the View menu and verify there is a check mark next to the "Assignment Name - A-Z" option * Reload the page and verify the columns' sort order persists * Repeat the above with all the options in the "Arrange By" options group and verify the ordering of the assignment columns matches expectations. Change-Id: I04d8e7b11e6381939eb2dd9472707dc3f0c9b1be Reviewed-on: https://gerrit.instructure.com/108954 Tested-by: Jenkins Reviewed-by: Keith T. Garner <[email protected]> QA-Review: Anju Reddy <[email protected]> Product-Review: Christi Wruck
nikolas · Apr 25, 2017 · 599df64 · 599df64
1 parent 3147ff2
commit 599df64
Show file tree

Hide file tree

Showing 12 changed files with 1,001 additions and 94 deletions.
diff --git a/app/coffeescripts/gradebook/Gradebook.coffee b/app/coffeescripts/gradebook/Gradebook.coffee
@@ -485,10 +485,9 @@ define [
 
     makeColumnSortFn: (sortOrder) =>
       fn = switch sortOrder.sortType
-        when 'assignment_group', 'alpha' then @compareAssignmentPositions
         when 'due_date' then @compareAssignmentDueDates
         when 'custom' then @makeCompareAssignmentCustomOrderFn(sortOrder)
-        else throw "unhandled column sort condition"
+        else @compareAssignmentPositions
       @wrapColumnSortFn(fn)
 
     compareAssignmentPositions: (a, b) ->

diff --git a/app/coffeescripts/gradezilla/Gradebook.coffee b/app/coffeescripts/gradezilla/Gradebook.coffee
@@ -253,6 +253,7 @@ define [
 
       dataLoader.gotAssignmentGroups.then () =>
         @contentLoadStates.assignmentsLoaded = true
+        @renderViewOptionsMenu()
         @updateColumnHeaders()
 
       dataLoader.gotSubmissions.then () =>
@@ -458,9 +459,13 @@ define [
     columnOrderHasNotBeenSaved: =>
       !@gradebookColumnOrderSettings
 
+    isDefaultSortOrder: (sortOrder) =>
+      not (['due_date', 'name', 'points', 'custom'].includes(sortOrder))
+
     getStoredSortOrder: =>
       if @isInvalidCustomSort() || @columnOrderHasNotBeenSaved()
-        {sortType: @defaultSortType}
+        sortType: @defaultSortType
+        direction: 'ascending'
       else
         @gradebookColumnOrderSettings
 
@@ -486,6 +491,7 @@ define [
       else
         @storeCustomColumnOrder()
 
+      @renderViewOptionsMenu()
       @updateColumnHeaders()
 
     reorderCustomColumns: (ids) ->
@@ -500,12 +506,7 @@ define [
       newSortOrder.customOrder = _.pluck(scrollable_columns, 'id')
       @setStoredSortOrder(newSortOrder)
 
-    setArrangementTogglersVisibility: (newSortOrder) =>
-      @$columnArrangementTogglers.each ->
-        $(this).closest('li').showIf $(this).data('arrangeColumnsBy') isnt newSortOrder.sortType
-
     arrangeColumnsBy: (newSortOrder, isFirstArrangement) =>
-      @setArrangementTogglersVisibility(newSortOrder)
       @setStoredSortOrder(newSortOrder) unless isFirstArrangement
 
       columns = @grid.getColumns()
@@ -514,14 +515,16 @@ define [
       columns.splice(0, 0, frozen...)
       @grid.setColumns(columns)
 
+      @renderViewOptionsMenu()
       @updateColumnHeaders()
 
     makeColumnSortFn: (sortOrder) =>
       switch sortOrder.sortType
-        when 'assignment_group', 'alpha' then @wrapColumnSortFn(@compareAssignmentPositions)
-        when 'due_date' then @wrapColumnSortFn(@compareAssignmentDueDates)
+        when 'due_date' then @wrapColumnSortFn(@compareAssignmentDueDates, sortOrder.direction)
+        when 'name' then @wrapColumnSortFn(@compareAssignmentNames, sortOrder.direction)
+        when 'points' then @wrapColumnSortFn(@compareAssignmentPointsPossible, sortOrder.direction)
         when 'custom' then @makeCompareAssignmentCustomOrderFn(sortOrder)
-        else throw "unhandled column sort condition"
+        else @wrapColumnSortFn(@compareAssignmentPositions, sortOrder.direction)
 
     compareAssignmentPositions: (a, b) ->
       diffOfAssignmentGroupPosition = a.object.assignment_group.position - b.object.assignment_group.position
@@ -536,6 +539,12 @@ define [
       secondAssignment = b.object
       assignmentHelper.compareByDueDate(firstAssignment, secondAssignment)
 
+    compareAssignmentNames: (a, b) =>
+      @localeSort(a.object.name, b.object.name);
+
+    compareAssignmentPointsPossible: (a, b) ->
+      a.object.points_possible - b.object.points_possible
+
     makeCompareAssignmentCustomOrderFn: (sortOrder) =>
       sortMap = {}
       indexCounter = 0
@@ -561,15 +570,17 @@ define [
         else
           return @wrapColumnSortFn(@compareAssignmentPositions)(a, b)
 
-    wrapColumnSortFn: (wrappedFn) ->
+    wrapColumnSortFn: (wrappedFn, direction = 'ascending') ->
       (a, b) ->
         return -1 if b.type is 'total_grade'
         return  1 if a.type is 'total_grade'
         return -1 if b.type is 'assignment_group' and a.type isnt 'assignment_group'
         return  1 if a.type is 'assignment_group' and b.type isnt 'assignment_group'
         if a.type is 'assignment_group' and b.type is 'assignment_group'
           return a.object.position - b.object.position
-        return wrappedFn(a, b)
+
+        [a, b] = [b, a] if direction == 'descending'
+        wrappedFn(a, b)
 
     rowFilter: (student) =>
       matchingSection = !@sectionToShow || (@sectionToShow in student.sections)
@@ -1116,10 +1127,6 @@ define [
       if @hideAggregateColumns()
         $settingsMenu.find('#include-ungraded-list-item').hide()
 
-      @$columnArrangementTogglers = $('#gradebook-toolbar [data-arrange-columns-by]').bind 'click', (event) =>
-        event.preventDefault()
-        newSortOrder = { sortType: $(event.currentTarget).data('arrangeColumnsBy') }
-        @arrangeColumnsBy(newSortOrder, false)
       @arrangeColumnsBy(@getStoredSortOrder(), true)
 
       $('#gradebook_settings').kyleMenu(returnFocusTo: $('#gradebook_settings'))
@@ -1159,7 +1166,7 @@ define [
         props.variant = mountPoint.getAttribute('data-variant')
         renderComponent(GradebookMenu, mountPoint, props)
 
-    getViewOptionsMenuProps: ->
+    getTeacherNotesViewOptionsMenuProps: ->
       teacherNotes = @options.teacher_notes
       showingNotes = teacherNotes? and not teacherNotes.hidden
       if showingNotes
@@ -1168,10 +1175,39 @@ define [
         onSelect = => @setTeacherNotesHidden(false)
       else
         onSelect = @createTeacherNotes
-      teacherNotes:
-        disabled: @contentLoadStates.teacherNotesColumnUpdating
-        onSelect: onSelect
-        selected: showingNotes
+
+      disabled: @contentLoadStates.teacherNotesColumnUpdating
+      onSelect: onSelect
+      selected: showingNotes
+
+    getColumnSortSettingsViewOptionsMenuProps: ->
+      storedSortOrder = @getStoredSortOrder()
+      criterion = if @isDefaultSortOrder(storedSortOrder.sortType)
+        'default'
+      else
+        storedSortOrder.sortType
+
+      criterion: criterion
+      direction: storedSortOrder.direction || 'ascending'
+      disabled: not @contentLoadStates.assignmentsLoaded
+      onSortByDefault: =>
+        @arrangeColumnsBy({ sortType: 'default', direction: 'ascending' }, false)
+      onSortByNameAscending: =>
+        @arrangeColumnsBy({ sortType: 'name', direction: 'ascending' }, false)
+      onSortByNameDescending: =>
+        @arrangeColumnsBy({ sortType: 'name', direction: 'descending' }, false)
+      onSortByDueDateAscending: =>
+        @arrangeColumnsBy({ sortType: 'due_date', direction: 'ascending' }, false)
+      onSortByDueDateDescending: =>
+        @arrangeColumnsBy({ sortType: 'due_date', direction: 'descending' }, false)
+      onSortByPointsAscending: =>
+        @arrangeColumnsBy({ sortType: 'points', direction: 'ascending' }, false)
+      onSortByPointsDescending: =>
+        @arrangeColumnsBy({ sortType: 'points', direction: 'descending' }, false)
+
+    getViewOptionsMenuProps: ->
+      teacherNotes: @getTeacherNotesViewOptionsMenuProps()
+      columnSortSettings: @getColumnSortSettingsViewOptionsMenuProps()
       showUnpublishedAssignments: @showUnpublishedAssignments
       onSelectShowUnpublishedAssignments: @toggleUnpublishedAssignments
 

diff --git a/app/jsx/gradezilla/default_gradebook/components/ViewOptionsMenu.js b/app/jsx/gradezilla/default_gradebook/components/ViewOptionsMenu.js
@@ -24,7 +24,7 @@ import PopoverMenu from 'instructure-ui/lib/components/PopoverMenu';
 import Typography from 'instructure-ui/lib/components/Typography';
 import I18n from 'i18n!gradebook';
 
-const { bool, func, shape } = React.PropTypes;
+const { bool, func, shape, string } = React.PropTypes;
 
 function renderTriggerButton () {
   return (
@@ -38,6 +38,18 @@ function renderTriggerButton () {
 
 class ViewOptionsMenu extends React.Component {
   static propTypes = {
+    columnSortSettings: shape({
+      criterion: string.isRequired,
+      direction: string.isRequired,
+      disabled: bool.isRequired,
+      onSortByDefault: func.isRequired,
+      onSortByNameAscending: func.isRequired,
+      onSortByNameDescending: func.isRequired,
+      onSortByDueDateAscending: func.isRequired,
+      onSortByDueDateDescending: func.isRequired,
+      onSortByPointsAscending: func.isRequired,
+      onSortByPointsDescending: func.isRequired
+    }).isRequired,
     teacherNotes: shape({
       disabled: bool.isRequired,
       onSelect: func.isRequired,
@@ -52,23 +64,78 @@ class ViewOptionsMenu extends React.Component {
     this.bindMenuContent = (ref) => { this.menuContent = ref };
   }
 
+  areColumnsOrderedBy (criterion, direction) {
+    const sortSettings = this.props.columnSortSettings;
+    const result = sortSettings.criterion === criterion;
+
+    if (direction === undefined) {
+      return result;
+    } else {
+      return result && sortSettings.direction === direction;
+    }
+  }
+
   render () {
     return (
       <PopoverMenu
         trigger={renderTriggerButton()}
         contentRef={this.bindMenuContent}
       >
         <MenuItemGroup label={I18n.t('Arrange By')}>
-          <MenuItem defaultSelected>
-            { I18n.t('Assignment Name') }
+          <MenuItem
+            disabled={this.props.columnSortSettings.disabled}
+            selected={this.areColumnsOrderedBy('default')}
+            onSelect={this.props.columnSortSettings.onSortByDefault}
+          >
+            { I18n.t('Default Order') }
           </MenuItem>
 
-          <MenuItem>
-            { I18n.t('Due Date') }
+          <MenuItem
+            disabled={this.props.columnSortSettings.disabled}
+            selected={this.areColumnsOrderedBy('name', 'ascending')}
+            onSelect={this.props.columnSortSettings.onSortByNameAscending}
+          >
+            { I18n.t('Assignment Name - A-Z') }
           </MenuItem>
 
-          <MenuItem>
-            { I18n.t('Points') }
+          <MenuItem
+            disabled={this.props.columnSortSettings.disabled}
+            selected={this.areColumnsOrderedBy('name', 'descending')}
+            onSelect={this.props.columnSortSettings.onSortByNameDescending}
+          >
+            { I18n.t('Assignment Name - Z-A') }
+          </MenuItem>
+
+          <MenuItem
+            disabled={this.props.columnSortSettings.disabled}
+            selected={this.areColumnsOrderedBy('due_date', 'ascending')}
+            onSelect={this.props.columnSortSettings.onSortByDueDateAscending}
+          >
+            { I18n.t('Due Date - Oldest to Newest') }
+          </MenuItem>
+
+          <MenuItem
+            disabled={this.props.columnSortSettings.disabled}
+            selected={this.areColumnsOrderedBy('due_date', 'descending')}
+            onSelect={this.props.columnSortSettings.onSortByDueDateDescending}
+          >
+            { I18n.t('Due Date - Newest to Oldest') }
+          </MenuItem>
+
+          <MenuItem
+            disabled={this.props.columnSortSettings.disabled}
+            selected={this.areColumnsOrderedBy('points', 'ascending')}
+            onSelect={this.props.columnSortSettings.onSortByPointsAscending}
+          >
+            { I18n.t('Points - Lowest to Highest') }
+          </MenuItem>
+
+          <MenuItem
+            disabled={this.props.columnSortSettings.disabled}
+            selected={this.areColumnsOrderedBy('points', 'descending')}
+            onSelect={this.props.columnSortSettings.onSortByPointsDescending}
+          >
+            { I18n.t('Points - Highest to Lowest') }
           </MenuItem>
         </MenuItemGroup>
 

diff --git a/app/views/gradebooks/gradebook.html.erb b/app/views/gradebooks/gradebook.html.erb
@@ -152,6 +152,7 @@
           <% end %>
           <li><a class="student_names_toggle" href="#" role="button"><%= t('Hide Student Names') %></a></li>
           <li><a data-arrange-columns-by="due_date" href="#"><label><%= t('Arrange columns by due date') %><input type="radio" name="arrange-columns-by" /></label></a></li>
+          <li><a data-arrange-columns-by="points" href="#"><label><%= t('Arrange columns by points') %><input type="radio" name="arrange-columns-by" /></label></a></li>
           <li><a data-arrange-columns-by="assignment_group" href="#"><label><%= t('Arrange columns by assignment group') %><input type="radio" name="arrange-columns-by" /></label></a></li>
           <li><a href="#"><label><%= t('Show Attendance Columns') %> <input type="checkbox" id="show_attendance" /></label></a></li>
           <li id="include-ungraded-list-item"><a href="#"><label><%= t("Treat Ungraded as 0") %><input type="checkbox" id="include_ungraded_assignments" /></label></a></li>

diff --git a/app/views/gradebooks/gradezilla/gradebook.html.erb b/app/views/gradebooks/gradezilla/gradebook.html.erb
@@ -91,8 +91,6 @@
           </a></li>
           <% end %>
           <li><a class="student_names_toggle" href="#" role="button"><%= t('Hide Student Names') %></a></li>
-          <li><a data-arrange-columns-by="due_date" href="#"><label><%= t('Arrange columns by due date') %><input type="radio" name="arrange-columns-by" /></label></a></li>
-          <li><a data-arrange-columns-by="assignment_group" href="#"><label><%= t('Arrange columns by assignment group') %><input type="radio" name="arrange-columns-by" /></label></a></li>
           <li><a href="#"><label><%= t('Show Attendance Columns') %> <input type="checkbox" id="show_attendance" /></label></a></li>
           <li id="include-ungraded-list-item"><a href="#"><label><%= t("Treat Ungraded as 0") %><input type="checkbox" id="include_ungraded_assignments" /></label></a></li>
         </ul>