diff --git a/docs/girder_config_options.rst b/docs/girder_config_options.rst index 271926519..1130b5353 100644 --- a/docs/girder_config_options.rst +++ b/docs/girder_config_options.rst @@ -96,3 +96,32 @@ This is used to specify how items appear in item lists. There are two settings, # the length of arrays. value: gloms.length title: Number of Gloms + defaultSort: + # The default lists a sort order for sortable columns. This must have + # type, value, and dir for each entry, where dir is either "up" or + # "down". + - + type: metadata + value: Stain + dir: up + - + type: record + value: name + dir: down + itemListDialog: + # Show these columns + columns: + - + type: image + value: thumbnail + title: Thumbnail + - + type: record + value: name + - + type: metadata + value: Stain + format: text + - + type: record + value: size diff --git a/girder/girder_large_image/web_client/templates/itemList.pug b/girder/girder_large_image/web_client/templates/itemList.pug index 15f4c2a44..f5eb37d6d 100644 --- a/girder/girder_large_image/web_client/templates/itemList.pug +++ b/girder/girder_large_image/web_client/templates/itemList.pug @@ -43,7 +43,7 @@ ul.g-item-list.li-item-list if showSizes .g-item-size= formatSize(item.get('size')) else if column.type === 'image' && item.get('largeImage') - .large_image_thumbnail(extra-image=column.value !== 'thumbnail' ? column.value : undefined, style=column.width ? `width: ${column.width}px` : undefined, g-item-cid=column.value === 'thumbnail' ? item.cid : undefined) + .large_image_thumbnail(extra-image=column.value !== 'thumbnail' ? column.value : undefined, style=`width: ${column.width || 160}px; height: ${column.height || 100}px`, g-item-cid=column.value === 'thumbnail' ? item.cid : undefined) - var imageName = column.value === 'thumbnail' ? column.value : `images/${column.value}`; img.waiting(deferred-src=`${apiRoot}/item/${item.id}/tiles/${imageName}?width=${column.width || 160}&height=${column.height || 100}`) else if column.type === 'metadata' diff --git a/girder/girder_large_image/web_client/views/itemList.js b/girder/girder_large_image/web_client/views/itemList.js index e3cad74f7..5ea62ae60 100644 --- a/girder/girder_large_image/web_client/views/itemList.js +++ b/girder/girder_large_image/web_client/views/itemList.js @@ -109,7 +109,22 @@ wrap(ItemListWidget, 'render', function (render) { return this._liconfig ? (this.$el.closest('.modal-dialog').length ? this._liconfig.itemListDialog : this._liconfig.itemList) : undefined; }; + this._setSort = () => { + 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}); + }; + function itemListRender() { + if (!this._lastSort && this._confList() && this._confList().defaultSort && this._confList().defaultSort.length) { + this._lastSort = this._confList().defaultSort; + this._setSort(); + return; + } this.$el.html(ItemListTemplate({ items: this.collection.toArray(), isParentPublic: this.public, @@ -199,13 +214,7 @@ function sortColumn(evt) { } 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}); + this._setSort(); } export default ItemListWidget; diff --git a/test/test_files/.large_image_config.yaml b/test/test_files/.large_image_config.yaml index 9f5012ef1..0dee9d424 100644 --- a/test/test_files/.large_image_config.yaml +++ b/test/test_files/.large_image_config.yaml @@ -37,6 +37,15 @@ access: - type: record value: controls + defaultSort: + - + type: metadata + value: Classification + dir: up + - + type: record + value: name + dir: down itemListDialog: # Show these columns columns: