Manage Submissions Button Functionalities

app/assets/javascripts/manage_submissions.js

@@ -1,115 +1,204 @@
-var hideStudent;
+const manage_submissions_endpoints = {
+  'regrade-selected': 'regradeBatch',
+};
 
 $(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();
-  };
+  var selectedStudentCids = [];
+  var selectedSubmissions = [];
 
   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': 'f<"selected-buttons">rt', // show buttons, search, table
+    'paging': false,
   });
 
-  $("#only-latest").on("change", function() {
-    table.draw();
-  });
+  // SELECTED BUTTONS
 
-  var ids = [];
-  $("input[type='checkbox']:checked").each(function() {
-    ids.push($(this).val());
-  });
+  // create selected buttons inside datatable wrapper
+  var regradeHTML = $('#regrade-batch-html').html();
+  var deleteHTML = $('#delete-batch-html').html();
+  var downloadHTML = $('#download-batch-html').html();
+  var excuseHTML = $('#gradetype-batch-html').html();
+  $('div.selected-buttons').html(`<div id='selected-buttons'>${regradeHTML}${deleteHTML}${downloadHTML}${excuseHTML}</div>`);
 
-  var selectedSubmissions = [];
+  // add ids to each selected button
+  $('#selected-buttons > a').each(function () { 
+    let idText = this.title.split(' ')[0].toLowerCase() + '-selected';
+    this.setAttribute('id', idText);
+   });
+
+  if (!is_autograded) {
+    $('#regrade-selected').hide();
+  }
 
-  var initialBatchUrl = $("#batch-regrade").prop("href");
+  // base URLs for selected buttons
+  var buttonIDs = ['#regrade-selected', '#delete-selected', '#download-selected', '#gradetype-selected'];
+  var baseURLs = {};
+  buttonIDs.forEach(function(id) {
+    baseURLs[id] = $(id).prop('href');
+  });
 
