From e2aba7d2ce14236cefb617e54a0e5a658358c777 Mon Sep 17 00:00:00 2001
From: Charles Cowart <ccowart@ucsd.edu>
Date: Fri, 3 Mar 2023 20:00:57 -0800
Subject: [PATCH 1/2] Individually selected delete fixed

---
 .../study_ajax/sample_prep_summary.html       | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/qiita_pet/templates/study_ajax/sample_prep_summary.html b/qiita_pet/templates/study_ajax/sample_prep_summary.html
index 115875159..1f21ba909 100644
--- a/qiita_pet/templates/study_ajax/sample_prep_summary.html
+++ b/qiita_pet/templates/study_ajax/sample_prep_summary.html
@@ -9,23 +9,25 @@
   var prep_colums = jQuery.map(
     Object.keys(rows[0]), function(e) { if (e.startsWith("prep")) return e });
   for(var i=0;i<rows.length;i++) {
-    rows[i]['sample-delete'] = '';
+    rows[i]['sample-delete'] = 'unchecked';
   }
   function toggleCheckboxes(element){
-    var checked = element.checked ? 'checked' : '';
+    var checked = element.checked ? 'checked' : 'unchecked';
     $.each(rows, function(i, d){
       $('.sample-delete[name="' + d['sample'] + '"]').prop('checked', checked);
       rows[i]['sample-delete'] = checked;
     });
   }
   function toggleCheckbox(element){
-    var checked = element.checked ? 'checked' : '';
-    var row = $(element).prop('value');
-    rows[row]["sample-delete"] = checked;
-  }
+    if(element['sample-delete'] == 'checked') {
+      element['sample-delete'] = 'unchecked';
+    } else {
+      element['sample-delete'] = 'checked';
+    };
+    }
   function linkFormatter(row, cell, value, columnDef, dataContext) {
     {% if user_can_edit %}
-      return "<input type='checkbox' class='sample-delete' value='" + row + "' name='" + rows[row]['sample'] + "' onchange='toggleCheckbox(this)' " + rows[row]['sample-delete'] + ">";
+      return "<input type='checkbox' class='sample-delete' value='" + row + "' name='" + rows[row]['sample'] + "'>";
     {% else %}
       return ""
     {% end %}
@@ -116,6 +118,13 @@
 		grid.invalidate();
     grid.render();
 	});
+  grid.onClick.subscribe(function(e, args){
+    let cell = grid.getCellFromEvent(e);
+    if(grid.getColumns()[cell.cell].id == "sample-delete") {
+        toggleCheckbox(grid.getDataItem(cell.row))
+      }
+    });
+
 
   function add_meta() {
     var metadata_category = $("#metadata_category").val();

From afe8d9cdf1e3b30a3580a3857b1bd4db8a0164f4 Mon Sep 17 00:00:00 2001
From: Charles Cowart <ccowart@ucsd.edu>
Date: Mon, 6 Mar 2023 16:23:44 -0800
Subject: [PATCH 2/2] Bugfixes

Fixed select-all checkbox so that it works properly.
Fixed it so that when a user clicks inside checkbox cell, but not
checkbox itself, it toggles status.
---
 .../study_ajax/sample_prep_summary.html       | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/qiita_pet/templates/study_ajax/sample_prep_summary.html b/qiita_pet/templates/study_ajax/sample_prep_summary.html
index 1f21ba909..c9f0d5473 100644
--- a/qiita_pet/templates/study_ajax/sample_prep_summary.html
+++ b/qiita_pet/templates/study_ajax/sample_prep_summary.html
@@ -6,13 +6,13 @@
   var column_width_factor = 10;
   var rows = {% raw list(rows.values()) %};
   // setting up checkboxes
-  var prep_colums = jQuery.map(
+  var prep_columns = jQuery.map(
     Object.keys(rows[0]), function(e) { if (e.startsWith("prep")) return e });
   for(var i=0;i<rows.length;i++) {
-    rows[i]['sample-delete'] = 'unchecked';
+    rows[i]['sample-delete'] = '';
   }
   function toggleCheckboxes(element){
-    var checked = element.checked ? 'checked' : 'unchecked';
+    var checked = element.checked ? 'checked' : '';
     $.each(rows, function(i, d){
       $('.sample-delete[name="' + d['sample'] + '"]').prop('checked', checked);
       rows[i]['sample-delete'] = checked;
@@ -20,9 +20,13 @@
   }
   function toggleCheckbox(element){
     if(element['sample-delete'] == 'checked') {
-      element['sample-delete'] = 'unchecked';
+      element['sample-delete'] = '';
+      // if user clicks inside row and column, but not in checkbox, this will force checkbox to change.
+      $('.sample-delete[name="' + element['sample'] + '"]').prop('checked', '');
     } else {
       element['sample-delete'] = 'checked';
+      // if user clicks inside row and column, but not in checkbox, this will force checkbox to change.
+      $('.sample-delete[name="' + element['sample'] + '"]').prop('checked', 'checked');
     };
     }
   function linkFormatter(row, cell, value, columnDef, dataContext) {
@@ -46,7 +50,7 @@
       var to_delete = [];
       $.each(rows, function(i, row){
         var sample_delete = jQuery.map(
-          prep_colums, function(pc) { if (row[pc] === 'X') return pc });
+          prep_columns, function(pc) { if (row[pc] === 'X') return pc });
         if (sample_delete.length === 0){
           to_delete.push(row['sample'])
         }
@@ -66,7 +70,7 @@
 
     // adding header
     var header = ['sample_name']
-    $.each(prep_colums, function(i, prep){
+    $.each(prep_columns, function(i, prep){
       header.push(prep_names[prep]);
     });
     information.push(header.join('\t'))
@@ -74,7 +78,7 @@
     // adding data
     $.each(rows, function (i, row){
       var line = [row['sample']]
-      $.each(prep_colums, function(i, prep){
+      $.each(prep_columns, function(i, prep){
         line.push(row[prep]);
       });
       information.push(line.join('\t'));
@@ -125,7 +129,6 @@
       }
     });
 
-
   function add_meta() {
     var metadata_category = $("#metadata_category").val();
     $.post("{% raw qiita_config.portal_dir %}/study/description/sample_summary/", {study_id: {{study_id}}, meta_col: metadata_category })