Merge pull request #6 from opencobra/constructor_dev

add new feature: sorting table

Author: Yifang-Guo

curationTool/reactions/static/reactions/Home_page.css

@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const modal      = document.getElementById('deleteFlagModal');
+  const msg        = document.getElementById('deleteFlagMessage');
+  const closeBtn   = document.getElementById('closeDeleteFlagModal');
+  const confirmBtn = document.getElementById('confirmDeleteFlagBtn');
+
+  /* ---------- 1. delegated listener for every current/future flag ---------- */
+  document.addEventListener('click', evt => {
+    const icon = evt.target.closest('.flag-icon');
+    if (!icon) return;                             // not a flag click
+
+    modal.dataset.flagId      = icon.dataset.flagId;
+    modal.dataset.flagName   = icon.dataset.flagName;
+    modal.dataset.reactionId = icon.dataset.reactionId;
+
+    msg.textContent =
+      `Remove flag "${modal.dataset.flagName}" from this reaction?`;
+    modal.style.display = 'block';
+  });
+
+  /* ---------- 2. close modal ---------- */
+  closeBtn.addEventListener('click', () => {
+    modal.style.display = 'none';
+  });
+
+  /* ---------- 3. confirm deletion ---------- */
+  confirmBtn.addEventListener('click', () => {
+    fetch('/saved_reactions/remove_flag/', {
+      method : 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRFToken' : csrfToken
+      },
+      body: JSON.stringify({
+        user_id    : userID,
+        reaction_id: modal.dataset.reactionId,
+        flag_id    : modal.dataset.flagId
+      })
+    })
+    .then(r => r.json())
+    .then(data => {
+      if (data.status === 'success') {
+        location.reload();                 // or update the row in place
+      } else {
+        alert(data.message || 'Error removing flag.');
+      }
+    })
+    .catch(err => {
+      console.error(err);
+      alert('Something went wrong.');
+    });
+
+    modal.style.display = 'none';
+  });
+});

curationTool/reactions/static/reactions/js_savedreactions/delete_flag.js

@@ -33,19 +33,29 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     document.getElementById('AddFlagtosavedreaction').addEventListener('click', function() {
-        const selectedReactionIds = getSelectedReactionIds();  // Implement this function to retrieve selected reactions
+        const selectedReactionIds = Array.from(document.querySelectorAll('.reaction-checkbox:checked'))
+    .map(cb => cb.dataset.reactionId);  // Implement this function to retrieve selected reactions
         const selectedFlagElement = document.querySelector('.dropdown-trigger');
         var selectedFlagName = selectedFlagElement.textContent.trim();  
         const flagIcon = selectedFlagElement.querySelector('i');
-        var selectedFlagColor = rgbToHex(flagIcon.style.color);
+        let selectedFlagColor = null;
+
+        if (flagIcon && flagIcon.style && flagIcon.style.color) {
+            selectedFlagColor = rgbToHex(flagIcon.style.color);
+        }
+
+        function showAlert(message) {
+            document.getElementById('alertMessage').textContent = message;
+            document.getElementById('alertModal').style.display = "block";
+        }
 
         if (!selectedReactionIds.length) {
-            console.error('No reactions selected');
+            showAlert('Please select at least one reaction.');
             return;
         }
 
         if (selectedFlagName === 'None' || !selectedFlagColor) {
-            console.error('No flag selected or flag color missing');
+            showAlert('Please choose a valid flag before applying.');
             return;
         }
 
@@ -70,12 +80,20 @@ document.addEventListener('DOMContentLoaded', function() {
                 console.log('Flag added to selected reactions successfully');
                 location.reload();
             } else {
-                console.error(data.message);
+                alert(data.message || 'An error occurred while saving flags.');
             }
         })
-        .catch(error => console.error('Error:', error));
+        .catch(error => {
+            console.error('Error:', error);
+            alert('Something went wrong. Please try again later.');
+        });
+    });
+
+    document.querySelector('.close-alert-btn').addEventListener('click', function() {
+        document.getElementById('alertModal').style.display = "none";
     });
 
+
     function getSelectedReactionIds() {
         let selected = [];
         selected = checkedReactions;

curationTool/reactions/static/reactions/js_savedreactions/flag_saved_reaction.js

@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const table = document.getElementById('reactionList');
+  const tbody = table.querySelector('tbody');
+  const originalRows = Array.from(tbody.querySelectorAll('tr')); // Store initial order
+
+  const getValue = (row, key) => {
+    switch (key) {
+      case 'flag':
+        const icon = row.querySelector('.flag-icon');
+        return icon?.getAttribute('data-flag-name')?.toLowerCase() || 'zzz'; // 'zzz' pushes nulls to bottom
+      case 'subsystem':
+        return row.children[3]?.textContent.trim().toLowerCase() || 'zzz';
+      case 'substrates':
+        return row.children[4]?.textContent.trim().toLowerCase() || 'zzz';
+      case 'products':
+        return row.children[6]?.textContent.trim().toLowerCase() || 'zzz';
+      default:
+        return '';
+    }
+  };
+
+  document.getElementById('sortBy').addEventListener('change', () => {
+    const sortKey = document.getElementById('sortBy').value;
+
+    // Reset to original order if no sort selected
+    if (!sortKey) {
+      tbody.innerHTML = '';
+      originalRows.forEach((row) => tbody.appendChild(row.cloneNode(true)));
+      return;
+    }
+
+    const sortedRows = [...tbody.querySelectorAll('tr')].sort((a, b) => {
+      const aVal = getValue(a, sortKey);
+      const bVal = getValue(b, sortKey);
+      return aVal.localeCompare(bVal);
+    });
+
+    tbody.innerHTML = '';
+
+    sortedRows.forEach((row) => tbody.appendChild(row));
+
+    rebindCheckboxListeners();
+  });
+});