Merge pull request #263 from fo-code/data-tables-select

Select option for data tables

Author: uhafner

package-lock.json

@@ -10,6 +10,7 @@
     "datatables.net-buttons-bs5": "^2.2.2",
     "datatables.net-colreorder-bs5": "^1.5.5",
     "datatables.net-responsive-bs5": "^2.2.9",
+    "datatables.net-select-bs5": "^1.3.4",
     "datatables.mark.js": "^2.1.0",
     "mark.js": "^8.11.1",
     "remark-cli": "^10.0.1",

package.json

@@ -156,6 +156,14 @@
                   <directory>${project.basedir}/node_modules/datatables.net-responsive-bs5/js</directory>
                   <filtering>false</filtering>
                 </resource>
+                <resource>
+                  <directory>${project.basedir}/node_modules/datatables.net-select/js</directory>
+                  <filtering>false</filtering>
+                </resource>
+                <resource>
+                  <directory>${project.basedir}/node_modules/datatables.net-select-bs5/js</directory>
+                  <filtering>false</filtering>
+                </resource>
                 <resource>
                   <directory>${project.basedir}/node_modules/datatables.mark.js/dist</directory>
                   <filtering>false</filtering>
@@ -198,6 +206,10 @@
                   <directory>${project.basedir}/node_modules/datatables.net-responsive-bs5/css</directory>
                   <filtering>false</filtering>
                 </resource>
+                <resource>
+                  <directory>${project.basedir}/node_modules/datatables.net-select-bs5/css</directory>
+                  <filtering>false</filtering>
+                </resource>
               </resources>
             </configuration>
           </execution>

pom.xml

@@ -6,6 +6,7 @@
 import com.fasterxml.jackson.core.JsonProcessingException;
 import com.fasterxml.jackson.databind.ObjectMapper;
 import com.fasterxml.jackson.databind.annotation.JsonSerialize;
+import io.jenkins.plugins.datatables.options.SelectStyle;
 
 /**
  * Provides a configuration for the whole DataTable. This is merged with a default configuration in table.js.
@@ -18,6 +19,7 @@ public class TableConfiguration {
     private boolean useResponsive = false;
     private boolean useColReorder = false;
     private boolean useButtons = false;
+    private boolean useSelect = false;
 
     /**
      * Make the table responsive, i.e. the columns wrap over to a child column.
@@ -101,6 +103,31 @@ public boolean isUseButtons() {
         return useButtons;
     }
 
+    /**
+     * Enable selection.
+     *
+     * @param selectStyle
+     *          The {@link SelectStyle selection style}
+     *
+     * @return this {@link TableConfiguration} for chaining methods
+     *
+     * @see <a href="https://datatables.net/reference/option/select">https://datatables.net/reference/option/select</a>
+     */
+    public TableConfiguration select(final SelectStyle selectStyle) {
+        configuration.put("select", selectStyle.getStyle());
+        useSelect = true;
+        return this;
+    }
+
+    /**
+     * Returns whether select is configured to be used.
+     *
+     * @return true, if select should be used, false otherwise
+     */
+    public boolean isUseSelect() {
+        return useSelect;
+    }
+
     /**
      * Enable saving of the table state.
      *

src/main/java/io/jenkins/plugins/datatables/TableConfiguration.java

@@ -0,0 +1,50 @@
+package io.jenkins.plugins.datatables.options;
+
+/**
+ * The possible values of the <a href="https://datatables.net/reference/option/select.style">select.style</a> option,
+ * which is used for enabling the selection for datatables and setting its style (the default is {@link #OS}.
+ *
+ * @author Florian Orendi
+ */
+public enum SelectStyle {
+
+    /**
+     * Selection can only be performed via the API.
+     */
+    API("api"),
+
+    /**
+     * Only a single item can be selected, any other selected items will be automatically
+     * deselected when a new item is selected.
+     */
+    SINGLE("single"),
+
+    /**
+     * Multiple items can be selected. Selection is performed by simply clicking on the items to be selected.
+     */
+    MULTI("multi"),
+
+    /**
+     * Operating System (OS) style selection.
+     * This is the most comprehensive option and provides complex behaviours such as ctrl/cmd clicking
+     * to select / deselect individual items, shift clicking to select ranges
+     * and an unmodified click to select a single item.
+     */
+    OS("os"),
+
+    /**
+     * A hybrid between the {@link #OS} style and {@link #MULTI},
+     * allowing easy multi-row selection without immediate de-selection when clicking on a row.
+     */
+    MULTI_SHIFT("multi+shift");
+
+    private final String style;
+
+    SelectStyle(final String style) {
+        this.style = style;
+    }
+
+    public String getStyle() {
+        return style;
+    }
+}

src/main/java/io/jenkins/plugins/datatables/options/SelectStyle.java

@@ -0,0 +1,19 @@
+<?jelly escape-by-default='true'?>
+<!--
+Use it like <st:adjunct includes="io.jenkins.plugins.data-tables-select"/>
+-->
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
+
+  <j:new var="h" className="hudson.Functions"/>
+  ${h.initPageVariables(context)}
+
+  <st:adjunct includes="io.jenkins.plugins.jquery3"/>
+  <st:adjunct includes="io.jenkins.plugins.bootstrap5"/>
+  <st:adjunct includes="io.jenkins.plugins.data-tables"/>
+
+  <link type="text/css" rel="stylesheet" href="${resURL}/plugin/data-tables-api/css/select.bootstrap5.min.css"/>
+
+  <script type="text/javascript" src="${resURL}/plugin/data-tables-api/js/dataTables.select.min.js"/>
+  <script type="text/javascript" src="${resURL}/plugin/data-tables-api/js/select.bootstrap5.min.js"/>
+
+</j:jelly>

src/main/resources/io/jenkins/plugins/data-tables-select.jelly

@@ -81,3 +81,14 @@ div.details-control {
 .form-select-sm, .form-control-sm {
     margin: 0.2em;
 }
+
+/* ------------------------------------------------------------------------------------------------------------------- */
+/* DataTables select                                                                                                  */
+/* ------------------------------------------------------------------------------------------------------------------- */
+table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
+    background-color: #b4b4b4 !important;
+}
+
+table.dataTable tbody tr.selected, table.dataTable tbody th.selected, table.dataTable tbody td.selected {
+    color: black !important;
+}

src/main/webapp/css/jenkins-style.css

@@ -1,5 +1,6 @@
 package io.jenkins.plugins.datatables;
 
+import io.jenkins.plugins.datatables.options.SelectStyle;
 import org.junit.jupiter.api.Test;
 
 import static io.jenkins.plugins.datatables.TableConfigurationAssert.*;
@@ -32,6 +33,17 @@ void shouldCreateResponsiveConfiguration() {
         assertThat(configuration).isUseResponsive();
     }
 
+    @Test
+    void shouldCreateSelectConfiguration() {
+        TableConfiguration configuration = new TableConfiguration().select(SelectStyle.SINGLE);
+
+        assertThat(configuration).hasConfiguration("{\"select\":\"single\"}");
+        assertThat(configuration).isNotUseButtons();
+        assertThat(configuration).isNotUseColReorder();
+        assertThat(configuration).isNotUseResponsive();
+        assertThat(configuration).isUseSelect();
+    }
+
     @Test
     void shouldCreateColReorderConfiguration() {
         TableConfiguration configuration = new TableConfiguration()