[backbone] Refactor myhome

media/scripts/app/collections/repos.js

@@ -10,7 +10,7 @@ define([
         url: app.pageOptions.reposUrl,
 
         initialize: function() {
-            console.log('init RepoCollection');
+            //console.log('init RepoCollection');
         },
 
         fetch: function(options) {
@@ -24,5 +24,5 @@ define([
 
     });
 
-    return new RepoCollection();
+    return RepoCollection;
 });

media/scripts/app/views/add-repo.js

@@ -15,10 +15,9 @@ define([
             "click #encrypt-switch": "togglePasswdInput"
         },
 
-        initialize: function() {
+        initialize: function(repos) {
-            this.listenTo(Repos, 'invalid', this.displayValidationErrors);
+            this.repos = repos;
-
+            this.listenTo(repos, 'invalid', this.displayValidationErrors);
-            this.render();
         },
 
         render: function() {
@@ -46,12 +45,13 @@ define([
         addRepo: function(e) {
             e.preventDefault();
 
-            Repos.create(this.newAttributes(), {
+            this.repos.create(this.newAttributes(), {
                 wait: true,
                 validate: true,
                 prepend: true,  // show newly created repo at first line
                 success: function() {
-                    Common.feedback('Success', 'success', Common.SUCCESS_TIMEOUT);
+                    // No need to show feedback
+                    // Common.feedback('Success', 'success', Common.SUCCESS_TIMEOUT);
                 },
                 error: function(xhr, textStatus, errorThrown) {
                     // TODO: handle error gracefully

media/scripts/app/views/dir.js

@@ -5,7 +5,7 @@ define([
     'common',
     'file-tree',
     'app/collections/dirents',
-    'app/views/dirents',
+    'app/views/dirent',
     'text!' + app.config._tmplRoot + 'dir-op-bar.html',
     'text!' + app.config._tmplRoot + 'path-bar.html',
     ], function($, _, Backbone, Common, FileTree, DirentCollection, DirentView,

media/scripts/app/views/myhome-repos.js

@@ -0,0 +1,83 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'app/collections/repos',
+    'app/views/repo',
+    'app/views/add-repo',
+], function($, _, Backbone, Common, RepoCollection, RepoView, AddRepoView) {
+    'use strict';
+
+    var ReposView = Backbone.View.extend({
+        el: $('#repo-tabs'),
+
+        events: {
+            'click #repo-create': 'createRepo',
+        },
+
+        initialize: function(options) {
+            this.$tabs = $('#repo-tabs');
+            this.$table = this.$('#my-own-repos table');
+            this.$tableHead = $('thead', this.$table);
+            this.$tableBody = $('tbody', this.$table);
+            this.$loadingTip = $('.loading-tip', this.$tabs);
+            this.$emptyTip = $('.empty-tips', this.tabs);
+
+            this.repos = new RepoCollection();
+            this.listenTo(this.repos, 'add', this.addOne);
+            this.listenTo(this.repos, 'reset', this.reset);
+        },
+
+        addOne: function(repo, collection, options) {
+            var view = new RepoView({model: repo});
+            if (options.prepend) {
+                this.$tableBody.prepend(view.render().el);
+            } else {
+                this.$tableBody.append(view.render().el);
+            }
+        },
+
+        reset: function() {
+            this.$tableBody.empty();
+            this.repos.each(this.addOne, this);
+            if (this.repos.length) {
+                this.$emptyTip.hide();
+                this.$table.show();
+            } else {
+                this.$emptyTip.show();
+                this.$table.hide();
+            }
+            this.$loadingTip.hide();
+        },
+
+        renderPath: function() {
+            //
+        },
+
+        showMyRepos: function() {
+            this.repos.fetch({reset: true});
+            this.$tabs.show();
+            //this.$table.parent().show();
+            this.$table.hide();
+            this.$loadingTip.show();
+        },
+
+        show: function() {
+            this.showMyRepos();
+        },
+
+        hide: function() {
+            this.$el.hide();
+        },
+
+        createRepo: function() {
+            var dialog = new AddRepoView(this.repos);
+            dialog.render();
+        },
+
+
+    });
+
+    return ReposView;
+});

media/scripts/app/views/myhome.js

@@ -3,52 +3,31 @@ define([
     'underscore',
     'backbone',
     'common',
-    'app/collections/repos',
-    'app/collections/dirents',
     'app/collections/groups',
-    'app/views/repos',
+    'app/views/myhome-repos',
-    'app/views/dirents',
     'app/views/dir',
     'app/views/group-nav',
-    'app/views/add-repo'
+], function($, _, Backbone, Common, GroupCollection,
-], function($, _, Backbone, Common, Repos, DirentCollection, GroupCollection,
+        ReposView, DirView, GroupNavView) {
-        RepoView, DirentView, DirView, GroupNavView, AddRepoView) {
     'use strict';
 
     var MyHomeView = Backbone.View.extend({
         el: '#main',
 
-        events: {
-            'click #repo-create': 'createRepo',
-        },
-
         initialize: function() {
             console.log('init MyHomePage');
             Common.prepareApiCsrf();
 
-            _.bindAll(this, 'ajaxLoadingShow', 'ajaxLoadingHide');
+            //_.bindAll(this, 'ajaxLoadingShow', 'ajaxLoadingHide');
-            this.$el.ajaxStart(this.ajaxLoadingShow).ajaxStop(this.ajaxLoadingHide);
+            //this.$el.ajaxStart(this.ajaxLoadingShow).ajaxStop(this.ajaxLoadingHide);
 
-            // this.on('showDirents', this.showDirents, this);
-            this.initializeRepos();
-
-            this.$repoTabs = this.$('#repo-tabs');
             this.$cont = this.$('#right-panel');
-            this.$table = this.$('#my-own-repos table');
-            this.$tableHead = $('thead', this.$table);
-            this.$tableBody = $('tbody', this.$table);
 
+            this.reposView = new ReposView();
             this.dirView = new DirView();
-
             this.groupView = new GroupNavView();
         },
 
-        initializeRepos: function() {
-            this.listenTo(Repos, 'add', this.addOne);
-            this.listenTo(Repos, 'reset', this.addAll);
-            // this.listenTo(Repos, 'sync', this.render);
-            this.listenTo(Repos, 'all', this.render);
-        },
 
         ajaxLoadingShow: function() {
             Common.feedback('Loading...', 'info', Common.INFO_TIMEOUT);
@@ -58,29 +37,6 @@ define([
             $('.messages .info').hide();
         },
 
-        addOne: function(repo, collection, options) {
-            console.log('add repo: ' + repo.get('name'));
-            var view = new RepoView({model: repo});
-            if (options.prepend) {
-                this.$tableBody.prepend(view.render().el);
-            } else {
-                this.$tableBody.append(view.render().el);
-            }
-        },
-
-        addAll: function() {
-            this.$tableBody.empty();
-            Repos.each(this.addOne, this);
-        },
-
-        hideTable: function() {
-            this.$table.hide();
-        },
-
-        showTable: function() {
-            this.$table.show();
-        },
-
         hideLoading: function() {
             this.$cont.find('.loading').hide();
         },
@@ -89,51 +45,23 @@ define([
             this.$cont.find('.loading').show();
         },
 
-        hideEmptyTips: function() {
-            this.$cont.find('.empty-tips').hide();
-        },
-
-        showEmptyTips: function() {
-            this.$cont.find('.empty-tips').show();
-        },
-        
-        render: function(eventName) {
-            console.log('render repos with event: ' + eventName);
-
-            this.$repoTabs.show();
-            this.$table.parent().show();
-            this.hideLoading();
-            
-            if (Repos.length) {
-                this.hideEmptyTips();
-                this.showTable();
-            } else {
-                this.showEmptyTips();
-                this.hideTable();
-            }
-        },
-
         showRepoList: function() {
             console.log('show repo list');
-            Repos.fetch({reset: true});
+            this.reposView.show();
-
             this.dirView.hide();
         },
 
         showDir: function(repo_id, path) {
             console.log('show dir ' + repo_id + ' ' + path);
-            this.$repoTabs.hide();
 
             var path = path || '/';
+            this.reposView.hide();
             this.dirView.showDir(repo_id, path);
             // this.dirent_list = new app.DirentListView({id: id, path: path});
             // $('#my-own-repos table').children().remove();
             // $('#my-own-repos table').append(this.dirent_list.render().el);
         },
 
-        createRepo: function() {
-            new AddRepoView();
-        }
 
     });
 

seahub/templates/js/path-bar.html

@@ -1,5 +1,5 @@
 {% load i18n %}
-<a href="<%= app.pageOptions.base_url %>" class="path-link normal">Top</a> /
+<a href="<%= app.pageOptions.base_url %>#" class="path-link normal">Top</a> /
 <% if (path == '/') { %>
 <%= repo_name %> /
 <% } else { %>

seahub/templates/myhome.html

@@ -63,7 +63,7 @@
         <ul class="tab-tabs-nav fleft">
             {% if user.permissions.can_add_repo %}
             <li class="tab"><a href="#my-own-repos" class="a" id="mylib-tab">{% trans "Mine" %}</a></li>
-            {% if ENABLE_SUB_LIBRARY and sub_lib_enabled %}
+            {% if sub_lib_enabled %}
             <li class="tab"><a href="#my-sub-repos" class="a" id="sublib-tab">{% trans "Sub-libraries" %}</a></li>
             {% endif %}
             {% endif %}
@@ -100,6 +100,7 @@
             <p>{% trans "You can create a library to organize your files. For example, you can create one for each of your projects. Each library can be synchronized and shared separately." %}</p>
         </div>
     </div>
+    <img class="loading-tip" src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" />
 </div>
 
 <table id="new-repo" class="hide">