diff --git a/media/css/seahub.css b/media/css/seahub.css index 8f0d444ad9..bb57ab4806 100644 --- a/media/css/seahub.css +++ b/media/css/seahub.css @@ -3485,13 +3485,17 @@ textarea:-moz-placeholder {/* for FF */ max-height:250px; overflow:auto; } -#repo-folder-perm .tabs-panel { - width:600px; +#repo-folder-perm .tabs-panel {/* for the case that the scrollbar appears */ + width:630px; + padding-right:0; } .repo-folder-perm-folder-path { padding:3px 5px; width:155px; } +.repo-folder-perm-content { + width:610px; /* for the table in it. */ +} #share-popup .share-permission-select, #folder-perm-tabs .perm-select { height:30px; diff --git a/seahub/api2/views.py b/seahub/api2/views.py index 1bfb2ed116..c7854914f7 100644 --- a/seahub/api2/views.py +++ b/seahub/api2/views.py @@ -4421,7 +4421,7 @@ class RepoUserFolderPerm(APIView): result['user_email'] = perm.user result['user_name'] = email2nickname(perm.user) result['folder_path'] = perm.path - result['folder_name'] = os.path.basename(perm.path.rstrip('/')) + result['folder_name'] = perm.path if perm.path == '/' else os.path.basename(perm.path.rstrip('/')) result['permission'] = perm.permission results.append(result) @@ -4519,7 +4519,7 @@ def get_repo_group_folder_perm_result(repo_id, path, group_id): result['group_id'] = group_id result['group_name'] = group.group_name result['folder_path'] = path - result['folder_name'] = os.path.basename(path.rstrip('/')) + result['folder_name'] = path if path == '/' else os.path.basename(path.rstrip('/')) result['permission'] = permission return result @@ -4545,7 +4545,7 @@ class RepoGroupFolderPerm(APIView): result['group_id'] = perm.group_id result['group_name'] = group.group_name result['folder_path'] = perm.path - result['folder_name'] = os.path.basename(perm.path.rstrip('/')) + result['folder_name'] = perm.path if perm.path == '/' else os.path.basename(perm.path.rstrip('/')) result['permission'] = perm.permission results.append(result) diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html index 8b080352b2..8363b10d3f 100644 --- a/seahub/templates/js/templates.html +++ b/seahub/templates/js/templates.html @@ -1193,7 +1193,7 @@
-
+
@@ -1217,7 +1217,7 @@ @@ -1225,16 +1225,17 @@

- +

{% trans "Select a folder" %}

-
- +
+

- - + +
+
- +
@@ -1251,7 +1252,7 @@
- + - +

+
+
+

{% trans "Select a folder" %}

+
+ +

