diff --git a/girder/girder_large_image/web_client/stylesheets/itemList.styl b/girder/girder_large_image/web_client/stylesheets/itemList.styl index a8613cb3b..3e79d284b 100644 --- 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 index 5ce81c11c..cc288e1d7 100644 --- 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 index a0b61f922..e3cad74f7 100644 --- 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;