Skip to content

Commit 599df64

Browse files
sjaveedsjaveed
committed
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 <kgarner@instructure.com> QA-Review: Anju Reddy <areddy@instructure.com> Product-Review: Christi Wruck
1 parent 3147ff2 commit 599df64

12 files changed

Lines changed: 1001 additions & 94 deletions

File tree

‎app/coffeescripts/gradebook/Gradebook.coffee‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -485,10 +485,9 @@ define [
485485

486486
makeColumnSortFn: (sortOrder) =>
487487
fn = switch sortOrder.sortType
488-
when 'assignment_group', 'alpha' then @compareAssignmentPositions
489488
when 'due_date' then @compareAssignmentDueDates
490489
when 'custom' then @makeCompareAssignmentCustomOrderFn(sortOrder)
491-
else throw "unhandled column sort condition"
490+
else @compareAssignmentPositions
492491
@wrapColumnSortFn(fn)
493492

494493
compareAssignmentPositions: (a, b) ->

‎app/coffeescripts/gradezilla/Gradebook.coffee‎

Lines changed: 56 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,7 @@ define [
253253

254254
dataLoader.gotAssignmentGroups.then () =>
255255
@contentLoadStates.assignmentsLoaded = true
256+
@renderViewOptionsMenu()
256257
@updateColumnHeaders()
257258

258259
dataLoader.gotSubmissions.then () =>
@@ -458,9 +459,13 @@ define [
458459
columnOrderHasNotBeenSaved: =>
459460
!@gradebookColumnOrderSettings
460461

462+
isDefaultSortOrder: (sortOrder) =>
463+
not (['due_date', 'name', 'points', 'custom'].includes(sortOrder))
464+
461465
getStoredSortOrder: =>
462466
if @isInvalidCustomSort() || @columnOrderHasNotBeenSaved()
463-
{sortType: @defaultSortType}
467+
sortType: @defaultSortType
468+
direction: 'ascending'
464469
else
465470
@gradebookColumnOrderSettings
466471

@@ -486,6 +491,7 @@ define [
486491
else
487492
@storeCustomColumnOrder()
488493

494+
@renderViewOptionsMenu()
489495
@updateColumnHeaders()
490496

491497
reorderCustomColumns: (ids) ->
@@ -500,12 +506,7 @@ define [
500506
newSortOrder.customOrder = _.pluck(scrollable_columns, 'id')
501507
@setStoredSortOrder(newSortOrder)
502508

503-
setArrangementTogglersVisibility: (newSortOrder) =>
504-
@$columnArrangementTogglers.each ->
505-
$(this).closest('li').showIf $(this).data('arrangeColumnsBy') isnt newSortOrder.sortType
506-
507509
arrangeColumnsBy: (newSortOrder, isFirstArrangement) =>
508-
@setArrangementTogglersVisibility(newSortOrder)
509510
@setStoredSortOrder(newSortOrder) unless isFirstArrangement
510511

511512
columns = @grid.getColumns()
@@ -514,14 +515,16 @@ define [
514515
columns.splice(0, 0, frozen...)
515516
@grid.setColumns(columns)
516517

518+
@renderViewOptionsMenu()
517519
@updateColumnHeaders()
518520

519521
makeColumnSortFn: (sortOrder) =>
520522
switch sortOrder.sortType
521-
when 'assignment_group', 'alpha' then @wrapColumnSortFn(@compareAssignmentPositions)
522-
when 'due_date' then @wrapColumnSortFn(@compareAssignmentDueDates)
523+
when 'due_date' then @wrapColumnSortFn(@compareAssignmentDueDates, sortOrder.direction)
524+
when 'name' then @wrapColumnSortFn(@compareAssignmentNames, sortOrder.direction)
525+
when 'points' then @wrapColumnSortFn(@compareAssignmentPointsPossible, sortOrder.direction)
523526
when 'custom' then @makeCompareAssignmentCustomOrderFn(sortOrder)
524-
else throw "unhandled column sort condition"
527+
else @wrapColumnSortFn(@compareAssignmentPositions, sortOrder.direction)
525528

526529
compareAssignmentPositions: (a, b) ->
527530
diffOfAssignmentGroupPosition = a.object.assignment_group.position - b.object.assignment_group.position
@@ -536,6 +539,12 @@ define [
536539
secondAssignment = b.object
537540
assignmentHelper.compareByDueDate(firstAssignment, secondAssignment)
538541

542+
compareAssignmentNames: (a, b) =>
543+
@localeSort(a.object.name, b.object.name);
544+
545+
compareAssignmentPointsPossible: (a, b) ->
546+
a.object.points_possible - b.object.points_possible
547+
539548
makeCompareAssignmentCustomOrderFn: (sortOrder) =>
540549
sortMap = {}
541550
indexCounter = 0
@@ -561,15 +570,17 @@ define [
561570
else
562571
return @wrapColumnSortFn(@compareAssignmentPositions)(a, b)
563572

564-
wrapColumnSortFn: (wrappedFn) ->
573+
wrapColumnSortFn: (wrappedFn, direction = 'ascending') ->
565574
(a, b) ->
566575
return -1 if b.type is 'total_grade'
567576
return 1 if a.type is 'total_grade'
568577
return -1 if b.type is 'assignment_group' and a.type isnt 'assignment_group'
569578
return 1 if a.type is 'assignment_group' and b.type isnt 'assignment_group'
570579
if a.type is 'assignment_group' and b.type is 'assignment_group'
571580
return a.object.position - b.object.position
572-
return wrappedFn(a, b)
581+
582+
[a, b] = [b, a] if direction == 'descending'
583+
wrappedFn(a, b)
573584

574585
rowFilter: (student) =>
575586
matchingSection = !@sectionToShow || (@sectionToShow in student.sections)
@@ -1116,10 +1127,6 @@ define [
11161127
if @hideAggregateColumns()
11171128
$settingsMenu.find('#include-ungraded-list-item').hide()
11181129

1119-
@$columnArrangementTogglers = $('#gradebook-toolbar [data-arrange-columns-by]').bind 'click', (event) =>
1120-
event.preventDefault()
1121-
newSortOrder = { sortType: $(event.currentTarget).data('arrangeColumnsBy') }
1122-
@arrangeColumnsBy(newSortOrder, false)
11231130
@arrangeColumnsBy(@getStoredSortOrder(), true)
11241131

11251132
$('#gradebook_settings').kyleMenu(returnFocusTo: $('#gradebook_settings'))
@@ -1159,7 +1166,7 @@ define [
11591166
props.variant = mountPoint.getAttribute('data-variant')
11601167
renderComponent(GradebookMenu, mountPoint, props)
11611168

1162-
getViewOptionsMenuProps: ->
1169+
getTeacherNotesViewOptionsMenuProps: ->
11631170
teacherNotes = @options.teacher_notes
11641171
showingNotes = teacherNotes? and not teacherNotes.hidden
11651172
if showingNotes
@@ -1168,10 +1175,39 @@ define [
11681175
onSelect = => @setTeacherNotesHidden(false)
11691176
else
11701177
onSelect = @createTeacherNotes
1171-
teacherNotes:
1172-
disabled: @contentLoadStates.teacherNotesColumnUpdating
1173-
onSelect: onSelect
1174-
selected: showingNotes
1178+
1179+
disabled: @contentLoadStates.teacherNotesColumnUpdating
1180+
onSelect: onSelect
1181+
selected: showingNotes
1182+
1183+
getColumnSortSettingsViewOptionsMenuProps: ->
1184+
storedSortOrder = @getStoredSortOrder()
1185+
criterion = if @isDefaultSortOrder(storedSortOrder.sortType)
1186+
'default'
1187+
else
1188+
storedSortOrder.sortType
1189+
1190+
criterion: criterion
1191+
direction: storedSortOrder.direction || 'ascending'
1192+
disabled: not @contentLoadStates.assignmentsLoaded
1193+
onSortByDefault: =>
1194+
@arrangeColumnsBy({ sortType: 'default', direction: 'ascending' }, false)
1195+
onSortByNameAscending: =>
1196+
@arrangeColumnsBy({ sortType: 'name', direction: 'ascending' }, false)
1197+
onSortByNameDescending: =>
1198+
@arrangeColumnsBy({ sortType: 'name', direction: 'descending' }, false)
1199+
onSortByDueDateAscending: =>
1200+
@arrangeColumnsBy({ sortType: 'due_date', direction: 'ascending' }, false)
1201+
onSortByDueDateDescending: =>
1202+
@arrangeColumnsBy({ sortType: 'due_date', direction: 'descending' }, false)
1203+
onSortByPointsAscending: =>
1204+
@arrangeColumnsBy({ sortType: 'points', direction: 'ascending' }, false)
1205+
onSortByPointsDescending: =>
1206+
@arrangeColumnsBy({ sortType: 'points', direction: 'descending' }, false)
1207+
1208+
getViewOptionsMenuProps: ->
1209+
teacherNotes: @getTeacherNotesViewOptionsMenuProps()
1210+
columnSortSettings: @getColumnSortSettingsViewOptionsMenuProps()
11751211
showUnpublishedAssignments: @showUnpublishedAssignments
11761212
onSelectShowUnpublishedAssignments: @toggleUnpublishedAssignments
11771213

‎app/jsx/gradezilla/default_gradebook/components/ViewOptionsMenu.js‎

Lines changed: 74 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import PopoverMenu from 'instructure-ui/lib/components/PopoverMenu';
2424
import Typography from 'instructure-ui/lib/components/Typography';
2525
import I18n from 'i18n!gradebook';
2626

27-
const { bool, func, shape } = React.PropTypes;
27+
const { bool, func, shape, string } = React.PropTypes;
2828

2929
function renderTriggerButton () {
3030
return (
@@ -38,6 +38,18 @@ function renderTriggerButton () {
3838

3939
class ViewOptionsMenu extends React.Component {
4040
static propTypes = {
41+
columnSortSettings: shape({
42+
criterion: string.isRequired,
43+
direction: string.isRequired,
44+
disabled: bool.isRequired,
45+
onSortByDefault: func.isRequired,
46+
onSortByNameAscending: func.isRequired,
47+
onSortByNameDescending: func.isRequired,
48+
onSortByDueDateAscending: func.isRequired,
49+
onSortByDueDateDescending: func.isRequired,
50+
onSortByPointsAscending: func.isRequired,
51+
onSortByPointsDescending: func.isRequired
52+
}).isRequired,
4153
teacherNotes: shape({
4254
disabled: bool.isRequired,
4355
onSelect: func.isRequired,
@@ -52,23 +64,78 @@ class ViewOptionsMenu extends React.Component {
5264
this.bindMenuContent = (ref) => { this.menuContent = ref };
5365
}
5466

67+
areColumnsOrderedBy (criterion, direction) {
68+
const sortSettings = this.props.columnSortSettings;
69+
const result = sortSettings.criterion === criterion;
70+
71+
if (direction === undefined) {
72+
return result;
73+
} else {
74+
return result && sortSettings.direction === direction;
75+
}
76+
}
77+
5578
render () {
5679
return (
5780
<PopoverMenu
5881
trigger={renderTriggerButton()}
5982
contentRef={this.bindMenuContent}
6083
>
6184
<MenuItemGroup label={I18n.t('Arrange By')}>
62-
<MenuItem defaultSelected>
63-
{ I18n.t('Assignment Name') }
85+
<MenuItem
86+
disabled={this.props.columnSortSettings.disabled}
87+
selected={this.areColumnsOrderedBy('default')}
88+
onSelect={this.props.columnSortSettings.onSortByDefault}
89+
>
90+
{ I18n.t('Default Order') }
6491
</MenuItem>
6592

66-
<MenuItem>
67-
{ I18n.t('Due Date') }
93+
<MenuItem
94+
disabled={this.props.columnSortSettings.disabled}
95+
selected={this.areColumnsOrderedBy('name', 'ascending')}
96+
onSelect={this.props.columnSortSettings.onSortByNameAscending}
97+
>
98+
{ I18n.t('Assignment Name - A-Z') }
6899
</MenuItem>
69100

70-
<MenuItem>
71-
{ I18n.t('Points') }
101+
<MenuItem
102+
disabled={this.props.columnSortSettings.disabled}
103+
selected={this.areColumnsOrderedBy('name', 'descending')}
104+
onSelect={this.props.columnSortSettings.onSortByNameDescending}
105+
>
106+
{ I18n.t('Assignment Name - Z-A') }
107+
</MenuItem>
108+
109+
<MenuItem
110+
disabled={this.props.columnSortSettings.disabled}
111+
selected={this.areColumnsOrderedBy('due_date', 'ascending')}
112+
onSelect={this.props.columnSortSettings.onSortByDueDateAscending}
113+
>
114+
{ I18n.t('Due Date - Oldest to Newest') }
115+
</MenuItem>
116+
117+
<MenuItem
118+
disabled={this.props.columnSortSettings.disabled}
119+
selected={this.areColumnsOrderedBy('due_date', 'descending')}
120+
onSelect={this.props.columnSortSettings.onSortByDueDateDescending}
121+
>
122+
{ I18n.t('Due Date - Newest to Oldest') }
123+
</MenuItem>
124+
125+
<MenuItem
126+
disabled={this.props.columnSortSettings.disabled}
127+
selected={this.areColumnsOrderedBy('points', 'ascending')}
128+
onSelect={this.props.columnSortSettings.onSortByPointsAscending}
129+
>
130+
{ I18n.t('Points - Lowest to Highest') }
131+
</MenuItem>
132+
133+
<MenuItem
134+
disabled={this.props.columnSortSettings.disabled}
135+
selected={this.areColumnsOrderedBy('points', 'descending')}
136+
onSelect={this.props.columnSortSettings.onSortByPointsDescending}
137+
>
138+
{ I18n.t('Points - Highest to Lowest') }
72139
</MenuItem>
73140
</MenuItemGroup>
74141

‎app/views/gradebooks/gradebook.html.erb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@
152152
<% end %>
153153
<li><a class="student_names_toggle" href="#" role="button"><%= t('Hide Student Names') %></a></li>
154154
<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>
155+
<li><a data-arrange-columns-by="points" href="#"><label><%= t('Arrange columns by points') %><input type="radio" name="arrange-columns-by" /></label></a></li>
155156
<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>
156157
<li><a href="#"><label><%= t('Show Attendance Columns') %> <input type="checkbox" id="show_attendance" /></label></a></li>
157158
<li id="include-ungraded-list-item"><a href="#"><label><%= t("Treat Ungraded as 0") %><input type="checkbox" id="include_ungraded_assignments" /></label></a></li>

‎app/views/gradebooks/gradezilla/gradebook.html.erb‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,6 @@
9191
</a></li>
9292
<% end %>
9393
<li><a class="student_names_toggle" href="#" role="button"><%= t('Hide Student Names') %></a></li>
94-
<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>
95-
<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>
9694
<li><a href="#"><label><%= t('Show Attendance Columns') %> <input type="checkbox" id="show_attendance" /></label></a></li>
9795
<li id="include-ungraded-list-item"><a href="#"><label><%= t("Treat Ungraded as 0") %><input type="checkbox" id="include_ungraded_assignments" /></label></a></li>
9896
</ul>

0 commit comments

Comments
 (0)