From 4d471c0c24a6fe0dd09b6a4f5b97a38689794449 Mon Sep 17 00:00:00 2001
From: Daniel Pan <freeplant@gmail.com>
Date: Sat, 7 Mar 2015 16:40:30 +0800
Subject: [PATCH] [backbone] Add dirView for organizational libs

---
 media/scripts/app/main/organization.js        |  2 +-
 media/scripts/app/routers/organization.js     | 15 ++++--
 media/scripts/app/views/myhome.js             |  1 -
 media/scripts/app/views/organization-repo.js  |  2 +-
 media/scripts/app/views/organization.js       | 26 +++++++--
 ...tion-repos.html => organization-repo.html} |  4 +-
 seahub/templates/pubrepo.html                 | 53 +++++++++++++++++--
 7 files changed, 84 insertions(+), 19 deletions(-)
 rename seahub/templates/js/{organization-repos.html => organization-repo.html} (92%)

diff --git a/media/scripts/app/main/organization.js b/media/scripts/app/main/organization.js
index 0d2d6ab58e..eb3498e66a 100644
--- a/media/scripts/app/main/organization.js
+++ b/media/scripts/app/main/organization.js
@@ -1,6 +1,6 @@
 define([
     'app/routers/organization'
 ], function(Router){
-    new Router();
+    app.router = new Router();
     Backbone.history.start();
 });
