proper selecting, expanding and rendering of packageViews

5 files changed, 128 insertions, 65 deletions

diff --git a/module/web/static/js/models/Package.js b/module/web/static/js/models/Package.js
index 64b066dbc..7539b0673 100644
--- a/module/web/static/js/models/Package.js
+++ b/module/web/static/js/models/Package.js
@@ -22,7 +22,9 @@ define(['jquery', 'backbone', 'underscore', 'collections/FileList', 'require'],
                 fids: null,
                 pids: null,
                 files: null, // Collection
-                packs: null // Collection
+                packs: null, // Collection
+
+                selected: false // For Checkbox
             },
 
             // Model Constructor
@@ -51,16 +53,25 @@ define(['jquery', 'backbone', 'underscore', 'collections/FileList', 'require'],
                 return Backbone.Model.prototype.destroy.call(this, options);
             },
 
-            parse: function(resp, xhr) {
+            parse: function(resp) {
                 // Package is loaded from tree collection
                 if (_.has(resp, 'root')) {
-                    resp.root.files = new FileList(_.values(resp.files));
+                    if(!this.has('files'))
+                        resp.root.files = new FileList(_.values(resp.files));
+                    else
+                        this.get('files').update(_.values(resp.files));
+
                     // circular dependencies needs to be avoided
                     var PackageList = require('collections/PackageList');
-                    resp.root.packs = new PackageList(_.values(resp.packages));
+
+                    if (!this.has('packs'))
+                        resp.root.packs = new PackageList(_.values(resp.packages));
+                    else
+                        this.get('packs').update(_.values(resp.packages));
+
                     return resp.root;
                 }
-                return Backbone.model.prototype.fetch.call(this, resp, xhr);
+                return Backbone.model.prototype.parse.call(this, resp);
             },
 
             // Package data is complete when it contains collection for containing files or packs
diff --git a/module/web/static/js/models/TreeCollection.js b/module/web/static/js/models/TreeCollection.js
index 27d2cefce..5949415c2 100644
--- a/module/web/static/js/models/TreeCollection.js
+++ b/module/web/static/js/models/TreeCollection.js
@@ -27,20 +27,20 @@ define(['jquery', 'backbone', 'underscore', 'models/Package', 'collections/FileL
         },
 
         // Parse the response and updates the collections
-        parse: function(resp, xhr) {
-            if (this.get('packages') === null)
-                this.set('packages', new PackageList(_.values(resp.packages)));
+        parse: function(resp) {
+            var ret = {};
+            if (!this.has('packages'))
+                ret.packages = new PackageList(_.values(resp.packages));
             else
-                this.packages.update(_.values(resp.packages));
+                this.get('files').update(_.values(resp.packages));
 
-            if (this.get('files') === null)
-                this.set('files', new FileList(_.values(resp.files)));
+            if (!this.has('files'))
+                ret.files = new FileList(_.values(resp.files));
             else
-                this.files.update(_.values(resp.files));
+                this.get('files').update(_.values(resp.files));
 
-            return {
-              root: new Package(resp.root)
-            };
+            ret.root = new Package(resp.root);
+            return ret;
         }
 
     });
diff --git a/module/web/static/js/views/abstract/itemView.js b/module/web/static/js/views/abstract/itemView.js
index a8cb14e7d..77c6bb5e4 100644
--- a/module/web/static/js/views/abstract/itemView.js
+++ b/module/web/static/js/views/abstract/itemView.js
@@ -24,11 +24,6 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
             this.$el.zapIn();
         },
 
