@girder/core 5.0.0-beta.1 → 5.0.0-beta.2

package/dist-lib/src/views/body/CollectionView.js

@@ -0,0 +1,188 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import AccessWidget from '@girder/core/views/widgets/AccessWidget';
+import CollectionModel from '@girder/core/models/CollectionModel';
+import EditCollectionWidget from '@girder/core/views/widgets/EditCollectionWidget';
+import FolderModel from '@girder/core/models/FolderModel';
+import HierarchyWidget from '@girder/core/views/widgets/HierarchyWidget';
+import router from '@girder/core/router';
+import View from '@girder/core/views/View';
+import { AccessType } from '@girder/core/constants';
+import { cancelRestRequests } from '@girder/core/rest';
+import { confirm } from '@girder/core/dialog';
+import { renderMarkdown, formatSize } from '@girder/core/misc';
+import events from '@girder/core/events';
+
+import CollectionPageTemplate from '@girder/core/templates/body/collectionPage.pug';
+
+import '@girder/core/stylesheets/body/collectionPage.styl';
+
+import 'bootstrap/js/dropdown';
+
+/**
+ * This view shows a single collection's page.
+ */
+var CollectionView = View.extend({
+    events: {
+        'click .g-edit-collection': 'editCollection',
+        'click .g-collection-access-control': 'editAccess',
+        'click .g-delete-collection': 'deleteConfirmation'
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+
+        this.upload = settings.upload || false;
+        this.access = settings.access || false;
+        this.edit = settings.edit || false;
+        this.folderAccess = settings.folderAccess || false;
+        this.folderCreate = settings.folderCreate || false;
+        this.folderEdit = settings.folderEdit || false;
+        this.itemCreate = settings.itemCreate || false;
+
+        // If collection model is already passed, there is no need to fetch.
+        if (settings.collection) {
+            this.model = settings.collection;
+
+            if (settings.folderId) {
+                this.folder = new FolderModel();
+                this.folder.set({
+                    _id: settings.folderId
+                }).on('g:fetched', function () {
+                    this.render();
+                }, this).on('g:error', function () {
+                    this.folder = null;
+                    this.render();
+                }, this).fetch();
+            } else {
+                this.render();
+            }
+        } else if (settings.id) {
+            this.model = new CollectionModel();
+            this.model.set('_id', settings.id);
+
+            this.model.on('g:fetched', function () {
+                this.render();
+            }, this).fetch();
+        }
+    },
+
+    editCollection: function () {
+        var container = $('#g-dialog-container');
+
+        if (!this.editCollectionWidget) {
+            this.editCollectionWidget = new EditCollectionWidget({
+                el: container,
+                model: this.model,
+                parentView: this
+            }).on('g:saved', function () {
+                this.render();
+            }, this);
+        }
+        this.editCollectionWidget.render();
+    },
+
+    render: function () {
+        this.$el.html(CollectionPageTemplate({
+            collection: this.model,
+            AccessType: AccessType,
+            renderMarkdown: renderMarkdown
+        }));
+
+        if (!this.hierarchyWidget) {
+            // The HierarchyWidget will self-render when instantiated
+            this.hierarchyWidget = new HierarchyWidget({
+                el: this.$('.g-collection-hierarchy-container'),
+                parentModel: this.folder || this.model,
+                upload: this.upload,
+                folderAccess: this.folderAccess,
+                folderEdit: this.folderEdit,
+                folderCreate: this.folderCreate,
+                itemCreate: this.itemCreate,
+                parentView: this
+            }).on('g:setCurrentModel', () => {
+                // When a user descends into the hierarchy, hide the collection
+                // actions list to avoid confusion.
+                this.$('.g-collection-header .g-collection-actions-button').hide();
+            });
+        } else {
+            this.hierarchyWidget
+                .setElement(this.$('.g-collection-hierarchy-container'))
+                .render();
+        }
+
+        this.upload = false;
+        this.folderAccess = false;
+        this.folderEdit = false;
+        this.folderCreate = false;
+        this.itemCreate = false;
+
+        if (this.edit) {
+            this.editCollection();
+        } else if (this.access) {
+            this.editAccess();
+        }
+
+        return this;
+    },
+
+    editAccess: function () {
+        new AccessWidget({
+            el: $('#g-dialog-container'),
+            modelType: 'collection',
+            model: this.model,
+            parentView: this
+        }).on('g:accessListSaved', function (params) {
+            if (params.recurse) {
+                this.hierarchyWidget.refreshFolderList();
+            }
+        }, this);
+    },
+
+    deleteConfirmation: function () {
+        let params = {
+            text: 'Are you sure you want to delete the collection <b>' +
+                  this.model.escape('name') + this.model.escape('nFolders') + '</b>?',
+            yesText: 'Delete',
+            escapedHtml: true,
+            confirmCallback: () => {
+                this.model.on('g:deleted', function () {
+                    events.trigger('g:alert', {
+                        icon: 'ok',
+                        text: 'Collection deleted.',
+                        type: 'success',
+                        timeout: 4000
+                    });
+                    router.navigate('collections', { trigger: true });
+                }).destroy();
+            }
+        };
+        if (this.model.get('nFolders') !== 0 || this.model.get('size') !== 0) {
+            params = _.extend({
+                additionalText: '<b>' + this.model.escape('name') + '</b>' +
+                                ' contains <b>' + this.model.escape('nFolders') +
+                                ' folders</b> taking up <b>' +
+                                formatSize(parseInt(this.model.get('size'), 10)) + '</b>',
+                msgConfirmation: true,
+                name: this.model.escape('name')
+            }, params);
+        }
+        confirm(params);
+    }
+}, {
+    /**
+     * Helper function for fetching the user and rendering the view with
+     * an arbitrary set of extra parameters.
+     */
+    fetchAndInit: function (cid, params) {
+        var collection = new CollectionModel();
+        collection.set({ _id: cid }).on('g:fetched', function () {
+            events.trigger('g:navigateTo', CollectionView, _.extend({
+                collection: collection
+            }, params || {}));
+        }, this).fetch();
+    }
+});
+
+export default CollectionView;

