Adding a filter for the modal and the TPL table

SaillantNicolas · Sep 19, 2024 · 32d2cf3 · 32d2cf3
1 parent f7a42a8
commit 32d2cf3
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 6 deletions.
diff --git a/Maintenance/test_handling/Summary_Script.js b/Maintenance/test_handling/Summary_Script.js
@@ -182,14 +182,20 @@ function platformContainer(platforms) {
         const $tplTable = $('<table>', { class: 'tpl-table', css: { display: 'none' } }).appendTo($container);
         const $thead = $('<thead>').appendTo($tplTable);
         const $tbody = $('<tbody>').appendTo($tplTable);
-        $('<tr>').append('<th>Library</th><th>Version</th><th>Status</th>').appendTo($thead);
+        const $headerRow = $('<tr>');
+        $('<th>', { class: 'sortable', 'data-sort': 0, text: 'Library' }).appendTo($headerRow);
+        $('<th>', { class: 'sortable', 'data-sort': 1, text: 'Version' }).appendTo($headerRow);
+        $('<th>', { class: 'sortable', 'data-sort': 2, text: 'Status' }).appendTo($headerRow);
+        $headerRow.appendTo($thead);
         tplArray.forEach(tpl => {
             $('<tr>').append(
                 $('<td>').html(`<a href="#" class="tpl-link" data-tpl="${tpl.name}">${tpl.name}</a>`),
                 $('<td>').text(tpl.version || 'N/A'),
                 $('<td>').text(tpl.status)
             ).appendTo($tbody);
         });
+        initializeTableSorting($thead, $tbody);
+        $thead.find('.sortable').first().click();
         $('.tpl-link').click(function(event) {
             event.preventDefault();
             const tplName = $(this).data('tpl');
@@ -249,19 +255,26 @@ function closeAll() {
 function showVersionsForTPL(tplName) {
     const $modal = $('#tplModal');
     const $modalTitle = $('#tplModalTitle');
-    const $modalBody = $('#tplModalBody');
-    $modalTitle.text(`Versions of ${tplName} across platforms`);
+    const $modalTable = $modal.find('table');
+    const $modalBody = $modalTable.find('tbody');
     $modalBody.empty();
+    $modalTitle.text(`Versions of ${tplName} across platforms`);
     let tplFound = false;
     window.data.platforms.forEach(platform => {
         const matchingTPL = platform.tpl.find(tpl => tpl.name === tplName);
         if (matchingTPL) {
             tplFound = true;
-            $modalBody.append(`<p><strong>Platform:</strong> ${platform.name} | <strong>Version:</strong> ${matchingTPL.version || 'N/A'} | <strong>Status:</strong> ${matchingTPL.status}</p>`);
+            $modalBody.append(`
+                <tr class="modal-table-row">
+                    <td>${platform.name}</td>
+                    <td>${matchingTPL.version || 'N/A'}</td>
+                    <td><strong>${matchingTPL.status}</strong></td>
+                </tr>
+            `);
         }
     });
     if (!tplFound) {
-        $modalBody.append('<p>No versions of this TPL found across platforms.</p>');
+        $modalBody.append('<tr><td colspan="3">No versions of this TPL found across platforms.</td></tr>');
     }
     $modal.show();
     $('.close').click(function() {
@@ -272,6 +285,28 @@ function showVersionsForTPL(tplName) {
             $modal.hide();
         }
     });
+    const $thead = $modalTable.find('thead');
+    initializeTableSorting($thead, $modalBody);
+    $thead.find('.sortable').first().click();
+}
+
+function initializeTableSorting($thead, $tbody) {
+    let sortOrder = 1;
+    $thead.find('.sortable').click(function() {
+    const columnIndex = $(this).data('sort');
+    const rows = $tbody.find('tr').get();
+    rows.sort((a, b) => {
+        const keyA = $(a).children('td').eq(columnIndex).text().toUpperCase();
+        const keyB = $(b).children('td').eq(columnIndex).text().toUpperCase();
+        if (keyA < keyB) return -1 * sortOrder;
+        if (keyA > keyB) return 1 * sortOrder;
+        return 0;
+    });
+    $.each(rows, (_index, row) => {
+        $tbody.append(row);
+    });
+    sortOrder *= -1;
+    });
 }
 
 function main() {

diff --git a/Maintenance/test_handling/create_testresult_page b/Maintenance/test_handling/create_testresult_page
@@ -843,7 +843,16 @@ sub create_summary_page {
             <div class="modal-content">
                 <span class="close">&times;</span>
                 <h2 id="tplModalTitle">Versions of TPL</h2>
-                <div id="tplModalBody"></div>
+                <table class="modaltable">
+                    <thead>
+                        <tr>
+                            <th class="modalHeader sortable" data-sort="0">Platform</th>
+                            <th class="modalHeader sortable" data-sort="1">Version</th>
+                            <th class="modalHeader sortable" data-sort="2">Status</th>
+                        </tr>
+                    </thead>
+                    <tbody class="modalBody"></tbody>
+                </table>
             </div>
         </div>
         <input type="text" id="searchInput" placeholder="Search ..." autocomplete="off" onkeypress="if(event.keyCode==13) search()">

diff --git a/Maintenance/test_handling/testresult.css b/Maintenance/test_handling/testresult.css
@@ -170,6 +170,11 @@ TABLE.result TD > a.package_name {
     color: #1A0DAB;
 }
 
+.sortable{
+    cursor: pointer;
+    text-decoration: underline;
+}
+
 /* TPL Modal */
 .modal {
     display: none;
@@ -215,4 +220,26 @@ TABLE.result TD > a.package_name {
     margin: 10px 0;
     font-size: 14px;
     color: #555;
+}
+
+.modaltable{
+    border-collapse: collapse;
+    cellspacing: 0;
+}
+
+.modalHeader{
+    text-align: center;
+    width: auto;
+}
+
+.modalBody {
+    text-align: center;
+}
+
+.modal-table-row {
+    border-bottom: 2px ridge #000;
+}
+
+.modal-table-row td {
+    padding: 7px;
 }