-        load: function(e) {
-            if(e)
-                e.stopPropagation();
-            this.model.fetch();
-        },
 
         delete: function(e) {
             if(e)
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index f020a69d4..7e8f899a9 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -1,7 +1,8 @@
-define(['jquery', 'backbone', 'underscore', 'app'], function($, Backbone, _, App) {
+define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'],
+    function($, Backbone, _, App, ItemView) {
 
     // Renders single file item
-    return Backbone.View.extend({
+    return ItemView.extend({
 
         tagName: 'li',
         className: 'file-view',
@@ -12,6 +13,13 @@ define(['jquery', 'backbone', 'underscore', 'app'], function($, Backbone, _, App
         },
 
         initialize: function() {
+            this.model.on('change', this.render, this);
+            this.model.on('remove', this.destroy, this);
+        },
+
+        onDestroy: function() {
+            this.model.off('change', this.render);
+            this.model.off('remove', this.destroy);
         },
 
         render: function() {
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js
index 154e7af77..17b6bc06f 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -1,48 +1,97 @@
 define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
     function($, itemView, _, fileView) {
 
-    // Renders a single package item
-    return itemView.extend({
-
-        tagName: 'li',
-        className: 'package-view',
-        template: _.compile($("#template-package").html()),
-        events: {
-            'click .package-row.first': 'load',
-            'click .delete': 'delete'
-        },
-
-        initialize: function() {
-            this.model.on('filter:added', this.hide, this);
-            this.model.on('filter:removed', this.show, this);
-            this.model.on('change', this.render, this);
-            this.model.on('remove', this.unrender, this);
-        },
-
-        onDestroy: function() {
-            this.model.off('filter:added', this.hide); // TODO
-        },
-
-        render: function() {
-
-            // TODO: on expanding don't re-render
-            this.$el.html(this.template(this.model.toJSON()));
-
-            if (this.model.isLoaded()) {
-                var ul = $('<ul></ul>');
-                this.model.get('files').each(function(file) {
-                    ul.append(new fileView({model: file}).render().el);
+        // Renders a single package item
+        return itemView.extend({
+
+            tagName: 'li',
+            className: 'package-view',
+            template: _.compile($("#template-package").html()),
+            events: {
+                'click .package-row .name': 'expand',
+                'click .delete': 'delete',
+                'click .checkbox': 'select'
+            },
+
+            // File views visible
+            expanded: false,
+
+            initialize: function() {
+                this.model.on('filter:added', this.hide, this);
+                this.model.on('filter:removed', this.show, this);
+                this.model.on('change', this.render, this);
+                this.model.on('remove', this.unrender, this);
+            },
+
+            onDestroy: function() {
+                this.model.off('filter:added', this.hide); // TODO
+            },
+
+            // Render everything, optional only the fileViews
+            render: function(fileOnly) {
+                var container = this.$('.package-header');
+                if (!container.length)
+                    this.$el.html(this.template(this.model.toJSON()));
+                else if(!fileOnly)
+                    container.replaceWith(this.template(this.model.toJSON()));
+
+                // TODO: could be done in template
+                if (this.model.get('checked'))
+                    this.$('.checkbox').addClass('checked');
+                else
+                    this.$('.checkbox').removeClass('checked');
+
+                // Only create this views a single time
+                var ul = this.$('ul');
+                if (!ul.length && this.model.isLoaded()) {
+                    console.log('Rendered content of package ' + this.model.get('pid'));
+                    ul = $('<ul></ul>');
+
+                    if(!this.expanded)
+                        ul.hide();
+
+                    this.model.get('files').each(function(file) {
+                        ul.append(new fileView({model: file}).render().el);
+                    });
+                    this.$el.append(ul);
+                }
+                return this;
+            },
+
+            unrender: function() {
+                var self = this;
+                this.$el.zapOut(function() {
+                    self.destroy();
                 });
-                this.$el.append(ul);
+
+                // TODO destroy the fileViews ?
+            },
+
+            // TODO: animation
+            // Toggle expanding of packages
+            expand: function(e) {
+                e.preventDefault();
+                var self = this;
+
+                if (!this.expanded) {
+                    this.model.fetch({silent: true, success: function() {
+                        self.render(true);
+                        self.$('ul').show();
+                        self.expanded = true;
+                    }});
+                } else {
+                    this.expanded = false;
+                    this.$('ul').hide();
+                }
+            },
+
+            select: function(e) {
+                e.preventDefault();
+                var checked = this.$('.checkbox').hasClass('checked');
+                // toggle class immediately, so no re-render needed
+                this.model.set('checked', !checked, {silent: true});
+                this.$('.checkbox').toggleClass('checked');
             }
-            return this;
-        },
-
-        unrender: function() {
-            var self = this;
-            this.$el.zapOut(function() {
-                self.destroy();
-            });
-        }
-    });
-});
\ No newline at end of file
+
+        });
+    });
\ No newline at end of file