package/dist-lib/src/views/body/CollectionsView.js

@@ -0,0 +1,120 @@
+import $ from 'jquery';
+
+import CollectionCollection from '@girder/core/collections/CollectionCollection';
+import CollectionModel from '@girder/core/models/CollectionModel';
+import EditCollectionWidget from '@girder/core/views/widgets/EditCollectionWidget';
+import PaginateWidget from '@girder/core/views/widgets/PaginateWidget';
+import router from '@girder/core/router';
+import SearchFieldWidget from '@girder/core/views/widgets/SearchFieldWidget';
+import View from '@girder/core/views/View';
+import { cancelRestRequests } from '@girder/core/rest';
+import { formatDate, formatSize, renderMarkdown, DATE_MINUTE } from '@girder/core/misc';
+import { getCurrentUser } from '@girder/core/auth';
+
+import CollectionListTemplate from '@girder/core/templates/body/collectionList.pug';
+
+import '@girder/core/stylesheets/body/collectionList.styl';
+
+/**
+ * This view lists the collections.
+ */
+var CollectionsView = View.extend({
+    events: {
+        'click a.g-collection-link': function (event) {
+            var cid = $(event.currentTarget).attr('g-collection-cid');
+            router.navigate('collection/' + this.collection.get(cid).id, { trigger: true });
+        },
+        'click button.g-collection-create-button': 'createCollectionDialog',
+        'submit .g-collections-search-form': function (event) {
+            event.preventDefault();
+        },
+        'click .g-show-description': '_toggleDescription'
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        this.collection = new CollectionCollection();
+        this.collection.on('g:changed', function () {
+            this.render();
+        }, this).fetch();
+
+        this.paginateWidget = new PaginateWidget({
+            collection: this.collection,
+            parentView: this
+        });
+
+        this.searchWidget = new SearchFieldWidget({
+            placeholder: 'Search collections...',
+            types: ['collection'],
+            parentView: this
+        }).on('g:resultClicked', this._gotoCollection, this);
+
+        this.create = settings.dialog === 'create';
+    },
+
+    /**
+     * Prompt the user to create a new collection
+     */
+    createCollectionDialog: function () {
+        var container = $('#g-dialog-container');
+
+        new EditCollectionWidget({
+            el: container,
+            parentView: this
+        }).on('g:saved', function (collection) {
+            router.navigate('collection/' + collection.get('_id'),
+                { trigger: true });
+        }, this).render();
+    },
+
+    render: function () {
+        this.$el.html(CollectionListTemplate({
+            collections: this.collection.toArray(),
+            getCurrentUser: getCurrentUser,
+            formatDate: formatDate,
+            DATE_MINUTE: DATE_MINUTE,
+            formatSize: formatSize
+        }));
+
+        this.paginateWidget.setElement(this.$('.g-collection-pagination')).render();
+        this.searchWidget.setElement(this.$('.g-collections-search-container')).render();
+
+        if (this.create) {
+            this.createCollectionDialog();
+        }
+
+        return this;
+    },
+
+    /**
+     * When the user clicks a search result collection, this helper method
+     * will navigate them to the view for that specific collection.
+     */
+    _gotoCollection: function (result) {
+        var collection = new CollectionModel();
+        collection.set('_id', result.id).on('g:fetched', function () {
+            router.navigate('/collection/' + collection.get('_id'), { trigger: true });
+        }, this).fetch();
+    },
+
+    _toggleDescription: function (e) {
+        const link = $(e.currentTarget);
+        const cid = link.attr('cid');
+        const dest = this.$(`.g-collection-description[cid="${cid}"]`);
+
+        if (link.attr('state') === 'hidden') {
+            renderMarkdown(this.collection.get(cid).get('description'), dest);
+            dest.removeClass('hide');
+            link.attr('state', 'visible');
+            link.find('i').removeClass('icon-down-dir').addClass('icon-up-dir');
+            link.find('span').text('Hide description');
+        } else {
+            dest.addClass('hide');
+            link.attr('state', 'hidden');
+            link.find('i').removeClass('icon-up-dir').addClass('icon-down-dir');
+            link.find('span').text('Show description');
+        }
+    }
+});
+
+export default CollectionsView;

