UX for Data Download tab on instructor dash

Restrict grade report generation to 'is_superuser' users (can be overridden with
feature flag ALLOW_COURSE_STAFF_GRADE_DOWNLOADS); all staff users can download
generated files.

LMS-58
This commit is contained in:
Sarina Canelake
2013-11-20 11:05:10 -05:00
parent e0aa8cf78a
commit e2423386cb
7 changed files with 127 additions and 61 deletions

View File

@@ -17,17 +17,23 @@ class DataDownload
# this object to call event handlers like 'onClickTitle'
@$section.data 'wrapper', @
# gather elements
@$display = @$section.find '.data-display'
@$display_text = @$display.find '.data-display-text'
@$display_table = @$display.find '.data-display-table'
@$request_response_error = @$display.find '.request-response-error'
@$list_studs_btn = @$section.find("input[name='list-profiles']'")
@$list_anon_btn = @$section.find("input[name='list-anon-ids']'")
@$grade_config_btn = @$section.find("input[name='dump-gradeconf']'")
@$calculate_grades_csv_btn = @$section.find("input[name='calculate-grades-csv']'")
# response areas
@$download = @$section.find '.data-download-container'
@$download_display_text = @$download.find '.data-display-text'
@$download_display_table = @$download.find '.data-display-table'
@$download_request_response_error = @$download.find '.request-response-error'
@$grades = @$section.find '.grades-download-container'
@$grades_request_response = @$grades.find '.request-response'
@$grades_request_response_error = @$grades.find '.request-response-error'
@grade_downloads = new GradeDownloads(@$section)
@instructor_tasks = new (PendingInstructorTasks()) @$section
@clear_display()
# attach click handlers
# The list-anon case is always CSV
@@ -46,8 +52,9 @@ class DataDownload
url += '/csv'
location.href = url
else
# Dynamically generate slickgrid table for displaying student profile information
@clear_display()
@$display_table.text 'Loading...'
@$download_display_table.text gettext('Loading...')
# fetch user list
$.ajax
@@ -55,7 +62,7 @@ class DataDownload
url: url
error: std_ajax_err =>
@clear_display()
@$request_response_error.text "Error getting student list."
@$download_request_response_error.text gettext("Error getting student list.")
success: (data) =>
@clear_display()
@@ -64,12 +71,13 @@ class DataDownload
enableCellNavigation: true
enableColumnReorder: false
forceFitColumns: true
rowHeight: 35
columns = ({id: feature, field: feature, name: feature} for feature in data.queried_features)
grid_data = data.students
$table_placeholder = $ '<div/>', class: 'slickgrid'
@$display_table.append $table_placeholder
@$download_display_table.append $table_placeholder
grid = new Slick.Grid($table_placeholder, grid_data, columns, options)
# grid.autosizeColumns()
@@ -81,13 +89,31 @@ class DataDownload
url: url
error: std_ajax_err =>
@clear_display()
@$request_response_error.text "Error getting grading configuration."
@$download_request_response_error.text gettext("Error retrieving grading configuration.")
success: (data) =>
@clear_display()
@$display_text.html data['grading_config_summary']
@$download_display_text.html data['grading_config_summary']
@$calculate_grades_csv_btn.click (e) =>
# Clear any CSS styling from the request-response areas
#$(".msg-confirm").css({"display":"none"})
#$(".msg-error").css({"display":"none"})
@clear_display()
url = @$calculate_grades_csv_btn.data 'endpoint'
$.ajax
dataType: 'json'
url: url
error: std_ajax_err =>
@$grades_request_response_error.text gettext("Error generating grades. Please try again.")
$(".msg-error").css({"display":"block"})
success: (data) =>
@$grades_request_response.text data['status']
$(".msg-confirm").css({"display":"block"})
# handler for when the section title is clicked.
onClickTitle: ->
# Clear display of anything that was here before
@clear_display()
@instructor_tasks.task_poller.start()
@grade_downloads.downloads_poller.start()
@@ -97,36 +123,32 @@ class DataDownload
@grade_downloads.downloads_poller.stop()
clear_display: ->
@$display_text.empty()
@$display_table.empty()
@$request_response_error.empty()
# Clear any generated tables, warning messages, etc.
@$download_display_text.empty()
@$download_display_table.empty()
@$download_request_response_error.empty()
@$grades_request_response.empty()
@$grades_request_response_error.empty()
# Clear any CSS styling from the request-response areas
$(".msg-confirm").css({"display":"none"})
$(".msg-error").css({"display":"none"})
class GradeDownloads
### Grade Downloads -- links expire quickly, so we refresh every 5 mins ####
constructor: (@$section) ->
@$grade_downloads_table = @$section.find ".grade-downloads-table"
@$calculate_grades_csv_btn = @$section.find("input[name='calculate-grades-csv']'")
@$display = @$section.find '.data-display'
@$display_text = @$display.find '.data-display-text'
@$request_response_error = @$display.find '.request-response-error'
@$grades = @$section.find '.grades-download-container'
@$grades_request_response = @$grades.find '.request-response'
@$grades_request_response_error = @$grades.find '.request-response-error'
@$grade_downloads_table = @$grades.find ".grade-downloads-table"
POLL_INTERVAL = 1000 * 60 * 5 # 5 minutes in ms
@downloads_poller = new window.InstructorDashboard.util.IntervalManager(
POLL_INTERVAL, => @reload_grade_downloads()
)
@$calculate_grades_csv_btn.click (e) =>
url = @$calculate_grades_csv_btn.data 'endpoint'
$.ajax
dataType: 'json'
url: url
error: std_ajax_err =>
@$request_response_error.text "Error generating grades."
success: (data) =>
@$display_text.html data['status']
reload_grade_downloads: ->
endpoint = @$grade_downloads_table.data 'endpoint'
$.ajax
@@ -145,15 +167,17 @@ class GradeDownloads
options =
enableCellNavigation: true
enableColumnReorder: false
autoHeight: true
rowHeight: 30
forceFitColumns: true
columns = [
id: 'link'
field: 'link'
name: 'File'
sortable: false,
minWidth: 200,
name: gettext('File Name (Newest First)')
toolTip: gettext("Links are generated on demand and expire within 5 minutes due to the sensitive nature of student grade information.")
sortable: false
minWidth: 150
cssClass: "file-download-link"
formatter: (row, cell, value, columnDef, dataContext) ->
'<a href="' + dataContext['url'] + '">' + dataContext['name'] + '</a>'
]
@@ -161,8 +185,7 @@ class GradeDownloads
$table_placeholder = $ '<div/>', class: 'slickgrid'
@$grade_downloads_table.append $table_placeholder
grid = new Slick.Grid($table_placeholder, grade_downloads_data, columns, options)
grid.autosizeColumns()
# export for use

View File

@@ -43,7 +43,7 @@ create_task_list_table = ($table_tasks, tasks_data) ->
id: 'task_type'
field: 'task_type'
name: 'Task Type'
minWidth: 100
minWidth: 102
,
id: 'task_input'
field: 'task_input'

View File

@@ -26,6 +26,13 @@
@include font-size(16);
}
.file-download-link a {
font-size: 15px;
color: $link-color;
text-decoration: underline;
padding: 5px;
}
// system feedback - messages
.msg {
border-radius: 1px;
@@ -117,7 +124,7 @@ section.instructor-dashboard-content-2 {
.slickgrid {
margin-left: 1px;
color:#333333;
font-size:11px;
font-size:12px;
font-family: verdana,arial,sans-serif;
.slick-header-column {
@@ -428,13 +435,26 @@ section.instructor-dashboard-content-2 {
line-height: 1.3em;
}
.data-display {
.data-download-container {
.data-display-table {
.slickgrid {
height: 400px;
}
}
}
.grades-download-container {
.grade-downloads-table {
.slickgrid {
height: 300px;
padding: 5px;
}
// Disable horizontal scroll bar when grid only has 1 column. Remove this CSS class when more columns added.
.slick-viewport {
overflow-x: hidden !important;
}
}
}
}