+ + +
@@ -1301,7 +1311,7 @@ <% } %> - + diff --git a/static/scripts/app/views/dialogs/repo-folder-perm-admin.js b/static/scripts/app/views/dialogs/repo-folder-perm-admin.js index 7262f00a0a..003a6bea9b 100644 --- a/static/scripts/app/views/dialogs/repo-folder-perm-admin.js +++ b/static/scripts/app/views/dialogs/repo-folder-perm-admin.js @@ -3,20 +3,17 @@ define([ 'underscore', 'backbone', 'common', + 'file-tree', 'app/collections/repo-user-folder-perm', 'app/collections/repo-group-folder-perm', 'app/views/repo-folder-perm' -], function($, _, Backbone, Common, UserFolderPerm, GroupFolderPerm, ItemView) { +], function($, _, Backbone, Common, FileTree, UserFolderPerm, GroupFolderPerm, ItemView) { 'use strict'; var View = Backbone.View.extend({ template: _.template($('#repo-folder-perm-admin-dialog-tmpl').html()), - events: { - 'click .add-folder': 'addFolder' - }, - initialize: function(options) { this.repo_name = options.repo_name; this.repo_id = options.repo_id; @@ -24,7 +21,11 @@ define([ this.render(); this.$('.op-target').css({'max-width':280}); // for long repo name this.$el.modal({ - focus: false + focus: false, + onClose: function() { + $(document).off('click', hideItemEdit); + $.modal.close(); + } }); $("#simplemodal-container").css({ 'width':'auto', @@ -32,22 +33,38 @@ define([ }); this.$('.js-tabs').tabs(); - var userPerm = new UserFolderPerm({repo_id: this.repo_id}); - userPerm.perm_type = 'user'; - this.$userPermPanel = this.$('#js-repo-user-folder-perm'); + this.userPerm = new UserFolderPerm({repo_id: this.repo_id}); + this.userPerm.perm_type = 'user'; + this.$userPermPanel = this.$('#js-repo-user-folder-perm .js-folder-perm-content'); - var groupPerm = new GroupFolderPerm({repo_id: this.repo_id}); - groupPerm.perm_type = 'group'; - this.$groupPermPanel = this.$('#js-repo-group-folder-perm'); + this.groupPerm = new GroupFolderPerm({repo_id: this.repo_id}); + this.groupPerm.perm_type = 'group'; + this.$groupPermPanel = this.$('#js-repo-group-folder-perm .js-folder-perm-content'); this.renderPanel({ - collection: userPerm, + collection: this.userPerm, $panel: this.$userPermPanel }); this.renderPanel({ - collection: groupPerm, + collection: this.groupPerm, $panel: this.$groupPermPanel }); + + // click to hide 'perm edit' + var _this = this; + var hideItemEdit = function(e) { + var target = e.target || event.srcElement; + var $el = _this.$('.perm-toggle-select:visible'); + var $td = $el.parent(); + if ($el.length && + !$el.is(target) && + !$el.find('*').is(target) && + !$td.find('.edit-icon').is(target)) { + $el.hide(); + $td.find('.cur-perm, .edit-icon').show(); + } + }; + $(document).click(hideItemEdit); }, render: function() { @@ -69,9 +86,13 @@ define([ var $error = $('.error', $panel); if (collection.perm_type == 'user') { - $('[name="emails"]', $panel).select2($.extend({ - width: '190px' - },Common.contactInputOptionsForSelect2())); + $('[name="emails"]', $panel).select2($.extend( + Common.contactInputOptionsForSelect2(), { + width: '190px', + placeholder: gettext("Search user or enter email"), // to override 'placeholder' returned by `Common.conta...` + maximumSelectionSize: 1, + formatSelectionTooBig: gettext("You can only select 1 item") + })); } else { var groups = app.pageOptions.groups || []; var g_opts = ''; @@ -79,8 +100,10 @@ define([ g_opts += ''; } $('[name="groups"]', $panel).html(g_opts).select2({ - placeholder: gettext("Select groups"), + placeholder: gettext("Select a group"), width: '190px', + maximumSelectionSize: 1, + formatSelectionTooBig: gettext("You can only select 1 item"), escapeMarkup: function(m) { return m; } }); } @@ -117,13 +140,155 @@ define([ perm_type: perm_type, $error: $('.error', $panel) }); - $('tbody', $panel).append(view.render().el); + if (options.prepend) { + $('[name="folder_path"]', $panel).closest('tr').after(view.render().el); + } else { + $('tbody', $panel).append(view.render().el); + } + }, + + events: { + 'click .add-folder': 'showFolderSelectForm', + 'click .js-folder-select-submit': 'addFolder', + 'click .js-folder-select-cancel': 'cancelFolderSelect', + + 'click .js-user-perm-add-submit': 'addUserPerm', + 'click .js-group-perm-add-submit': 'addGroupPerm' + }, + + showFolderSelectForm: function(e) { + var $icon = $(e.currentTarget); + var $permContent = $icon.closest('.js-folder-perm-content').slideUp(); + + var $form = $('.js-folder-select-form', $permContent.parent()).slideDown(); + var $jstreeContainer = $('.js-jtree-container', $form); + var repo_data = FileTree.formatRepoData([{ + 'id': this.repo_id, + 'name': this.repo_name + }]); + FileTree.renderDirTree($jstreeContainer, $form, repo_data); }, addFolder: function(e) { - var $icon = $(e.currentTarget); - var $permContent = $icon.closest('.js-folder-perm-content').slideUp(); - var $folderSelect = $('.js-folder-select', $permContent.parent()).slideDown(); + var $submitBtn = $(e.currentTarget); + + var $form = $submitBtn.closest('form'); + var path = $('[name=dst_path]', $form).val(); + if (!path) { + $('.error', $form).html(gettext("Please click and choose a directory.")).removeClass('hide'); + return false; + } + $form.slideUp(); + // destroy the jstree instance. + // attention: because of `destroy()`, the $jstreeContainer's class names should not include string 'jstree', e.g. '.js-jstree-container' is not ok. + $.jstree._reference($('.js-jtree-container', $form)).destroy(); + + var $folderPerm = $('.js-folder-perm-content', $form.parent()).slideDown(); + $('[name=folder_path]', $folderPerm).val(path); + + return false; + }, + + cancelFolderSelect: function(e) { + var $cancelBtn = $(e.currentTarget); + var $form = $cancelBtn.closest('form').slideUp(); + // destroy the jstree instance. + $.jstree._reference($('.js-jtree-container', $form)).destroy(); + $('.js-folder-perm-content', $form.parent()).slideDown(); + }, + + addUserPerm: function(e) { + var $panel = this.$userPermPanel; + var $error = $('.error', $panel); + var $email = $('[name="emails"]', $panel); + var $path = $('[name="folder_path"]', $panel); + + var email = $email.val(); + var path = $path.val(); + + if (!email || !path) { + return false; + } + + var $perm = $('[name="permission"]', $panel); + var perm = $perm.val(); + var $submit = $(e.currentTarget); + Common.disableButton($submit); + + this.userPerm.create({ + 'user_email': email, + 'folder_path': path, + 'permission': perm + }, { + wait: true, + prepend: true, + success: function() { + $email.select2('val', ''); + $path.val(''); + $('[value="rw"]', $perm).attr('selected', 'selected'); + $('[value="r"]', $perm).removeAttr('selected'); + $error.addClass('hide'); + }, + error: function(collection, response, options) { + var err_msg; + if (response.responseText) { + err_msg = response.responseJSON.error_msg; + } else { + err_msg = gettext('Please check the network.'); + } + $error.html(err_msg).removeClass('hide'); + }, + complete: function() { + Common.enableButton($submit); + } + }); + }, + + addGroupPerm: function(e) { + var $panel = this.$groupPermPanel; + var $error = $('.error', $panel); + var $group = $('[name="groups"]', $panel); + var $path = $('[name="folder_path"]', $panel); + + var group_val = $group.val(); // null or [group_id] + var path = $path.val(); + + if (!group_val || !path) { + return false; + } + + var $perm = $('[name="permission"]', $panel); + var perm = $perm.val(); + var $submit = $(e.currentTarget); + Common.disableButton($submit); + + this.groupPerm.create({ + 'group_id': group_val[0], + 'folder_path': path, + 'permission': perm + }, { + wait: true, + prepend: true, + success: function() { + $group.select2('val', ''); + $path.val(''); + $('[value="rw"]', $perm).attr('selected', 'selected'); + $('[value="r"]', $perm).removeAttr('selected'); + $error.addClass('hide'); + }, + error: function(collection, response, options) { + var err_msg; + if (response.responseText) { + err_msg = response.responseJSON.error_msg; + } else { + err_msg = gettext('Please check the network.'); + } + $error.html(err_msg).removeClass('hide'); + }, + complete: function() { + Common.enableButton($submit); + } + }); } }); diff --git a/static/scripts/app/views/repo-folder-perm.js b/static/scripts/app/views/repo-folder-perm.js index bd3a3fb1a2..a963076353 100644 --- a/static/scripts/app/views/repo-folder-perm.js +++ b/static/scripts/app/views/repo-folder-perm.js @@ -16,7 +16,7 @@ define([ 'mouseleave': 'rmHighlight', 'click .edit-icon': 'showEdit', 'change .perm-toggle-select': 'edit', - 'click .remove': 'remove' + 'click .rm': 'rm' }, initialize: function(options) { @@ -96,7 +96,7 @@ define([ }); }, - remove: function() { + rm: function() { var url = Common.getUrl({ name: this.data.perm_type == 'user' ? 'repo_user_folder_perm' : 'repo_group_folder_perm', repo_id: this.data.repo_id