UI, Collections: adding editable collection panels and lis

client/galaxy/scripts/mvc/collection/collection-li-edit.js

@@ -1,34 +1,156 @@
 define([
     "mvc/collection/collection-li",
+    "mvc/dataset/dataset-li-edit",
+    "mvc/base-mvc",
     "utils/localization"
-], function( DC_LI, _l ){
+], function( DC_LI, DATASET_LI_EDIT, BASE_MVC, _l ){
+/* global Backbone, LoggableMixin */
 //==============================================================================
-/*
+var DCListItemView = DC_LI.DCListItemView;
+/** @class Edit view for DatasetCollection.
+ */
+var DCListItemEdit = DCListItemView.extend(
+/** @lends DCListItemEdit.prototype */{
+//TODO: may not be needed
+
+    /** logger used to record this.log messages, commonly set to console */
+    //logger              : console,
+
+    /** override to add linkTarget */
+    initialize : function( attributes ){
+        DCListItemView.prototype.initialize.call( this, attributes );
+    },
+
+    // ......................................................................... misc
+    /** String representation */
+    toString : function(){
+        var modelString = ( this.model )?( this.model + '' ):( '(no model)' );
+        return 'DCListItemEdit(' + modelString + ')';
+    }
+});
+
+// ............................................................................ TEMPLATES
+/** underscore templates */
+// DCListItemEdit.prototype.templates = (function(){
+
+//     // use element identifier
+//     var titleBarTemplate = BASE_MVC.wrapTemplate([
+//         '<div class="title-bar clear" tabindex="0">',
+//             '<div class="title">',
+//                 '<span class="name"><%- collection.element_identifier || collection.name %></span>',
+//             '</div>',
+//             '<div class="subtitle"></div>',
+//         '</div>'
+//     ], 'collection' );
+
+//     return _.extend( {}, DCListItemView.prototype.templates, {
+//         titleBar : titleBarTemplate
+//     });
+// }());
 
-NOTE: not much going on here. Until we find out what operations a user will need
-    to perform on their own DC's, we'll leave this empty.
 
-*/
 //==============================================================================
-var _super = DC_LI.DCListItemView;
-/** @class Editing view for DatasetCollectionElement.
+var DCEListItemView = DC_LI.DCEListItemView;
+/** @class Read only view for DatasetCollectionElement.
  */
-var DCEListItemEdit = _super.extend(
+var DCEListItemEdit = DCEListItemView.extend(
 /** @lends DCEListItemEdit.prototype */{
+//TODO: this might be expendable - compacted with HDAListItemView
 
     /** logger used to record this.log messages, commonly set to console */
     //logger              : console,
 
+    /** set up */
+    initialize  : function( attributes ){
+        DCEListItemView.prototype.initialize.call( this, attributes );
+    },
+
     // ......................................................................... misc
-    /** string rep */
+    /** String representation */
     toString : function(){
         var modelString = ( this.model )?( this.model + '' ):( '(no model)' );
         return 'DCEListItemEdit(' + modelString + ')';
     }
 });
 
+// ............................................................................ TEMPLATES
+/** underscore templates */
+// DCEListItemEdit.prototype.templates = (function(){
+
+//     // use the element identifier here - since that will persist and the user will need it
+//     var titleBarTemplate = BASE_MVC.wrapTemplate([
+//         '<div class="title-bar clear" tabindex="0">',
+//             '<div class="title">',
+//                 '<span class="name"><%- element.element_identifier %></span>',
+//             '</div>',
+//             '<div class="subtitle"></div>',
+//         '</div>'
+//     ], 'element' );
+
+//     return _.extend( {}, DCEListItemView.prototype.templates, {
+//         titleBar : titleBarTemplate
+//     });
+// }());
+
+
+//==============================================================================
+/** @class Editable view for a DatasetCollectionElement that is also an DatasetAssociation
+ *      (a dataset contained in a dataset collection).
+ */
+var DatasetDCEListItemEdit = DATASET_LI_EDIT.DatasetListItemEdit.extend(
+/** @lends DatasetDCEListItemEdit.prototype */{
+
+    /** logger used to record this.log messages, commonly set to console */
+    //logger              : console,
+
+    /** set up */
+    initialize  : function( attributes ){
+        DATASET_LI_EDIT.DatasetListItemEdit.prototype.initialize.call( this, attributes );
+    },
+
+    // ......................................................................... misc
+    /** String representation */
+    toString : function(){
+        var modelString = ( this.model )?( this.model + '' ):( '(no model)' );
+        return 'DatasetDCEListItemEdit(' + modelString + ')';
+    }
+});
+
+// ............................................................................ TEMPLATES
+/** underscore templates */
+DatasetDCEListItemEdit.prototype.templates = (function(){
+
+    return _.extend( {}, DATASET_LI_EDIT.DatasetListItemEdit.prototype.templates, {
+        titleBar : DC_LI.DatasetDCEListItemView.prototype.templates.titleBar
+    });
+}());
+
+
+//==============================================================================
+/** @class Read only view for a DatasetCollectionElement that is also a DatasetCollection
+ *      (a nested DC).
+ */
+var NestedDCDCEListItemEdit = DC_LI.NestedDCDCEListItemView.extend(
+/** @lends NestedDCDCEListItemEdit.prototype */{
+
+    /** logger used to record this.log messages, commonly set to console */
+    // comment this out to suppress log output
+    //logger              : console,
+
+    // ......................................................................... misc
+    /** String representation */
+    toString : function(){
+        var modelString = ( this.model )?( this.model + '' ):( '(no model)' );
+        return 'NestedDCDCEListItemEdit(' + modelString + ')';
+    }
+});
+
+
 //==============================================================================
     return {
-        DCEListItemEdit : DCEListItemEdit
+        DCListItemEdit          : DCListItemEdit,
+        DCEListItemEdit         : DCEListItemEdit,
+        DatasetDCEListItemEdit  : DatasetDCEListItemEdit,
+        NestedDCDCEListItemEdit : NestedDCDCEListItemEdit
     };
 });

client/galaxy/scripts/mvc/collection/collection-panel-edit.js

@@ -0,0 +1,134 @@
+define([
+    "mvc/collection/collection-panel",
+    "mvc/collection/collection-model",
+    "mvc/collection/collection-li-edit",
+    "mvc/base-mvc",
+    "utils/localization"
+], function( DC_PANEL, DC_MODEL, DC_EDIT, BASE_MVC, _l ){
+/* =============================================================================
+TODO:
+
+============================================================================= */
+/** @class editable View/Controller for a dataset collection.
+ */
+var _super = DC_PANEL.CollectionPanel;
+var CollectionPanelEdit = _super.extend(
+/** @lends CollectionPanel.prototype */{
+    //MODEL is either a DatasetCollection (or subclass) or a DatasetCollectionElement (list of pairs)
+
+    /** logger used to record this.log messages, commonly set to console */
+    //logger              : console,
+
+    /** sub view class used for datasets */
+    DatasetDCEViewClass : DC_EDIT.DatasetDCEListItemEdit,
+    /** sub view class used for nested collections */
+    NestedDCDCEViewClass: DC_EDIT.NestedDCDCEListItemEdit,
+
+    // ......................................................................... SET UP
+    /** Set up the view, set up storage, bind listeners to HistoryContents events
+     *  @param {Object} attributes optional settings for the panel
+     */
+    initialize : function( attributes ){
+        _super.prototype.initialize.call( this, attributes );
+    },
+
+    // ........................................................................ misc
+    /** string rep */
+    toString    : function(){
+        return 'CollectionPanelEdit(' + (( this.model )?( this.model.get( 'name' )):( '' )) + ')';
+    }
+});
+
+
+//------------------------------------------------------------------------------ TEMPLATES
+// CollectionPanelEdit.prototype.templates = (function(){
+
+//     var controlsTemplate = BASE_MVC.wrapTemplate([
+//         '<div class="controls">',
+//             '<div class="navigation">',
+//                 '<a class="back" href="javascript:void(0)">',
+//                     '<span class="fa fa-icon fa-angle-left"></span>',
+//                     _l( 'Back to ' ), '<%- view.parentName %>',
+//                 '</a>',
+//             '</div>',
+
+//             '<div class="title">',
+//                 '<div class="name"><%- collection.name || collection.element_identifier %></div>',
+//                 '<div class="subtitle">',
+// //TODO: remove logic from template
+//                     '<% if( collection.collection_type === "list" ){ %>',
+//                         _l( 'a list of datasets' ),
+//                     '<% } else if( collection.collection_type === "paired" ){ %>',
+//                         _l( 'a pair of datasets' ),
+//                     '<% } else if( collection.collection_type === "list:paired" ){ %>',
+//                         _l( 'a list of paired datasets' ),
+//                     '<% } %>',
+//                 '</div>',
+//             '</div>',
+//         '</div>'
+//     ], 'collection' );
+
+//     return _.extend( _.clone( _super.prototype.templates ), {
+//         controls : controlsTemplate
+//     });
+// }());
+
+
+
+// =============================================================================
+/** @class non-editable, read-only View/Controller for a dataset collection. */
+var ListCollectionPanelEdit = CollectionPanelEdit.extend(
+/** @lends ListCollectionPanel.prototype */{
+
+    //TODO: not strictly needed - due to switch in CollectionPanel._getContentClass
+    /** sub view class used for datasets */
+    DatasetDCEViewClass : DC_EDIT.DatasetDCEListItemEdit,
+
+    // ........................................................................ misc
+    /** string rep */
+    toString    : function(){
+        return 'ListCollectionPanelEdit(' + (( this.model )?( this.model.get( 'name' )):( '' )) + ')';
+    }
+});
+
+
+// =============================================================================
+/** @class non-editable, read-only View/Controller for a dataset collection. */
+var PairCollectionPanelEdit = ListCollectionPanelEdit.extend(
+/** @lends PairCollectionPanel.prototype */{
+
+    // ........................................................................ misc
+    /** string rep */
+    toString    : function(){
+        return 'PairCollectionPanelEdit(' + (( this.model )?( this.model.get( 'name' )):( '' )) + ')';
+    }
+});
+
+
+// =============================================================================
+/** @class non-editable, read-only View/Controller for a dataset collection. */
+var ListOfPairsCollectionPanelEdit = CollectionPanelEdit.extend(
+/** @lends ListOfPairsCollectionPanel.prototype */{
+
+    //TODO: not strictly needed - due to switch in CollectionPanel._getContentClass
+    /** sub view class used for nested collections */
+    NestedDCDCEViewClass : DC_EDIT.NestedDCDCEListItemEdit.extend({
+        foldoutPanelClass : PairCollectionPanelEdit
+    }),
+
+    // ........................................................................ misc
+    /** string rep */
+    toString    : function(){
+        return 'ListOfPairsCollectionPanelEdit(' + (( this.model )?( this.model.get( 'name' )):( '' )) + ')';
+    }
+});
+
+
+//==============================================================================
+    return {
+        CollectionPanelEdit             : CollectionPanelEdit,
+        ListCollectionPanelEdit         : ListCollectionPanelEdit,
+        PairCollectionPanelEdit         : PairCollectionPanelEdit,
+        ListOfPairsCollectionPanelEdit  : ListOfPairsCollectionPanelEdit
+    };
+});

client/galaxy/scripts/mvc/collection/collection-panel.js

@@ -37,11 +37,11 @@ var CollectionPanel = _super.extend(
         this.linkTarget = attributes.linkTarget || '_blank';
 
         this.hasUser = attributes.hasUser;
-        /**  */
+        /** A stack of panels that currently cover or hide this panel */
         this.panelStack = [];
-        /**  */
+        /** The text of the link to go back to the panel containing this one */
         this.parentName = attributes.parentName;
-        /**  */
+        /** foldout or drilldown */
         this.foldoutStyle = attributes.foldoutStyle || 'foldout';
     },
 

client/galaxy/scripts/mvc/history/hdca-li-edit.js

@@ -1,9 +1,9 @@
 define([
-    "mvc/dataset/states",
     "mvc/history/hdca-li",
+    "mvc/collection/collection-panel-edit",
     "ui/fa-icon-button",
     "utils/localization"
-], function( STATES, HDCA_LI, faIconButton, _l ){
+], function( HDCA_LI, DC_PANEL_EDIT, faIconButton, _l ){
 //==============================================================================
 var _super = HDCA_LI.HDCAListItemView;
 /** @class Editing view for HistoryDatasetCollectionAssociation.
@@ -14,6 +14,18 @@ var HDCAListItemEdit = _super.extend(
     /** logger used to record this.log messages, commonly set to console */
     //logger              : console,
 
+    _getFoldoutPanelClass : function(){
+        switch( this.model.get( 'collection_type' ) ){
+            case 'list':
+                return DC_PANEL_EDIT.ListCollectionPanelEdit;
+            case 'paired':
+                return DC_PANEL_EDIT.PairCollectionPanelEdit;
+            case 'list:paired':
+                return DC_PANEL_EDIT.ListOfPairsCollectionPanelEdit;
+        }
+        throw new TypeError( 'Uknown collection_type: ' + this.model.get( 'collection_type' ) );
+    },
+
     // ......................................................................... delete
     /** In this override, add the delete button. */
     _renderPrimaryActions : function(){