Skip to content

Commit debb7fc

Browse files
dyrodyro
committed
grades being erased by csv upload are highlighted
For grades that are chaning during csv upload, the original grade and the new grade will be displayed. New grades that are lower than the current grade will be highlighted in red. If an original grade was logged and a new grade is not present, it will also be highlighted red. fixes CNVS-5197 scope - Making sure the grades are highlighted in the correct scenario. Scenarios: - When a student's current grade is higher then the new grade - When a student's current grade has been logged, and the csv that's being uploaded doesn't have a grade for the student. - Making sure the behavior of the new uploader is consistent with the old csv uploader. s Change-Id: Id93413b07387f8caac184b3653c5adee282475e8 Reviewed-on: https://gerrit.instructure.com/50465 Tested-by: Jenkins Reviewed-by: Josh Simpson <jsimpson@instructure.com> QA-Review: Amber Taniuchi <amber@instructure.com> Product-Review: Dylan Ross <dross@instructure.com>
1 parent 4f2723d commit debb7fc

10 files changed

Lines changed: 392 additions & 1933 deletions

File tree

‎app/stylesheets/bundles/gradebook_uploads.scss‎

Lines changed: 83 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,95 @@
11
@import "base/environment";
2-
@import "vendor/slick.grid";
3-
4-
#gradebook_importer_resolution_section {
5-
margin: 1em 2em;
6-
table {
7-
border-collapse: collapse;
8-
width: 100%;
9-
td, th {
10-
border: 1px solid #EEEEEE;
11-
padding: 0.2em 20px;
2+
3+
#gradebook_uploader_container {
4+
overflow: scroll;
5+
6+
#gradebook_grid_header {
7+
.slick-header-column {
8+
background-image: none !important;
9+
}
10+
11+
.slick-header-column:not(:first-of-type) {
12+
border-top: 1px solid $ic-color-neutral;
1213
}
1314
}
14-
select {
15-
text-align: center;
16-
option {
17-
text-align: left;
15+
16+
#gradebook_grid {
17+
input.editor-text {
18+
border: none;
19+
font-size: 14px;
20+
width: 100%;
21+
padding: 0;
22+
outline: default;
23+
margin: 0;
24+
height:28px;
25+
background: none;
26+
box-shadow: none !important;
1827
}
19-
.new {
20-
color: green;
28+
.slick-header-column {
29+
background-color: lighten($ic-brand-secondary, 51);
30+
background-image: none !important;
31+
border-top: 1px solid $ic-color-neutral;
32+
border-bottom: 1px solid $ic-color-neutral;
2133
}
22-
.ignore {
23-
color: red;
34+
35+
.slick-column-name {
36+
font-weight: bold;
37+
}
38+
39+
.slick-header-column:nth-child(even) {
40+
border-right-style:dashed;
41+
}
42+
43+
.slick-cell {
44+
line-height: 25px;
45+
padding-left: 5px;
2446
}
2547
}
26-
.points_possible_section {
27-
opacity: 0;
48+
49+
.slick-header {
50+
background-image:none;
51+
border:none;
2852
}
29-
input.points_possible {
30-
width: 50px;
53+
54+
.slick-row.even {
55+
background-color: lighten($ic-color-neutral, 5);
3156
}
32-
}
3357

34-
.cell-title {
35-
font-weight: bold;
36-
}
58+
.slick-cell {
59+
border-right-style:dashed;
60+
}
61+
62+
.slick-cell.editable, .slick-cell.active {
63+
box-shadow: 0 0 5px lighten($ic-brand-primary, 10);
64+
border: 1px solid $ic-brand-primary;
65+
}
66+
67+
.slick-cell:nth-child(odd) {
68+
border-right-style:solid;
69+
}
3770

38-
#assignments_without_changes_alert {
39-
color: orange;
40-
font-size: 0.8em;
41-
margin-left: 100px;
71+
.slick-header-column {
72+
height: 24px;
73+
padding: 8px 4px 0px 4px;
74+
}
75+
76+
.left-highlight {
77+
background-color: lighten($ic-color-danger, 50);
78+
border-left-color: $ic-color-danger;
79+
border-top-color: $ic-color-danger;
80+
border-bottom-color: $ic-color-danger;
81+
color:$ic-color-danger;
82+
font-weight: bold;
83+
}
84+
85+
.right-highlight {
86+
background-color: lighten($ic-color-danger, 50);
87+
border-right-style: solid;
88+
border-right-color: $ic-color-danger;
89+
border-top-color: $ic-color-danger;
90+
border-bottom-color: $ic-color-danger;
91+
color:$ic-color-danger;
92+
font-weight: bold;
93+
}
4294
}
95+

‎app/views/gradebook_uploads/show.html.erb‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<% content_for :page_title do %><%= join_title t(:page_title, "Gradebook"), @context.name %><% end %>
22

33
<%
4+
jammit_css :slickgrid
45
jammit_css :gradebook_uploads
56
js_bundle :gradebook_uploads
67
%>
@@ -70,7 +71,13 @@
7071
</div>
7172

7273
<%= form_tag({}, {:method => "put", :id => "gradebook_grid_form", :style => "display:none;"}) do %>
73-
<div id="gradebook_grid"></div>
74+
<div id="gradebook_uploader_container">
75+
<div id="grid">
76+
<div id="gradebook_grid_header"></div>
77+
<div id="gradebook_grid"></div>
78+
</div>
79+
</div>
80+
7481
<input type="hidden" name="json_data_to_submit" value="" />
7582
<div class="button-container" style="padding-left:7px;">
7683
<button type="submit" class="btn"><%= t('buttons.save_changes', "Save Changes") %></button>

‎public/javascripts/gradebook_uploads.js‎

Lines changed: 109 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -20,82 +20,119 @@ define([
2020
'jquery',
2121
'underscore',
2222
'str/htmlEscape',
23-
'vendor/slickgrid-googlecode/slick.grid',
24-
'vendor/slickgrid-googlecode/slick.editors',
23+
'vendor/slickgrid',
24+
'vendor/slickgrid/slick.editors',
2525
'jquery.instructure_forms' /* errorBox */,
2626
'jquery.instructure_misc_helpers' /* /\.detect/ */,
2727
'jquery.templateData' /* fillTemplateData */
28-
], function(I18n, $, _, htmlEscape, SlickGrid) {
28+
], function(I18n, $, _, htmlEscape, Slick) {
2929

3030
var uploadedGradebook = ENV.uploaded_gradebook;
3131

3232
var GradebookUploader = {
33+
createGeneralFormatter: function (attribute) {
34+
return function (row, cell, value) {
35+
return value ? value[attribute] : "";
36+
}
37+
},
38+
3339
init:function(){
3440
var gradebookGrid,
3541
$gradebook_grid = $("#gradebook_grid"),
36-
gridData = {
37-
columns: [
38-
{
39-
id:"student",
40-
name:I18n.t('student', "Student"),
41-
field:"student",
42-
width:250,
43-
cssClass:"cell-title",
44-
editor:StudentNameEditor,
45-
validator:requiredFieldValidator,
46-
formatter: StudentNameFormatter
47-
}
48-
],
49-
options: {
50-
enableAddRow: false,
51-
enableColumnReorder: false,
52-
asyncEditorLoading: true
53-
},
54-
data: []
55-
};
42+
$gradebook_grid_header = $("#gradebook_grid_header"),
43+
rowsToHighlight = [],
44+
self = this;
45+
46+
var gridData = {
47+
columns: [
48+
{
49+
id:"student",
50+
name:I18n.t('student', "Student"),
51+
field:"student",
52+
width:250,
53+
cssClass:"cell-title",
54+
formatter: self.createGeneralFormatter('name')
55+
}
56+
],
57+
options: {
58+
enableAddRow: false,
59+
editable: true,
60+
enableColumnReorder: false,
61+
asyncEditorLoading: true,
62+
rowHeight: 30
63+
},
64+
data: []
65+
};
66+
67+
var labelData = {
68+
columns: [{
69+
id: 'assignmentGrouping',
70+
name: '',
71+
field: 'assignmentGrouping',
72+
width: 250
73+
}],
74+
options: {
75+
enableAddRow: false,
76+
enableColumnReorder: false,
77+
asyncEditorLoading: false
78+
},
79+
data: []
80+
};
81+
5682
delete uploadedGradebook.missing_objects;
5783
delete uploadedGradebook.original_submissions;
5884

5985
$.each(uploadedGradebook.assignments, function(){
60-
var col = {
86+
var newGrade = {
6187
id: this.id,
62-
name: htmlEscape(this.title),
88+
name: htmlEscape(I18n.t('To')),
6389
field: this.id,
64-
width:200,
65-
editor: GradeCellEditor,
66-
formatter: simpleGradeCellFormatter,
90+
width: 125,
91+
editor: Slick.Editors.UploadGradeCellEditor,
92+
formatter: self.createGeneralFormatter('grade'),
6793
active: true,
68-
previous_id: this.previous_id
94+
previous_id: this.previous_id,
95+
cssClass: "new-grade"
6996
};
70-
gridData.columns.push(col);
71-
if (this.previous_id) {
72-
col.cssClass = "active changed"
73-
} else {
74-
col.cssClass = "active new"
75-
}
76-
col.setValueHandler = function(value, assignment, student){
77-
if (student[assignment.id]) {
78-
student[assignment.id].grade = value;
79-
//there was already an uploaded submission for this assignment, update it
80-
} else {
81-
//they did not upload a score for this assignment. create a submission and link it.
82-
var submission = {
83-
grade: value,
84-
assignment_id: assignment.id
85-
};
86-
var arrayLength = student.submissions.push(submission);
87-
student[assignment.id] = student.submissions[arrayLength - 1];
88-
}
97+
98+
var conflictingGrade = {
99+
id: this.id + "_conflicting",
100+
width: 125,
101+
formatter: self.createGeneralFormatter('original_grade'),
102+
field: this.id + "_conflicting",
103+
name: htmlEscape(I18n.t('From')),
104+
cssClass: 'conflicting-grade'
105+
};
106+
107+
var assignmentHeaderColumn = {
108+
id: this.id,
109+
width: 250,
110+
name: htmlEscape(this.title),
111+
headerCssClass: "assignment"
89112
};
113+
114+
labelData.columns.push(assignmentHeaderColumn);
115+
gridData.columns.push(conflictingGrade);
116+
gridData.columns.push(newGrade);
90117
});
91118

92-
$.each(uploadedGradebook.students, function(){
119+
$.each(uploadedGradebook.students, function(index){
93120
var row = {
94121
student : this,
95122
id : this.id
96123
};
97124
$.each(this.submissions, function(){
125+
var originalGrade = parseInt(this.original_grade);
126+
updatedGrade = parseInt(this.grade),
127+
updateWillRemoveGrade = !isNaN(originalGrade) && isNaN(updatedGrade);
128+
129+
if (originalGrade > updatedGrade || updateWillRemoveGrade) {
130+
rowsToHighlight.push({rowIndex: index, id: this.assignment_id});
131+
}
132+
133+
row['assignmentId'] = this.assignment_id;
98134
row[this.assignment_id] = this;
135+
row[this.assignment_id + "_conflicting"] = this;
99136
});
100137
gridData.data.push(row);
101138
row.active = true;
@@ -111,10 +148,31 @@ define([
111148
}).show();
112149

113150
$(window).resize(function(){
114-
$gradebook_grid.height( $(window).height() - $gradebook_grid.offset().top - 50 );
151+
$gradebook_grid.height( $(window).height() - $gradebook_grid.offset().top - 150 );
152+
var width = ((gridData.columns.length - 1) * 125) + 250;
153+
$gradebook_grid.parent().width(width);
115154
}).triggerHandler("resize");
116-
gradebookGrid = new SlickGrid($gradebook_grid, gridData.data, gridData.columns, gridData.options);
155+
156+
gradebookGrid = new Slick.Grid($gradebook_grid, gridData.data, gridData.columns, gridData.options);
157+
new Slick.Grid($gradebook_grid_header, labelData.data, labelData.columns, labelData.options);
117158
gradebookGrid.onColumnHeaderClick = function(columnDef) { /*do nothing*/};
159+
160+
var gradeReviewRow = {};
161+
162+
for(var i = 0; i < rowsToHighlight.length; i++) {
163+
var id = rowsToHighlight[i].id,
164+
rowIndex = rowsToHighlight[i].rowIndex,
165+
rowIndex= rowsToHighlight[i].rowIndex,
166+
conflictingId = id + "_conflicting";
167+
168+
gradeReviewRow[rowIndex] = gradeReviewRow[rowIndex] || {};
169+
gradeReviewRow[rowIndex][id] = 'right-highlight';
170+
gradeReviewRow[rowIndex][conflictingId] = 'left-highlight';
171+
gradebookGrid.invalidateRow(rowIndex);
172+
}
173+
174+
gradebookGrid.setCellCssStyles("highlight-grade-change", gradeReviewRow);
175+
gradebookGrid.render();
118176
}
119177
else {
120178
$("#no_changes_detected").show();

‎public/javascripts/vendor/slickgrid-googlecode/MIT-LICENSE.txt‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)