How can I make workflow task tables sortable in DSpace?

Question

In DSpace XMLUI with a Mirage 2 theme, I would like the "tasks in the pool" and "tasks you own" tables on the submissions page to be sortable and filterable. How do I do that?

Answer 1

The strategy differs slightly on whether the traditional DSpace workflow is used vs the configurable workflow.

The answers below are for DSpace 5; the changes may need to be slightly different for other DSpace versions.

Unique IDs for task tables (traditional DSpace workflow only)

The first issue to fix is that the two tables have the same ID. Change dspace-xmlui/src/main/java/org/dspace/app/xmlui/aspect/xmlworkflow/Submissions.java to create different IDs for the two tables.

        // Tasks you own
-       Table table = workflow.addTable("workflow-tasks",ownedItems.size() + 2,5);
+       Table table = workflow.addTable("workflow-tasks-owned",ownedItems.size() + 2,5);    
        table.setHead(T_w_head2);

And likewise for Tasks in the pool further down in the same file.

Fix table structure

Add a few templates to that ensure the tables have thead / tbody / tfoot structure.

   <xsl:template match="dri:table[@n='workflow-tasks-pooled' or @n='workflow-tasks-owned']">
           <xsl:apply-templates select="dri:head"/>
           <div class="table-responsive">
                   <table>
                           <xsl:call-template name="standardAttributes">
                                   <xsl:with-param name="class">ds-table table table-striped table-hover</xsl:with-param>
                           </xsl:call-template>
                           <xsl:apply-templates select="dri:row[1]"/>
                           <tbody>
                                   <xsl:apply-templates select="dri:row[position()!=1 and position()!=last()]"/>
                           </tbody>
                           <xsl:apply-templates select="dri:row[last()]"/>
                   </table>
           </div>
   </xsl:template>

   <xsl:template match="dri:table[@n='workflow-tasks-pooled' or @n='workflow-tasks-owned']/dri:row[@role='header']">
           <thead>
           <tr class="ds-table-header-row">
                   <xsl:apply-templates select="dri:cell"/>
           </tr>
           </thead>
   </xsl:template>

   <xsl:template match="dri:table[@n='workflow-tasks-pooled' or @n='workflow-tasks-owned']/dri:row[last()]">
           <tfoot>
                   <tr>
                           <xsl:apply-templates select="dri:cell"/>
                   </tr>
           </tfoot>
   </xsl:template>

Fix JavaScript/CSS paths

The imports in dspace-xmlui-mirage2/src/main/webapp/styles/classic_mirage_color_scheme/_main.scss aren't quite right. Fix them like so:

index bc58570..95444c7 100644
--- a/dspace-xmlui-mirage2/src/main/webapp/styles/classic_mirage_color_scheme/_main.scss
+++ b/dspace-xmlui-mirage2/src/main/webapp/styles/classic_mirage_color_scheme/_main.scss
@@ -31,8 +31,8 @@
 @import "classic_mirage_color_scheme/vocabulary-support";

 @import "classic_mirage_color_scheme/jquery_ui";
-@import "classic_mirage_color_scheme/dataTables.bootstrap";
+//@import "classic_mirage_color_scheme/dataTables.bootstrap";
 @import "shared/dspace-bootstrap-tweaks";
 @import "../vendor/jquery-ui/themes/base/jquery-ui.css";
-@import "../vendor/datatables/media/css/jquery.dataTables.min.css";
+@import "../vendor/datatables/media/css/dataTables.bootstrap.css";
 @import "style";

Activate datatables functionality

Then, activate the datatables functionality by adding the following to theme.js. Swap in configuration that works for you -- the changes below will

• enable pagination and filtering when there are at least 5 items in the table;
• allow sorting by all columns except the first (which contains checkboxes);
• disable sorting by default; and
• put in some language tweaks.

You will need to adjust the IDs if you're using the traditional workflow.

$(function() {
var poolTable = $('#aspect_xmlworkflow_Submissions_table_workflow-tasks-pooled');
poolTable.DataTable({
    "paging": poolTable.find("tbody tr").size() >= 5,
    "autoWidth": true,
    "info": false,
    "searching": poolTable.find("tbody tr").size() >= 5,
    "columnDefs": [
        { targets: 0, orderable: false, searchable: false }
    ],
    "order": [],
    "oLanguage" : {
        "sSearch": "Filter tasks:"
    }
});
poolTable.closest(".dataTables_wrapper").before("<p class='help'>Click on a column header to sort the table by that column.</p>");

var ownedTable = $('#aspect_xmlworkflow_Submissions_table_workflow-tasks-owned');
ownedTable.DataTable({
    "paging": ownedTable.find("tbody tr").size() >= 5,
    "autoWidth": true,
    "info": false,
    "searching": ownedTable.find("tbody tr").size() >= 5,
    "columnDefs": [
        { targets: 0, orderable: false, searchable: false }
    ],
    "order": []
});
ownedTable.closest(".dataTables_wrapper").before("<p class='help'>Click on a column header to sort the table by that column.</p>");
});