Merge pull request #972 from girder/configured-item-lists

Use configured item lists, even if there are no large images.
girder · Sep 29, 2022 · 2bb83a4 · 2bb83a4
2 parents 69b39cb + ae84897
commit 2bb83a4
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Improvements
 - Fallback when server notification streams are turned off ([#967](../../pull/967))
 - Show and edit yaml and json files using codemirror ([#969](../../pull/969))
+- Show configured item lists even if there are no large image s ([#972](../../pull/972))
 
 ## 1.17.0
 

diff --git a/docs/girder_config_options.rst b/docs/girder_config_options.rst
@@ -125,3 +125,6 @@ This is used to specify how items appear in item lists.  There are two settings,
         -
           type: record
           value: size
+
+If there are no large images in a folder, none of the image columns will appear.
+
diff --git a/girder/girder_large_image/web_client/templates/itemList.pug b/girder/girder_large_image/web_client/templates/itemList.pug
@@ -3,54 +3,56 @@ ul.g-item-list.li-item-list
     if checkboxes
       span.li-item-list-header
     for column in itemList.columns
-      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.title !== undefined
-          = column.title
-        else
-          = `${column.value.substr(0, 1).toUpperCase()}${column.value.substr(1)}`
+      if column.type !== 'image' || hasAnyLargeImage
+        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.title !== undefined
+            = column.title
+          else
+            = `${column.value.substr(0, 1).toUpperCase()}${column.value.substr(1)}`
   each item in items
     li.g-item-list-entry(class=(highlightItem && item.id === selectedItemId ? 'g-selected' : ''), public=(isParentPublic ? 'true' : 'false'))
       if checkboxes
         span.li-item-list-cell
           input.g-list-checkbox(type="checkbox", g-item-cid=item.cid)
       for column in itemList.columns
-        -
-          var divtype = column.type !== 'record' || column.value !== 'controls' ? 'a' : 'span';
-          var classes = divtype == 'a' ? ['g-item-list-link']: [];
-          if (('' + column.type + column.value).match(/^[a-zA-Z][a-zA-Z0-9-_]*$/))  classes.push(`li-column-${column.type}-${column.value}`);
-          if (('' + column.type).match(/^[a-zA-Z][a-zA-Z0-9-_]*$/))  classes.push(`li-column-${column.type}`);
-        #{divtype}.li-item-list-cell(class=classes.join(' '), g-item-cid=item.cid, href=`#item/${item.id}`)
-          if column.type === 'record'
-            if column.value === 'name'
-              span.g-item-list-link
-                i.icon-doc-text-inv
-                = item.name()
-            else if column.value === 'controls'
-              if downloadLinks
-                a(title="Download item", href=item.downloadUrl())
-                  i.icon-download
-              if viewLinks
-                a.g-view-inline(title="View in browser", target="_blank", rel="noopener noreferrer",
-                    href=item.downloadUrl({contentDisposition: 'inline'}))
-                  i.icon-eye
-            else if column.value === 'size'
-              .g-item-size= formatSize(item.get('size'))
-            else if column.value === 'description'
-              = item.get(column.value)
-          else if column.type === 'image' && item.get('largeImage')
-            .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'
-            span.large_image_metadata
-              -
-                let value = item.get('meta') || {}
-                column.value.split('.').forEach((part) => {
-                  value = (value || {})[part];
-                })
-              = value
+        if column.type !== 'image' || hasAnyLargeImage
+          -
+            var divtype = column.type !== 'record' || column.value !== 'controls' ? 'a' : 'span';
+            var classes = divtype == 'a' ? ['g-item-list-link']: [];
+            if (('' + column.type + column.value).match(/^[a-zA-Z][a-zA-Z0-9-_]*$/))  classes.push(`li-column-${column.type}-${column.value}`);
+            if (('' + column.type).match(/^[a-zA-Z][a-zA-Z0-9-_]*$/))  classes.push(`li-column-${column.type}`);
+          #{divtype}.li-item-list-cell(class=classes.join(' '), g-item-cid=item.cid, href=`#item/${item.id}`)
+            if column.type === 'record'
+              if column.value === 'name'
+                span.g-item-list-link
+                  i.icon-doc-text-inv
+                  = item.name()
+              else if column.value === 'controls'
+                if downloadLinks
+                  a(title="Download item", href=item.downloadUrl())
+                    i.icon-download
+                if viewLinks
+                  a.g-view-inline(title="View in browser", target="_blank", rel="noopener noreferrer",
+                      href=item.downloadUrl({contentDisposition: 'inline'}))
+                    i.icon-eye
+              else if column.value === 'size'
+                .g-item-size= formatSize(item.get('size'))
+              else if column.value === 'description'
+                = item.get(column.value)
+            else if column.type === 'image' && item.get('largeImage')
+              .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'
+              span.large_image_metadata
+                -
+                  let value = item.get('meta') || {}
+                  column.value.split('.').forEach((part) => {
+                    value = (value || {})[part];
+                  })
+                = value
   if (hasMore && !paginated)
     li.g-show-more
       a.g-show-more-items

diff --git a/girder/girder_large_image/web_client/views/itemList.js b/girder/girder_large_image/web_client/views/itemList.js
@@ -283,6 +283,7 @@ wrap(ItemListWidget, 'render', function (render) {
             selectedItemId: (this._selectedItem || {}).id,
             paginated: this._paginated,
             apiRoot: getApiRoot(),
+            hasAnyLargeImage: this._hasAnyLargeImage,
             itemList: this._confList(),
             sort: this._lastSort
         }));
@@ -310,16 +311,16 @@ wrap(ItemListWidget, 'render', function (render) {
         return itemListRender.apply(this, _.rest(arguments));
     }
 
-    render.call(this);
     largeImageConfig.getSettings((settings) => {
         var items = this.collection.toArray();
         var parent = this.$el;
         this._hasAnyLargeImage = !!_.some(items, function (item) {
             return item.has('largeImage');
         });
-        if (this._confList() && this._hasAnyLargeImage) {
+        if (this._confList()) {
             return itemListRender.apply(this, _.rest(arguments));
         }
+        render.call(this);
         if (settings['large_image.show_thumbnails'] === false ||
                 this.$('.large_image_container').length > 0) {
             return this;