@girder/core 3.1.0 → 3.1.12

package/collections/Collection.js

@@ -48,6 +48,11 @@ var Collection = Backbone.Collection.extend({
      */
     pageOffsetStack: null,
 
+    /**
+     * Number of items in the collection returned by 'girder-total-count' header
+     */
+    _totalCount: 0,
+
     /**
      * Returns a boolean of whether or not this collection has previous pages,
      * i.e. if the offset of the current page start is > 0
@@ -69,7 +74,15 @@ var Collection = Backbone.Collection.extend({
     hasNextPage: function () {
         return this._hasMorePages;
     },
-
+    /**
+     *  This value is populated whenever the list length exceeds the pageLimit.
+     *  It is used to determine how many pages are needed based on the page limit
+     *  it is retrieved from the response header 'girder-total-count'
+     *  @returns {number} total number of items retrieved
+     */
+    getTotalCount: function () {
+        return this._totalCount || 0;
+    },
     /**
      * Fetch the previous page of this collection, emitting g:changed when done.
      */
@@ -103,7 +116,7 @@ var Collection = Backbone.Collection.extend({
     },
 
     /**
-     * Return the 0-indexed page number of the current page. Add 1 to this
+     * @returns {number} the 0-indexed page number of the current page. Add 1 to this
      * result when displaying it to the user.
      *
      * If this collection hasn't been fully initialized (i.e.: before any pages
@@ -119,6 +132,20 @@ var Collection = Backbone.Collection.extend({
         return Math.ceil((this.offset - this.length) / this.pageLimit);
     },
 
+    /**
+     * Sets a specific pagenumber for loading by caluclating the offset
+     * @param {Number} pageNumber The 0 indexed page that should be loaded based on the pageLimit size
+     * @param {Object} params Additional parameters to pass to the fetch call
+     * @returns {Promise} a fetch promise to retrieve more data
+     */
+    fetchPage: function (pageNumber, params) {
+        // Make sure the page Number is within range, pageNumber is indexed at 0
+        if (!this.append && pageNumber * this.pageLimit < this._totalCount && pageNumber >= 0) {
+            this.offset = pageNumber * this.pageLimit;
+            return this.fetch(_.extend({}, this.params, params || {}));
+        }
+    },
+
     /**
      * Fetches the next page of this collection, replacing the existing models
      * of this collection with the requested page. If the next page contains
@@ -169,6 +196,7 @@ var Collection = Backbone.Collection.extend({
                     // This means we have more pages to display still. Pop off
                     // the extra that we fetched.
                     list.pop();
+                    this._totalCount = xhr.getResponseHeader('girder-total-count');
                     this._hasMorePages = true;
                 } else {
                     this._hasMorePages = false;

package/collections/UserCollection.js

@@ -16,7 +16,7 @@ var UserCollection = Collection.extend({
             method: 'GET'
         })
             .then((resp) => {
-                return resp['nUsers'];
+                return resp.nUsers;
             });
     }
 });

package/dialog.js

@@ -92,7 +92,7 @@ function confirm(params) {
     } else {
         el.text(params.text);
     }
-    if (params['msgConfirmation']) {
+    if (params.msgConfirmation) {
         if (params.escapedHtml) {
             $('.g-additional-text').html(params.additionalText);
         } else {
@@ -101,7 +101,7 @@ function confirm(params) {
     }
 
     $('#g-confirm-button').off('click').on('click', function () {
-        if (params['msgConfirmation']) {
+        if (params.msgConfirmation) {
             const key = `${params.yesText.toUpperCase()} ${params.name}`;
             const msg = $('#g-confirm-text').val();
             if (msg.toUpperCase() === key.toUpperCase()) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@girder/core",
-    "version": "3.1.0",
+    "version": "3.1.12",
     "description": "Extensible data management platform",
     "homepage": "https://girder.readthedocs.org",
     "bugs": {
@@ -18,7 +18,7 @@
         "bootstrap-switch": "~3.3.4",
         "eonasdan-bootstrap-datetimepicker": "~4.17",
         "@girder/fontello": "*",
-        "jquery": "~3.2.1",
+        "jquery": "~3.5.1",
         "jsoneditor": "~5.9.3",
         "moment": "~2.24.0",
         "moment-timezone": "~0.5.27",

package/stylesheets/widgets/hierarchyWidget.styl

@@ -1,6 +1,10 @@
 .g-hierarchy-widget
   border 1px solid #eaeaea
 
+  .g-hierarchy-sticky
+    position sticky
+    z-index 10
+  
   .g-hierarchy-actions-header
     background linear-gradient(to bottom, #e6e6e6 0, #f7f7f7 8px)
     padding 4px 5px 3px
@@ -21,6 +25,26 @@
   .g-folder-header-buttons
     float right
 
+  .g-hierarachy-paginated-bar
+    background-color #eaebea
+    .g-hierarchy-pages-header
+      .g-hierarchycenter
+        margin auto
+        text-align center
+        .pagination
+          display inline-block
+          vertical-align middle
+          margin 0
+          padding 0
+          border-radius 4px
+        .g-page-next, .g-page-prev
+          a
+            padding 8px 12px
+        #g-page-selection-input
+          margin-left 3px
+          margin-right 3px
+      
+
   .g-hierarchy-breadcrumb-bar
     ol.breadcrumb
       margin-bottom 0
@@ -68,6 +92,10 @@
         right -3px
         padding 0 0.3em
 
+  .g-folder-list-container, .g-item-list-container
+    position relative
+    z-index 0
+
   .g-folder-list, .g-item-list, .g-file-list
     margin 0
     padding 0

package/templates/widgets/hierarchyPaginated.pug

@@ -0,0 +1,19 @@
+.g-hierarchy-pages-header
+  .g-hierarchycenter
+    ul.pagination.pagination-sm
+      if (currentPage >1 && !disabled)
+        li.g-page-prev
+          a#g-previous-paginated « Prev
+      else
+        li.g-page-prev.disabled
+          a#g-previous-paginated « Prev
+      li
+        span Page:
+          input#g-page-selection-input(disabled=disabled, type='number', min=1, max=totalPages, value=currentPage)
+          span of #{totalPages}
+      if (currentPage+1<=totalPages && !disabled)
+        li.g-page-next
+          a#g-next-paginated Next »
+      else
+        li.g-page-next.disabled
+          a#g-next-paginated Next »

package/templates/widgets/hierarchyWidget.pug

@@ -91,5 +91,6 @@
       |  This folder has no suitable items.
     else
       |  This folder is empty.
+  .g-hierarachy-paginated-bar
 if showMetadata
   .g-folder-metadata

package/templates/widgets/itemList.pug

@@ -20,7 +20,7 @@ ul.g-item-list
           i.icon-eye
       if showSizes
         .g-item-size= formatSize(item.get('size'))
-  if (hasMore)
+  if (hasMore && !paginated)
     li.g-show-more
       a.g-show-more-items
         i.icon-level-down

package/views/body/SystemConfigurationView.js

@@ -187,7 +187,7 @@ var SystemConfigurationView = View.extend({
             });
         } else {
             settingValue = this.settings['core.collection_create_policy'];
-            settingValue['open'] = false;
+            settingValue.open = false;
         }
         return settingValue;
     }

package/views/widgets/BrowserWidget.js

@@ -58,6 +58,7 @@ var BrowserWidget = View.extend({
         error message) if the selection is unacceptable.
      * @param {string} [input.placeholder] A placeholder string for the input element.
      * @param {boolean} [highlightItem=false] highlights the selected item in the hierarchy and scrolls to it.
+     * @param {boolean} [paginated=false] the browser widget is paginated
      */
     initialize: function (settings) {
         // store options
@@ -74,6 +75,7 @@ var BrowserWidget = View.extend({
         this.selectItem = !!settings.selectItem;
         this.showMetadata = !!settings.showMetadata;
         this.highlightItem = !!settings.highlightItem;
+        this.paginated = !!settings.paginated;
         this._selected = null;
 
         // Sets RootSelectorWidget to open properly to the root if not already set in the settings
@@ -148,6 +150,7 @@ var BrowserWidget = View.extend({
             onItemClick: _.bind(this._selectItem, this),
             defaultSelectedResource: this.defaultSelectedResource,
             highlightItem: this.highlightItem,
+            paginated: this.paginated,
             showMetadata: this.showMetadata
         });
         this.listenTo(this._hierarchyView, 'g:setCurrentModel', this._selectModel);

package/views/widgets/HierarchyWidget.js

@@ -23,6 +23,7 @@ import { getModelClassByName, renderMarkdown, formatCount, capitalize, formatSiz
 import { restRequest, getApiRoot } from '@girder/core/rest';
 
 import HierarchyBreadcrumbTemplate from '@girder/core/templates/widgets/hierarchyBreadcrumb.pug';
+import HierarchyPaginatedTemplate from '@girder/core/templates/widgets/hierarchyPaginated.pug';
 import HierarchyWidgetTemplate from '@girder/core/templates/widgets/hierarchyWidget.pug';
 
 import '@girder/core/stylesheets/widgets/hierarchyWidget.styl';
@@ -67,6 +68,51 @@ var HierarchyBreadcrumbView = View.extend({
     }
 });
 
+var HierarchyPaginatedView = View.extend({
+    events: {
+        'change #g-page-selection-input': function (event) {
+            const num = Number(event.target.value);
+            if (this.itemListWidget && num <= this.itemListWidget.getNumPages() && num > 0) {
+                this.disabled = true;
+                this.itemListWidget.setPage(num).done(() => {
+                    this.disabled = false;
+                    this.render();
+                });
+            }
+            this.render();
+        },
+        'click li.g-page-next:not(.disabled) a#g-next-paginated': function () {
+            this.disabled = true;
+            this.itemListWidget.setPage(Number(this.$('#g-page-selection-input').val()) + 1).done(() => {
+                this.disabled = false;
+                this.render();
+            });
+            this.render();
+        },
+        'click li.g-page-prev:not(.disabled) a#g-previous-paginated': function () {
+            this.disabled = true;
+            this.itemListWidget.setPage(Number(this.$('#g-page-selection-input').val()) - 1).done(() => {
+                this.disabled = false;
+                this.render();
+            });
+            this.render();
+        }
+    },
+    initialize: function (settings) {
+        this.itemListWidget = settings.itemListWidget;
+        this.disabled = false;
+    },
+    render: function () {
+        this.$el.html(HierarchyPaginatedTemplate({
+            totalPages: this.itemListWidget && this.itemListWidget.getNumPages(),
+            currentPage: this.itemListWidget && this.itemListWidget.getCurrentPage(),
+            disabled: this.disabled
+        }));
+
+        return this;
+    }
+});
+
 /**
  * This widget is used to navigate the data hierarchy of folders and items.
  */
@@ -114,6 +160,7 @@ var HierarchyWidget = View.extend({
      *                  event as its second.
      *   [defaultSelectedResource] : default selected Resource item , will open up to this resource
      *   [highlightItem=false] : sets the item to be styled as selected and will scroll to it in the list
+     *   [paginated=false] : sets the itemlist view to be paginated, will set appendPages to false
      */
     initialize: function (settings) {
         this.parentModel = settings.parentModel;
@@ -136,7 +183,7 @@ var HierarchyWidget = View.extend({
         };
         this._defaultSelectedResource = settings.defaultSelectedResource;
         this._highlightItem = _.has(settings, 'highlightItem') ? settings.highlightItem : false;
-
+        this._paginated = _.has(settings, 'paginated') ? settings.paginated : false;
         this._onFolderSelect = settings.onFolderSelect;
 
         this.folderAccess = settings.folderAccess;
@@ -224,13 +271,34 @@ var HierarchyWidget = View.extend({
                 showSizes: this._showSizes,
                 selectedItem: this._defaultSelectedResource,
                 highlightItem: this._highlightItem,
+                paginated: this._paginated,
                 parentView: this
             });
             this.listenTo(this.itemListView, 'g:itemClicked', this._onItemClick);
             this.listenTo(this.itemListView, 'g:checkboxesChanged', this.updateChecked);
+
             this.listenTo(this.itemListView, 'g:changed', () => {
                 this.itemCount = this.itemListView.collection.length;
                 this._childCountCheck();
+                if (this._paginated && this.hierarchyPaginated && this.itemListView.getNumPages() > 1) {
+                    this.render();
+                    this.$('.g-hierarchy-breadcrumb-bar').addClass('g-hierarchy-sticky');
+                    this.$('.g-hierarachy-paginated-bar').addClass('g-hierarchy-sticky');
+                    this.$('.g-hierarchy-breadcrumb-bar').css({ top: 0 });
+                    this.$('.g-hierarachy-paginated-bar').css({ bottom: 0 });
+                } else {
+                    // We remove the bar if the current folder doesn't have more than one page, keep the sticky breadcrumb though
+                    this.$('.g-hierarachy-paginated-bar').remove();
+                }
+            });
+            // Only emitted when there is more than one page of data
+            this.listenTo(this.itemListView, 'g:paginated', () => {
+                if (this._paginated && !this.hierarchyPaginated) {
+                    this.hierarchyPaginated = new HierarchyPaginatedView({
+                        parentView: this,
+                        itemListWidget: this.itemListView
+                    });
+                }
             });
         }
 
@@ -289,7 +357,9 @@ var HierarchyWidget = View.extend({
         this.checkedMenuWidget.dropdownToggle = this.$('.g-checked-actions-button');
         this.checkedMenuWidget.setElement(this.$('.g-checked-actions-menu')).render();
         this.folderListView.setElement(this.$('.g-folder-list-container')).render();
-
+        if (this.hierarchyPaginated && this.parentModel.resourceName !== 'collection') {
+            this.hierarchyPaginated.setElement(this.$('.g-hierarachy-paginated-bar')).render();
+        }
         if (this.parentModel.resourceName === 'folder' && this._showItems) {
             this._initFolderViewSubwidgets();
             this.itemListView.setElement(this.$('.g-item-list-container')).render();
@@ -547,6 +617,7 @@ var HierarchyWidget = View.extend({
                     viewLinks: this._viewLinks,
                     itemFilter: this._itemFilter,
                     showSizes: this._showSizes,
+                    paginated: this._paginated,
                     public: this.parentModel.get('public'),
                     accessLevel: this.parentModel.getAccessLevel()
                 });
@@ -613,6 +684,7 @@ var HierarchyWidget = View.extend({
             yesText: 'Delete',
             confirmCallback: () => {
                 var resources = this._getCheckedResourceParam();
+                var resourceSize = this._getCheckedResourceSize();
                 /* Content on DELETE requests is somewhat oddly supported (I
                  * can't get it to work under jasmine/phantom), so override the
                  * method. */
@@ -628,7 +700,9 @@ var HierarchyWidget = View.extend({
                     if (folders.length && this.parentModel.has('nFolders')) {
                         this.parentModel.increment('nFolders', -folders.length);
                     }
-
+                    if (this.parentModel.has('size') && resourceSize.items) {
+                        this.parentModel.increment('size', -resourceSize.items);
+                    }
                     this.setCurrentModel(this.parentModel, { setRoute: false });
                 });
             }
@@ -784,6 +858,26 @@ var HierarchyWidget = View.extend({
         return JSON.stringify(resources);
     },
 
+    /**
+     * Get the sum of the sizes of checked resources.
+     */
+    _getCheckedResourceSize: function () {
+        var totalSize = { items: 0, folders: 0 };
+        var folders = this.folderListView.checked;
+        _.each(folders, function (cid) {
+            var folder = this.folderListView.collection.get(cid);
+            totalSize.folders += (folder.get('size') || 0);
+        }, this);
+        if (this.itemListView) {
+            var items = this.itemListView.checked;
+            _.each(items, function (cid) {
+                var item = this.itemListView.collection.get(cid);
+                totalSize.items += (item.get('size') || 0);
+            }, this);
+        }
+        return totalSize;
+    },
+
     downloadChecked: function () {
         var url = getApiRoot() + '/resource/download';
         var resources = this._getCheckedResourceParam();

package/views/widgets/ItemListWidget.js

@@ -5,6 +5,7 @@ import ItemCollection from '@girder/core/collections/ItemCollection';
 import LoadingAnimation from '@girder/core/views/widgets/LoadingAnimation';
 import View from '@girder/core/views/View';
 import { formatSize } from '@girder/core/misc';
+import { restRequest } from '@girder/core/rest';
 
 import ItemListTemplate from '@girder/core/templates/widgets/itemList.pug';
 
@@ -47,6 +48,8 @@ var ItemListWidget = View.extend({
             _.has(settings, 'showSizes') ? settings.showSizes : true);
         this._highlightItem = (
             _.has(settings, 'highlightItem') ? settings.highlightItem : false);
+        this._paginated = (
+            _.has(settings, 'paginated') ? settings.paginated : false);
 
         this.accessLevel = settings.accessLevel;
         this.public = settings.public;
@@ -60,20 +63,74 @@ var ItemListWidget = View.extend({
         this.collection = new ItemCollection();
         this.collection.append = true; // Append, don't replace pages
         this.collection.filterFunc = settings.itemFilter;
+        this.currentPage = 1; // By default we want to be on the first page
 
-        this.collection.on('g:changed', function () {
-            if (this.accessLevel !== undefined) {
-                this.collection.each((model) => {
-                    model.set('_accessLevel', this.accessLevel);
-                });
+        if (this._paginated) {
+            if (this.collection.filterFunc) {
+                console.warn('Pagination cannot be used with a filter function');
+                this._paginated = false;
+            } else {
+                // Override the default to prevent appending new pages
+                this.collection.append = false;
             }
-            this.render();
-            this.trigger('g:changed');
-        }, this).fetch({ folderId: settings.folderId });
+        }
+
+        this.collection.fetch({ folderId: settings.folderId }).done(() => {
+            this._totalPages = Math.ceil(this.collection.getTotalCount() / this.collection.pageLimit);
+            if (this._paginated && this.collection.hasNextPage) {
+                // Tells the parent container that the item is paginated so it can render the page selector
+                this.trigger('g:paginated');
+                // We need to get the position in the list for the selected item
+                if (this._selectedItem) {
+                    restRequest({
+                        url: `item/${this._selectedItem.get('_id')}/position`,
+                        method: 'GET',
+                        data: { folderId: this._selectedItem.get('folderId'), sort: 'name' }
+                    }).done((val) => {
+                        // Now we fetch the correct page for the position
+                        val = Number(val);
+                        if (val >= this.collection.pageLimit) {
+                            const pageLimit = this.collection.pageLimit;
+                            const calculatedPage = 1 + Math.ceil((val - (val % pageLimit)) / pageLimit);
+                            return this.collection.fetchPage(calculatedPage - 1);
+                        }
+                    }).done(() => this.bindOnChanged());
+                } else {
+                    this.bindOnChanged();
+                }
+            } else {
+                this.bindOnChanged();
+            }
+        });
+    },
+
+    /**
+     * Binds the change function to the collection and calls it initially to update the render
+     */
+    bindOnChanged: function () {
+        this.collection.on('g:changed', this.changedFunc, this);
+        this.changedFunc();
+    },
+    /**
+     * Function that causes a render each time the collection is changed
+     * Will also update the current page in a paginated system
+     */
+    changedFunc: function () {
+        if (this.accessLevel !== undefined) {
+            this.collection.each((model) => {
+                model.set('_accessLevel', this.accessLevel);
+            });
+        }
+        if (this._paginated) {
+            this.currentPage = this.collection.pageNum() + 1;
+        }
+        this.render();
+        this.trigger('g:changed');
     },
 
     render: function () {
         this.checked = [];
+        // If we set a selected item in the beginning we will center the selection while loading
         if (this._selectedItem && this._highlightItem) {
             this.scrollPositionObserver();
         }
@@ -88,13 +145,37 @@ var ItemListWidget = View.extend({
             viewLinks: this._viewLinks,
             showSizes: this._showSizes,
             highlightItem: this._highlightItem,
-            selectedItemId: (this._selectedItem || {}).id
+            selectedItemId: (this._selectedItem || {}).id,
+            paginated: this._paginated
+
         }));
 
-        // If we set a selected item in the beginning we will center the selection while loading
         return this;
     },
 
+    /**
+     * @returns {number} the number of pages in the itemList for use in a paginated view
+     */
+    getNumPages() {
+        return this._totalPages || 1;
+    },
+    /**
+     * @returns {number} the current page for paginated lists, defaults to 1 if none is provided
+     */
+    getCurrentPage() {
+        return this.currentPage || 1;
+    },
+    /**
+     * Externally facing function to allow hierarchyWidget and others to set the current page if the item is paginated
+     * @param {Number} page 1 index integer specifying the page to fetch
+     */
+    setPage(page) {
+        if (this._paginated && this.collection && this.collection.fetchPage) {
+            this.currentPage = page;
+            return this.collection.fetchPage(page - 1).then(() =>
+                this.$el.parents('.g-hierarchy-widget-container').scrollTop(0));
+        }
+    },
     /**
      * Insert an item into the collection and re-render it.
      */
@@ -156,11 +237,16 @@ var ItemListWidget = View.extend({
     centerSelected: function () {
         const widgetcontainer = this.$el.parents('.g-hierarchy-widget-container');
         const selected = this.$('li.g-item-list-entry.g-selected');
-
         if (widgetcontainer.length > 0 && selected.length > 0) {
-            const centerPos = (widgetcontainer.height() / 2.0) + (selected.outerHeight() / 2.0);
-            // Take the current scroll top position and add it to the position of the top of the selected item, then center it
-            const scrollPos = widgetcontainer[0].scrollTop + selected.position().top - centerPos;
+            // These items will effect the scroll position if they exists
+            const folderHeight  = $('.g-folder-list').length ? $('.g-folder-list').height() : 0;
+            const breadcrumbHeight = $('.g-hierarchy-breadcrumb-bar').length ? $('.g-hierarchy-breadcrumb-bar').height() : 0;
+            const selectedTop = selected.position().top;
+            // The selectedTop position needs to account for the breadcrumbHeight and the folderHeight
+            const scrollingPos = selectedTop + folderHeight + breadcrumbHeight;
+            const centerPos = (widgetcontainer.height() / 2.0) - (folderHeight / 2.0) - (breadcrumbHeight / 2.0) - (selected.outerHeight() / 2.0);
+
+            const scrollPos = scrollingPos - centerPos;
             if (this.tempScrollPos === undefined) {
                 this.tempScrollPos = scrollPos;
             }
@@ -234,7 +320,7 @@ var ItemListWidget = View.extend({
                     this.observer.disconnect();
                     this.observer = null;
                     this.tempScrollPos = undefined;
-                    // Prevents scrolling once clicking has more
+                    // Prevents scrolling when user clicks 'show more...'
                     this._highlightItem = false;
                 }
             };