[lib setting] added 'shared links'

media/css/seahub.css

@@ -3478,7 +3478,8 @@ textarea:-moz-placeholder {/* for FF */
 
 /* user & group folder perm */
 #share-popup .tabs-panel,
-#folder-perm-tabs .tabs-panel {
+#folder-perm-tabs .tabs-panel,
+#repo-shared-links .tabs-panel {
     width:550px;
     max-height:250px;
     overflow:auto;

seahub/templates/js/templates.html

@@ -51,7 +51,7 @@
                 <li><a class="op js-repo-transfer" href="#">{% trans "Transfer" %}</a></li>
                 <li><a class="op js-popup-permission-settings" href="#">{% trans "Permissions" %}</a></li>
                 <li><a class="op js-popup-history-settings" href="#">{% trans "History Settings" %}</a></li>
-                <li><a class="op js-popup-share-link-admin" href="#">{% trans "Sharing Links" %}</a></li>
+                <li><a class="op js-popup-share-link-admin" href="#">{% trans "Shared Links" %}</a></li>
             </ul>
         </div>
     </td>
@@ -362,7 +362,7 @@
 <script type="text/template" id="share-popup-tmpl">
     <h3 class="hd"><%= title %></h3>
     <div id="share-tabs" class="left-right-tabs ovhd">
-        <ul class="left-right-tabs-nav fleft"> {# TODO: better var name? #}
+        <ul class="left-right-tabs-nav fleft">
             <% if (!repo_encrypted) { %>
             <li class="tab"><a href="#download-link-share" class="a">{% trans "Download Link" %}</a></li>
             <% } %>
@@ -1112,8 +1112,66 @@
     <h3><%= title %></h3>
 </script>
 
-<script type="text/template" id="repo-share-link-admin-dialog-tmpl">
+<script type="text/template" id="repo-shared-links-admin-dialog-tmpl">
     <h3><%= title %></h3>
+    <div id="repo-shared-links" class="left-right-tabs js-tabs ovhd">
+        <ul class="left-right-tabs-nav fleft">
+            <li class="tab"><a href="#js-download-links" class="a">{% trans "Download Links" %}</a></li>
+            <li class="tab"><a href="#js-upload-links" class="a">{% trans "Upload Links" %}</a></li>
+        </ul>
+
+        <div class="fright">
+            <div id="js-download-links" class="tabs-panel">
+                <table>
+                    <thead>
+                    <tr>
+                        <th width="6%"><!--icon--></th>
+                        <th width="40%">{% trans "Name"%}</th>
+                        <th width="21%">{% trans "Created By"%}</th>
+                        <th width="15%">{% trans "Size"%}</th>
+                        <th width="12%">{% trans "Visits"%}</th>
+                        <th width="6%"><!--op--></th>
+                    </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+                <span class="loading-icon loading-tip"></span>
+                <p class="error hide"></p>
+            </div>
+            <div id="js-upload-links" class="tabs-panel hide">
+                <table>
+                    <thead>
+                    <tr>
+                        <th width="6%"><!--icon--></th>
+                        <th width="40%">{% trans "Name"%}</th>
+                        <th width="21%">{% trans "Created By"%}</th>
+                        <th width="15%">{% trans "Size"%}</th>
+                        <th width="12%">{% trans "Visits"%}</th>
+                        <th width="6%"><!--op--></th>
+                    </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+                <span class="loading-icon loading-tip"></span>
+                <p class="error hide"></p>
+            </div>
+        </div>
+    </div>
+</script>
+<script type="text/template" id="repo-shared-link-tmpl">
+    <% if (share_type == 'd') { %>
+    <td class="alc"><img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon"%}" /></td>
+    <td><a href="#my-libs/lib/<%= repo_id %><%= encoded_path %>"><%- name %></a></td>
+    <% } else { %>
+    <td class="alc"><img src="{{ MEDIA_URL }}img/file/file.png" alt="{% trans "File"%}" /></td>
+    <td><a href="{{SITE_ROOT}}lib/<%= repo_id %>/file<%= encoded_path %>"><%- name %></a></td>
+    <% } %>
+    <td><a href="{{SITE_ROOT}}profile/<% print(encodeURIComponent(create_by)); %>/"><%- creator_name %></a></td>
+    <td><%= formattedSize %></td>
+    <td><%= view_count %></td>
+    <td>
+        <span class="sf2-icon-delete op-icon vh rm-link" title="{% trans "Remove"%}"></span>
+    </td>
 </script>
 
 <script type="text/template" id="repo-transfer-form-tmpl">

static/scripts/app/collections/repo-shared-download-links.js

@@ -0,0 +1,23 @@
+define([
+    'underscore',
+    'backbone',
+    'common'
+], function(_, Backbone, Common) {
+    'use strict';
+
+    var Collection = Backbone.Collection.extend({
+
+        initialize: function(options) {
+            this.repo_id = options.repo_id;
+        },
+
+        url: function() {
+            return Common.getUrl({
+                name: 'repo_shared_download_links',
+                repo_id: this.repo_id
+            });
+        }
+    });
+
+    return Collection;
+});

static/scripts/app/collections/repo-shared-upload-links.js

@@ -0,0 +1,23 @@
+define([
+    'underscore',
+    'backbone',
+    'common'
+], function(_, Backbone, Common) {
+    'use strict';
+
+    var Collection = Backbone.Collection.extend({
+
+        initialize: function(options) {
+            this.repo_id = options.repo_id;
+        },
+
+        url: function() {
+            return Common.getUrl({
+                name: 'repo_shared_upload_links',
+                repo_id: this.repo_id
+            });
+        }
+    });
+
+    return Collection;
+});

static/scripts/app/views/dialogs/repo-share-link-admin.js

@@ -2,14 +2,17 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common'
-], function($, _, Backbone, Common) {
+    'common',
+    'app/collections/repo-shared-download-links',
+    'app/collections/repo-shared-upload-links',
+    'app/views/repo-shared-link'
+], function($, _, Backbone, Common, DownloadLinks, UploadLinks, LinkView) {
     'use strict';
 
     var RepoShareLinkAdminDialog = Backbone.View.extend({
         tagName: 'div',
         id: 'repo-share-link-admin-dialog',
-        template: _.template($('#repo-share-link-admin-dialog-tmpl').html()),
+        template: _.template($('#repo-shared-links-admin-dialog-tmpl').html()),
 
         initialize: function(options) {
             this.repo_name = options.repo_name;
@@ -18,12 +21,33 @@ define([
             this.render();
             this.$('.op-target').css({'max-width':280}); // for long repo name
             this.$el.modal();
-            $("#simplemodal-container").css({'height':'auto'});
+            $("#simplemodal-container").css({
+                'width':'auto',
+                'height':'auto'
+            });
+            this.$('.js-tabs').tabs();
+
+            var downloadLinks = new DownloadLinks({repo_id: this.repo_id});
+            downloadLinks.link_type = 'download';
+            this.$downloadLinksPanel = this.$('#js-download-links');
+
+            var uploadLinks = new UploadLinks({repo_id: this.repo_id});
+            uploadLinks.link_type = 'upload';
+            this.$uploadLinksPanel = this.$('#js-upload-links');
+
+            this.renderLinksPanel({
+                links: downloadLinks,
+                $panel: this.$downloadLinksPanel
+            });
+            this.renderLinksPanel({
+                links: uploadLinks,
+                $panel: this.$uploadLinksPanel
+            });
         },
 
         render: function() {
             this.$el.html(this.template({
-                title: gettext("{placeholder} Share Links")
+                title: gettext("{placeholder} Shared Links")
                     .replace('{placeholder}',
                     '<span class="op-target ellipsis ellipsis-op-target" title="'
                     + Common.HTMLescape(this.repo_name) + '">'
@@ -33,8 +57,44 @@ define([
             return this;
         },
 
-        events: {
+        renderLinksPanel: function(options) {
+            var links = options.links;
+            var $panel = options.$panel;
+            var $loadingTip = $('.loading-tip', $panel);
+            var $error = $('.error', $panel);
 
+            this.listenTo(links, 'add', this.addLink);
+            links.fetch({
+                cache: false,
+                success: function(collection, response, opts) {
+                    $loadingTip.hide();
+                },
+                error: function(collection, response, opts) {
+                    $loadingTip.hide();
+                    if (response.responseText) {
+                        if (response['status'] == 401 || response['status'] == 403) {
+                            err_msg = gettext("Permission error");
+                        } else {
+                            err_msg = $.parseJSON(response.responseText).error_msg;
+                        }
+                    } else {
+                        err_msg = gettext('Please check the network.');
+                    }
+                    $error.html(err_msg).show();
+                }
+            });
+        },
+
+        addLink: function(model, collection, options) {
+            var link_type = collection.link_type;
+            var $panel = link_type == 'download' ? this.$downloadLinksPanel : this.$uploadLinksPanel;
+            var view = new LinkView({
+                model: model,
+                repo_id: this.repo_id,
+                link_type: link_type,
+                $error: $('.error', $panel)
+            });
+            $('tbody', $panel).append(view.render().el);
         }
 
     });

static/scripts/app/views/repo-shared-link.js

@@ -0,0 +1,94 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common'
+], function($, _, Backbone, Common) {
+    'use strict';
+
+    var View = Backbone.View.extend({
+        tagName: 'tr',
+
+        template: _.template($('#repo-shared-link-tmpl').html()),
+
+        events: {
+            'mouseenter': 'highlight',
+            'mouseleave': 'rmHighlight',
+            'click .rm-link': 'removeLink'
+        },
+
+        initialize: function(options) {
+            this.data = {};
+            $.extend(this.data, options);
+        },
+
+        render: function() {
+            var obj = {}; 
+
+            var path = this.model.get('path'),
+                _path = path,
+                formattedSize = ''; // no 'size' for dir item
+
+            $.extend(obj, this.model.attributes);
+
+            // no 'share_type' in upload link model
+            if (this.data.link_type == 'upload') {
+                $.extend(obj, {
+                    'share_type': 'd' // 'd': dir
+                });
+            }
+            if (obj.share_type == 'd') {
+                // path is ended with '/'
+                _path = path.substring(0, path.length - 1);
+            } else {
+                formattedSize = Common.fileSizeFormat(this.model.get('size'), 1);
+            }
+            $.extend(obj, {
+                'repo_id': this.data.repo_id,
+                'formattedSize': formattedSize,
+                'encoded_path': Common.encodePath(_path)
+            });
+
+            this.$el.html(this.template(obj));
+            return this;
+        },
+
+        highlight: function() {
+            this.$el.addClass('hl').find('.op-icon').removeClass('vh');
+        },
+
+        rmHighlight: function() {
+            this.$el.removeClass('hl').find('.op-icon').addClass('vh');
+        },
+
+        removeLink: function() {
+            var url = Common.getUrl({
+                name: this.data.link_type == 'download' ? 'repo_shared_download_link' : 'repo_shared_upload_link',
+                repo_id: this.data.repo_id,
+                token: this.model.get('token')
+            });
+            var _this = this;
+            $.ajax({
+                url: url,
+                type: 'delete',
+                dataType: 'json',
+                beforeSend: Common.prepareCSRFToken,
+                success: function() {
+                    _this.remove();
+                },
+                error: function(xhr) {
+                    var err_msg;
+                    if (xhr.responseText) {
+                        err_msg = $.parseJSON(response.responseText).error_msg;
+                    } else {
+                        err_msg = gettext('Please check the network.');
+                    }
+                    _this.data.$error.html(err_msg).show();
+                }
+            });
+        }
+
+    });
+
+    return View;
+});

static/scripts/common.js

@@ -101,6 +101,10 @@ define([
                 case 'repo': return siteRoot + 'api2/repos/' + options.repo_id + '/';
                 case 'repo_owner': return siteRoot + 'api2/repos/' + options.repo_id + '/owner/';
                 case 'repo_history_limit': return siteRoot + 'api2/repos/' + options.repo_id + '/history-limit/';
+                case 'repo_shared_download_links': return siteRoot + 'api2/repos/' + options.repo_id + '/download-shared-links/';
+                case 'repo_shared_download_link': return siteRoot + 'api2/repos/' + options.repo_id + '/download-shared-links/' + options.token + '/';
+                case 'repo_shared_upload_links': return siteRoot + 'api2/repos/' + options.repo_id + '/upload-shared-links/';
+                case 'repo_shared_upload_link': return siteRoot + 'api2/repos/' + options.repo_id + '/upload-shared-links/' + options.token + '/';
 
                 // Permission
                 case 'set_user_folder_perm': return siteRoot + 'ajax/repo/' + options.repo_id + '/set-user-folder-perm/';