package/dist-lib/src/views/body/FilesystemImportView.js

@@ -0,0 +1,83 @@
+import $ from 'jquery';
+
+import BrowserWidget from '@girder/core/views/widgets/BrowserWidget';
+import router from '@girder/core/router';
+import View from '@girder/core/views/View';
+import { restRequest } from '@girder/core/rest';
+
+import FilesystemImportTemplate from '@girder/core/templates/body/filesystemImport.pug';
+
+var FilesystemImportView = View.extend({
+    events: {
+        'submit .g-filesystem-import-form': function (e) {
+            e.preventDefault();
+
+            var destId = this.$('#g-filesystem-import-dest-id').val().trim().split(/\s/)[0],
+                destType = this.$('#g-filesystem-import-dest-type').val(),
+                foldersAsItems = this.$('#g-filesystem-import-leaf-items').val();
+
+            this.$('.g-validation-failed-message').empty();
+
+            this.assetstore.off('g:imported').on('g:imported', function () {
+                router.navigate(destType + '/' + destId, { trigger: true });
+            }, this).on('g:error', function (resp) {
+                this.$('.g-validation-failed-message').text(resp.responseJSON.message);
+            }, this).import({
+                importPath: this.$('#g-filesystem-import-path').val().trim(),
+                leafFoldersAsItems: foldersAsItems,
+                destinationId: destId,
+                destinationType: destType,
+                progress: true
+            });
+        },
+        'click .g-open-browser': '_openBrowser'
+    },
+
+    initialize: function (settings) {
+        this._browserWidgetView = new BrowserWidget({
+            parentView: this,
+            titleText: 'Destination',
+            helpText: 'Browse to a location to select it as the destination.',
+            submitText: 'Select Destination',
+            validate: function (model) {
+                const isValid = $.Deferred();
+                if (!model) {
+                    isValid.reject('Please select a valid root.');
+                } else {
+                    isValid.resolve();
+                }
+                return isValid.promise();
+            }
+        });
+        this.listenTo(this._browserWidgetView, 'g:saved', function (val) {
+            this.$('#g-filesystem-import-dest-id').val(val.id);
+            this.$('#g-filesystem-import-dest-type').val(val.get('_modelType'));
+            restRequest({
+                url: `resource/${val.id}/path`,
+                method: 'GET',
+                data: { type: val.get('_modelType') }
+            }).done((result) => {
+                // Only add the resource path if the value wasn't altered
+                if (this.$('#g-filesystem-import-dest-id').val() === val.id) {
+                    this.$('#g-filesystem-import-dest-id').val(`${val.id} (${result})`);
+                }
+            });
+        });
+        this.assetstore = settings.assetstore;
+        this.render();
+    },
+
+    render: function () {
+        this.$el.html(FilesystemImportTemplate({
+            assetstore: this.assetstore
+        }));
+
+        return this;
+    },
+
+    _openBrowser: function () {
+        this._browserWidgetView.setElement($('#g-dialog-container')).render();
+    }
+});
+
+export default FilesystemImportView;

