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:
@@ -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
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user