[backbone] Add shared repo view

media/scripts/app/collections/repos.js

@@ -8,15 +8,19 @@ define([
     var RepoCollection = Backbone.Collection.extend({
         model: Repo,
         url: app.pageOptions.reposUrl,
+        type: 'mine',
 
-        initialize: function() {
+        initialize: function(options) {
             //console.log('init RepoCollection');
+            if (options) {
+                this.type = options.type ? options.type : 'mine';
+            }
         },
 
         fetch: function(options) {
             // override default fetch url
             options = options ? _.clone(options) : {};
-            options.url = this.url + '?type=mine'
+            options.url = this.url + '?type=' + this.type;
 
             //call Backbone's fetch
             return Backbone.Collection.prototype.fetch.call(this, options);

media/scripts/app/routers/myhome.js

@@ -10,6 +10,8 @@ define([
     var MyHomeRouter = Backbone.Router.extend({
         routes: {
             'lib/:repo_id(/*path)': 'showDir',
+            'my-libs': 'showMyRepos',
+            'shared-libs': 'showSharedRepos',
 
             // Default
             '*actions': 'defaultAction'
@@ -29,11 +31,21 @@ define([
             this.myHomeView.showDir(repo_id, path);
         },
 
+        showMyRepos: function() {
+            console.log("show My Repos");
+            this.myHomeView.showMyRepos();
+        },
+
+        showSharedRepos: function() {
+            console.log("show shared repos");
+            this.myHomeView.showSharedRepos();
+        },
+
         defaultAction: function(actions) {
             // We have no matching route, lets just log what the URL was
             console.log('No route:', actions);
 
-            this.myHomeView.showRepoList();
+            this.myHomeView.showMyRepos();
         }
     });
 

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

@@ -69,6 +69,7 @@ define([
 
         hide: function() {
             this.$el.hide();
+            this.$table.hide();
         },
 
         createRepo: function() {

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

@@ -0,0 +1,74 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'app/collections/repos',
+    'app/views/shared-repo',
+], function($, _, Backbone, Common, RepoCollection, SharedRepoView) {
+    'use strict';
+
+    var SharedReposView = Backbone.View.extend({
+        el: $('#repo-tabs'),
+
+        initialize: function(options) {
+            this.$tabs = $('#repo-tabs');
+            this.$table = this.$('#repos-shared-to-me 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({type: 'shared'});
+            this.listenTo(this.repos, 'add', this.addOne);
+            this.listenTo(this.repos, 'reset', this.reset);
+        },
+
+        addOne: function(repo, collection, options) {
+            var view = new SharedRepoView({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() {
+            //
+        },
+
+        showSharedRepos: function() {
+            this.repos.fetch({reset: true});
+            this.$tabs.show();
+            //this.$table.parent().show();
+            this.$table.hide();
+            this.$loadingTip.show();
+        },
+
+        show: function() {
+            this.showSharedRepos();
+        },
+
+        hide: function() {
+            this.$el.hide();
+            this.$table.hide();
+        },
+
+
+    });
+
+    return SharedReposView;
+});

media/scripts/app/views/myhome.js

@@ -5,10 +5,11 @@ define([
     'common',
     'app/collections/groups',
     'app/views/myhome-repos',
+    'app/views/myhome-shared-repos',
     'app/views/dir',
     'app/views/group-nav',
 ], function($, _, Backbone, Common, GroupCollection,
-        ReposView, DirView, GroupNavView) {
+        ReposView, SharedReposView, DirView, GroupNavView) {
     'use strict';
 
     var MyHomeView = Backbone.View.extend({
@@ -24,6 +25,7 @@ define([
             this.$cont = this.$('#right-panel');
 
             this.reposView = new ReposView();
+            this.sharedReposView = new SharedReposView();
             this.dirView = new DirView();
             this.groupView = new GroupNavView();
         },
@@ -45,12 +47,19 @@ define([
             this.$cont.find('.loading').show();
         },
 
-        showRepoList: function() {
+        showMyRepos: function() {
             console.log('show repo list');
+            this.sharedReposView.hide();
             this.reposView.show();
             this.dirView.hide();
         },
 
+        showSharedRepos: function() {
+            this.dirView.hide();
+            this.reposView.hide();
+            this.sharedReposView.show();
+        },
+
         showDir: function(repo_id, path) {
             console.log('show dir ' + repo_id + ' ' + path);
 

media/scripts/app/views/repo.js

@@ -3,7 +3,7 @@ define([
     'underscore',
     'backbone',
     'common',
-    'text!' + app.config._tmplRoot + 'repos.html'
+    'text!' + app.config._tmplRoot + 'repo.html'
 ], function($, _, Backbone, Common, reposTemplate) {
     'use strict';
 

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

@@ -0,0 +1,45 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'text!' + app.config._tmplRoot + 'shared-repo.html'
+], function($, _, Backbone, Common, reposTemplate) {
+    'use strict';
+
+    var SharedRepoView = Backbone.View.extend({
+        tagName: 'tr',
+
+        template: _.template(reposTemplate),
+
+        events: {
+            'mouseenter': 'showAction',
+            'mouseleave': 'hideAction',
+            'click .repo-delete-btn': 'delete',
+            'click .repo-share-btn': 'share'
+        },
+
+        initialize: function() {
+            this.listenTo(this.model, 'destroy', this.remove);
+        },
+
+        render: function() {
+            this.$el.html(this.template(this.model.toJSON()));
+            return this;
+        },
+
+        showAction: function() {
+            this.$el.addClass('hl');
+            this.$el.find('.op-icon').removeClass('vh');
+        },
+
+        hideAction: function() {
+            this.$el.removeClass('hl');
+            this.$el.find('.op-icon').addClass('vh');
+        },
+
+
+    });
+
+    return SharedRepoView;
+});

seahub/api2/views.py

@@ -569,6 +569,7 @@ class Repos(APIView):
                     "name":r.repo_name,
                     "desc":r.repo_desc,
                     "mtime":r.latest_modify,
+                    "mtime_relative": translate_seahub_time(r.latest_modify),
                     "root":r.root,
                     "size":r.size,
                     "encrypted":r.encrypted,

seahub/templates/js/shared-repo.html

@@ -0,0 +1,18 @@
+{% load i18n %}
+<td>
+  <% if (encrypted) { %>
+  <img src="{{ MEDIA_URL }}img/sync-folder-encrypt-20.png" title="{% trans 'Read-Write' %}" alt="directory icon" />
+  <% } else { %>
+  <img src="{{ MEDIA_URL }}img/sync-folder-20.png" title="Read-Write" alt="directory icon" />
+  <% } %>
+</td>
+<td><a href="#/lib/<%= id %>"><%- name %></a></td>
+<td><%- desc %></td>
+<td><%- mtime_relative %></td>
+<td></td>
+<td>
+  <div>
+    <img src="{{ MEDIA_URL }}img/share_20.png" alt="" class="repo-share-btn op-icon vh" title="Share" />
+    <img src="{{ MEDIA_URL }}img/rm.png" class="repo-delete-btn op-icon vh" title="Delete" />
+  </div>
+</td>

seahub/templates/myhome.html

@@ -75,13 +75,13 @@
     <div class="hd">
         <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>
+            <li class="tab"><a href="#my-libs" class="a" id="mylib-tab">{% trans "Mine" %}</a></li>
             {% if sub_lib_enabled %}
-            <li class="tab"><a href="#my-sub-repos" class="a" id="sublib-tab">{% trans "Sub-libraries" %}</a></li>
+            <li class="tab"><a href="#my-sub-libs" class="a" id="sublib-tab">{% trans "Sub-libraries" %}</a></li>
             {% endif %}
             {% endif %}
-            <li class="tab"><a href="#repos-shared-to-me" class="a" id="shared-lib-tab">{% trans "Shared" %}</a></li>
-            <li class="tab"><a href="#group-repos" class="a" id="grp-lib-tab">{% trans "Group" %}</a></li>
+            <li class="tab"><a href="#shared-libs" class="a" id="shared-lib-tab">{% trans "Shared" %}</a></li>
+            <li class="tab"><a href="#group-libs" class="a" id="grp-lib-tab">{% trans "Group" %}</a></li>
         </ul>
         <div class="fright">
             <button id="repo-create" class=""><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Library" %}</span></button>
@@ -113,6 +113,23 @@
             <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>
+
+    <div id="repos-shared-to-me" class="hide">
+        <table class="hide">
+            <thead>
+                <tr>
+                    <th width="4%"><!--icon--></th>
+                    <th width="20%">{% trans "Name" %} <span id="be-shared-repo-list-name-down" class="icon-caret-up cspt"></span> <span id="be-shared-repo-list-name-up" class="icon-caret-down cspt hide"></span></th>
+                    <th width="33%">{% trans "Description" %}</th>
+                    <th width="15%">{% trans "Last Update" %} <span id="be-shared-repo-list-time-up" class="icon-caret-up cspt hide"></span> <span id="be-shared-repo-list-time-down" class="icon-caret-down cspt"></span></th>
+                    <th width="15%">{% trans "Shared By" %}</th>
+                    <th width="13%">{% trans "Operations" %}</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
+
     <img class="loading-tip" src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" />
 </div>