From a6f2fc274be41cc90c97a392f55ed9565ea68e11 Mon Sep 17 00:00:00 2001
From: meeusen <meeusen@users.noreply.github.com>
Date: Sun, 30 Jul 2023 18:21:02 +0200
Subject: [PATCH] Add child row for properties (#539)

* Add child row for properties

- move initalisation of datatables to javascript
- hide the properties column
- show all hidden columns in the child row

* Move datatables init back to datatables-api-plugin

The datatables-api-plugin handles some local/session storage itself to
save the state of the DataTable, which is needed to e.g. remember the
search, order of the table...

---------

Co-authored-by: Benjamin Meeusen <benjamin.meeusen@septentrio.com>
Co-authored-by: Martin Pokorny <89339813+mPokornyETM@users.noreply.github.com>
---
 .../tableResources/table.jelly                | 33 ++++++++++++----
 src/main/webapp/js/lockable-resources.js      | 38 +++++++++++++++++++
 2 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/src/main/resources/org/jenkins/plugins/lockableresources/actions/LockableResourcesRootAction/tableResources/table.jelly b/src/main/resources/org/jenkins/plugins/lockableresources/actions/LockableResourcesRootAction/tableResources/table.jelly
index d42d729d4..cf2f67428 100644
--- a/src/main/resources/org/jenkins/plugins/lockableresources/actions/LockableResourcesRootAction/tableResources/table.jelly
+++ b/src/main/resources/org/jenkins/plugins/lockableresources/actions/LockableResourcesRootAction/tableResources/table.jelly
@@ -30,6 +30,7 @@ THE SOFTWARE.
   xmlns:st="jelly:stapler"
   >
   <st:adjunct includes="io.jenkins.plugins.data-tables"/>
+
   <link rel="stylesheet" href="${resURL}/plugin/lockable-resources/css/style.css"/>
 
   <div class="table-responsive">
@@ -39,7 +40,20 @@ THE SOFTWARE.
       data-remember-search-text="true"
       isLoaded="true"
       data-columns-definition="[null, null, null, null, null, null, null]"
-      data-table-configuration="{}"
+      data-table-configuration='
+      {
+        "responsive": {
+          "details": {
+            "type": "column"
+          }
+        },
+        "columnDefs": [
+            { "targets": "index", "className": "dt-control" },
+            { "targets": "properties", "visible": false }
+        ],
+        "order": [ 0, "asc" ],
+        "stateSave": true
+      }'
     >
       <colgroup>
         <!-- index -->
@@ -58,13 +72,13 @@ THE SOFTWARE.
         <col action="col-width-1 text-end" />
       </colgroup>
       <thead>
-        <th>${%resources.table.column.index}</th>
-        <th>${%resources.table.column.resource}</th>
-        <th>${%resources.table.column.status}</th>
-        <th>${%resources.table.column.timestamp}</th>
-        <th>${%resources.table.column.labels}</th>
-        <th>${%resources.table.column.properties}</th>
-        <th>${%resources.table.column.action}</th>
+        <th data-class-name="index">${%resources.table.column.index}</th>
+        <th data-class-name="resource">${%resources.table.column.resource}</th>
+        <th data-class-name="status">${%resources.table.column.status}</th>
+        <th data-class-name="timestamp">${%resources.table.column.timestamp}</th>
+        <th data-class-name="labels">${%resources.table.column.labels}</th>
+        <th data-class-name="properties">${%resources.table.column.properties}</th>
+        <th data-class-name="action">${%resources.table.column.action}</th>
       </thead>
       <tbody>
         <j:forEach var="resource" items="${it.resources}" varStatus="idx">
@@ -320,4 +334,7 @@ THE SOFTWARE.
     </table>
   </div>
   <script type="text/javascript" src="${resURL}/plugin/lockable-resources/js/lockable-resources.js"/>
+
+
+
 </j:jelly>
diff --git a/src/main/webapp/js/lockable-resources.js b/src/main/webapp/js/lockable-resources.js
index 4f9c863cb..2a87cec61 100644
--- a/src/main/webapp/js/lockable-resources.js
+++ b/src/main/webapp/js/lockable-resources.js
@@ -42,3 +42,41 @@ function replaceNote(element, resourceName) {
   });
   return false;
 }
+
+function format(d) {
+  // `d` is the original data object for the row
+  // show all the hidden columns in the child row
+  var hiddenRows = getHiddenColumns();
+  return hiddenRows.map(i => d[i]).join("<br>");
+}
+
+function getHiddenColumns() {
+    // returns the indexes of all hidden rows
+    var indexes = new Array();
+
+    jQuery("#lockable-resources").DataTable().columns().every( function () {
+        if (!this.visible())
+            indexes.push(this.index())
+    });
+
+    return indexes;
+}
+
+jQuery(document).ready(function() {
+  // Add event listener for opening and closing details
+  jQuery('#lockable-resources tbody').on('click', 'td.dt-control', function () {
+      var tr = jQuery(this).closest('tr');
+      var row = jQuery("#lockable-resources").DataTable().row(tr);
+
+      // child row example taken from https://datatables.net/examples/api/row_details.html
+      if (row.child.isShown()) {
+          // This row is already open - close it
+          row.child.hide();
+          tr.removeClass('shown');
+      } else {
+          // Open this row
+          row.child(format(row.data())).show();
+          tr.addClass('shown');
+      }
+  });
+} );