Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Main Table UI Changes #1886

Merged
merged 6 commits into from
Apr 19, 2023
Merged

Main Table UI Changes #1886

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b97deaa
Start Manage Submissions
lykimchee Apr 9, 2023
33180b3
Center checkbox in manage submission table (#1868)
michellexliu Apr 9, 2023
0c60bd3
Main Table UI
lykimchee Apr 12, 2023
2a2ee2b
Updates with selecting students and buttons
lykimchee Apr 18, 2023
68ba4fd
Add Score Popup Icon
lykimchee Apr 18, 2023
32ab637
Icon spacing and codebase style
lykimchee Apr 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 36 additions & 77 deletions app/assets/javascripts/manage_submissions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,49 @@
var hideStudent;

$(document).ready(function() {

$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var filterOnlyLatest = $("#only-latest").is(':checked');
if (!filterOnlyLatest) {
// if not filtered, return all the rows
return true;
} else {
var isSubmissionLatest = data[8]; // use data for the age column
return (isSubmissionLatest == "true");
}
}
);

var $floater = $("#floater"),
$backdrop = $("#gradeBackdrop");
$('.trigger').bind('ajax:success', function showStudent(event, data, status, xhr) {
$floater.html(data);
$floater.show();
$backdrop.show();
});

/** override the global **/
hideStudent = function hideStudent() {
$floater.hide();
$backdrop.hide();
};
// USE LATER FOR GROUPING ROWS (POSSIBLY):
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@michellexliu or @lykimchee whoever is working on the group would need to make sure to remove this line eventually


// $.fn.dataTable.ext.search.push(
// function(settings, data, dataIndex) {
// var filterOnlyLatest = $("#only-latest").is(':checked');
// if (!filterOnlyLatest) {
// // if not filtered, return all the rows
// return true;
// } else {
// var isSubmissionLatest = data[8]; // use data for the age column
// return (isSubmissionLatest == "true");
// }
// }
// );

var table = $('#submissions').DataTable({
'sPaginationType': 'full_numbers',
'iDisplayLength': 100,
'oLanguage': {
'sLengthMenu':'<label><input type="checkbox" id="only-latest">' +
'<span>Show only latest</span></label>'
},
"columnDefs": [{
"targets": [8],
"visible": false,
// "searchable": false
}],
"aaSorting": [
[4, "desc"]
"dom": 'fBrt', // show buttons, search, table
buttons: [
{ text: '<i class="material-icons">cached</i>Regrade Selected', className: 'btn submissions-selected disabled' },
{ text: '<i class="material-icons">delete_outline</i>Delete Selected', className: 'btn submissions-selected disabled' },
{ text: '<i class="material-icons">download</i>Download Selected', className: 'btn submissions-selected disabled' },
{ text: '<i class="material-icons">done</i>Excuse Selected', className: 'btn submissions-selected disabled' }
]
});

$("#only-latest").on("change", function() {
table.draw();
});

var ids = [];
$("input[type='checkbox']:checked").each(function() {
ids.push($(this).val());
});

var selectedSubmissions = [];

var initialBatchUrl = $("#batch-regrade").prop("href");
// USE LATER FOR REGRADE SELECTED (POSSIBLY):

function updateBatchRegradeButton() {
// var initialBatchUrl = $("#batch-regrade").prop("href");

if (selectedSubmissions.length == 0) {
$("#batch-regrade").fadeOut(120);
} else {
$("#batch-regrade").fadeIn(120);
}
var urlParam = $.param({
"submission_ids": selectedSubmissions
});
var newHref = initialBatchUrl + "?" + urlParam;
$("#batch-regrade").html("Regrade " + selectedSubmissions.length + " Submissions")
$("#batch-regrade").prop("href", newHref);
};
// function updateBatchRegradeButton() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this similarly as well

// if (selectedSubmissions.length == 0) {
// $("#batch-regrade").fadeOut(120);
// } else {
// $("#batch-regrade").fadeIn(120);
// }
// var urlParam = $.param({
// "submission_ids": selectedSubmissions
// });
// var newHref = initialBatchUrl + "?" + urlParam;
// $("#batch-regrade").html("Regrade " + selectedSubmissions.length + " Submissions")
// $("#batch-regrade").prop("href", newHref);
// };

function toggleRow(submissionId) {
if (selectedSubmissions.indexOf(submissionId) < 0) {
Expand All @@ -86,26 +57,14 @@ $(document).ready(function() {
$("#row-" + submissionId).removeClass("selected");
selectedSubmissions = _.without(selectedSubmissions, submissionId);
}

updateBatchRegradeButton();
// updateBatchRegradeButton();
}

$("#submissions").on("click", ".exclude-click i", function (e) {
e.stopPropagation();
return;
});

$('#submissions').on("click", ".submission-row", function(e) {
// Don't toggle row if we originally clicked on an anchor and input tag
if(e.target.localName != 'a' && e.target.localName !='input') {
// e.target: tightest element that triggered the event
// e.currentTarget: element the event has bubbled up to currently
var submissionId = parseInt(e.currentTarget.id.replace("row-", ""), 10);
toggleRow(submissionId);
return false;
}
});

$('#submissions').on("click", ".cbox", function(e) {
var submissionId = parseInt(e.currentTarget.id.replace("cbox-", ""), 10);
toggleRow(submissionId);
Expand Down
56 changes: 19 additions & 37 deletions app/assets/stylesheets/datatable.adapter.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,14 @@
div.dataTables_length {
float: left;
}

div.dataTables_filter {
float: right;
}

div.dataTables_info {
float: left;
}

div.dataTables_paginate {
float: right;
}

div.dataTables_length,
div.dataTables_filter,
div.dataTables_info,
div.dataTables_paginate {
div.dataTables_filter {
padding: 6px 0px;
margin-right: 20px;
}

div.dataTables_filter,
div.dataTables_paginate {
padding-right: 14px;
div.dataTables_filter input {
font-family: "Source Sans Pro", sans-serif;
}

div.dataTables_wrapper:after {
Expand All @@ -47,30 +32,27 @@ table.dataTable {
clear: both;
}

a.paginate_button,
a.paginate_active {
display: inline-block;
padding: 2px 4px;
margin-left: 2px;
cursor: pointer;
*cursor: hand;
th {
z-index: 1;
position: sticky;
top: 0;
}

a.paginate_active {
border: 1px solid #888;
.dt-buttons {
height: 75px;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}

a.paginate_button_disabled {
visibility: hidden;
.dt-button {
margin-right: 10px !important;
}

div.dataTables_paginate span>a {
width: 15px;
text-align: center;
.dt-button span {
display: flex;
}

th {
z-index: 1;
position: sticky;
top: 0;
.dt-button i {
margin: 0 6px 0 4px;
}
95 changes: 88 additions & 7 deletions app/assets/stylesheets/style.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -742,7 +742,6 @@ div.field_with_errors {
}

/* TABLE STYLES. Styles for the multiple tables that we have for some reason */
/* Pretty Border Tables. I vote we make this the generic table style. */
table.prettyBorder,
table.prettyBorder tr,
table.prettyBorder th,
Expand All @@ -759,7 +758,6 @@ table.prettyBorder {

tr {
background-color: #fff;
border: 1px solid #d0d0d0;
&:hover {
background-color: #abcdef;
}
Expand All @@ -777,7 +775,7 @@ table.prettyBorder {

th {
background-color: #ebebeb;
color: #909090;
color: #000000;
cursor: pointer;
font-family: Source Sans Pro, sans-serif;
font-size: 0.8em;
Expand All @@ -787,11 +785,32 @@ table.prettyBorder {
text-transform: uppercase;
}

.submissions-th {
padding: 25px 0 25px 0;
}

td {
border: 1px solid #ddd;
padding: 0 5px;
}

.submissions-td {
border: none;
border-bottom: 1px solid #ddd;
padding: 5px 0 5px 0;
}

.submissions-cbox-label {
display: flex;
justify-content: center;
span::before {
left: 6px;
};
[type="checkbox"]:checked + span:not(.lever):before {
left: 3px;
};
}

tr.selected {
background-color: $autolab-subtle-gray;
}
Expand Down Expand Up @@ -1129,6 +1148,7 @@ label[for="switch"] {

.checkbox input[type="checkbox"]:checked + label::before {
border: 1px solid #bbb;

}

.new_submission {
Expand Down Expand Up @@ -1455,10 +1475,6 @@ table.sub td, th {
margin-left: 10px
}

.submissions {
overflow-x: auto;
}

.submission-history-button {
white-space: nowrap;
text-transform: unset !important;
Expand All @@ -1476,3 +1492,68 @@ table.sub td, th {
.submission-history-button:hover {
color: white !important;
}

/* Manage Submissions */

.btn.submissions-main {
margin: 0;
padding: 5px 10px 5px 5px;
min-height: 36px;
height: auto;
line-height: 1.3;
display: flex;
align-items: center;
}

.btn.submissions-selected {
margin: 0;
padding: 0px 10px 0px 5px;
font-family: Source Sans Pro, sans-serif;
}

.buttons-row {
display: flex;
flex-direction: row;
}

.buttons-spacing {
margin-right: 10px;
a {
overflow-y: hidden;
}
}

.submissions-checkbox {
margin-left: 35px;
}

.submissions-center-icons {
display: flex;
align-items: center;
}

.submissions-center-icons p {
margin: 0 0 0 10px;
}

.submissions-icons {
margin-left: 3px;
}

.submissions-score-align {
display: flex;
align-items: center;
width: 100%;
.score-num {
width: 40%;
}
.score-icon {
width: 20%;
}
}

.submissions-score-icon {
margin-left: 5px;
margin-top: 5px;
color: #A1A0A3;
}
Loading