package/dist-lib/src/views/body/FolderView.js

@@ -0,0 +1,54 @@
+import _ from 'underscore';
+
+import FolderModel from '@girder/core/models/FolderModel';
+import HierarchyWidget from '@girder/core/views/widgets/HierarchyWidget';
+import View from '@girder/core/views/View';
+import { cancelRestRequests } from '@girder/core/rest';
+import events from '@girder/core/events';
+
+/**
+ * This view shows a single folder as a hierarchy widget.
+ */
+var FolderView = View.extend({
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        this.folder = settings.folder;
+        this.upload = settings.upload || false;
+        this.folderAccess = settings.folderAccess || false;
+        this.folderCreate = settings.folderCreate || false;
+        this.folderEdit = settings.folderEdit || false;
+        this.itemCreate = settings.itemCreate || false;
+
+        this.render();
+    },
+
+    render: function () {
+        this.hierarchyWidget = new HierarchyWidget({
+            el: this.$el,
+            parentModel: this.folder,
+            upload: this.upload,
+            folderAccess: this.folderAccess,
+            folderEdit: this.folderEdit,
+            folderCreate: this.folderCreate,
+            itemCreate: this.itemCreate,
+            parentView: this
+        });
+
+        return this;
+    }
+}, {
+    /**
+     * Helper function for fetching the folder by id, then render the view.
+     */
+    fetchAndInit: function (id, params) {
+        var folder = new FolderModel();
+        folder.set({ _id: id }).on('g:fetched', function () {
+            events.trigger('g:navigateTo', FolderView, _.extend({
+                folder: folder
+            }, params || {}));
+        }, this).fetch();
+    }
+
+});
+
+export default FolderView;

package/dist-lib/src/views/body/FrontPageView.js

@@ -0,0 +1,47 @@
+import $ from 'jquery';
+
+import version from '@girder/core/version';
+import View from '@girder/core/views/View';
+import { cancelRestRequests, getApiRoot } from '@girder/core/rest';
+import events from '@girder/core/events';
+import { getCurrentUser } from '@girder/core/auth';
+
+import FrontPageTemplate from '@girder/core/templates/body/frontPage.pug';
+
+import '@girder/core/stylesheets/body/frontPage.styl';
+
+/**
+ * This is the view for the front page of the app.
+ */
+var FrontPageView = View.extend({
+    events: {
+        'click .g-register-link': function () {
+            events.trigger('g:registerUi');
+        },
+        'click .g-login-link': function () {
+            events.trigger('g:loginUi');
+        },
+        'click .g-quicksearch-link': function () {
+            $('.g-quick-search-container .g-search-field').trigger('focus');
+        }
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        this.brandName = settings.brandName || 'Girder';
+        this.render();
+    },
+
+    render: function () {
+        this.$el.html(FrontPageTemplate({
+            apiRoot: getApiRoot(),
+            currentUser: getCurrentUser(),
+            version,
+            brandName: this.brandName
+        }));
+
+        return this;
+    }
+});
+
+export default FrontPageView;