Make some columns sortable.

This should add additional features later: - A default sort from the config file - Sort stored in the route so that navigating away and coming back will restore the sort.
girder · Aug 10, 2022 · 3bda156 · 3bda156
1 parent f2fc24d
commit 3bda156
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/girder/girder_large_image/web_client/stylesheets/itemList.styl b/girder/girder_large_image/web_client/stylesheets/itemList.styl
@@ -28,6 +28,15 @@ ul.g-item-list
         text-align center
         border-bottom 1px solid #888
         padding 0 5px
+        &.sortable
+          &:after
+            color black
+            content "\002b65"
+            padding-left 5px
+          &.down:after
+            content "\002b63"
+          &.up:after
+            content "\002b61"
       >span.li-item-list-cell
         display table-cell
         padding-top 4px

diff --git a/girder/girder_large_image/web_client/templates/itemList.pug b/girder/girder_large_image/web_client/templates/itemList.pug
@@ -3,7 +3,11 @@ ul.g-item-list.li-item-list
     if checkboxes
       span.li-item-list-header
     for column in itemList.columns
-      span.li-item-list-header
+      span.li-item-list-header(
+          class=((column.type === 'record' && column.value !== 'controls') || column.type === 'metadata' ? 'sortable' : '') +
+            ' ' +
+            (sort && sort[0].type === column.type && sort[0].value === column.value ? sort[0].dir : ''),
+          column_type=column.type, column_value=column.value)
         if column.type === 'record'
           if column.title !== undefined
             = column.title
@@ -26,14 +30,9 @@ ul.g-item-list.li-item-list
         span.li-item-list-cell(class=(('' + column.type + column.value).match(/^[a-zA-Z][a-zA-Z0-9-_]*$/) ? `li-column-${column.type}-${column.value}` : '') + ' ' + (('' + column.type).match(/^[a-zA-Z][a-zA-Z0-9-_]*$/) ? `li-column-${column.type}` : ''))
           if column.type === 'record'
             if column.value === 'name'
-              if downloadLinks || viewLinks
-                a.g-item-list-link(g-item-cid=item.cid, href=`#item/${item.id}`)
-                  i.icon-doc-text-inv
-                  = item.name()
-              else
-                a.g-item-list-link(g-item-cid=item.cid, href='#item/' + item.id)
-                  i.icon-doc-text-inv
-                  = item.name()
+              a.g-item-list-link(g-item-cid=item.cid, href=`#item/${item.id}`)
+                i.icon-doc-text-inv
+                = item.name()
             else if column.value === 'controls'
               if downloadLinks
                 a(title="Download item", href=item.downloadUrl())

diff --git a/girder/girder_large_image/web_client/views/itemList.js b/girder/girder_large_image/web_client/views/itemList.js
@@ -25,6 +25,8 @@ wrap(ItemListWidget, 'initialize', function (initialize, settings) {
         this._liconfig = val || {};
         this.render();
     });
+    this.events['click .li-item-list-header.sortable'] = (evt) => sortColumn.call(this, evt);
+    this.delegateEvents();
 });
 
 wrap(ItemListWidget, 'render', function (render) {
@@ -121,7 +123,8 @@ wrap(ItemListWidget, 'render', function (render) {
             selectedItemId: (this._selectedItem || {}).id,
             paginated: this._paginated,
             apiRoot: getApiRoot(),
-            itemList: this._confList()
+            itemList: this._confList(),
+            sort: this._lastSort
         }));
 
         const parent = this.$el;
@@ -181,4 +184,28 @@ wrap(ItemListWidget, 'render', function (render) {
     });
 });
 
+function sortColumn(evt) {
+    const header = $(evt.target);
+    const entry = {
+        type: header.attr('column_type'),
+        value: header.attr('column_value')
+    };
+    const curDir = header.hasClass('down') ? 'down' : header.hasClass('up') ? 'up' : null;
+    const nextDir = curDir === 'down' ? 'up' : 'down';
+    header.toggleClass('down', nextDir === 'down').toggleClass('up', nextDir === 'up');
+    entry.dir = nextDir;
+    if (!this._lastSort) {
+        this._lastSort = [];
+    }
+    this._lastSort = this._lastSort.filter((e) => e.type !== entry.type || e.value !== entry.value);
+    this._lastSort.unshift(entry);
+    this.collection.offset = 0;
+    this.collection.comparator = _.constant(0);
+    this.collection.sortField = JSON.stringify(this._lastSort.map((e) => [
+        (e.type === 'metadata' ? 'meta.' : '') + e.value,
+        e.dir === 'down' ? 1 : -1
+    ]));
+    this.collection.fetch({folderId: this.parentView.parentModel.id});
+}
+
 export default ItemListWidget;