-  function updateBatchRegradeButton() {
+  function changeButtonStates(state) {
+    state ? buttonIDs.forEach((id) => $(id).addClass('disabled')) : buttonIDs.forEach((id) => $(id).removeClass('disabled'));
 
-    if (selectedSubmissions.length == 0) {
-      $("#batch-regrade").fadeOut(120);
+    // prop each selected button with selected submissions
+    if (!state) {
+      var urlParam = $.param({'submission_ids': selectedSubmissions});
+      buttonIDs.forEach(function(id) {
+        var newHref = baseURLs[id] + '?' + urlParam;
+        $(id).prop('href', newHref);
+      });
     } else {
-      $("#batch-regrade").fadeIn(120);
+      buttonIDs.forEach(function(id) {
+        $(id).prop('href', baseURLs[id]);
+      });
     }
-    var urlParam = $.param({
-      "submission_ids": selectedSubmissions
-    });
-    var newHref = initialBatchUrl + "?" + urlParam;
-    $("#batch-regrade").html("Regrade " + selectedSubmissions.length + " Submissions")
-    $("#batch-regrade").prop("href", newHref);
-  };
+  }
+
+  changeButtonStates(true); // disable all buttons by default
+
+  // SELECTING STUDENT CHECKBOXES
 
   function toggleRow(submissionId) {
+    var selectedCid = submissions_to_cud[submissionId];
     if (selectedSubmissions.indexOf(submissionId) < 0) {
       // not in the list
       selectedSubmissions.push(submissionId);
-      $("#cbox-" + submissionId).prop('checked', true);
-      $("#row-" + submissionId).addClass("selected");
+      $('#cbox-' + submissionId).prop('checked', true);
+      $('#row-' + submissionId).addClass('selected');
+      // add student cid
+      if (selectedStudentCids.indexOf(selectedCid) < 0) {
+        selectedStudentCids.push(selectedCid);
+      }
     } else {
       // in the list
-      $("#cbox-" + submissionId).prop('checked', false);
-      $("#row-" + submissionId).removeClass("selected");
+      $('#cbox-' + submissionId).prop('checked', false);
+      $('#row-' + submissionId).removeClass('selected');
       selectedSubmissions = _.without(selectedSubmissions, submissionId);
+      // remove student cid, but only if none of their submissions are selected
+      for (sidIndex in selectedSubmissions) {
+        var currSid = selectedSubmissions[sidIndex]
+        if (submissions_to_cud[currSid] == selectedCid) {
+          return;
+        }
+      }
+      selectedStudentCids = _.without(selectedStudentCids, selectedCid);
     }
-
-    updateBatchRegradeButton();
+    changeButtonStates(!selectedSubmissions.length);
   }
 
-  $("#submissions").on("click", ".exclude-click i", function (e) {
+  $('#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') {
+  $('#submissions').on('click', '.submission-row', function (e) {
+    // Don't toggle row if we originally clicked on an icon or anchor or input tag
+    if(e.target.localName != 'i' && 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);
+      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);
+  $('#submissions').on('click', '.cbox', function (e) {
+    var clickedSubmissionId = e.currentTarget.id.replace('cbox-', '');
+    var submissionId = clickedSubmissionId == 'select-all' ?  clickedSubmissionId : parseInt(clickedSubmissionId, 10);
     toggleRow(submissionId);
     e.stopPropagation();
   });
 
+  // TODO: adapt below code if necessary for grouping / select all
+  // $.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");
+  //     }
+  //   }
+  // );
 });
+
+
+// POPOVERS [TODO]
+
+// jQuery(function() {
+//   var current_popover = undefined;
+
+//   function close_current_popover() {
+//     current_popover.hide();
+//     current_popover = undefined;
+//   }
+
+//   function close_current_popover_on_blur(event) {
+//     if (current_popover && jQuery(current_popover).closest("td").find(event.target).length == 0) {
+//         close_current_popover();
+//     }
+//   }
+
+//   jQuery(document).click(function(event) {
+//     event.stopPropagation();
+//     console.log("hi");
+//     close_current_popover_on_blur(event);
+//   });
+
+//   function show_popover(popover, at, arrow_at) {
+//     if (current_popover) close_current_popover();
+
+//     popover.show();
+//     popover.position(at);
+
+//     var arrow = jQuery(".excused-arrow", popover)
+//       if (arrow_at) {
+//         arrow.position(arrow_at);
+//       } else {
+//         arrow.position({
+//           my: "right",
+//           at: "left",
+//           of: popover
+//         });
+//       }
+
+//     current_popover = popover;
+//   }
+
+//   jQuery('#submissions').on('click', 'td.submissions-td div.submissions-name a.submissions-excused-label',
+//     function() {
+//       if (current_popover) {
+//         close_current_popover();
+//         return;
+//       }
+
+//       var link = jQuery(this);
+//       currentPopover = link.siblings("div.excused-popover");
+//       currentPopover.show();
+
+//       // show_popover(popover, {
+//       //         my: "left center",
+//       //         at: "right center",
+//       //         of: link,
+//       //         offset: "10px 0"
+//       //       });
+
+//       // jQuery.ajax("submission_popover", {
+//       //   data: { submission_id: link.parent().data("submission-id") },
+//       //   success: function(data, status, jqXHR) {
+//       //     popover.html(data)
+//       //     show_popover(popover, {
+//       //       my: "left center",
+//       //       at: "right center",
+//       //       of: link,
+//       //       offset: "10px 0"
+//       //     });
+//       //   }
+//       // });
+
+//     }
+//   );
+// });

app/assets/stylesheets/datatable.adapter.css

@@ -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 {
@@ -46,25 +31,3 @@ html[xmlns] .dataTables_wrapper {
 table.dataTable {
   clear: both;
 }
-
-a.paginate_button,
-a.paginate_active {
-  display: inline-block;
-  padding: 2px 4px;
-  margin-left: 2px;
-  cursor: pointer;
-          *cursor: hand;
-}
-
-a.paginate_active {
-  border: 1px solid #888;
-}
-
-a.paginate_button_disabled {
-  visibility: hidden;
-}
-
-div.dataTables_paginate span>a {
-  width: 15px;
-  text-align: center;
-}