diff --git a/media/scripts/app/routers/organization.js b/media/scripts/app/routers/organization.js
index c8c6b3ea23..038ab0debc 100644
--- a/media/scripts/app/routers/organization.js
+++ b/media/scripts/app/routers/organization.js
@@ -8,21 +8,26 @@ define([
 
     var OrganizationRouter = Backbone.Router.extend({
         routes: {
-           'libs/:id(/*path)': 'showDir',
+           'lib/:repo_id(/*path)': 'showDir',
             // Default
             '*actions': 'defaultAction'
         },
 
         initialize: function() {
-            this.organizationView = new OrganizationView();
+            this.orgView = new OrganizationView();
         },
 
-        showDir: function() {
-            alert('todo');
+        showDir: function(repo_id, path) {
+            if (path) {
+                path = '/' + path;
+            } else {
+                path = '/';
+            }
+            this.orgView.showDir(repo_id, path);
         },
 
         defaultAction: function(){
-            this.organizationView.showPublicRepos();
+            this.orgView.showPublicRepos();
         }
     });
 
diff --git a/media/scripts/app/views/myhome.js b/media/scripts/app/views/myhome.js
index 7e6e1bb337..0049227b2c 100644
--- a/media/scripts/app/views/myhome.js
+++ b/media/scripts/app/views/myhome.js
@@ -16,7 +16,6 @@ define([
         el: '#main',
 
         initialize: function() {
-            console.log('init MyHomePage');
             Common.prepareApiCsrf();
 
             //_.bindAll(this, 'ajaxLoadingShow', 'ajaxLoadingHide');
diff --git a/media/scripts/app/views/organization-repo.js b/media/scripts/app/views/organization-repo.js
index 0b11513bb3..49d78f040f 100644
--- a/media/scripts/app/views/organization-repo.js
+++ b/media/scripts/app/views/organization-repo.js
@@ -3,7 +3,7 @@ define([
     'underscore',
     'backbone',
     'common',
-    'text!' + app.config._tmplRoot + 'organization-repos.html'
+    'text!' + app.config._tmplRoot + 'organization-repo.html'
 ], function($, _, Backbone, Common, reposTemplate) {
     'use strict';
 
diff --git a/media/scripts/app/views/organization.js b/media/scripts/app/views/organization.js
index b99e0b2049..d2d9fb6ba7 100644
--- a/media/scripts/app/views/organization.js
+++ b/media/scripts/app/views/organization.js
@@ -4,15 +4,17 @@ define([
     'backbone',
     'common',
     'app/collections/repos',
-    'app/views/organization-repo'
-], function($, _, Backbone, Common, RepoCollection, OrganizationRepoView) {
+    'app/views/organization-repo',
+    'app/views/dir',
+], function($, _, Backbone, Common, RepoCollection, OrganizationRepoView,
+    DirView) {
     'use strict';
 
     var OrganizationView = Backbone.View.extend({
         el: '#main',
 
         initialize: function() {
-
+            this.$reposDiv = $('#organization-repos');
             this.$table = $('#organization-repos table');
             this.$tableBody = $('tbody', this.$table);
             this.$loadingTip = $('#organization-repos .loading-tip');
@@ -21,6 +23,8 @@ define([
             this.repos = new RepoCollection({type: 'org'});
             this.listenTo(this.repos, 'add', this.addOne);
             this.listenTo(this.repos, 'reset', this.reset);
+
+            this.dirView = new DirView();
         },
 
         events: {
@@ -54,7 +58,23 @@ define([
         },
 
         showPublicRepos: function() {
+            this.dirView.hide();
+            this.$reposDiv.show();
             this.repos.fetch({reset: true});
+            this.$loadingTip.show();
+        },
+
+        hideRepos: function() {
+            this.$reposDiv.hide();
+        },
+
+        showDir: function(repo_id, path) {
+            var path = path || '/';
+            this.hideRepos();
+            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);
         }
 
     });
diff --git a/seahub/templates/js/organization-repos.html b/seahub/templates/js/organization-repo.html
similarity index 92%
rename from seahub/templates/js/organization-repos.html
rename to seahub/templates/js/organization-repo.html
index caef9ab3b3..8b2ad69ecf 100644
--- a/seahub/templates/js/organization-repos.html
+++ b/seahub/templates/js/organization-repo.html
@@ -10,8 +10,7 @@
         <% } %>
     <% } %>
 </td>
-{# TODO #}
-<td><a href="#/libs/<%= id %>"><%- name %></a></td>
+<td><a href="#/lib/<%= id %>"><%- name %></a></td>
 <td><%- desc %></td>
 <td><%- mtime_relative %></td>
 <td><%- share_from %></td>
@@ -20,4 +19,3 @@
 <img src="<%= app.config.mediaUrl%>img/rm.png" alt="" class="cancel-share op-icon vh" title="{% trans "Unshare" %}" />
 <% } %>
 </td>
-
diff --git a/seahub/templates/pubrepo.html b/seahub/templates/pubrepo.html
index ae1abb90b2..f93d7d7a19 100644
--- a/seahub/templates/pubrepo.html
+++ b/seahub/templates/pubrepo.html
@@ -4,6 +4,24 @@
 
 {% block sub_title %}{% trans "Organization" %} - {% endblock %}
 
+{% block extra_style %}
+<style type="text/css">
+/* lib view */
+.repo-file-list .dirent-name {
+    width:260px;
+}
+.repo-file-list .dirent-size {
+    width:114px;
+}
+.repo-file-list .dirent-update {
+    width:123px;
+}
+.repo-file-list .dirent-op {
+    width:110px;
+}
+</style>
+{% endblock %}
+
 {% block left_panel %}
 <div class="side-tabnav">
     <h3 class="hd">{% trans "Organization" %}</h3>
@@ -16,12 +34,12 @@
 {% endblock %}
 
 {% block right_panel %}
-<div class="hd ovhd">
-    <h3 class="fleft">{% trans "Libraries" %}</h3>
-    <button id="repo-create" class="fright"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Library"%}</span></button>
-</div>
-
 <div id="organization-repos">
+    <div class="hd ovhd">
+        <h3 class="fleft">{% trans "Libraries" %}</h3>
+        <button id="repo-create" class="fright"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Library"%}</span></button>
+    </div>
+
     <table class="repo-list hide">
     <thead>
         <tr>
@@ -43,10 +61,35 @@
     </div>
 </div>
 
+<div id="dir-view" class="hide">
+  <div class="repo-file-list-topbar">
+    <p class="path"></p>
+    <div class="repo-op"></div>
+  </div>
+  <table class="repo-file-list">
+    <thead>
+    <tr>
+      <th class="select">
+        <span class="checkbox"><input type="checkbox" class="checkbox-orig" /></span>
+      </th>
+      <th class="star"></th>
+      <th class="dirent-icon"></th>
+      <th><span class="dirent-name">{% trans "Name"%} <span id="by-name" class="icon-caret-up cspt"></span></span></th>
+      <th class="dirent-size">{% trans "Size"%}</th>
+      <th class="dirent-update">{% trans "Last Update" %} <span id="by-time" class="icon-caret-down cspt"></span></th>
+      <th class="dirent-op">{% trans "Operations"%}</th>
+    </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+  <img class="loading-tip" src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" />
+</div>
 
 {% endblock %}
 
 {% block extra_script %}
+{% include "js/lib-op-popups.html" %}
 <script>
 app["pageOptions"] = {
     base_url: "{{ SITE_ROOT }}" + "home/my/",